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/authentication/index.vue | 542 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 334 insertions(+), 208 deletions(-)
diff --git a/src/page/authentication/index.vue b/src/page/authentication/index.vue
index f591cd2..230774e 100644
--- a/src/page/authentication/index.vue
+++ b/src/page/authentication/index.vue
@@ -4,79 +4,181 @@
<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
+ 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>
@@ -84,137 +186,162 @@
<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 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',
+ 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;
+ 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 }]
+ : [];
}
+ });
},
- created() {
- this.language = this.$i18n.locale
- this.fetchInfo()
+ onClickUpload(type) {
+ this.curFile = type;
},
- methods:{
- 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();
+ 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));
}
- },
- //获取到当前选中国家的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
- }
- _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('/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')
- }
- }
-}
+ });
+ },
+ tokefu() {
+ this.$router.push("/customerService");
+ },
+ },
+};
</script>
<style lang="scss" scoped>
-
-.authentication{
+.authentication {
width: 100%;
box-sizing: border-box;
}
@@ -231,25 +358,24 @@
input:disabled {
background: #fff;
}
-.list-view{
- overflow-y:scroll;
- border-bottom:1px solid #e5e5e5;
+.list-view {
+ overflow-y: scroll;
+ border-bottom: 1px solid #e5e5e5;
}
-.kyc-input{
- width:100%;
- border:none;
+.kyc-input {
+ width: 100%;
+ border: none;
}
-.apply-btn{
- border:none;
- outline:none;
- width:100%;
- line-height:100px;
+.apply-btn {
+ border: none;
+ outline: none;
+ width: 100%;
+ line-height: 100px;
}
-.service-text{
- text-decoration:underline;
+.service-text {
+ text-decoration: underline;
}
-
</style>
--
Gitblit v1.9.3