|
|
|
@ -1,8 +1,10 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div id="home">
|
|
|
|
<div id="home">
|
|
|
|
<van-nav-bar title="我的名片" />
|
|
|
|
<van-nav-bar title="我的名片" left-text="Slash會員中心" @click-left="goSlash" v-if="nolog == 1"/>
|
|
|
|
|
|
|
|
<van-nav-bar title="我的名片" left-text="Slash會員中心" @click-left="goSlash" right-text="人脈紀錄" @click-right="showUserConn = true" v-else/>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="tab-section" v-cloak>
|
|
|
|
<div class="tab-section" v-cloak>
|
|
|
|
<van-tabs :lazy-render="true" v-model:active="activeName" v-show="user.nc_type > 1 && cid !== '1'">
|
|
|
|
<van-tabs :lazy-render="true" v-model:active="activeName" v-show="user.level > 0">
|
|
|
|
<van-tab title="我的名片" name="0">
|
|
|
|
<van-tab title="我的名片" name="0">
|
|
|
|
</van-tab>
|
|
|
|
</van-tab>
|
|
|
|
<van-tab :title="card_title" name="1" v-if="showCusCard">
|
|
|
|
<van-tab :title="card_title" name="1" v-if="showCusCard">
|
|
|
|
@ -18,64 +20,83 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="recommend" v-if="activeName == '0'">
|
|
|
|
<div class="recommend" v-if="activeName == '0'">
|
|
|
|
<img class="avatar" :src="user.avatar" style="display:block; margin:auto;">
|
|
|
|
<div>
|
|
|
|
<br />
|
|
|
|
<img class="avatar" :src="user.avatar" style="display:block; margin:auto;">
|
|
|
|
<p style="text-align: center; font-size: 35px; "><strong>{{user.name}}</strong><br /></p>
|
|
|
|
<br />
|
|
|
|
<p style="text-align: center; font-size: 20px;">{{user.company}}<br />
|
|
|
|
<p style="text-align: center; font-size: 35px; "><strong>{{ user.name }}</strong><br /></p>
|
|
|
|
{{user.title}}</p>
|
|
|
|
<p style="text-align: center; font-size: 20px;">{{ user.company }}<br />
|
|
|
|
<hr width=85%>
|
|
|
|
{{ user.title }}</p>
|
|
|
|
<p style="text-align: center; font-size: 15px;" v-html="user.mark">
|
|
|
|
<hr width=85%>
|
|
|
|
</p>
|
|
|
|
<p style="text-align: center; font-size: 15px;" v-html="user.mark">
|
|
|
|
</div>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-area" v-if="user.level > 0">
|
|
|
|
|
|
|
|
<dl class="dl02">
|
|
|
|
|
|
|
|
<a :href="`${imgUrl}/${user.user_id}/${user.user_id}.vcf`">
|
|
|
|
|
|
|
|
<div class="menu main">加入通訊錄</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02">
|
|
|
|
|
|
|
|
<a :href="`tel:${user.phone}`">
|
|
|
|
|
|
|
|
<div class="menu tel">
|
|
|
|
|
|
|
|
{{ user.phone }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.facebook" target="_blank">
|
|
|
|
|
|
|
|
<a :href="user.facebook">
|
|
|
|
|
|
|
|
<div class="menu fb">Facebook</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.line">
|
|
|
|
|
|
|
|
<a :href="`https://line.naver.jp/ti/p/~${user.line}`">
|
|
|
|
|
|
|
|
<div class="menu line">LINE</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.ig">
|
|
|
|
|
|
|
|
<a :href="`https://www.instagram.com/${user.ig}`" target="_blank">
|
|
|
|
|
|
|
|
<div class="menu ig">Instagram</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.youtube">
|
|
|
|
|
|
|
|
<a :href="`${user.youtube}`" target="_blank">
|
|
|
|
|
|
|
|
<div class="menu yt">Youtube</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-for="(link, index) in user.nfc_addon" :key="index">
|
|
|
|
|
|
|
|
<a :href="link.link" target="_blank">
|
|
|
|
|
|
|
|
<div class="menu mylink">{{ link.name }}</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="btn-area" v-if="user.level > 0">
|
|
|
|
</div>
|
|
|
|
<dl class="dl02">
|
|
|
|
|
|
|
|
<a :href="`${imgUrl}/${user.user_id}/${user.user_id}.vcf`">
|
|
|
|
|
|
|
|
<div class="menu main">加入通訊錄</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02">
|
|
|
|
|
|
|
|
<a :href="`tel:${user.phone}`">
|
|
|
|
|
|
|
|
<div class="menu tel">
|
|
|
|
|
|
|
|
{{ user.phone }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.facebook" target="_blank">
|
|
|
|
|
|
|
|
<a :href="user.facebook">
|
|
|
|
|
|
|
|
<div class="menu fb">Facebook</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.line">
|
|
|
|
|
|
|
|
<a :href="`https://line.naver.jp/ti/p/~${user.line}`">
|
|
|
|
|
|
|
|
<div class="menu line">LINE</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.ig">
|
|
|
|
|
|
|
|
<a :href="`https://www.instagram.com/${user.ig}`" target="_blank">
|
|
|
|
|
|
|
|
<div class="menu ig">Instagram</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-if="user.youtube">
|
|
|
|
|
|
|
|
<a :href="`${user.youtube}`" target="_blank">
|
|
|
|
|
|
|
|
<div class="menu yt">Youtube</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<dl class="dl02" v-for="(link, index) in user.nfc_addon" :key="index">
|
|
|
|
|
|
|
|
<a :href="link.link" target="_blank">
|
|
|
|
|
|
|
|
<div class="menu mylink">{{ link.name }}</div>
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<van-popup v-model:show="showUserConn" position="right" :style="{ width: '70%',height: '100%' }">
|
|
|
|
|
|
|
|
<van-steps direction="vertical" :active="0">
|
|
|
|
|
|
|
|
<van-step v-for="(v,i) in userConnections" :key="i">
|
|
|
|
|
|
|
|
<div class="user-conn">
|
|
|
|
|
|
|
|
<div class="user-conn-left">{{ v.name }}</div>
|
|
|
|
|
|
|
|
<div class="user-conn-right" >
|
|
|
|
|
|
|
|
<i class="icon-heart" @click="handleAddFavorite">收藏</i>
|
|
|
|
|
|
|
|
<i class="icon-eye-circle" @click="goUC(v.nfcurl)">查看</i>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p>{{ v.company }}</p>
|
|
|
|
|
|
|
|
<p>{{ v.time }}</p>
|
|
|
|
|
|
|
|
</van-step>
|
|
|
|
|
|
|
|
</van-steps>
|
|
|
|
|
|
|
|
</van-popup>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { nextTick, onBeforeMount, reactive, ref, toRefs, watch } from 'vue'
|
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
|
|
import Cookies from 'js-cookie'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { nextTick, onBeforeMount, reactive, ref, toRefs, watch, computed } from 'vue'
|
|
|
|
|
|
|
|
|
|
|
|
import { checkUser, getCard, getCusCard, getVipCard } from '@/api'
|
|
|
|
import { checkUser, getCard, getCusCard, getVipCard, addFavorite, uploadUserConnections, getUserConnections } from '@/api'
|
|
|
|
|
|
|
|
|
|
|
|
import { changeMeta } from '@/utils/meta'
|
|
|
|
import { changeMeta } from '@/utils/meta'
|
|
|
|
|
|
|
|
|
|
|
|
@ -106,9 +127,12 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
let flexRef = ref(null)
|
|
|
|
let flexRef = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//取得user id
|
|
|
|
//取得user id
|
|
|
|
let token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))
|
|
|
|
let token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))
|
|
|
|
let cardid = encodeURIComponent(new URLSearchParams(window.location.search).get('cardid'))
|
|
|
|
let cardid = encodeURIComponent(new URLSearchParams(window.location.search).get('cardid'))
|
|
|
|
|
|
|
|
let nouc = encodeURIComponent(new URLSearchParams(window.location.search).get('nouc'))
|
|
|
|
|
|
|
|
let nolog = ref(encodeURIComponent(new URLSearchParams(window.location.search).get('nolog')))
|
|
|
|
|
|
|
|
|
|
|
|
cid.value = cardid
|
|
|
|
cid.value = cardid
|
|
|
|
|
|
|
|
|
|
|
|
@ -116,6 +140,7 @@ export default {
|
|
|
|
var u = navigator.userAgent;
|
|
|
|
var u = navigator.userAgent;
|
|
|
|
isIOs.value = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
|
|
isIOs.value = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const uc_temp = ref()
|
|
|
|
|
|
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
|
|
|
|
|
|
|
@ -141,7 +166,6 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
const card1Res = await getCard(params)
|
|
|
|
const card1Res = await getCard(params)
|
|
|
|
|
|
|
|
|
|
|
|
console.log('card1Res', card1Res)
|
|
|
|
|
|
|
|
if (card1Res.code !== 200) {
|
|
|
|
if (card1Res.code !== 200) {
|
|
|
|
Toast('操作錯誤')
|
|
|
|
Toast('操作錯誤')
|
|
|
|
return
|
|
|
|
return
|
|
|
|
@ -149,15 +173,15 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
changeMeta({
|
|
|
|
changeMeta({
|
|
|
|
site_name:"Utel電子名片",
|
|
|
|
site_name: "Utel電子名片",
|
|
|
|
title: card1Res.data.name +" "+card1Res.data.company,
|
|
|
|
title: card1Res.data.name + " " + card1Res.data.company,
|
|
|
|
description: card1Res.data.mark,
|
|
|
|
description: card1Res.data.mark,
|
|
|
|
image: card1Res.data.avatar
|
|
|
|
image: card1Res.data.avatar
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
state.user = card1Res.data
|
|
|
|
state.user = card1Res.data
|
|
|
|
|
|
|
|
|
|
|
|
if (card1Res.data.nc_type > 1 && card1Res.data.has_cuscard === 1 && card1Res.data.show_cus === 1) {
|
|
|
|
if (card1Res.data.level > 0 && card1Res.data.has_cuscard === 1 && card1Res.data.show_cus === 1) {
|
|
|
|
state.showCusCard = true
|
|
|
|
state.showCusCard = true
|
|
|
|
state.card_title = card1Res.data.card_title
|
|
|
|
state.card_title = card1Res.data.card_title
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -170,6 +194,14 @@ export default {
|
|
|
|
state.vip_card = []
|
|
|
|
state.vip_card = []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//儲存人脈
|
|
|
|
|
|
|
|
if(nouc != '1'){
|
|
|
|
|
|
|
|
saveConnection(card1Res.data)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// activeName.value = '0'
|
|
|
|
// activeName.value = '0'
|
|
|
|
watch(() => activeName.value, function (newVal, oldVal) {
|
|
|
|
watch(() => activeName.value, function (newVal, oldVal) {
|
|
|
|
@ -180,7 +212,6 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, { immediate: true })
|
|
|
|
}, { immediate: true })
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function showFlex(id) {
|
|
|
|
async function showFlex(id) {
|
|
|
|
|
|
|
|
|
|
|
|
@ -193,7 +224,7 @@ export default {
|
|
|
|
// flex2html("flex", JSON.parse(card))
|
|
|
|
// flex2html("flex", JSON.parse(card))
|
|
|
|
break
|
|
|
|
break
|
|
|
|
case '1':
|
|
|
|
case '1':
|
|
|
|
if (state.user.nc_type > 1) {
|
|
|
|
if (state.user.level > 0) {
|
|
|
|
let card2Res = await getCusCard({ userid: state.user.user_id })
|
|
|
|
let card2Res = await getCusCard({ userid: state.user.user_id })
|
|
|
|
if (card2Res.code === 200) {
|
|
|
|
if (card2Res.code === 200) {
|
|
|
|
if (card2Res.data.cus_card) {
|
|
|
|
if (card2Res.data.cus_card) {
|
|
|
|
@ -223,7 +254,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
await nextTick()
|
|
|
|
|
|
|
|
|
|
|
|
if(flexRef.value){
|
|
|
|
if (flexRef.value) {
|
|
|
|
flexRef.value.innerHTML = ''
|
|
|
|
flexRef.value.innerHTML = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
flex2html("flex", state.flexContent)
|
|
|
|
flex2html("flex", state.flexContent)
|
|
|
|
@ -236,12 +267,85 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//人脈紀錄
|
|
|
|
|
|
|
|
const showUserConn = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function saveConnection(data){
|
|
|
|
|
|
|
|
let connData = {
|
|
|
|
|
|
|
|
userid: data.user_id,
|
|
|
|
|
|
|
|
name: data.name,
|
|
|
|
|
|
|
|
nfcurl: data.nfcurl,
|
|
|
|
|
|
|
|
company: data.company,
|
|
|
|
|
|
|
|
title: data.title,
|
|
|
|
|
|
|
|
avatar: data.avatar,
|
|
|
|
|
|
|
|
time: dayjs().format('YYYY/MM/DD HH:mm')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let n_user_conn = []
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(localStorage.getItem('user_conn')){
|
|
|
|
|
|
|
|
//移除加入過的資料
|
|
|
|
|
|
|
|
let i = 0
|
|
|
|
|
|
|
|
let t_connData = JSON.parse(localStorage.getItem('user_conn')).filter(item=>{
|
|
|
|
|
|
|
|
i++
|
|
|
|
|
|
|
|
return item.userid !=connData.userid && i < 5
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
n_user_conn = [connData,...t_connData]
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
n_user_conn = [connData]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
localStorage.setItem('user_conn',JSON.stringify(n_user_conn))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(Cookies.get('token')){
|
|
|
|
|
|
|
|
let res = await uploadUserConnections(JSON.stringify(n_user_conn))
|
|
|
|
|
|
|
|
if(res.code === 200){
|
|
|
|
|
|
|
|
uc_temp.value = n_user_conn
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const userConnections = computed(()=>{
|
|
|
|
|
|
|
|
if(uc_temp.value && uc_temp.value.length > 0){
|
|
|
|
|
|
|
|
return uc_temp.value
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return JSON.parse(localStorage.getItem('user_conn'))
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const goUC = (url)=>{
|
|
|
|
|
|
|
|
showUserConn.value = false
|
|
|
|
|
|
|
|
window.location.href = url + '&nouc=1'
|
|
|
|
|
|
|
|
// window.location.href = url
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleAddFavorite = async (userid)=>{
|
|
|
|
|
|
|
|
if(!Cookies.get('token')){
|
|
|
|
|
|
|
|
return Toast('您尚未登入Slash會員中心，請按左上角Slash會員中心登入或加入')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
let res = await addFavorite(state.user.user_id)
|
|
|
|
|
|
|
|
if(res.code === 200){
|
|
|
|
|
|
|
|
return Toast('收藏成功')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const goSlash=()=>{
|
|
|
|
|
|
|
|
window.location.href = 'https://card.slash1000.com/home/?refer=' + state.user.code
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
...toRefs(state),
|
|
|
|
...toRefs(state),
|
|
|
|
|
|
|
|
showUserConn,
|
|
|
|
activeName,
|
|
|
|
activeName,
|
|
|
|
cid,
|
|
|
|
cid,
|
|
|
|
|
|
|
|
nolog,
|
|
|
|
flexRef,
|
|
|
|
flexRef,
|
|
|
|
isIOs
|
|
|
|
isIOs,
|
|
|
|
|
|
|
|
userConnections,
|
|
|
|
|
|
|
|
goUC,
|
|
|
|
|
|
|
|
goSlash,
|
|
|
|
|
|
|
|
handleAddFavorite
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -334,9 +438,27 @@ export default {
|
|
|
|
.recommend {
|
|
|
|
.recommend {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
padding-top: 20px;
|
|
|
|
padding-top: 20px;
|
|
|
|
.avatar{
|
|
|
|
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
width: 50%;
|
|
|
|
width: 50%;
|
|
|
|
border-radius: 50%;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.user-conn{
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
.user-conn-left{
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-conn-right{
|
|
|
|
|
|
|
|
width: 70px;
|
|
|
|
|
|
|
|
i{
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
margin:0 5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
