|
|
|
|
@ -11,19 +11,22 @@ import { useStore } from 'vuex';
|
|
|
|
|
import { showToast,showSuccessToast } from 'vant';
|
|
|
|
|
|
|
|
|
|
import { Dialog } from 'vant';
|
|
|
|
|
import { NoticeBar } from 'vant';
|
|
|
|
|
|
|
|
|
|
// import Footer from '@/components/Footer.vue'
|
|
|
|
|
|
|
|
|
|
import { login, bindCard } from '@/api'
|
|
|
|
|
import { login, bindCard , getMovie } from '@/api'
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const store = useStore()
|
|
|
|
|
|
|
|
|
|
const popShow = ref(true)
|
|
|
|
|
const popShow = ref(false)
|
|
|
|
|
const showShare = ref(false)
|
|
|
|
|
const showNfcQrcode = ref(false)
|
|
|
|
|
|
|
|
|
|
const checked = ref(true);
|
|
|
|
|
|
|
|
|
|
const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL)
|
|
|
|
|
|
|
|
|
|
const userLevel = {
|
|
|
|
|
@ -35,11 +38,6 @@ const userLevel = {
|
|
|
|
|
|
|
|
|
|
const is_due = ref(false)
|
|
|
|
|
|
|
|
|
|
// 使用useCountDown做倒數計時
|
|
|
|
|
const countDown = useCountDown({time: 1 * 1000});
|
|
|
|
|
const current = countDown.current;
|
|
|
|
|
countDown.start();
|
|
|
|
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
const liff = window.liff;
|
|
|
|
|
try {
|
|
|
|
|
@ -138,6 +136,31 @@ onBeforeMount(async () => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let adData = await getMovie();
|
|
|
|
|
if (adData.code === 200) {
|
|
|
|
|
popShow.value = true;
|
|
|
|
|
console.log(adData.data.play_sec)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 使用useCountDown做倒數計時
|
|
|
|
|
// const countDown = useCountDown({time: 1000 * adData.data.play_sec});
|
|
|
|
|
// const current = countDown.current;
|
|
|
|
|
// countDown.start();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const test = computed(() => {
|
|
|
|
|
// return store.state.user.userInfo
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const userInfo = computed(() => {
|
|
|
|
|
return store.state.user.userInfo
|
|
|
|
|
})
|
|
|
|
|
@ -209,150 +232,210 @@ const handleLogout = () => {
|
|
|
|
|
<a href="javascript:;"><h5 class="umoney phone">歡迎來到會員中心</h5></a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<van-notice-bar color="#ffffff" background="#e05338" left-icon="info-o" mode="link">測試文字測試文字測試文字測試文字測試文字測試文字</van-notice-bar>
|
|
|
|
|
<van-notice-bar color="#ffffff" background="#e05338" left-icon="volume" mode="link">測試文字測試文字測試文字測試文字測試文字測試文字</van-notice-bar>
|
|
|
|
|
|
|
|
|
|
<div class="my-account">
|
|
|
|
|
<div class="row align-items-center gx-0">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="avatar">
|
|
|
|
|
<div class="imgCnt">
|
|
|
|
|
<img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="name">{{ userInfo.real_name }}</div>
|
|
|
|
|
<div class="conpany">{{ userInfo.company }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="avatar">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="imgCnt shadow-sm">
|
|
|
|
|
<img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<h4 class="name">{{ userInfo.real_name }}</h4>
|
|
|
|
|
<h6 class="conpany">{{ userInfo.company }}</h6>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<div class="btn" @click="handleLogout"><h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4></div>
|
|
|
|
|
<div class="btn" @click="handleLogout"><h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4></div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="btn btn-sm text-darkBlue" @click="handleLogout"><h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4></div>
|
|
|
|
|
<div class="btn btn-sm text-darkBlue" @click="handleLogout"><h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="recommend">
|
|
|
|
|
<div class="btn btn-outline-moBlue" @click="router.push('/shop')">
|
|
|
|
|
<div class="img"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></div>
|
|
|
|
|
<h6 class="text">立即開通</h6>
|
|
|
|
|
<div class="btn btn-outline-skyBlue" @click="router.push('/shop')">
|
|
|
|
|
<div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div>
|
|
|
|
|
<div class="text">立即開通</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn btn-outline-moBlue" @click="goCardEdit">
|
|
|
|
|
<div class="img"><i class="fa fa-id-card-o" aria-hidden="true"></i></div>
|
|
|
|
|
<h6 class="text">商務卡片</h6>
|
|
|
|
|
<div class="btn btn-outline-skyBlue" @click="goCardEdit">
|
|
|
|
|
<div class="img"><i class="fa-solid fa-id-card"></i></div>
|
|
|
|
|
<div class="text">商務卡片</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn btn-outline-moBlue">
|
|
|
|
|
<div class="img"><i class="fa fa-address-book-o" aria-hidden="true"></i></div>
|
|
|
|
|
<h6 class="text">通訊錄</h6>
|
|
|
|
|
<div class="btn btn-outline-skyBlue">
|
|
|
|
|
<div class="img"><i class="fa-solid fa-address-book"></i></div>
|
|
|
|
|
<div class="text">通訊錄</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bwtFlex px-3 mb-2">
|
|
|
|
|
<h5 class="font-weight-bold text-darkBlue">會員資料</h5>
|
|
|
|
|
<a href="javascript:;" @click="router.push('/member')"><h5><i class="fa fa-cog text-darkBlue" aria-hidden="true"></i></h5></a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="card" v-if="userInfo">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row item">
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<h6 class="font-weight-bold"><i class="fa fa-address-book-o" aria-hidden="true"></i> 建立日期</h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
{{ userInfo.create_time }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row item">
|
|
|
|
|
<div class="col-auto">
|
|
|
|
|
<h6 class="font-weight-bold"><i class="fa fa-address-book-o" aria-hidden="true"></i> 會員編號</h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
{{ userInfo.user_id }}<span class="cp-btn" @click="doCopyUid">複製</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a href="javascript:;" class="item">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 公司名稱</h6></div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
{{ userInfo.company }}
|
|
|
|
|
<div class="card shadow" v-if="userInfo">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-regular fa-fw fa-calendar-days"></i> 建立日期
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.create_time }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 姓名</h6></div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
{{ userInfo.real_name }}
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-fingerprint"></i> 會員編號
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<a href="javascript:;" @click="doCopyUid">{{ userInfo.user_id }}</a>
|
|
|
|
|
<!-- <span class="btn btn-sm btn-tomatoRed" @click="doCopyUid">複製</span> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 會員等級</h6></div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-layer-group"></i> 會員等級
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.level_name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 使用期限</h6></div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-regular fa-fw fa-calendar-check"></i> 使用期限
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ overdue }}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="col text-right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
|
|
|
|
|
<div class="col text-right input-sn" @click="router.push('/shop/inputsn')" v-else>已到期,<br/>點此輸入購買序號</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 名片連結</h6></div>
|
|
|
|
|
<div class="col text-right" style="color: #fe6867" @click="doCopy">
|
|
|
|
|
點擊複製您的連結
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-qrcode"></i> 會員QRcode
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<div class="btn btn-sm btn-darkBlue" @click="handleShowNfc">開啟掃描</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item" @click="$router.push('/auth/auth')">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 授權商務卡片編輯</h6></div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
授權
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-link"></i> 名片連結
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<div class="btn btn-sm btn-tomatoRed" @click="doCopy">複製連結</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item" @click="$router.push('/auth/getauth')">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 代客編輯商務卡片</h6></div>
|
|
|
|
|
<div class="col text-right">
|
|
|
|
|
編輯
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card shadow" v-if="userInfo">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-regular fa-fw fa-building"></i> 職稱
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.title }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="javascript:;" class="item" v-if="userInfo.uniqid">
|
|
|
|
|
<div class="row w-100">
|
|
|
|
|
<div class="col-auto"><h6><i class="fa fa-address-book-o" aria-hidden="true"></i> 綁定UTel淘金購會員</h6></div>
|
|
|
|
|
<div class="col text-right" style="color: #fe6867" @click="bindTggo">
|
|
|
|
|
點擊後前往綁定
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-mobile-retro"></i> 手機
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.phone }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-phone"></i> 市話
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.tel }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-regular fa-fw fa-envelope"></i> Email
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.email }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-location-dot"></i> 住址
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
{{ userInfo.address }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card shadow" v-if="userInfo">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-user-tie"></i> 授權商務卡片編輯
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<a href="javascript:;" @click="$router.push('/auth/auth')">授權</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-regular fa-fw fa-handshake"></i> 代客編輯商務卡片
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<a href="javascript:;" @click="$router.push('/auth/getauth')">編輯</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" v-if="userInfo.uniqid">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-solid fa-fw fa-award"></i> 綁定UTel淘金購會員
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<a href="javascript:;" @click="bindTggo">點擊後前往綁定</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片帶廣告
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right text-right">
|
|
|
|
|
<van-switch v-model="checked" size="18px" active-color="#345068" inactive-color="#888888"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <Footer /> -->
|
|
|
|
|
|
|
|
|
|
<van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="關閉"
|
|
|
|
|
:show-confirm-button="false">
|
|
|
|
|
<div class="qrcode">
|
|
|
|
|
<div class="qrcode text-center pt-3">
|
|
|
|
|
<qrcode-vue :value="userInfo.nfcurl" :size="200" level="M" />
|
|
|
|
|
</div>
|
|
|
|
|
</van-dialog>
|
|
|
|
|
|
|
|
|
|
<van-overlay :show="popShow" z-index="1000" :style="{background:'rgba(0, 0, 0, .85)'}">
|
|
|
|
|
<div class="wrapper" @click.stop>
|
|
|
|
|
<div class="block">
|
|
|
|
|
<span class="van-icon van-icon-cross" @click="popShow = false" v-show="current.seconds == 0"></span>
|
|
|
|
|
{{ current.seconds }} 秒
|
|
|
|
|
<div class="clip" @click="popShow = false">
|
|
|
|
|
<span class="van-icon van-icon-cross"></span>
|
|
|
|
|
<van-count-down :style="{color:'#fff'}" @click="popShow = false" @finish="popShow = true" :auto-start="true" :time="10000" format="ss 秒"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<h5 class="title">測試文字測試文字測試文字</h5>
|
|
|
|
|
<h6 class="desc ellipsis e3">測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</h6>
|
|
|
|
|
<div class="btn btn-light form-control font-weight-bold" @click="router.push('/shop')"><i class="fa-solid fa-fw fa-link"></i> 前往連結</div>
|
|
|
|
|
</div>
|
|
|
|
|
<iframe width="100%" style="aspect-ratio: 16/9;" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</van-overlay>
|
|
|
|
|
</div>
|
|
|
|
|
@ -362,5 +445,46 @@ const handleLogout = () => {
|
|
|
|
|
<style src="@/assets/css/page/index.css"></style>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.wrapper{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.clip{
|
|
|
|
|
position:absolute;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color:#ffffff;
|
|
|
|
|
background-color: rgba(#000000,.8);
|
|
|
|
|
top:5px;
|
|
|
|
|
right:5px;
|
|
|
|
|
margin-left:auto;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 1005;
|
|
|
|
|
}
|
|
|
|
|
.top{
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width:100%;
|
|
|
|
|
flex: 1 0 0;
|
|
|
|
|
}
|
|
|
|
|
.bottom{
|
|
|
|
|
position: relative;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
.title{
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
.desc{
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
DESKTOP-8UQ1PPR\09158
3 years ago
