<template>
|
<section class="my-index">
|
<!-- <fx-header :back="false" :title="$t('my')">
|
<template v-slot:right>
|
<van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
|
</template>
|
</fx-header> -->
|
<assets-head title="">
|
<!-- <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
|
@click="goRouter('/customerService')" /> -->
|
<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 flex flex-col justify-center">
|
<div class="font-bold text-lg name" style="width: 200px;overflow-wrap: break-word;">{{ userStore.userInfo &&
|
userStore.userInfo.username }}</div>
|
<div class="text-sm text-gray-400 mt-5 flex items-center id-text">
|
ID：{{ 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('/changePassword')">
|
<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 class="label_item flex flex-col items-center justify-center mt-8"
|
@click="onRoute('/certificationCenter')">
|
<img src="@/assets/imgs/my/身份认证.png" alt="">
|
<div>{{ t('authVerify') }}</div>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<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 flex-start items-start flex-wrap">
|
<div class="label_item flex flex-col items-center justify-center mt-8" v-for="(_item, _index) in item.list"
|
:key="_index" @click="onRoute(_item.path)">
|
<img :src="_item.icon" alt="">
|
<div>{{ _item.title }}</div>
|
</div>
|
</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="item.title" @click="onRoute(item.path)"
|
v-for="(item, index) in tyList" :key="index">
|
<template #icon>
|
<img class="cell-img" :src="item.icon" />
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</template>
|
|
<template v-if="userStore.userInfo && userStore.userInfo.token">
|
<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 } 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 kycHighStatusIcon from '@/assets/image/userCenter/kycHighStatus.png'
|
import store from '@/store/store'
|
import { customerServiceUrl } from '@/config'
|
const { t } = useI18n()
|
const { toClipboard } = useClipboard();
|
|
const router = useRouter()
|
const userStore = useUserStore()
|
const customer_service_url = ref(customerServiceUrl) // 客服链接,有值的话就会跳转到客服外链
|
const status = ref(null)
|
const kycHighStatus = ref(null)
|
const userdata = ref({})
|
// 通用列表
|
const tyList = [
|
{ title: t('关于我们'), icon: new URL('@/assets/image/assets-center/aboutUs.png', import.meta.url), path: '/aboutUs?serviceTerm=20' },
|
{ title: t('用户协议'), icon: new URL('@/assets/image/assets-center/yhxy.png', import.meta.url), path: '/aboutUs?serviceTerm=23' },
|
{ title: t('隐私政策'), icon: new URL('@/assets/image/assets-center/yszc.png', import.meta.url), path: '/aboutUs?serviceTerm=24' },
|
{ title: t('安全规定'), icon: new URL('@/assets/image/assets-center/aqzc.png', import.meta.url), path: '/aboutUs?serviceTerm=21' },
|
{ title: t('反洗钱协议'), icon: new URL('@/assets/image/assets-center/yhxy.png', import.meta.url), path: '/aboutUs?serviceTerm=25' },
|
{ title: t('法律声明'), icon: new URL('@/assets/image/assets-center/aqzc.png', import.meta.url), path: '/aboutUs?serviceTerm=22' },
|
{ title: t('金融服务牌照'), icon: new URL('@/assets/image/assets-center/yhxy.png', import.meta.url), path: '/aboutUs?serviceTerm=26' },
|
]
|
const state = reactive({
|
cellList: [
|
{
|
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: 'font-o', title: t('language'), path: '/language' },
|
{ icon: 'service-o', title: t('onLineService'), path: '/customerService' },
|
{ icon: 'idcard', title: t('authVerify'), path: '/certificationCenter', show: true },
|
{ icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
|
{ icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
|
]
|
}
|
]
|
})
|
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()
|
// getcustomer()
|
}
|
})
|
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' }, // 原帮助中心页面
|
{ icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('帮助中心'), path: '/aboutUs?serviceTerm=27' }, // 现跳转关于我们通过后台编辑获取的页面
|
]
|
}
|
]
|
} else {
|
return [
|
{
|
title: t('universal'), list: [
|
{ icon: new URL('../../assets/image/assets-center/language.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 getcustomer = () => {
|
_customer().then((data) => {
|
customer_service_url.value = data.customer_service_url
|
console.log(customer_service_url);
|
}).catch(error => {
|
console.error('Error fetching data:', error);
|
});
|
};
|
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
|
})
|
}
|
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;
|
line-height: 20px;
|
}
|
|
.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>
|
