From 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Sun, 21 Apr 2024 15:59:28 +0800
Subject: [PATCH] first
---
src/page/register/identity.vue | 571 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 336 insertions(+), 235 deletions(-)
diff --git a/src/page/register/identity.vue b/src/page/register/identity.vue
index 034657e..1c3196a 100644
--- a/src/page/register/identity.vue
+++ b/src/page/register/identity.vue
@@ -1,281 +1,382 @@
<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 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 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";
+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 好像是未提交
+ 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", ["GET_UERS_KYC"]),
+ 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 }] : [];
}
+ });
},
- created() {
- this.fetchInfo()
+ onClickUpload(type) {
+ this.curFile = type;
},
- 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
- }
+ 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.frontFile.length || !this.reverseFile.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)); }
- })
+ if (this.status !== 0) {
+ this.$router.push("/finish");
+ } else {
+ _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("/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;
+.identity {
+ width: 100%;
+ box-sizing: border-box;
}
.upload-wrap {
- width: 220px;
- height: 220px;
- display: flex;
- justify-content: center;
- align-items: center;
+ width: 220px;
+ height: 220px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
input {
- font-size: 35px;
+ font-size: 35px;
}
input:disabled {
- background: #fff;
+ background: #fff;
}
.list-view {
- overflow-y: scroll;
- border-bottom: 1px solid #e5e5e5;
+ overflow-y: scroll;
+ border-bottom: 1px solid #e5e5e5;
}
.kyc-input {
- width: 100%;
- border: none;
+ width: 100%;
+ border: none;
}
.apply-btn {
- border: none;
- outline: none;
- width: 100%;
- line-height: 96px;
+ border: none;
+ outline: none;
+ width: 100%;
+ line-height: 96px;
}
.service-text {
- text-decoration: underline;
+ text-decoration: underline;
}
.header {
- display: flex;
- justify-content: space-between;
- padding: 0 26px;
- font-size: 28px;
- height: 100px;
- line-height: 100px;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 26px;
+ font-size: 28px;
+ height: 100px;
+ line-height: 100px;
}
-.stepBox{
- padding: 0 30px;
+.stepBox {
+ padding: 0 30px;
}
.title {
- font-weight: 700;
- font-size: 52px;
- margin-top: 50px;
- margin-bottom: 60px;
+ font-weight: 700;
+ font-size: 52px;
+ margin-top: 50px;
+ margin-bottom: 60px;
}
-.city{
- background: #F5F5F5;
+.city {
+ background: #f5f5f5;
}
</style>
--
Gitblit v1.9.3