<template>
|
<div class="pb-30">
|
<!-- 顶部用户信息卡片 -->
|
<div class="mt-20 mx-17 pt-24 px-14 flex h-120 box-border bgimg">
|
<div class="w-50 h-50 rounded-full">
|
<van-icon name="contact" size="50" color="#fff" />
|
<!-- <img :src="userStore.userInfo.avatar" alt=""> -->
|
</div>
|
<div class="text-white flex-1 ml-9">
|
<div class="text-24 font-bold">{{ userStore.userInfo.username }}</div>
|
<div class="flex">
|
<div class="text-14">ID: {{ userStore.userInfo.usercode }}</div>
|
</div>
|
<!-- <div class="text-10 block">信用分: 100</div> -->
|
</div>
|
</div>
|
|
<!-- 账户详情部分 -->
|
<div class="mt-20 px-17">
|
<div class="text-22 font-medium">{{ t('账号') }} {{ t('详情') }}</div>
|
<div class="mt-15 p-15 rounded-15 bg-#f5f7f9">
|
<div v-for="(item, index) in accountItems" :key="index" class="flex items-center justify-between text-16"
|
:class="{ 'mt-15': index > 0 }" @click="onRoute(item.path)">
|
<div class="flex items-center">
|
<img :src="`${item.icon}`" class="w-20 h-20">
|
<div class="ml-10">{{ item.title }}</div>
|
</div>
|
<div v-if="item.status" class="text-gray-400 text-14 py-5">
|
{{ item.status }}
|
</div>
|
<div v-else class="i-material-symbols:arrow-right-rounded text-20 text-gray-400">
|
<!---->
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 帮助和支持部分 -->
|
<div class="mt-20 px-17">
|
<div class="text-22 font-medium">{{ t('帮助') }}</div>
|
<div class="mt-15 p-15 rounded-15 bg-#f5f7f9">
|
<div v-for="(item, index) in helpItems" :key="index" class="flex items-center justify-between text-16"
|
:class="{ 'mt-15': index > 0 }" @click="onRoute(item.path)">
|
<div v-if="item.button" class="flex items-center" @click="loginOut">
|
<img :src="`${item.icon}`" class="w-20 h-20">
|
<div class="ml-10">{{ item.title }}</div>
|
</div>
|
<div v-else class="flex items-center">
|
<img :src="`${item.icon}`" class="w-20 h-20">
|
<div class="ml-10">{{ item.title }}</div>
|
</div>
|
<div class="i-material-symbols:arrow-right-rounded text-20 text-gray-400">
|
<!---->
|
</div>
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { reactive, onMounted, ref, computed } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { _getIdentify, _getKycHighLevel, _logOut } 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'
|
const { t } = useI18n()
|
const { toClipboard } = useClipboard();
|
|
const router = useRouter()
|
const userStore = useUserStore()
|
const status = ref([t('未认证'), t("审核中"), t("已认证"), t("审核未通过")])
|
const kycHighStatus = ref(null)
|
// kyc_status
|
|
// 账户详情选项数据
|
const accountItems = ref([
|
// { icon: 'icon-option.png', title: '貨幣訂單' , path: '/position/index'},
|
{ icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: t('hbdhdd'), path: '/cryptos/deliveryContractHistory?symbol=USDSGD&type=forex' },
|
{ icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: t('whjydd'), path: '/cryptos/tradeRecord/USDSGD/?type=forex' },
|
{ icon: new URL('../../assets/img/icon-option.png', import.meta.url), title: t('账变记录'), path: '/cryptos/accountChange' },
|
// { icon: new URL('../../assets/img/icon-wallet.png', import.meta.url), title: t('银行卡'), path: '/payMentMethod/list'},
|
{ icon: new URL('../../assets/img/icon-real.png', import.meta.url), title: t('实名认证'), status: status.value[userStore.userInfo.kyc_status], path: '/certificationCenter' },
|
{ icon: new URL('../../assets/img/icon-small-language.png', import.meta.url), title: t('语言'), status: JSON.parse(localStorage.getItem('lang_tit')), path: '/language' },
|
{ icon: new URL('../../assets/img/icon-small-password.png', import.meta.url), title: t('修改密码'), path: '/changePassword' },
|
{ icon: new URL('../../assets/img/icon-small-password.png', import.meta.url), title: t('修改资金密码'), path: '/changeFundsPassword' }
|
]);
|
|
// 帮助和支持选项数据
|
const helpItems = ref([
|
// { icon: 'icon-market.png', title: '市場模式' },
|
// 客服
|
{ icon: new URL('../../assets/img/icon-service.png', import.meta.url), title: t('onLineService'), path: '/customerService' },
|
// { icon: 'icon-service.png', title: '專屬客服' },
|
{ icon: new URL('../../assets/img/icon-about.png', import.meta.url), title: t('关于我们'), path: '/aboutUs' },
|
// { icon: 'icon-logout.png', title: '下載 APP' },
|
{ icon: new URL('../../assets/img/icon-logout.png', import.meta.url), title: t('退出'), path: '/aaa', button: true }
|
]);
|
|
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) => {
|
console.log(path, userStore)
|
if (!userStore.userInfo || !userStore.userInfo.token) {
|
router.push('/login')
|
return
|
}
|
if (path == '/aaa') {
|
loginOut()
|
} else {
|
router.push(path)
|
}
|
}
|
onMounted(() => {
|
if (userStore.userInfo && userStore.userInfo.token) {
|
getIdentify()
|
getKycHighLevel()
|
}
|
})
|
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' }
|
]
|
},
|
// {
|
// title: t('用户'), list: [
|
// { icon: 'link-o', title: t('邀请推广'), path: '/promote' },
|
// ]
|
// },
|
{
|
title: t('更多'), list: [
|
{ icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('帮助中心'), path: '/helpCenter' },
|
{ icon: new URL('../../assets/image/assets-center/aboutUs.png', import.meta.url), 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 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>
|
// @import '@/assets/css/deepseek_css_20250625_30ff932.css';
|
@import '@/assets/css/deepseek_css_20250625_30ff932.css';
|
|
.bgimg {
|
background: url('@/assets/imgs/bg-account.png') 0% 0% / cover;
|
}
|
|
:deep(.van-cell-group__title) {
|
background: $main2_background !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;
|
}
|
|
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>
|
