<template>
|
<section class="my-index">
|
<assets-head title="">
|
<template v-slot:right>
|
<van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
|
</template>
|
</assets-head>
|
<div class="px-8 mt-4">
|
<h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
|
$t('welcome')
|
}} {{ $title }}!
|
</h1>
|
<p class="sub-text" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
|
$t('全球最大的区块链资产平台')
|
}}</p>
|
<p class="w-full flex mt-4 gap-x-4" v-if="!(userStore.userInfo && userStore.userInfo.token)">
|
<van-button class="flex-1" round @click="onRoute('/register')">{{ $t('register') }}</van-button>
|
<van-button class="flex-1" type="primary" round color="#f7b600" @click="onRoute('/login')">{{
|
$t('login')
|
}}
|
</van-button>
|
</p>
|
|
<div class="mt-4 flex items-start" v-else>
|
<img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar"/>
|
<div class="ml-5 pt-1">
|
<div class="font-bold text-lg name flex-centerY" style="width: 200px;overflow-wrap: break-word;">{{
|
userStore.userInfo &&
|
userStore.userInfo.username
|
}}
|
<div class="label pl-2 pr-2 ml-3" :class="{ 'green': kycHighStatus == 2 }">
|
{{ kycHighStatus == 2 ? $t('高级用户') : $t('普通用户') }}
|
</div>
|
</div>
|
<div class="text-sm text-gray mt-5 flex " style="font-size: 13px">
|
UID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
|
src="@/assets/image/idcopy.png" alt="id"
|
@click="copy"/></div>
|
<!-- <div class="flex items-center justify-start mt-5">-->
|
<!-- <div class="label pl-2 pr-2"-->
|
<!-- :class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }">-->
|
<!-- {{ status == 0 ? $t('notCertified') :-->
|
<!-- status == 1 ? $t('reviewing') : status == 2 ? $t('verified') : status == 3 ?-->
|
<!-- $t('noPassView') : '' }}-->
|
<!-- </div>-->
|
<!-- <div class="label pl-2 pr-2 ml-3" :class="{ 'green': kycHighStatus == 2 }">-->
|
<!-- {{ kycHighStatus == 2 ? $t('高级用户') : $t('普通用户') }}-->
|
<!-- </div>-->
|
<!-- <div class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{ $t('信用分') }} : {{ userdata.creditScore }}</div>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</div>
|
|
<template v-if="(userStore.userInfo && userStore.userInfo.token)">
|
<!-- <van-divider :style="{ borderColor: '#ddd' }" hairline />-->
|
<!-- <div class="mt-10 px-8" v-if="(userStore.userInfo && userStore.userInfo.token)">-->
|
<!-- <div class="title_s font-bold">{{ t('快捷入口') }}</div>-->
|
<!-- <div class="flex flex-start items-start">-->
|
<!-- <div class="label_item flex flex-col items-center justify-center mt-8" @click="onRoute('/safety')">-->
|
<!-- <img src="@/assets/imgs/my/安全.png" alt="">-->
|
<!-- <div>{{ t('安全') }}</div>-->
|
<!-- </div>-->
|
<!-- <div class="label_item flex flex-col items-center justify-center mt-8"-->
|
<!-- @click="onRoute('/cryptos/accountChange')">-->
|
<!-- <img src="@/assets/imgs/my/记录.png" alt="">-->
|
<!-- <div>{{ t('账变记录') }}</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="flex-centerY" style="margin: 20px 20px;margin-top: 40px">
|
<div @click="onRoute('/advancedCtf')" class="flexY-center" style="flex: 1">
|
<img src="@/assets/img/img_7.png" style="width: 20px;height: 20px">
|
<div style="font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="text-gray mt-2" >
|
{{ $t('高级认证') }}
|
</div>
|
</div>
|
<div @click="onRoute('/certificationCenter')" class="flexY-center" style="flex: 1">
|
<img src="@/assets/img/img_8.png" style="width: 20px;height: 20px">
|
<div style="font-size: 12px" class="text-gray mt-2">
|
{{ $t('authVerify') }}
|
</div>
|
</div>
|
<div @click="onRoute('/safety')" class="flexY-center" style="flex: 1">
|
<img src="@/assets/img/img_9.png" style="width: 20px;height: 20px">
|
<div style="font-size: 12px" class="text-gray mt-2">
|
{{ $t('安全') }}
|
</div>
|
</div>
|
<div @click="onRoute('/cryptos/accountChange')" class="flexY-center" style="flex: 1">
|
<img src="@/assets/img/img_2.png" style="width: 20px;height: 20px">
|
<div style="font-size: 12px" class="text-gray mt-2">
|
{{ $t('账变记录') }}
|
</div>
|
</div>
|
</div>
|
</template>
|
<div style="width: 100%;height: 1px;background: #eee"></div>
|
<template v-for="(item, index) in cellList" :key="index">
|
<!-- <van-divider :style="{ borderColor: '#ddd' }" hairline />-->
|
<div class="mt-10 px-8">
|
<!-- <div class="title_s font-bold">{{ item.title }}</div>-->
|
<div class="flex-centerY flex-position-between" style="padding: 10px 0" v-for="(_item, _index) in item.list"
|
:key="_index" @click="onRoute(_item.path)">
|
<!-- <img :src="_item.icon" alt="">-->
|
<div style="font-size: 14px;color:#999">{{ _item.title }}</div>
|
<van-icon name="arrow" style="font-size: 14px;color:#999"/>
|
</div>
|
</div>
|
</template>
|
|
|
<!-- <template v-if="userStore.userInfo && userStore.userInfo.token">-->
|
<!-- <van-divider :style="{ borderColor: '#ddd' }" hairline />-->
|
<!-- <van-cell-group :border="false">-->
|
<!-- <van-cell is-link="is-link" center="center" :title="t('关于我们')" @click="onRoute('/aboutUs')">-->
|
<!-- <template #icon>-->
|
<!-- <img class="cell-img" src="../../assets/image/assets-center/aboutUs.png" />-->
|
<!-- </template>-->
|
<!-- </van-cell>-->
|
<!-- </van-cell-group>-->
|
<!-- </template>-->
|
|
<template v-if="userStore.userInfo && userStore.userInfo.token">
|
<div class="flex-centerY flex-position-between" style="padding: 10px 15px"
|
@click="onRoute('/certificationCenter')">
|
<!-- <img :src="_item.icon" alt="">-->
|
<div style="font-size: 14px;color:#999">{{ $t('authVerify') }}</div>
|
<div class="flex-centerY">
|
<div style="font-size: 14px"
|
:class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }">
|
{{
|
status == 0 ? $t('notCertified') :
|
status == 1 ? $t('reviewing') : status == 2 ? $t('verified') : status == 3 ?
|
$t('noPassView') : ''
|
}}
|
</div>
|
<van-icon name="arrow" style="font-size: 14px;color:#999"/>
|
</div>
|
|
</div>
|
<!-- {{ $t('信用分') }} : {{ userdata.creditScore }}-->
|
<div class="flex-centerY flex-position-between" style="padding: 10px 15px" @click="loginOut">
|
<!-- <img :src="_item.icon" alt="">-->
|
<div style="font-size: 14px;color:#999">{{ $t('信用分') }}</div>
|
<div class="flex-centerY" style="font-size: 14px;color:#f14b3f">
|
{{ userdata.creditScore }}
|
<van-icon name="arrow" style="font-size: 14px;color:#999"/>
|
</div>
|
</div>
|
<div class="flex-centerY flex-position-between" style="padding: 10px 15px" @click="loginOut">
|
<!-- <img :src="_item.icon" alt="">-->
|
<div style="font-size: 14px;color:#f14b3f">{{ $t('loginOut') }}</div>
|
<van-icon name="arrow" style="font-size: 14px;color:#999"/>
|
</div>
|
<!-- <van-divider :style="{ borderColor: '#ddd' }" hairline />-->
|
<!-- <div class="px-4 mt-4">-->
|
<!-- <p class="w-full flex mt-4 gap-x-4">-->
|
<!-- <van-button type="primary" class="flex-1" round color="#f7b600" @click="loginOut">{{ $t('loginOut')-->
|
<!-- }}</van-button>-->
|
<!-- </p>-->
|
<!-- </div>-->
|
</template>
|
</section>
|
</template>
|
|
<script setup>
|
import {reactive, onMounted, ref, computed} from 'vue';
|
import {useRouter} from 'vue-router';
|
import {
|
_getIdentify,
|
_getKycHighLevel,
|
_logOut,
|
_info,
|
_customer,
|
_getContractBySymbolType
|
} from "@/service/user.api.js";
|
import {useUserStore} from '@/store/user';
|
import {useI18n} from "vue-i18n";
|
import useClipboard from "vue-clipboard3";
|
import {showToast} from "vant";
|
import addBankIcon from '@/assets/image/userCenter/addBank.png'
|
import store from '@/store/store'
|
|
const {t} = useI18n()
|
const {toClipboard} = useClipboard();
|
|
const router = useRouter()
|
const userStore = useUserStore()
|
const customer_service_url = ref(store.state.user.customer_service_url)
|
const status = ref(null)
|
const kycHighStatus = ref(null)
|
const userdata = ref({})
|
|
const tabs = [
|
{
|
icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url),
|
title: t('authVerify'),
|
path: '/certificationCenter'
|
},
|
{
|
icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url),
|
title: t('高级认证'),
|
path: '/advancedCtf'
|
},
|
{
|
icon: new URL('@/assets/imgs/my/my_2a.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/my/my_2b.png', import.meta.url),
|
title: t('安全'),
|
path: '/safety'
|
},
|
{
|
icon: new URL('@/assets/imgs/my/my_3a.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/my/my_3b.png', import.meta.url),
|
title: t('账变记录'),
|
path: '/cryptos/accountChange'
|
},
|
]
|
const tabs2 = [
|
{title: t('language'), path: '/language'},
|
{title: t('onLineService'), path: '/customerService'},
|
{title: t('计价方式'), path: '/cryptos/exchangeRate'},
|
{title: t('AddPaymentMethod'), path: '/payMentMethod/list'},
|
{title: t('帮助中心'), path: '/helpCenter'},
|
{title: t('关于我们'), path: '/aboutUs'},
|
]
|
|
// 跳转
|
const onRoute = (path) => {
|
if (path == '/customerService') {
|
if (customer_service_url.value) {
|
window.location.href = customer_service_url.value;
|
} else {
|
router.push(path)
|
}
|
} else {
|
router.push(path)
|
}
|
}
|
onMounted(() => {
|
if (userStore.userInfo && userStore.userInfo.token) {
|
|
getIdentify()
|
getKycHighLevel()
|
getinfo()
|
|
} else {
|
router.push('/login')
|
}
|
})
|
const cellList = computed(() => {
|
if (userStore.userInfo && userStore.userInfo.token) {
|
return [
|
// {
|
// title: t('safe'), list: [
|
// // { icon: 'shield-o', title: t('safe'), path: '/safety' },
|
// // { icon: 'setting-o', title: t('changePassword'), path: '/changePassword' },
|
// { icon: addBankIcon, title: t('AddPaymentMethod'), path: '/payMentMethod/list' }
|
// ]
|
// },
|
{
|
title: t('universal'), list: [
|
{
|
icon: new URL('../../assets/image/assets-center/language.png', import.meta.url),
|
title: t('language'),
|
path: '/language'
|
},
|
{
|
icon: new URL('../../assets/image/assets-center/onLineService.png', import.meta.url),
|
title: t('onLineService'),
|
path: '/customerService'
|
},
|
// { icon: new URL('../../assets/image/assets-center/authVerify.png', import.meta.url), title: t('authVerify'), path: '/certificationCenter', show: true },
|
// { icon: new URL('../../assets/image/assets-center/AdvancedCertification.png', import.meta.url), title: t('高级认证'), path: '/advancedCtf', show: true },
|
// { icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
|
{
|
icon: new URL('../../assets/image/assets-center/valuation.png', import.meta.url),
|
title: t('计价方式'),
|
path: '/cryptos/exchangeRate'
|
},
|
{
|
icon: new URL('../../assets/image/assets-center/AddPaymentMethod.png', import.meta.url),
|
title: t('AddPaymentMethod'),
|
path: '/payMentMethod/list'
|
},
|
{
|
icon: new URL('../../assets/image/assets-center/help.png', import.meta.url),
|
title: t('帮助中心'),
|
path: '/helpCenter'
|
},
|
{title: t('关于我们'), path: '/aboutUs'},
|
]
|
}
|
]
|
} else {
|
return [
|
{
|
title: t('universal'), list: [
|
{
|
icon: new URL('../../assets/image/assets-center/help.png', import.meta.url),
|
title: t('language'),
|
path: '/language'
|
},
|
// { icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
|
{
|
icon: new URL('../../assets/image/assets-center/aboutUs.png', import.meta.url),
|
title: t('onLineService'),
|
path: '/customerService'
|
},
|
|
]
|
},
|
// {
|
// title: t('更多'), list: [
|
// { icon: 'question-o', title: t('帮助中心'), path: '/helpCenter' },
|
// { icon: 'user-o', title: t('关于我们'), path: '/aboutUs' }
|
// ]
|
// }
|
]
|
}
|
})
|
|
// 退出登录
|
const loginOut = () => {
|
_logOut({
|
token: userStore.userInfo.token
|
}).then(res => {
|
userStore.userInfo = {}
|
store.state.user.userInfo = {}
|
})
|
}
|
// 用户信用分
|
const getinfo = () => {
|
_info().then((data) => {
|
userdata.value = data; // 确保 userdata 被正确声明
|
}).catch(error => {
|
console.error('Error fetching data:', error);
|
});
|
};
|
// 用户认证状态
|
const getIdentify = () => {
|
_getIdentify().then(data => {
|
status.value = data.status
|
})
|
}
|
|
// 当前用户等级
|
const getKycHighLevel = () => {
|
_getKycHighLevel().then((data) => {
|
kycHighStatus.value = data.status
|
})
|
}
|
// 复制用户code
|
const copy = async () => {
|
try {
|
await toClipboard(userStore.userInfo && userStore.userInfo.usercode);
|
showToast(t('copySuccess'));
|
} catch (e) {
|
console.error(e);
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.van-cell-group__title) {
|
// background: $main2_background !important;
|
background: $inp-b !important;
|
padding: 12px 16px;
|
}
|
|
:deep(.van-cell-group) {
|
.van-icon {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
:deep(.van-cell) {
|
// background: $mainBgColor;
|
// border-bottom: 1px solid $border_color;
|
|
&:hover {
|
// background: $mainBgColor;
|
}
|
}
|
|
:deep(.van-cell-group__title) {
|
background: $mainBgColor;
|
}
|
|
:deep(.van-nav-bar__content) {
|
// background: $mainBgColor;
|
}
|
|
:deep(.van-icon) {
|
color: $text_color;
|
}
|
|
:deep(.van-cell__title) {
|
color: $text_color;
|
}
|
|
:deep(.van-cell:after) {
|
border: none;
|
}
|
|
:deep(.van-grid-item__content) {
|
// background: $selectSymbol_background;
|
}
|
|
:deep(.van-grid-item__text) {
|
color: $text_color;
|
font-size: 13px;
|
height: 30px;
|
}
|
|
.my-index {
|
padding-bottom: 60px;
|
background: $mainbgWhiteColor;
|
|
.title_s {
|
font-size: 16px;
|
}
|
|
.label_item {
|
width: 33%;
|
font-size: 12px;
|
|
div {
|
text-align: center;
|
}
|
|
img {
|
width: 32%;
|
margin-bottom: 3px;
|
}
|
}
|
|
.label {
|
line-height: 18px;
|
font-size: 12px;
|
height: 18px;
|
border: $icon-bg solid 1px;
|
border-radius: 5px;
|
}
|
|
.yellow {
|
border-color: #F5C421;
|
}
|
|
.red {
|
border-color: $red;
|
}
|
|
.green {
|
border-color: $green;
|
}
|
}
|
|
h1.title {
|
font-size: 22px;
|
line-height: 26px;
|
}
|
|
.sub-text {
|
padding: 10px 0;
|
color: $text_color1;
|
font-size: 12px;
|
}
|
|
.name {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
.yellow {
|
color: #F5C421;
|
}
|
|
.red {
|
color: $red;
|
}
|
|
.green {
|
color: $green;
|
}
|
|
.id-text {
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
.grid-item-img {
|
width: 48px;
|
height: 48px;
|
margin-bottom: 5px;
|
}
|
|
.van-grid-main {
|
padding: 5px 0;
|
}
|
|
.cell-img {
|
width: 20px;
|
height: 20px;
|
margin-right: 10px;
|
}
|
</style>
|
