From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/views/certificationCenter/index.vue | 767 ++++++++++++----------------------------------------------
1 files changed, 157 insertions(+), 610 deletions(-)
diff --git a/src/views/certificationCenter/index.vue b/src/views/certificationCenter/index.vue
index 7962e56..db8360a 100644
--- a/src/views/certificationCenter/index.vue
+++ b/src/views/certificationCenter/index.vue
@@ -1,651 +1,198 @@
<template>
<div class="certificationCenter">
- <fx-header @back="loginOut">
+ <fx-header :back="false" @back="loginOut">
<template #title>
- {{ $t('certificationCenter') }}
+ <span>{{$t('实名认证')}}</span>
</template>
</fx-header>
- <div class="box">
- <div class="justify-between1 flex user-info">
- <div>{{ $t('personalCenter') }}</div>
- <div v-if="nationality" class="iti-flag" :class="nationality" style="transform: scale(2.1)"></div>
+
+ <div class="kyc-body">
+ <!-- 用户信息卡片：邮箱 + personal -->
+ <div class="kyc-user-card">
+ <div class="kyc-user-email">{{ userEmail || '–' }}</div>
+ <div class="kyc-user-label">{{ $t('personalCenter') }}</div>
</div>
- <div class="flex">
- <div class="gn flex">
- <img src="../../assets/image/idImg/cftIcon.png" alt="" class="w-64 h-64">
- <span class="gn-span" @click="showClick">{{ $t('viewCurrentFeatures') }}</span>
+
+ <!-- Primary 认证卡片 -->
+ <div class="kyc-card">
+ <div class="kyc-card-title-row">
+ <span class="kyc-card-title">{{ $t('Primary') }}</span>
+ <span v-if="kyc_status === 1" class="kyc-card-title-status">{{ $t('underReview') }}</span>
+ </div>
+ <div class="kyc-card-desc">{{ $t('kycPrimaryDesc') }}</div>
+ <div
+ class="kyc-btn"
+ :class="kyc_status === 1 ? 'kyc-btn--disabled' : 'kyc-btn--active'"
+ @click="kyc_status !== 1 && openUlr(1)"
+ >
+ {{ fixBtnState(kyc_status) }}
+ </div>
+ </div>
+
+ <!-- Senior 认证卡片 -->
+ <div class="kyc-card">
+ <div class="kyc-card-title">{{ $t('Senior') }}</div>
+ <div class="kyc-card-desc">{{ $t('kycSeniorDesc') }}</div>
+ <div
+ class="kyc-btn"
+ :class="primaryVerified ? 'kyc-btn--active' : 'kyc-btn--disabled'"
+ @click="primaryVerified && openUlr(2)"
+ >
+ {{ primaryVerified ? fixBtnState(advStatus) : $t('kycCompletePrimaryFirst') }}
</div>
</div>
</div>
- <div class="contentBox pt-5 tabBackground pb-5">
- <!-- <div class="btnBox2">
- <div class="textColor4 textColor5 flex" style="justify-content: center;align-items: center;"
- :class="{ 'activeStyle': active == 0 }" @click="changeTab(0)">
- <img v-if="identityverif" src="../../assets/image/idImg/finishIcon.png" alt="" class="w-10 h-10 mr-2" />
- <img v-else src="../../assets/image/idImg/finishIcon1.png" alt="" class="w-10 h-10 mr-2" />
- <span>{{ $t('primaryCertification') }}</span>
- </div>
- <div class="textColor4 flex" style="justify-content: center;align-items: center;"
- :class="{ 'activeStyle': active == 1 }" @click="changeTab(1)">
- <img v-if="identityverif" src="../../assets/image/idImg/finishIcon.png" alt="" class="w-10 h-10 mr-2" />
- <img v-else src="../../assets/image/idImg/finishIcon1.png" alt="" class="w-10 h-10 mr-2" />
- <span>{{ $t('advancedCertification') }}</span>
- </div>
- </div> -->
- <div v-show="active == 0">
- <div class="justify-between23">
- <div class="textColor1">{{ $t('require') }}</div>
- <div class="border-radius-left textColor2 yaoqu flex"
- :class="{ 'status0': kyc_status == 0 || kyc_status == 3, 'status1': kyc_status == 1, 'status2': kyc_status == 2 }">
- <img :src="handImg(`status${kyc_status}`)" alt="" />
- <span class="textColor-span font-28 flex items-center">{{
- fixState(kyc_status)
- }}</span>
- </div>
- </div>
- <div class="px-32-1">
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/info.png" alt="" />
- <span class="textColor textColor666">{{ $t('information') }}</span>
- </div>
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/identity.png" alt="" />
- <span class="textColor textColor666">{{ $t('governmentIssuedID') }}</span>
- </div>
- </div>
- <div class="px-32-1 px-32-2">
- <!-- <div class="font-36 textColor mt-82 span32">{{ $t('featuresAndLimitations') }}</div>
- <content-com class="mt-40" :contentObj="coinObj" :state="identityverif"></content-com>
- <content-com class="mt-40" :contentObj="c2cObj" :state="identityverif"></content-com>
- <content-com class="mt-40" :contentObj="currencyObj" :state="identityverif"></content-com>
- <div class="flex text-grey font-30 mt-64">
- <img src="../../assets/image/idImg/suditIcon.png" alt="" />
- <span class="ml-24">{{ $t('reviewTime') }}:{{ $t('thereDays') }}</span>
- </div>
- <div class=" text-red font-20">
- <p v-show="(kyc_status == 3)">{{ $t('certificationRefusal') }}:{{ turnDownMsg }}</p>
- </div> -->
- <div class="rounded-lg py-26 text-center btn"
- :class="kyc_status == 0 || kyc_status == 3 ? 'btnMain text-white' : 'bgDark text-grey'" @click="openUlr(1)">
- {{
- fixBtnState(kyc_status) }}</div>
- </div>
-
- </div>
- <div v-show="active == 1">
- <div class="justify-between23">
- <div class="textColor1">{{ $t('require') }}</div>
- <div class="border-radius-left textColor2 flex yaoqu"
- :class="{ 'status0': advStatus == 0 || advStatus == 3, 'status1': advStatus == 1, 'status2': advStatus == 2 }">
- <img :src="handImg(`status${advStatus}`)" alt="" />
- <span class="textColor-span font-28 flex items-center">{{ fixState(advStatus) }}</span>
- </div>
- </div>
- <div class="px-32-1">
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/address.png" alt="" />
- <span class="textColor textColor666">{{ $t('familyAddress') }}</span>
- </div>
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/address.png" alt="" />
- <span class="textColor textColor666">{{ $t('workAddress') }}</span>
- </div>
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/connect.png" alt="" />
- <span class=" textColor textColor666">{{ $t('contactRelatives') }}</span>
- </div>
- </div>
- <div class="px-32-1 px-32-2">
- <div class="font-36 textColor mt-82">{{ $t('featuresAndLimitations') }}</div>
- <content-com class="mt-40" :contentObj="advCoinObj" :state="advancedverif"></content-com>
- <content-com class="mt-40" :contentObj="advC2cObj" :state="advancedverif"></content-com>
- <content-com class="mt-40" :contentObj="advCurrencyObj" :state="advancedverif"></content-com>
- <div class="flex text-grey font-30 mt-64">
- <img class="img3" src="../../assets/image/idImg/suditIcon.png" alt="" />
- <span class="ml-24 fs">{{ $t('notaryTime') }}</span>
- </div>
- <div class="btnMain btnMain1 rounded-lg py-26 text-center mt-16"
- :class="advStatus == 0 || advStatus == 3 ? 'btnMain text-black' : 'bgDark'" @click="openUlr(2)">
- {{ fixBtnState(advStatus) }}
- </div>
-
- </div>
- </div>
- </div>
- <van-popup round v-model:show="show" position="bottom" :close-on-click-overlay="false" @close="onClose">
- <div class="pop-box relative mainBackground">
- <img :src="handImg('icon-close')" class=" absolute h-10 w-10 top-46" @click="onClose" />
- <div class="pt-46 textColor font-40 textColor9">{{ $t('hasTheFunction') }}</div>
- <div class=" border-b-color" v-for="(item, index) in currentList" :key="index">
- <div class="font-32 text-grey flex items-center">
- <img :src="handImg(item.icon)" class="tk-img" alt="" />
- <span class="textColor mr-10">{{ item.title }}</span>
- <span>{{ item.des }}</span>
- </div>
- <div class="text-grey text-grey1 font-30 " v-for="(str, index) in item.arr"
- :class="{ 'colorMain': index == 1 }" :key="index">{{ str }}</div>
- </div>
- <div class="btnMain btnMain1 text-white font-34 py-26 rounded-lg text-center mt-68" @click="onClose">{{
- $t('confirm')
- }}</div>
- </div>
- </van-popup>
</div>
</template>
<script setup>
import { _getIdentify, _info } from "@/service/user.api.js";
-import { reactive, onMounted, ref } from 'vue';
-import contentCom from "./contentCom.vue";
-import { useRoute, useRouter } from "vue-router";
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const turnDownMsg = ref('')
-const show = ref(false)
-const active = ref(0)
-const kyc_status = ref(0)
-const advStatus = ref(0)
-const identityverif = ref(false)
-const advancedverif = ref(false)
-const nationality = ref('')
-const coinObj = ref({
- title: t('fiatCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
-const c2cObj = ref({
- title: t('c2cTradeLimit'),
- list: [
- {
- left: 'C2C',
- right: t('unlimited')
- },
- ]
-})
-const currencyObj = ref({
- title: t('cryptoCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
-const advCoinObj = ref({
- title: t('fiatCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
-const advC2cObj = ref({
- title: t('c2cTradeLimit'),
- list: [
- {
- left: 'C2C',
- right: t('unlimited')
- },
- ]
-})
-const advCurrencyObj = ref({
- title: t('cryptoCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
+const { t } = useI18n();
+const router = useRouter();
-const currentList = ref([])
-const ownList = ref([
- {
- icon: '1',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('fiatDepositAndWithdrawalLimit')]
- },
- {
- icon: '2',
- title: t('unlimited'),
- des: '',
- arr: [t('digitalCurrencyRecharge'), t('increaseTheLimit')]
- },
- {
- icon: '3',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('digitalCurrencyWithdrawalLimit')]
- },
- // {
- // icon: '4',
- // title: t('unlimited'),
- // des: '',
- // arr: [t('c2cTradeLimit')]
- // },
- // {
- // icon: '5',
- // title: 'OTC',
- // des: '',
- // arr: [t('otherFunctions')]
- // }
-])
-const advOwnList = ref([
- {
- icon: '1',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('fiatDepositAndWithdrawalLimit')]
- },
- {
- icon: '2',
- title: t('unlimited'),
- des: '',
- arr: [t('digitalCurrencyRecharge'), t('increaseTheLimit')]
- },
- {
- icon: '3',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('digitalCurrencyWithdrawalLimit')]
- },
- {
- icon: '4',
- title: t('unlimited'),
- des: '',
- arr: [t('c2cTradeLimit')]
- },
- {
- icon: '5',
- title: 'OTC',
- des: '',
- arr: [t('otherFunctions')]
- }
-])
-onMounted(() => {
- currentList.value = ownList.value
- getLocaluserAction();
- getIdentify();
-})
-const handImg = (url) => {
- return new URL(`../../assets/image/idImg/${url}.png`, import.meta.url).href
-}
+const userEmail = ref('');
+const kyc_status = ref(0);
+const advStatus = ref(0);
+const turnDownMsg = ref('');
+
+const primaryVerified = computed(() => kyc_status.value === 2);
+
const loginOut = () => {
- router.push('/my/index')
-}
-const changeTab = (index) => {
- active.value = index
- if (index == 0) {
- currentList.value = ownList.value
- } else {
- currentList.value = advOwnList.value
- }
- console.log(currentList);
- console.log(currentList.value);
-}
-const showClick = () => {
- show.value = true
- console.log(show.value);
-}
+ router.push('/my/index');
+};
-const onClose = () => {
- show.value = false
-}
const getLocaluserAction = () => {
_info().then(res => {
- identityverif.value = res.identityverif
- advancedverif.value = res.advancedverif
- nationality.value = res.nationality
- kyc_status.value = res.kyc_status || 0
- advStatus.value = res.kyc_high_level_status || 0
- console.log(advStatus.value);
- })
-}
+ userEmail.value = res.email || res.username || '';
+ kyc_status.value = res.kyc_status ?? 0;
+ advStatus.value = res.kyc_high_level_status ?? 0;
+ }).catch(() => {});
+};
+
const getIdentify = () => {
_getIdentify().then(data => {
- turnDownMsg.value = data.msg;
- })
-}
-const fixState = (kyc_status) => {
- let str = ''
- if (kyc_status == 0) {
- str = t('notCertified')
- } else if (kyc_status == 1) {
- str = t('reviewing')
- } else if (kyc_status == 2) {
- str = t('verified')
- } else {
- str = t('notCertified')
- }
- return str;
-}
-const fixBtnState = (kyc_status) => {
- let str = ''
- if (kyc_status == 0) {
- str = t('authentication')
- } else if (kyc_status == 1) {
- str = t('auditDetails')
- } else if (kyc_status == 2) {
- str = t('certificationDetails')
- } else {
- str = t('authentication')
- }
- return str;
-}
+ turnDownMsg.value = data.msg || '';
+ }).catch(() => {});
+};
+
+const fixBtnState = (status) => {
+ if (status === 0) return t('authentication');
+ if (status === 1) return t('auditDetails');
+ if (status === 2) return t('verified');
+ return t('authentication');
+};
+
const openUlr = (index) => {
- if (index == 1) {
- router.push('/authentication')
- } else {
- router.push('/advancedCtf')
- }
-}
+ if (index === 1) router.push('/authentication');
+ else router.push('/advancedCtf');
+};
+
+onMounted(() => {
+ getLocaluserAction();
+ getIdentify();
+});
</script>
+
<style lang="scss" scoped>
-@import "@/views/authentication/components/intl.css";
-@import '@/assets/theme/index.scss';
-
.certificationCenter {
- width: 100%;
- box-sizing: border-box;
+ min-height: 100vh;
+ background: #f5f5f5;
+ padding-bottom: 2rem;
font-size: 14px;
}
-.btnMain {
- height: 45px !important;
- line-height: 45px !important;
+:deep(.van-nav-bar) {
+ background: #fff !important;
+}
+:deep(.van-nav-bar__title) {
+ color: #333;
+ font-weight: 700;
+}
+:deep(.van-icon) {
+ color: #333;
+}
+
+.kyc-body {
+ padding: 0 1.25rem;
+}
+
+/* 用户信息卡片：白底、圆角、内边距、邮箱加粗、personal 灰色 */
+.kyc-user-card {
+ border-radius: 12px;
+ padding: 1.5rem 1.25rem;
+ margin-bottom: 1rem;
+}
+
+.kyc-user-email {
+ font-size: 16px;
+ font-weight: 700;
+ color: #333;
+ margin-bottom: 0.35rem;
+}
+
+.kyc-user-label {
font-size: 14px;
+ color: #999;
}
-.box {
- padding-left: 2rem;
- padding-right: 2rem;
- padding-bottom: 2.625rem;
-
- @include themify() {
- background-color: themed("c2c_background1");
- }
-
- .user-info {
- overflow: hidden;
- padding: 30px 10px 10px;
- font-size: 16px;
- }
-
+/* 认证卡片：白底、圆角、阴影 */
+.kyc-card {
+ background: #fff;
+ border-radius: 12px;
+ padding: 1.5rem 1.25rem;
+ margin-bottom: 1rem;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
-.justify-between1 {
- height: 2rem;
- line-height: 2rem;
- font-size: 1.5rem;
- padding-top: 1rem;
-}
-
-.gn {
- background: #565b69;
- border-radius: 3rem;
- margin-top: 2rem;
+.kyc-card-title-row {
display: flex;
align-items: center;
- padding-left: 1.75rem;
- padding-right: 1.75rem;
- height: 50px;
- line-height: 50px;
-}
-
-.btnBox2 {
- padding-left: 2rem;
- padding-right: 2rem;
- display: flex;
-}
-
-.textColor4 {
- margin-top: 2rem;
- // background: $light-grey;
- color: $text_color;
- padding: 2px 20px;
- text-align: center;
- height: 40px;
- padding: 10px;
- border-radius: 2.5rem;
- box-sizing: border-box;
- line-height: normal;
-}
-
-.textColor5 {
- margin-right: 2rem;
-}
-
-.justify-between23 {
- padding-left: 2rem;
- padding-right: 2rem;
- margin-top: 2rem;
- display: flex;
-}
-
-.textColor1 {
- height: 3rem;
- line-height: 3rem;
-}
-
-.textColor2 {
- position: absolute;
- right: 0;
- // width: 27%;
-}
-
-.textColor666 {
- margin-left: 1rem;
-}
-
-.px-32-1 {
- padding-left: 2rem;
- padding-right: 2rem;
-}
-
-.contentBox {}
-
-.btnMain {
- background: $btn_main !important;
- border-radius: 0.5rem;
- line-height: 3.4rem;
- height: 3.4rem;
- margin-top: 2rem;
- color: $text_color;
-}
-
-.gn img {
- width: 20px;
- height: 20px;
-}
-
-.textColor-span {
- margin-left: 0;
-}
-
-.span2 {
- font-size: 14px;
- height: 5rem;
- line-height: 2rem;
- margin: 1.5rem 0rem;
-}
-
-.span32 {
- padding-right: 2rem;
- margin-top: 2rem;
-}
-
-.px-32-2 .textColor img {
- width: 2rem;
- height: 2rem;
-}
-
-.btn {
- margin-top: 2rem;
- background: $btn_main;
- border-radius: 0.5rem;
- line-height: 45px;
- height: 45px;
- color: $text_color;
-}
-
-.text-red {
- color: $red;
-}
-
-.mt-64 {
- margin-top: 2rem;
-}
-
-.mt-40-1 {
- height: 2rem;
- line-height: 2rem;
-}
-
-.ml-24 {
- margin-left: 5px;
-}
-
-.px-32-1 img {
- width: 20px;
- height: 20px;
-}
-
-.px-32-2 .mt-40 {
- margin-top: 0;
-}
-
-
-.activeStyle {
- background: $btn_main;
- color: $text_color;
-}
-
-.status0 {
- background: $cont_background;
- color: $red;
-}
-
-.status1 {
- background: $cont_background;
- color: #DBAE18;
-}
-
-.status2 {
- background: #E6F6F0;
- color: #03A66D;
-}
-
-.status3 {
- background: $cont_background;
- color: $red;
-}
-
-.fs {
- font-size: 14px;
- margin-left: 10px;
- color: $text_color1;
- ;
-}
-
-.text-grey .img3 {
- width: 20px;
- height: 20px;
-}
-
-.border-radius-left {
- border-top-left-radius: 40px;
- border-bottom-left-radius: 40px;
-}
-
-.van-popup.van-popup--bottom {
- border-top-left-radius: 30px;
- border-top-right-radius: 30px;
-}
-
-.yaoqu {
- height: 40px;
- line-height: 40px;
- padding: 0 10px;
-}
-
-.yaoqu img {
- width: 20px;
- height: 20px;
- margin-top: 10px;
- margin-right: 5px;
-}
-
-.tk-img {
- width: 20px;
- height: 20px;
-}
-
-.mainBackground {
- padding: 1rem 1rem;
-}
-
-.text-grey {
- margin-top: 15px;
-}
-
-.textColor9 {
- height: 4rem;
- line-height: 4rem;
-}
-
-.absolute {
- margin-top: 0.9rem;
- right: 1rem;
-}
-
-.text-grey1 {
- margin-left: 3rem;
- font-size: 14px;
- color: $text_color1 !important;
-
-}
-
-.colorMain {
- color: $color_main !important;
-}
-
-.mr-10 {
- margin-right: 0.5rem;
- margin-left: 1rem;
-}
-
-.user-info {
justify-content: space-between;
- align-items: center;
+ margin-bottom: 0.5rem;
+}
+.kyc-card-title {
+ font-size: 16px;
+ font-weight: 700;
+ color: #333;
+}
+.kyc-card-title-status {
+ font-size: 14px;
+ font-weight: 600;
+ color: #f97316;
}
-.border-b-color {
- padding-bottom: 10px;
- border-bottom: 1px solid $border_color;
+.kyc-card-desc {
+ font-size: 14px;
+ color: #999;
+ margin-bottom: 1.25rem;
+ line-height: 1.4;
}
-</style>
\ No newline at end of file
+
+/* 按钮：圆角、全宽、字体 14px */
+.kyc-btn {
+ height: 45px;
+ line-height: 45px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 600;
+ border-radius: 999px;
+ border: none;
+ width: 100%;
+}
+
+.kyc-btn--active {
+ color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #b855d4);
+ cursor: pointer;
+}
+
+.kyc-btn--disabled {
+ color: rgba(255, 255, 255, 0.85);
+ background: linear-gradient(90deg, #d4c5f0, #e8c8e8);
+ cursor: not-allowed;
+}
+</style>
--
Gitblit v1.9.3