parent
ef891ae6a5
commit
e4b9ea534a
@ -1,26 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<template #default>
|
<template #default>
|
||||||
<router-view/>
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
<template #fallback>
|
<template #fallback>
|
||||||
Loading
|
Loading
|
||||||
</template>
|
</template>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getSiteConfig } from './api'
|
// import { getSiteConfig } from './api'
|
||||||
|
|
||||||
import { useStore } from 'vuex'
|
// import { useStore } from 'vuex'
|
||||||
|
|
||||||
const store = useStore()
|
// const store = useStore()
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
#app{
|
#app {
|
||||||
// margin-bottom: 40px;
|
// margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -1,449 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import moment from 'moment'
|
|
||||||
import QrcodeVue from 'qrcode.vue'
|
|
||||||
import { useCountDown } from '@vant/use';
|
|
||||||
import { toClipboard } from '@soerenmartius/vue3-clipboard'
|
|
||||||
|
|
||||||
import { ref, computed, onBeforeMount, nextTick, inject } from "vue";
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import { useStore } from 'vuex';
|
|
||||||
|
|
||||||
import { showToast,showSuccessToast } from 'vant';
|
|
||||||
|
|
||||||
import { Dialog } from 'vant';
|
|
||||||
|
|
||||||
// import Footer from '@/components/Footer.vue'
|
|
||||||
|
|
||||||
import { login, bindCard } from '@/api'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const route = useRoute()
|
|
||||||
const store = useStore()
|
|
||||||
|
|
||||||
const popShow = ref(true)
|
|
||||||
const showShare = ref(false)
|
|
||||||
const showNfcQrcode = ref(false)
|
|
||||||
|
|
||||||
const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL)
|
|
||||||
|
|
||||||
const userLevel = {
|
|
||||||
0: '基礎款',
|
|
||||||
1: '標準款',
|
|
||||||
2: '自製款',
|
|
||||||
3: '客製款'
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
|
||||||
if (!liff.isLoggedIn())
|
|
||||||
liff.login({ redirectUri: window.location.href });
|
|
||||||
} catch (err) {
|
|
||||||
console.log(`liff.state init error ${err}`);
|
|
||||||
showToast('登入失敗。請聯絡管理員')
|
|
||||||
router.push('/login')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!sessionStorage.getItem('token')) {
|
|
||||||
const profile = await liff.getProfile()
|
|
||||||
|
|
||||||
const id_token = liff.getIDToken()
|
|
||||||
|
|
||||||
let loginRes = await login({ line_id: profile.userId, token: id_token })
|
|
||||||
|
|
||||||
if (loginRes.code === 200) {
|
|
||||||
if (route.query.act === 'openright') {
|
|
||||||
showToast('您已經是本站會員')
|
|
||||||
}
|
|
||||||
sessionStorage.setItem('token', loginRes.data.token)
|
|
||||||
sessionStorage.setItem('uid', loginRes.data.uid)
|
|
||||||
|
|
||||||
} else if (loginRes.code === 202) {
|
|
||||||
if (route.query.act === 'openright') {
|
|
||||||
if (route.query.verify) {
|
|
||||||
//詢問是否綁定
|
|
||||||
Dialog.confirm({
|
|
||||||
title: '卡片綁定',
|
|
||||||
message: '確認是否綁定這張卡片'
|
|
||||||
}).then(async () => {
|
|
||||||
//確認綁定
|
|
||||||
let bindRes = await bindCard({ uid: loginRes.data.uid, verify: route.query.verify })
|
|
||||||
if (bindRes.code === 200) {
|
|
||||||
showSuccessToast('綁定成功')
|
|
||||||
} else {
|
|
||||||
showToast.fail('綁定失敗')
|
|
||||||
}
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sessionStorage.setItem('token', loginRes.data.token)
|
|
||||||
sessionStorage.setItem('uid', loginRes.data.uid)
|
|
||||||
|
|
||||||
} else if (loginRes.code === 201) {
|
|
||||||
if (route.query.act === 'openright') {
|
|
||||||
if (route.query.verify) {
|
|
||||||
router.push({
|
|
||||||
path: '/register',
|
|
||||||
query: {
|
|
||||||
verify: route.query.verify
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} else if (route.query.aid) {
|
|
||||||
router.push({
|
|
||||||
path: '/register',
|
|
||||||
query: {
|
|
||||||
aid: route.query.aid
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else {
|
|
||||||
showToast('請先註冊成為本站會員')
|
|
||||||
return router.push({
|
|
||||||
path: '/register',
|
|
||||||
query: { refer: route.query.refer }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
showToast('登入失敗。請聯絡管理員')
|
|
||||||
router.push('/login')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
store.dispatch('user/getUserInfo')
|
|
||||||
|
|
||||||
//判斷是否過期
|
|
||||||
nextTick(() => {
|
|
||||||
|
|
||||||
// if(userInfo.value.level===0 && userInfo.value.nc_type===0){
|
|
||||||
// showToast('會員已過期')
|
|
||||||
// return router.push('/shop/inputsn')
|
|
||||||
// }
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const userInfo = computed(() => {
|
|
||||||
return store.state.user.userInfo
|
|
||||||
})
|
|
||||||
|
|
||||||
const nfcurl = computed(() => {
|
|
||||||
return encodeURI(store.state.user.userInfo.ufcurl)
|
|
||||||
})
|
|
||||||
|
|
||||||
const overdue = computed(() => {
|
|
||||||
if (store.state.user.userInfo.overdue_time > 0) {
|
|
||||||
return moment.unix(store.state.user.userInfo.overdue_time).format('YYYY-MM-DD')
|
|
||||||
} else {
|
|
||||||
return '無期限'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const goCardEdit = () => {
|
|
||||||
if (userInfo.value.nc_type < 2) {
|
|
||||||
router.push('/card/notice')
|
|
||||||
} else {
|
|
||||||
router.push('/card/edit')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onSelect = (option) => {
|
|
||||||
showToast(option.name);
|
|
||||||
showShare.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleShowNfc = () => {
|
|
||||||
showNfcQrcode.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const doCopy = () => {
|
|
||||||
toClipboard(userInfo.value.nfcurl)
|
|
||||||
showToast('已放入剪貼簿')
|
|
||||||
}
|
|
||||||
|
|
||||||
const doCopyUid = () => {
|
|
||||||
toClipboard(userInfo.value.user_id)
|
|
||||||
showToast('已放入剪貼簿')
|
|
||||||
}
|
|
||||||
|
|
||||||
const bindTggo = () => {
|
|
||||||
console.log(userInfo.value)
|
|
||||||
let url = `https://www.tggo.com.tw/u.cgi?&mnm=mybinding&ncode=${userInfo.value.uniqid}&name=${userInfo.value.real_name}&openExternalBrowser=1`;
|
|
||||||
|
|
||||||
window.open(url, '_blank');
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleLogout = () => {
|
|
||||||
if (liff.isLoggedIn()) {
|
|
||||||
liff.logout();
|
|
||||||
}
|
|
||||||
sessionStorage.removeItem('token')
|
|
||||||
sessionStorage.removeItem('uid')
|
|
||||||
router.push('/login')
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="home" v-cloak>
|
|
||||||
<div class="my-account">
|
|
||||||
<div class="account-bg">
|
|
||||||
<img src="@/assets/images/topbg.png" />
|
|
||||||
</div>
|
|
||||||
<div class="avatar_box">
|
|
||||||
<img class="avater" :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
|
|
||||||
</div>
|
|
||||||
<div class="user-info">
|
|
||||||
<p class="uname">UTel電子名片系統</p>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<p class="umoney phone">歡迎來到會員中心</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="set" @click="handleLogout">
|
|
||||||
<a href="javascript:void(0)">登出</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="recommend">
|
|
||||||
<ul>
|
|
||||||
<li @click="router.push('/member')">
|
|
||||||
<p>修改資料</p>
|
|
||||||
<span>修改名片資料</span>
|
|
||||||
</li>
|
|
||||||
<li @click="goCardEdit">
|
|
||||||
<p>商務卡片</p>
|
|
||||||
<span>設計專屬名片</span>
|
|
||||||
</li>
|
|
||||||
<li @click="router.push('/shop')">
|
|
||||||
<p>立即購買</p>
|
|
||||||
<span>付費開通方案</span>
|
|
||||||
</li>
|
|
||||||
<li @click="handleShowNfc">
|
|
||||||
<p>展示二維碼</p>
|
|
||||||
<span>提供好友掃描</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<dl class="dl02" v-if="userInfo">
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-01.png" />
|
|
||||||
<div class="left">建立日期</div>
|
|
||||||
<div class="right">{{ userInfo.create_time }}</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-02.png" />
|
|
||||||
<div class="left">會員編號</div>
|
|
||||||
<div class="right">{{ userInfo.user_id }}
|
|
||||||
<span class="cp-btn" @click="doCopyUid">複製</span>
|
|
||||||
</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-02.png" />
|
|
||||||
<div class="left">公司名稱</div>
|
|
||||||
<div class="right">{{ userInfo.company }}</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-03.png" />
|
|
||||||
<div class="left">姓名</div>
|
|
||||||
<div class="right">{{ userInfo.real_name }}</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-04.png" />
|
|
||||||
<div class="left">會員等級</div>
|
|
||||||
<div class="right">{{ userInfo.level_name }}</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-05.png" />
|
|
||||||
<div class="left">使用期限</div>
|
|
||||||
<div class="right">{{ overdue }}</div>
|
|
||||||
|
|
||||||
<!-- <div class="right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
|
|
||||||
<div class="right input-sn" @click="router.push('/shop/inputsn')" v-else>已到期,<br/>點此輸入購買序號</div> -->
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-06.png" />
|
|
||||||
<div class="left">名片連結</div>
|
|
||||||
<div class="right" style="color: #fe6867" @click="doCopy">
|
|
||||||
點擊複製您的連結
|
|
||||||
</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;">
|
|
||||||
<div class="menu" @click="$router.push('/auth/auth')">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-04.png" />
|
|
||||||
<div class="left">授權商務卡片編輯</div>
|
|
||||||
<div class="right">授權</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;" @click="$router.push('/auth/getauth')">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-04.png" />
|
|
||||||
<div class="left">代客編輯商務卡片</div>
|
|
||||||
<div class="right">編輯</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="javascript:;" v-if="userInfo.uniqid">
|
|
||||||
<div class="menu">
|
|
||||||
<img class="titleImg" src="@/assets/images/icon-06.png" />
|
|
||||||
<div class="left">綁定UTel淘金購會員</div>
|
|
||||||
<div class="right" style="color: #fe6867" @click="bindTggo">
|
|
||||||
點擊後前往綁定
|
|
||||||
</div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</dl>
|
|
||||||
<!-- <Footer /> -->
|
|
||||||
<van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="關閉"
|
|
||||||
:show-confirm-button="false">
|
|
||||||
<div class="qrcode">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style src="@/assets/css/style.css"></style>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
[ v-cloak] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 2%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li {
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
width: 44%;
|
|
||||||
height: 50px;
|
|
||||||
padding: 2%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 1%;
|
|
||||||
-webkit-box-shadow: 0 0 2px #fdaf00;
|
|
||||||
-moz-box-shadow: 0 0 2px #fdaf00;
|
|
||||||
box-shadow: 0 0 2px #fdaf00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li p {
|
|
||||||
margin-top: 2%;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li span {
|
|
||||||
font-size: 14px !important;
|
|
||||||
color: #999 !important;
|
|
||||||
padding-top: 0.15rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li:nth-child(1) {
|
|
||||||
background: url(@/assets/images/icon-001.png) right 0.3rem center no-repeat #fff !important;
|
|
||||||
background-size: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li:nth-child(2) {
|
|
||||||
background: url(@/assets/images/icon-002.png) right 0.3rem center no-repeat #fff !important;
|
|
||||||
background-size: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li:nth-child(3) {
|
|
||||||
background: url(@/assets/images/icon-003.png) right 0.3rem center no-repeat #fff !important;
|
|
||||||
background-size: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend ul li:nth-child(4) {
|
|
||||||
background: url(@/assets/images/icon-004.png) right 0.3rem center no-repeat #fff !important;
|
|
||||||
background-size: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-sn {
|
|
||||||
color: red !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cp-btn {
|
|
||||||
border: #999 1px solid;
|
|
||||||
padding: 2px;
|
|
||||||
color: rgb(254, 104, 103);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
.block{
|
|
||||||
position:absolute;
|
|
||||||
color:#ffffff;
|
|
||||||
border-radius:50%;
|
|
||||||
top:10px;
|
|
||||||
right:10px;
|
|
||||||
margin-left:auto;
|
|
||||||
.van-icon{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue