<template>
|
<ContentScrollView :paddingH="false">
|
<nut-form :model-value="form" ref="formRef" :rules="rules">
|
<ProFormItemCell label="身份证照片:" required>
|
<div class="id-imgUrl-wrapper">
|
<nut-form-item label=" " class="bole-form-item" prop="identityImg" label-width="0px">
|
<Uploader
|
v-model:file-list="form.identityImg"
|
:maximum="1"
|
:limitFileSize="10"
|
class="bole-uploader nopaddingtop"
|
@my-success="handleFrontImgUrlChange"
|
@delete="handleFrontImgUrlDelete"
|
>
|
<template #upload-icon>
|
<div class="photograph-wrapper">
|
<Photograph color="#808080" />
|
<div>身份证人像面</div>
|
</div>
|
</template>
|
</Uploader>
|
</nut-form-item>
|
<nut-form-item label=" " class="bole-form-item" prop="identityBackImg" label-width="0px">
|
<Uploader
|
v-model:file-list="form.identityBackImg"
|
:maximum="1"
|
:limitFileSize="10"
|
class="bole-uploader nopaddingtop"
|
>
|
<template #upload-icon>
|
<div class="photograph-wrapper">
|
<Photograph color="#808080" />
|
<div>身份证国徽面</div>
|
</div>
|
</template>
|
</Uploader>
|
</nut-form-item>
|
</div>
|
|
<div class="pro-form-item-tips">
|
请上传身份证的正反面照片，确保身份证清晰可见，支持png/jpg/jpeg格式，文件大小不超过10MB
|
</div>
|
</ProFormItemCell>
|
<nut-form-item label="姓名:" class="bole-form-item" prop="name" required>
|
<nut-input
|
v-model.trim="form.name"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写姓名"
|
:formatter="filterNotCN"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item label="身份证号:" class="bole-form-item" prop="identity" required>
|
<nut-input
|
v-model.trim="form.identity"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写身份证号码"
|
type="text"
|
/>
|
</nut-form-item>
|
<template v-if="type === 'realName'">
|
<nut-form-item label="手机号:" class="bole-form-item" prop="phoneNumber" required>
|
<nut-input
|
v-model.trim="form.phoneNumber"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写手机号码"
|
type="text"
|
>
|
<template #right>
|
<ProFormCaptcha
|
:onGetCaptcha="() => onGetCaptcha(form.phoneNumber)"
|
:phonePropName="['phoneNumber', 'name', 'identity']"
|
:validateField="formRef?.validate"
|
></ProFormCaptcha>
|
</template>
|
</nut-input>
|
</nut-form-item>
|
<nut-form-item label="短信验证码:" class="bole-form-item" prop="verifyCode" required>
|
<nut-input
|
v-model.trim="form.verifyCode"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入验证码"
|
type="number"
|
:max-length="6"
|
/>
|
</nut-form-item>
|
</template>
|
</nut-form>
|
</ContentScrollView>
|
<PageFooter :isOnlyAction="false">
|
<PageFooterBtn type="primary" @click="handleSubmit()" :loading="loading"
|
>提交认证</PageFooterBtn
|
>
|
</PageFooter>
|
</template>
|
|
<script setup lang="ts">
|
import { ProFormCaptcha, ProFormItemCell } from 'senin-mini/components';
|
import * as electronSignServices from '@12333/services/apiV2/electronSign';
|
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
|
import { Photograph } from '@nutui/icons-vue-taro';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
import { FormValidator, filterNotCN } from '@12333/utils';
|
import Taro from '@tarojs/taro';
|
import { userCredentialVerifyOcrIDCard } from '@12333/hooks';
|
import { EnumOcrAccess } from '@12333/constants';
|
|
defineOptions({
|
name: 'InnerPage',
|
});
|
|
const { userDetail } = useUser();
|
const router = Taro.useRouter();
|
const type = router.params?.type ?? '';
|
|
const form = reactive({
|
identityImg: [] as FileItem[],
|
identityBackImg: [] as FileItem[],
|
name: '',
|
identity: '',
|
phoneNumber: userDetail.value?.contactPhoneNumber,
|
verifyCode: '',
|
});
|
|
const formRef = ref<any>(null);
|
const loading = ref(false);
|
|
const rules: FormRules = {
|
name: [{ required: true, message: '请填写姓名' }],
|
identityImg: [
|
{ required: true, message: '请上传身份证人像面', validator: FormValidator.validatorArray },
|
],
|
identityBackImg: [
|
{ required: true, message: '请上传身份证国徽面', validator: FormValidator.validatorArray },
|
],
|
identity: [
|
{ required: true, message: '请填写身份证号码' },
|
{ message: '请输入正确的身份证号码', validator: FormValidator.validatorIDCard },
|
],
|
phoneNumber: [
|
{ required: true, message: '请填写手机号码' },
|
{ message: '请输入正确的手机号码', validator: FormValidator.validatorPhoneNumber },
|
],
|
verifyCode: [{ required: true, message: '请输入验证码' }],
|
};
|
|
async function onGetCaptcha(phoneNumber: string) {
|
await electronSignServices.sendPersonalUserIdentity3RealSms(
|
{
|
name: form.name,
|
identity: form.identity,
|
phoneNumber: form.phoneNumber,
|
},
|
{ showLoading: false }
|
);
|
}
|
|
function handleFrontImgUrlChange(response: FileItem) {
|
userCredentialVerifyOcrIDCard({
|
response: response,
|
access: EnumOcrAccess.Baidu,
|
isOssUrl: true,
|
onSuccess(res) {
|
if (res.model?.name) form.name = res.model?.name;
|
if (res.model?.identity) form.identity = res.model?.identity;
|
},
|
});
|
}
|
|
function handleSubmit() {
|
if (!formRef.value) return;
|
formRef.value.validate().then(({ valid, errors }: any) => {
|
if (valid) {
|
submit();
|
}
|
});
|
}
|
|
function submit() {
|
if (type === 'realName') {
|
personalUserIdentity3Real();
|
}
|
if (type === 'face') {
|
personalUserFaceReal();
|
}
|
}
|
|
async function personalUserIdentity3Real() {
|
try {
|
let params: API.PersonalUserIdentity3RealCommand = {
|
name: form.name,
|
phoneNumber: form.phoneNumber,
|
identity: form.identity,
|
identityImg: form.identityImg?.[0]?.path ?? '',
|
identityBackImg: form.identityBackImg?.[0]?.path ?? '',
|
verifyCode: form.verifyCode,
|
};
|
let res = await electronSignServices.personalUserIdentity3Real(params);
|
if (res) {
|
Taro.navigateTo({ url: `${RouterPath.authenticationResult}` });
|
}
|
} catch (error) {}
|
}
|
|
async function personalUserFaceReal() {
|
try {
|
let params: API.PersonalUserFaceRealCommand = {
|
name: form.name,
|
identity: form.identity,
|
identityImg: form.identityImg?.[0]?.path ?? '',
|
identityBackImg: form.identityBackImg?.[0]?.path ?? '',
|
};
|
let res = await electronSignServices.personalUserFaceReal(params);
|
if (res) {
|
const encodedUrl = encodeURIComponent(res);
|
Taro.navigateTo({ url: `${RouterPath.extraPage}?url=${encodedUrl}` });
|
}
|
} catch (error) {}
|
}
|
|
function handleFrontImgUrlDelete({ files, fileList, index }) {
|
if (fileList?.length === 0) {
|
form.name = '';
|
form.identity = '';
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.authenticationRealName-page-wrapper {
|
.photograph-wrapper {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
</style>
|
