<template>
|
<!-- 申请身份认证 -->
|
<div style="padding-bottom: 30px" class="font-26 authentication">
|
<assets-head :title="$t('进阶认证')" />
|
<!-- <country-list /> -->
|
<div v-if="show">
|
<div
|
class="pt-58 pb-54 box-border border-b-color"
|
v-if="disabled() || status === 3"
|
>
|
<div class="flex justify-between items-center px-30 textColor">
|
<div class="font-50">{{ $t("身份认证") }}</div>
|
<div class="flex items-center" v-if="resultArr[this.status]">
|
<img
|
:src="
|
require(`@/assets/image/assets-center/${
|
resultArr[this.status] && resultArr[this.status].split('_')[0]
|
}.png`)
|
"
|
alt="success img"
|
class="w-36 h-36"
|
/>
|
<div class="font-32 ml-18">
|
{{
|
resultArr[this.status] && resultArr[this.status].split("_")[1]
|
}}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pl-30 pr-30">
|
<div class="mb-40">
|
<div class="mt-54 mb-25 font-24 textColor">{{ $t("国籍") }}</div>
|
<div
|
class="pt-28 pb-28 pl-38 pr-38 flex justify-between items-center rounded inputBackground textColor"
|
@click="openBtn"
|
>
|
<div class="flex items-center">
|
<!-- <div class="iti-flag mr-20" :class="countryCode" style="transform: scale(2.1)"></div> -->
|
<div>{{ countryName }}</div>
|
</div>
|
|
<img
|
v-if="resultArr.length === 0"
|
src="../../assets/image/public/down-arrow.png"
|
class="w-33 h-20"
|
alt="arrow"
|
/>
|
</div>
|
</div>
|
<ExInput
|
:label="$t('真实姓名')"
|
:disabled="disabled()"
|
:clearBtn="!disabled()"
|
:placeholderText="$t('请输入真实姓名')"
|
v-model="name"
|
/>
|
<ExInput
|
:label="$t('证件/护照号码')"
|
:disabled="disabled()"
|
:clearBtn="!disabled()"
|
:placeholderText="$t('请输入您的证件/护照号码')"
|
v-model="idnumber"
|
/>
|
<div>
|
<div v-if="resultArr.length > 0" class="mt-4 mb-25 textColor">
|
{{ $t("证件照/上传护照") }}
|
</div>
|
<div v-else class="mt-4 mb-25 textColor">
|
{{ $t("证件/护照认证图片上传") }}
|
</div>
|
<div class="flex mt-33 mb-80 justify-between">
|
<div
|
class="flex-1 flex flex-col text-center justify-center items-center"
|
>
|
<div class="upload-wrap">
|
<img
|
src="@/assets/image/kyc/0.png"
|
alt=""
|
class="w-full"
|
v-if="[1, 2].includes(status) && frontFile.length === 0"
|
/>
|
<van-uploader
|
v-model="frontFile"
|
multiple
|
:max-count="1"
|
:disabled="disabled()"
|
:deletable="!disabled()"
|
:after-read="afterRead"
|
@click-upload="onClickUpload('frontFile')"
|
v-else
|
/>
|
</div>
|
<div class="mt-32 font-26 h-20" style="color: #868d9a">
|
{{ $t("证件正面") }}
|
</div>
|
</div>
|
<div
|
class="flex-1 flex flex-col text-center justify-center items-center"
|
>
|
<div class="upload-wrap">
|
<img
|
src="@/assets/image/kyc/1.png"
|
alt=""
|
class="w-full"
|
v-if="[1, 2].includes(status) && reverseFile.length === 0"
|
/>
|
<van-uploader
|
v-model="reverseFile"
|
multiple
|
:max-count="1"
|
:disabled="disabled()"
|
:deletable="!disabled()"
|
:after-read="afterRead"
|
@click-upload="onClickUpload('reverseFile')"
|
v-else
|
/>
|
</div>
|
<div class="mt-32 font-26 h-20" style="color: #868d9a">
|
{{ $t("证件反面") }}
|
</div>
|
</div>
|
<!-- <div
|
class="flex-1 flex flex-col text-center justify-center items-center"
|
>
|
<div class="upload-wrap">
|
<img
|
src="@/assets/image/kyc/2.png"
|
alt=""
|
class="w-full"
|
v-if="[1, 2].includes(status) && fileList.length === 0"
|
/>
|
<van-uploader
|
v-model="fileList"
|
multiple
|
:max-count="1"
|
:disabled="disabled()"
|
:deletable="!disabled()"
|
:after-read="afterRead"
|
@click-upload="onClickUpload('fileList')"
|
v-else
|
/>
|
</div>
|
<div class="mt-32 font-26 h-20" style="color: #868d9a">
|
{{ $t("手持证件照") }}
|
</div>
|
</div> -->
|
</div>
|
</div>
|
<template v-if="!disabled()">
|
<div class="font-35 mb-32 textColor">{{ $t("拍摄示例") }}</div>
|
<img
|
src="../../assets/image/kyc/kyc-demo.png"
|
alt=""
|
style="width: 100%; height: auto"
|
class="w-756 h-220 mb-100"
|
/>
|
</template>
|
<button
|
class="apply-btn btnMain text-white font-35 h-100 rounded"
|
@click="onSubmit"
|
v-if="!disabled()"
|
>
|
{{ $t("申请认证") }}
|
</button>
|
<div class="pt-35 pb-60 font-30" v-if="!disabled() || status === 3">
|
<span class="text-grey">{{
|
$t("上传证件照失败，请联系客服获取邮箱地址发送证件照或者重新上传")
|
}}</span>
|
<!-- <span class="text-blue service-text" @click="tokefu">
|
{{ $t("联系客服") }}</span
|
> -->
|
</div>
|
<nationality-list
|
ref="controlChild"
|
:title="$t('请选择国家')"
|
@getName="getName(arguments)"
|
v-if="!disabled()"
|
>
|
</nationality-list>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { ActionSheet,Search } from 'vant';
|
import assetsHead from "@/components/assets-head";
|
import nationalityList from "./components/nationalityList.vue";
|
import { Uploader } from "vant";
|
import { _uploadImage, _applyIdentify, _getIdentify } from "@/API/fund.api";
|
// import CountryList from '@/components/country-list' // 我页不知道为啥要先调用这个，先放着
|
import countries from "./components/countryList";
|
import ExInput from "@/components/ex-input";
|
import { mapActions } from "vuex";
|
export default {
|
name: "AuthenticationPage",
|
components: {
|
assetsHead,
|
nationalityList,
|
[Uploader.name]: Uploader,
|
ExInput,
|
// CountryList
|
},
|
data() {
|
return {
|
countryName: this.$t("请选择国家"), //国家名称
|
countryCode: "af", //国家地区号
|
idnumber: "",
|
name: "",
|
frontFile: [],
|
reverseFile: [],
|
fileList: [],
|
curFile: "frontFile",
|
status: "", // 0
|
imgs: [],
|
idcard_path_front_path: "",
|
idcard_path_back_path: "",
|
idcard_path_hold_path: "",
|
resultArr: [
|
"small-success_" + this.$t("已申请未审核"),
|
"identifing_" + this.$t("审核中"),
|
"small-success_" + this.$t("审核通过"),
|
"icon-close_" + this.$t("审核未通过"),
|
], // 0 好像是未提交
|
show: false,
|
language: "en",
|
};
|
},
|
created() {
|
this.language = this.$i18n.locale;
|
if(this.language=='zh-TW'){
|
this.language='zh-CN'
|
}
|
this.fetchInfo();
|
},
|
methods: {
|
...mapActions("user", ["GET_UERS_KYC"]),
|
|
fetchInfo() {
|
// 获取状态
|
_getIdentify().then((data) => {
|
this.show = true;
|
this.status = data.status;
|
if (data.status !== 0) {
|
this.countryName =
|
countries[this.language][data.nationality.toLowerCase()]["name"];
|
this.countryCode = data.nationality.toLowerCase();
|
this.idnumber = data.idnumber;
|
this.name = data.name;
|
this.frontFile = data.idimg_1
|
? [{ url: data.idimg_1_path, resURL: data.idimg_1 }]
|
: [];
|
this.reverseFile = data.idimg_2
|
? [{ url: data.idimg_2_path, resURL: data.idimg_2 }]
|
: [];
|
this.fileList = data.idimg_3
|
? [{ url: data.idimg_3_path, resURL: data.idimg_3 }]
|
: [];
|
}
|
});
|
},
|
onClickUpload(type) {
|
this.curFile = type;
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
disabled() {
|
// 是否禁用按钮
|
return ![0, 3, ""].includes(this.status);
|
},
|
afterRead(file) {
|
/// 处理文件
|
console.log(file);
|
file.status = "uploading";
|
file.message = this.$t("上传中...");
|
_uploadImage(file)
|
.then((data) => {
|
file.status = "success";
|
file.message = this.$t("上传成功");
|
file.resURL = data;
|
this[this.curFile] = [file];
|
})
|
.catch((err) => {
|
file.status = "failed";
|
file.message = this.$t("图片上传失败");
|
});
|
},
|
//打开国家列表底部弹窗
|
openBtn() {
|
if (!this.disabled()) {
|
this.$refs.controlChild.open();
|
}
|
},
|
//获取到当前选中国家的code值
|
getName(params) {
|
this.countryName = params[0];
|
this.countryCode = params[1];
|
},
|
onSubmit() {
|
if (!this.countryName) {
|
this.$toast(this.$t("请选择国家"));
|
return;
|
}
|
if (!this.name) {
|
this.$toast(this.$t("请输入姓名"));
|
return;
|
}
|
if (!this.idnumber) {
|
this.$toast(this.$t("请输入证件号码"));
|
return;
|
}
|
console.log(this.frontFile, this.reverseFile);
|
if (!this.frontFile.length || !this.reverseFile.length) {
|
this.$toast(this.$t("请上传完整证件信息"));
|
return;
|
}
|
_applyIdentify({
|
name: this.name,
|
idnumber: this.idnumber,
|
frontFile: this.frontFile,
|
reverseFile: this.reverseFile,
|
countryName: this.countryCode, // this.countryName 存储的 code, 回来再遍历
|
})
|
.then(() => {
|
this.GET_UERS_KYC();
|
this.$toast(this.$t("提交成功"));
|
this.$router.push("/verified");
|
// this.fetchInfo()
|
})
|
.catch((err) => {
|
if (err.code === "ECONNABORTED") {
|
this.$toast(this.$t("网络超时！"));
|
} else if (err.msg !== undefined) {
|
this.$toast(this.$t(err.msg));
|
}
|
});
|
},
|
tokefu() {
|
this.$router.push("/customerService");
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.authentication {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
.upload-wrap {
|
width: 220px;
|
height: 220px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
input {
|
font-size: 35px;
|
}
|
input:disabled {
|
background: #fff;
|
}
|
.list-view {
|
overflow-y: scroll;
|
border-bottom: 1px solid #e5e5e5;
|
}
|
|
.kyc-input {
|
width: 100%;
|
border: none;
|
}
|
|
.apply-btn {
|
border: none;
|
outline: none;
|
width: 100%;
|
line-height: 100px;
|
}
|
|
.service-text {
|
text-decoration: underline;
|
}
|
</style>
|
