From 9a9d832dbd364557e070abcd9a7779a2c6c07ffb Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Tue, 20 Jan 2026 17:35:13 +0800
Subject: [PATCH] 1
---
src/views/my/index.vue | 382 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 246 insertions(+), 136 deletions(-)
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index 934dd8a..57fcf5b 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -1,173 +1,253 @@
<template>
- <section class="my-index" >
- <!-- <fx-header :back="false" :title="$t('my')">
+ <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>
- </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>
+ </assets-head>
<div class="px-8 mt-4">
<h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
- $t('welcome')
+ $t('welcome')
}} {{ $title }}!
</h1>
- <p class="sub-text" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{ $t('全球最大的区块链资产平台') }}</p>
+ <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>
+ <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>
+ <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 class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{$t('信用分')}} : {{userdata.creditScore}}</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>
+ <!-- <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 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 @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 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 @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 />
+ <!-- <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 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">-->
+ <!-- <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">
- <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 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 } from "@/service/user.api.js";
-import { useUserStore } from '@/store/user';
-import { useI18n } from "vue-i18n";
+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 {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 {t} = useI18n()
+const {toClipboard} = useClipboard();
const router = useRouter()
const userStore = useUserStore()
-const customer_service_url = ref(null)
+const customer_service_url = ref(store.state.user.customer_service_url)
const status = ref(null)
const kycHighStatus = ref(null)
const userdata = ref({})
-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 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)
+ 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()
+ getinfo()
+
+ } else {
+ router.push('/login')
}
})
const cellList = computed(() => {
@@ -182,14 +262,35 @@
// },
{
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: 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/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'},
]
}
]
@@ -197,9 +298,17 @@
return [
{
title: t('universal'), list: [
- { icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('language'), path: '/language' },
+ {
+ 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' },
+ {
+ icon: new URL('../../assets/image/assets-center/aboutUs.png', import.meta.url),
+ title: t('onLineService'),
+ path: '/customerService'
+ },
]
},
@@ -211,8 +320,9 @@
// }
]
}
-
})
+
+// 退出登录
const loginOut = () => {
_logOut({
token: userStore.userInfo.token
@@ -221,14 +331,7 @@
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 被正确声明
@@ -236,16 +339,20 @@
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);
@@ -257,6 +364,7 @@
</script>
<style lang="scss" scoped>
+
:deep(.van-cell-group__title) {
// background: $main2_background !important;
background: $inp-b !important;
@@ -320,9 +428,11 @@
.label_item {
width: 33%;
font-size: 12px;
- div{
- text-align: center;
- }
+
+ div {
+ text-align: center;
+ }
+
img {
width: 32%;
margin-bottom: 3px;
@@ -363,7 +473,7 @@
.name {
font-size: 16px;
- line-height: 20px;
+ font-weight: 500;
}
.yellow {
@@ -398,4 +508,4 @@
height: 20px;
margin-right: 10px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3