<template>
|
<div class="certificationCenter">
|
<assets-head :title="$t('认证中心')"></assets-head>
|
<div class="top px-32 pt-26 pb-42">
|
<div class="font-52 textColor flex justify-between">
|
<div>{{ $t("个人中心") }}</div>
|
<!-- <div v-if="nationality" class="w-60 h-60 rounded-full icon iti-flag" :class="nationality" style="transform: scale(2.1)"></div> -->
|
</div>
|
<div class="flex">
|
<div class="flex items-center mt-32 px-28 py-8 bgDark rounded-full">
|
<img
|
src="../../assets/image/certificationCenter/cftIcon.png"
|
alt=""
|
class="w-64 h-64"
|
/>
|
<span class="ml-10 font-32 textColor3" @click="show = true">{{
|
$t("查看当前功能")
|
}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="contentBox pt-46 tabBackground pb-64">
|
<div class="btnBox px-32 flex">
|
<div
|
class="textColor3 px-44 h-100 rounded-full bgDark flex items-center"
|
:class="{ activeStyle: active == 0 }"
|
@click="changeTab(0)"
|
>
|
<img
|
v-if="identityverif"
|
src="../../assets/image/certificationCenter/finishIcon.png"
|
alt=""
|
class="w-48 h-48 mr-14"
|
/>
|
<span>{{ $t("进阶认证") }}</span>
|
</div>
|
<div
|
class="textColor3 px-44 h-100 rounded-full bgDark ml-28 flex items-center"
|
:class="{ activeStyle: active == 1 }"
|
@click="changeTab(1)"
|
>
|
<img
|
v-if="advancedverif"
|
src="../../assets/image/certificationCenter/finishIcon.png"
|
alt=""
|
class="w-48 h-48 mr-14"
|
/>
|
<span>{{ $t("公证认证") }}</span>
|
</div>
|
</div>
|
<div v-show="active == 0">
|
<div class="flex pl-32 justify-between mt-54">
|
<div class="textColor font-36">{{ $t("要求") }}</div>
|
<div
|
class="font-28 flex items-center py-12 px-14 border-radius-left"
|
:class="{
|
status0: kyc_status == 0 || kyc_status == 3,
|
status1: kyc_status == 1,
|
status2: kyc_status == 2,
|
}"
|
>
|
<img
|
:src="
|
require(`../../assets/image/certificationCenter/status${kyc_status}.png`)
|
"
|
class="w-32 h-32"
|
alt=""
|
/>
|
<span class="font-28 ml-12">{{ fixState(kyc_status) }}</span>
|
</div>
|
</div>
|
<div class="px-32">
|
<div class="flex items-center mt-34 font-30 textColor">
|
<img
|
src="../../assets/image/certificationCenter/info.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24 textColor">{{ $t("个人信息") }}</span>
|
</div>
|
<div class="flex items-center mt-40 font-30 textColor">
|
<img
|
src="../../assets/image/certificationCenter/identity.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24 textColor">{{ $t("政府发行的身份证") }}</span>
|
</div>
|
</div>
|
<div class="px-32">
|
<div class="font-36 textColor mt-82">{{ $t("功能与限制") }}</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 items-center text-grey font-30 mt-64">
|
<img
|
src="../../assets/image/certificationCenter/suditIcon.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24">{{ $t("审核时间:3天") }}</span>
|
</div>
|
<div class="px-32 text-red font-20">
|
<p v-show="kyc_status == 3">
|
{{ this.$t("认证驳回：") }}{{ turnDownMsg }}
|
</p>
|
</div>
|
<div
|
class="rounded-lg py-26 text-center mt-16"
|
:class="
|
kyc_status == 0 || kyc_status == 3
|
? 'btnMain text-white'
|
: 'bgDark text-grey'
|
"
|
@click="$router.push('/authentication')"
|
>
|
{{ fixBtnState(kyc_status) }}
|
</div>
|
</div>
|
</div>
|
<div v-show="active == 1">
|
<div class="flex pl-32 justify-between mt-54">
|
<div class="textColor font-36">{{ $t("要求") }}</div>
|
<div
|
class="font-28 flex items-center py-12 px-14 border-radius-left"
|
:class="{
|
status0: advStatus == 0 || advStatus == 3,
|
status1: advStatus == 1,
|
status2: advStatus == 2,
|
}"
|
>
|
<img
|
:src="
|
require(`../../assets/image/certificationCenter/status${advStatus}.png`)
|
"
|
class="w-32 h-32"
|
alt=""
|
/>
|
<span class="font-28 ml-12">{{ fixState(advStatus) }}</span>
|
</div>
|
</div>
|
<div class="px-32">
|
<div class="flex items-center mt-34 font-30 textColor">
|
<img
|
src="../../assets/image/certificationCenter/address.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24 textColor">{{ $t("家庭地址") }}</span>
|
</div>
|
<div class="flex items-center mt-34 font-30 textColor">
|
<img
|
src="../../assets/image/certificationCenter/address.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24 textColor">{{ $t("工作地址") }}</span>
|
</div>
|
<div class="flex items-center mt-40 font-30 textColor">
|
<img
|
src="../../assets/image/certificationCenter/connect.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24 textColor">{{ $t("亲属联系方式") }}</span>
|
</div>
|
</div>
|
<div class="px-32">
|
<div class="font-36 textColor mt-82">{{ $t("功能与限制") }}</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 items-center text-grey font-30 mt-64">
|
<img
|
src="../../assets/image/certificationCenter/suditIcon.png"
|
class="w-36 h-36"
|
alt=""
|
/>
|
<span class="ml-24">{{ $t("公证时间为1-30个工作日") }}</span>
|
</div>
|
<div
|
class="btnMain rounded-lg py-26 text-center mt-16"
|
:class="
|
advStatus == 0 || advStatus == 3
|
? 'btnMain text-black'
|
: 'bgDark text-grey'
|
"
|
@click="$router.push('/advancedCtf')"
|
>
|
{{ fixBtnState(advStatus) }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<van-popup
|
v-model="show"
|
position="bottom"
|
:close-on-click-overlay="false"
|
@close="onClose"
|
>
|
<div class="pop-box relative mainBackground pb-46 px-32">
|
<img
|
src="@/assets/image/icon-close.png"
|
class="w-38 h-38 absolute right-20 top-46"
|
@click="onClose"
|
/>
|
<div class="pt-46 textColor font-40 mb-20">
|
{{ $t("您当前拥有的功能") }}
|
</div>
|
<div
|
class="pb-32 pt-32 border-b-color"
|
v-for="(item, index) in currentList"
|
:key="index"
|
>
|
<div class="font-32 text-grey flex items-center">
|
<img
|
:src="
|
require(`../../assets/image/certificationCenter/${item.icon}.png`)
|
"
|
class="w-36 h-36 mr-24"
|
alt=""
|
/>
|
<span class="textColor mr-10">{{ item.title }}</span>
|
<span>{{ item.des }}</span>
|
</div>
|
<div
|
class="text-grey font-30 mt-36 pl-60"
|
v-for="(str, index) in item.arr"
|
:class="{ colorMain: index == 1 }"
|
:key="index"
|
>
|
{{ str }}
|
</div>
|
</div>
|
<div
|
class="btnMain text-black font-34 py-26 rounded-lg text-center mt-68"
|
@click="onClose"
|
>
|
{{ $t("确认") }}
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import contentCom from "./contentCom.vue";
|
import { Popup } from "vant";
|
import { _getIdentify } from "@/API/fund.api";
|
import Axios from "@/API/userCenter";
|
export default {
|
props: {},
|
components: {
|
[Popup.name]: Popup,
|
assetsHead,
|
contentCom,
|
},
|
data() {
|
return {
|
turnDownMsg: "",
|
show: false,
|
active: 0,
|
kyc_status: 0, //初级认证0未认证 ，1审核中 ，2审核通过，3审核未通过
|
advStatus: 0, //高级认证
|
identityverif: false, //初级认证
|
advancedverif: false, //高级认证
|
nationality: "",
|
coinObj: {
|
title: this.$t("法币限额"),
|
list: [
|
{
|
left: this.$t("充值"),
|
// right: this.$t('$50K 每日')
|
},
|
{
|
left: this.$t("提现"),
|
// right: this.$t('$50K 每日')
|
},
|
],
|
},
|
c2cObj: {
|
title: this.$t("C2C交易限额"),
|
list: [
|
{
|
left: "C2C",
|
right: this.$t("无限额"),
|
},
|
],
|
},
|
currencyObj: {
|
title: this.$t("加密货币限额"),
|
list: [
|
{
|
left: this.$t("充值"),
|
right: this.$t("无限额"),
|
},
|
{
|
left: this.$t("提现"),
|
right: this.$t("8M 每日"),
|
},
|
],
|
},
|
advCoinObj: {
|
title: this.$t("法币限额"),
|
list: [
|
{
|
left: this.$t("充值"),
|
right: this.$t("$100K 每日"),
|
},
|
{
|
left: this.$t("提现"),
|
right: this.$t("$100K 每日"),
|
},
|
],
|
},
|
advC2cObj: {
|
title: this.$t("C2C交易限额"),
|
list: [
|
{
|
left: "C2C",
|
right: this.$t("无限额"),
|
},
|
],
|
},
|
advCurrencyObj: {
|
title: this.$t("加密货币限额"),
|
list: [
|
{
|
left: this.$t("充值"),
|
right: this.$t("无限额"),
|
},
|
{
|
left: this.$t("提现"),
|
right: this.$t("16M 每日"),
|
},
|
],
|
},
|
currentList: [],
|
ownList: [
|
{
|
icon: "1",
|
title: "$50K",
|
des: this.$t("每日"),
|
arr: [this.$t("法币充值 & 提现限额")],
|
},
|
{
|
icon: "2",
|
title: this.$t("无限额"),
|
des: "",
|
arr: [this.$t("数字货币充值"), this.$t("提高限额")],
|
},
|
{
|
icon: "3",
|
title: "8M USDT",
|
des: this.$t("每日"),
|
arr: [this.$t("数字货币提现限额")],
|
},
|
{
|
icon: "4",
|
title: this.$t("无限额"),
|
des: "",
|
arr: [this.$t("C2C交易限额")],
|
},
|
{
|
icon: "5",
|
title: "OTC",
|
des: "",
|
arr: [this.$t("其他功能")],
|
},
|
],
|
advOwnList: [
|
{
|
icon: "1",
|
title: "$100K",
|
des: this.$t("每日"),
|
arr: [this.$t("法币充值 & 提现限额")],
|
},
|
{
|
icon: "2",
|
title: this.$t("无限额"),
|
des: "",
|
arr: [this.$t("数字货币充值"), this.$t("提高限额")],
|
},
|
{
|
icon: "3",
|
title: "16M USDT",
|
des: this.$t("每日"),
|
arr: [this.$t("数字货币提现限额")],
|
},
|
{
|
icon: "4",
|
title: this.$t("无限额"),
|
des: "",
|
arr: [this.$t("C2C交易限额")],
|
},
|
{
|
icon: "5",
|
title: "OTC",
|
des: "",
|
arr: [this.$t("其他功能")],
|
},
|
],
|
};
|
},
|
created() {
|
this.currentList = this.ownList;
|
this.getLocaluserAction();
|
this.getIdentify();
|
},
|
methods: {
|
changeTab(index) {
|
this.active = index;
|
if (index == 0) {
|
this.currentList = this.ownList;
|
} else {
|
this.currentList = this.advOwnList;
|
}
|
},
|
onClose() {
|
this.show = false;
|
},
|
getLocaluserAction() {
|
Axios.localuserAction().then((res) => {
|
this.identityverif = res.data.identityverif;
|
this.advancedverif = res.data.advancedverif;
|
this.nationality = res.data.nationality;
|
this.kyc_status = res.data.kyc_status;
|
this.advStatus = res.data.kyc_high_level_status;
|
});
|
},
|
getIdentify() {
|
_getIdentify().then((data) => {
|
this.turnDownMsg = data.msg;
|
});
|
},
|
fixState(kyc_status) {
|
let str = "";
|
if (kyc_status == 0) {
|
str = this.$t("未认证");
|
} else if (kyc_status == 1) {
|
str = this.$t("审核中");
|
} else if (kyc_status == 2) {
|
str = this.$t("已认证");
|
} else {
|
str = this.$t("未认证");
|
}
|
return str;
|
},
|
fixBtnState(kyc_status) {
|
let str = "";
|
if (kyc_status == 0) {
|
str = this.$t("开始认证");
|
} else if (kyc_status == 1) {
|
str = this.$t("审核详情");
|
} else if (kyc_status == 2) {
|
str = this.$t("认证详情");
|
} else {
|
str = this.$t("开始认证");
|
}
|
return str;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.certificationCenter {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.contentBox {
|
border-top-left-radius: 40px;
|
border-top-right-radius: 40px;
|
}
|
|
.btnBox {
|
.activeStyle {
|
@include themify() {
|
background: themed("btn_main") !important;
|
}
|
|
color: #fff !important;
|
}
|
}
|
|
.status0 {
|
background: #ffeaec;
|
color: #e35461;
|
}
|
|
.status1 {
|
background: #ffeaec;
|
color: #dbae18;
|
}
|
|
.status2 {
|
background: #e6f6f0;
|
color: #03a66d;
|
}
|
|
.status3 {
|
background: #ffeaec;
|
color: #e35461;
|
}
|
|
.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;
|
}
|
</style>
|
