From 03043192ddf00f9a36b7454799a9152cd1b50a0b Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:13:45 +0800
Subject: [PATCH] 1
---
src/views/authentication/index.vue | 167 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 156 insertions(+), 11 deletions(-)
diff --git a/src/views/authentication/index.vue b/src/views/authentication/index.vue
index 18dcefd..357d6ed 100644
--- a/src/views/authentication/index.vue
+++ b/src/views/authentication/index.vue
@@ -39,8 +39,29 @@
</div>
<ExInput :label="$t('realName')" :disabled="disabled()" :clearBtn="!disabled()"
:placeholderText="$t('entryRealName')" v-model="name" />
+
<ExInput :label="$t('credentPassport')" :disabled="disabled()" :clearBtn="!disabled()"
:placeholderText="$t('entryCredentPassport')" v-model="idnumber" />
+
+ <ExInput :label="$t('phoneNum')" :disabled="disabled()" :clearBtn="!disabled()"
+ :placeholderText="$t('entryPhone')" v-model="phone" :area="true" :dialCode="dialCode"
+ @selectArea="onSelectArea" :icon="icon" v-if="!disabled()" />
+
+ <p class="label mt-2 textColor" v-if="disabled()">{{ $t("phoneNum") }}</p>
+ <div class="iptbox inputBackground" v-if="disabled()">
+ <input class="inputBackground textColor" style="background: none;" type="text" v-model="phone" disabled />
+ </div>
+
+ <!-- 验证码输入框已隐藏 -->
+ <!-- <p class="label mt-2 textColor" v-if="!disabled()">{{ $t("verificationCode") }}</p>
+ <div class="iptbox inputBackground" v-if="!disabled()">
+ <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" v-model="verifyCode"
+ :disabled="disabled()" />
+ <span @click="sendCode" :class="{ 'disabled': time > 0 }">
+ {{ $t("sendVerifyCode") }}
+ <template v-if="time"> ({{ time }})s</template>
+ </span>
+ </div> -->
<div>
<div v-if="resultArr.length > 0" class="mt-1 mb-3 textColor">{{ $t('uploadCredentPassport') }} </div>
<div v-else class="mt-4 mb-12 textColor">{{ $t('uploadPicCredentPassport') }}</div>
@@ -64,7 +85,7 @@
</div>
<div class="text-28 h-10 textColor1">{{ $t('credentObverse') }}</div>
</div>
- <div class="flex-1 flex flex-col text-center justify-center items-center">
+ <!-- <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" />
@@ -72,12 +93,12 @@
:after-read="afterRead" @click-upload="onClickUpload('fileList')" v-else />
</div>
<div class="text-28 h-10" style="color:#868D9A;">{{ $t('handCredent') }}</div>
- </div>
+ </div> -->
</div>
</div>
<template v-if="!disabled()">
- <div class="text-28 mb-8 textColor">{{ $t('photoExample') }}</div>
- <img src="@/assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;" class="w-auto h-56 mb-5">
+ <!-- <div class="text-28 mb-8 textColor">{{ $t('photoExample') }}</div> -->
+ <!-- <img src="@/assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;" class="w-auto h-56 mb-5"> -->
<!-- <div class="mb-5 flex justify-center">
<div class="flex flex-1 justify-center">
<img src="../../assets/image/kyc/kyc_demo1.png" alt="" class="w-80 h-80" />
@@ -89,13 +110,15 @@
</template>
<button class="apply-btn btnMain text-white text-26 h-24 rounded" @click="onSubmit" v-if="!disabled()">{{
$t('Apply')
- }}</button>
+ }}</button>
<div class="pt-9 pb-16 text-24" v-if="!disabled() || status === 3">
<span class="text-grey">{{ $t('uploadTitle1') }} {{ $t('photoExample') }}</span>
<span class="text-blue service-text" @click="tokefu"> {{ $t('ContactService') }}</span>
</div>
<nationality-list ref='controlChild' :title="$t('selectNation')" @getName="getName" v-if="!disabled()">
</nationality-list>
+
+ <nationality-list ref="controlChildRef" :title="$t('selectArea')" @getName="getName1"></nationality-list>
</div>
</div>
</div>
@@ -104,11 +127,12 @@
<script setup>
import { _getIdentify, _info, _applyIdentify } from "@/service/user.api.js";
import { _uploadImage } from "@/service/upload.api.js";
-import { onMounted, ref } from 'vue';
+import { _sendVerifyCode } from "@/service/login.api.js";
+import { onMounted, onBeforeUnmount, ref } from 'vue';
import nationalityList from './components/nationalityList.vue'
import { useRouter } from "vue-router";
import { showToast, Uploader } from "vant"
-// import ExInput from "@/components/ex-input";
+import ExInput from "@/components/ex-input/index.vue";
import countries from "./components/countryList";
import { getCurrentInstance } from 'vue';
import { useI18n } from "vue-i18n";
@@ -118,6 +142,12 @@
const countryCode = ref('af')
const idnumber = ref('')
const name = ref('')
+const phone = ref('')
+const icon = ref('')
+const dialCode = ref('')
+const verifyCode = ref('')
+const time = ref(0)
+const timer = ref(null)
const frontFile = ref([])
const reverseFile = ref([])
const fileList = ref([])
@@ -136,6 +166,13 @@
onMounted(() => {
fetchInfo();
})
+
+onBeforeUnmount(() => {
+ if (timer.value) {
+ clearInterval(timer.value)
+ timer.value = null
+ }
+})
const loginOut = () => {
router.push('/certificationCenter')
}
@@ -149,9 +186,10 @@
idnumber.value = data.idnumber
name.value = data.name
+ phone.value = data.phone || ''
frontFile.value = data.idimg_1 ? [{ url: data.idimg_1_path, resURL: data.idimg_1 }] : []
reverseFile.value = data.idimg_2 ? [{ url: data.idimg_2_path, resURL: data.idimg_2 }] : []
- fileList.value = data.idimg_3 ? [{ url: data.idimg_3_path, resURL: data.idimg_3 }] : []
+ // fileList.value = data.idimg_3 ? [{ url: data.idimg_3_path, resURL: data.idimg_3 }] : []
}
})
}
@@ -190,6 +228,54 @@
countryCode.value = params.code;
}
+//获取到当前选中国家的手机号code值
+const getName1 = (params) => {
+ icon.value = params.code;
+ dialCode.value = params.dialCode;
+};
+
+const controlChildRef = ref(null);
+const onSelectArea = () => {
+ controlChildRef.value.open();
+};
+
+// 发送验证码
+const sendCode = () => {
+ if (!phone.value) {
+ showToast(t('entryPhone'))
+ return
+ }
+ // 校验手机号格式：必须是数字
+ if (isNaN(phone.value) || phone.value.trim() === '') {
+ showToast(t('请输入正确的手机号码'))
+ return
+ }
+ if (time.value > 0) {
+ return false
+ }
+ _sendVerifyCode({
+ target: `${dialCode.value || ''}${phone.value}`,
+ }).then((res) => {
+ showToast(t("sendSuccess"))
+ time.value = 30
+ timer.value = setInterval(() => {
+ if (time.value > 0) {
+ time.value = time.value - 1
+ } else {
+ time.value = 0
+ clearInterval(timer.value)
+ timer.value = null
+ }
+ }, 1000)
+ }).catch(err => {
+ if (err.msg !== undefined) {
+ showToast(err.msg)
+ } else {
+ showToast(t('sendFailed'))
+ }
+ })
+}
+
const onSubmit = () => {
if (!countryName.value) {
showToast(t('selectNation'))
@@ -203,20 +289,42 @@
showToast(t('entryCredent'))
return
}
- if (!frontFile.value.length || !reverseFile.value.length || !fileList.value.length) {
+ if (!phone.value) {
+ showToast(t('entryPhone'))
+ return
+ }
+ // 校验手机号格式：必须是数字
+ if (isNaN(phone.value) || phone.value.trim() === '') {
+ showToast(t('请输入正确的手机号码'))
+ return
+ }
+ // 验证码校验已隐藏
+ // if (!verifyCode.value) {
+ // showToast(t('entryVerifyCode'))
+ // return
+ // }
+ // if (verifyCode.value.length < 6) {
+ // showToast(t('entryVerifyTips'))
+ // return
+ // }
+ // if (!frontFile.value.length || !reverseFile.value.length || !fileList.value.length) {
+ if (!frontFile.value.length || !reverseFile.value.length) {
showToast(t('uploadComplete'))
return
}
_applyIdentify({
name: name.value,
idnumber: idnumber.value,
+ phone: "" + dialCode.value + phone.value,
+ code: '', // 验证码已隐藏，传空值
frontFile: frontFile.value,
reverseFile: reverseFile.value,
- fileList: fileList.value,
+ // fileList: fileList.value,
countryName: countryCode.value // this.countryName 存储的 code, 回来再遍历
}).then(() => {
showToast(t('submitSuccess'))
- router.push('/verified')
+ // router.push('/verified')
+ router.go(-1)
// this.fetchInfo()
}).catch(err => {
if (err.code === 'ECONNABORTED') { showToast('网络超时！'); }
@@ -288,4 +396,41 @@
.pt-35 {
padding-top: 16px;
}
+
+.label {
+ font-size: 14px;
+ margin-bottom: 9px;
+}
+
+.iptbox {
+ height: 44px;
+ margin-top: 8px;
+ padding: 0 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 3px;
+
+ input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ padding-left: 10px;
+ color: $text_color;
+ font-size: 14px;
+ }
+
+ span {
+ color: $color_main;
+ font-size: 14px;
+ cursor: pointer;
+ white-space: nowrap;
+ margin-left: 10px;
+
+ &.disabled {
+ color: $text_color1;
+ cursor: not-allowed;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3