<template>
|
<!-- 申请身份认证 -->
|
<div class="identity pl-30 pr-30 font-24" style="padding-bottom: 30px;">
|
<div class=" header">
|
<div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
|
class="w-14 h-27" /></div>
|
<!-- <div class="textColor" @click="$router.push('/finish')">{{ $t('跳过') }}</div>-->
|
</div>
|
<Step :step="2"></Step>
|
<div class="title textColor">{{ $t('实名认证') }}</div>
|
<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">
|
<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>
|
<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('真实姓名')" :placeholderText="$t('请输入真实姓名')" v-model="name" />
|
<ExInput :label="$t('证件/护照号码')" :placeholderText="$t('请输入您的证件/护照号码')" v-model="idnumber" />
|
<div>
|
<div v-if="resultArr.length > 0" class="mb-25 textColor">{{ $t('证件照/上传护照') }}</div>
|
<div v-else class="mt-109 mb-25">{{ $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 textColor">{{ $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 textColor">{{ $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 textColor">{{ $t('手持证件照') }}</div>
|
</div>
|
</div>
|
</div>
|
<template v-if="!disabled()">
|
<div class="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 text-white font-36 h-96 rounded btnMain" @click="onSubmit">{{
|
$t('下一步')
|
}}</button>
|
<nationality-list ref='controlChild' :title="$t('请选择国家')" @getName="getName(arguments)" v-if="!disabled()">
|
</nationality-list>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { ActionSheet,Search } from 'vant';
|
import Step from "./step.vue";
|
import nationalityList from '../authentication/components/nationalityList.vue'
|
import { Uploader } from 'vant';
|
import { _uploadImage, _applyIdentify, _getIdentify } from '@/API/fund.api'
|
import countries from "../authentication/components/countryList";
|
import ExInput from "@/components/ex-input";
|
import {GET_USERINFO, SET_USERINFO} from "@/store/const.store";
|
import {mapActions} from "vuex";
|
import {setStorage} from "@/utils/utis";
|
export default {
|
name: "AuthenticationPage",
|
components: {
|
nationalityList,
|
[Uploader.name]: Uploader,
|
ExInput,
|
Step
|
},
|
data() {
|
return {
|
countryName: this.$t("请选择国家"), //国家名称
|
countryCode: "af", //国家地区号
|
idnumber: '',
|
name: '',
|
frontFile: [],
|
reverseFile: [],
|
fileList: [],
|
curFile: 'frontFile',
|
status: '', // 0
|
imgs: [],
|
resultArr: ['small-success_' + this.$t('已申请未审核'), 'identifing_' + this.$t('审核中'), 'small-success_' + this.$t('审核通过'), 'icon-close_' + this.$t('审核未通过')] // 0 好像是未提交
|
}
|
},
|
created() {
|
this.fetchInfo()
|
},
|
methods: {
|
...mapActions('user', [SET_USERINFO]),
|
fetchInfo() { // 获取状态
|
_getIdentify().then(data => {
|
this.status = data.status
|
if (data.status !== 0) {
|
this.countryName = countries[this.$i18n.locale][data.nationality]['name']
|
this.countryCode = data.nationality
|
this.idnumber = data.idnumber
|
this.name = data.name
|
this.frontFile = data.idimg_1 ? [{ url: data.idimg_1_path }] : []
|
this.reverseFile = data.idimg_2 ? [{ url: data.idimg_2_path }] : []
|
this.fileList = data.idimg_3 ? [{ url: data.idimg_3_path }] : []
|
}
|
})
|
},
|
onClickUpload(type) {
|
this.curFile = type
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
disabled() { // 是否禁用按钮
|
return ![0, 3, ''].includes(this.status)
|
},
|
afterRead(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
|
}
|
|
if (!this.frontFile.length || !this.reverseFile.length ||!this.fileList.length) {
|
this.$toast(this.$t('请上传完整证件信息'))
|
return
|
}
|
|
if (this.status!==0){
|
this.$router.push('/finish');
|
}else{
|
_applyIdentify({
|
name: this.name,
|
idnumber: this.idnumber,
|
frontFile: this.frontFile,
|
reverseFile: this.reverseFile,
|
fileList: this.fileList,
|
countryName: this.countryCode // this.countryName 存储的 code, 回来再遍历
|
}).then(() => {
|
this.$toast(this.$t('提交成功'))
|
this.$router.push('/finish');
|
this.$store.commit('user/SET_OUT')
|
setStorage('popNotice', false)
|
//this.fetchInfo()
|
}).catch(err => {
|
if(err.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
|
else if (err.msg !== undefined) { this.$toast(this.$t(err.msg)); }
|
else if (err.message !== undefined) { this.$toast(this.$t(err.message)); }
|
})
|
}
|
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
|
.identity{
|
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: 96px;
|
}
|
|
.service-text {
|
text-decoration: underline;
|
}
|
.header {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 26px;
|
font-size: 28px;
|
height: 100px;
|
line-height: 100px;
|
}
|
.stepBox{
|
padding: 0 30px;
|
}
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 50px;
|
margin-bottom: 60px;
|
}
|
.city{
|
background: #F5F5F5;
|
}
|
</style>
|
