<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>
|
