<template>
|
<ContentScrollView :paddingH="false">
|
<nut-form :model-value="form" ref="formRef" :rules="rules">
|
<nut-form-item label="营业执照:" class="bole-form-item alignTop" prop="licenseUrl" required>
|
<Uploader
|
v-model:file-list="form.licenseUrl"
|
:maximum="1"
|
:limitFileSize="10"
|
class="bole-uploader nopaddingtop"
|
@my-success="handleLicenseUrlChange"
|
>
|
</Uploader>
|
<div class="pro-form-item-tips">
|
请上传最新的营业执照原件照片、扫描件或加盖公章的复印件，支持png/jpg/jpeg格式，文件大小不超过10MB
|
</div>
|
</nut-form-item>
|
<nut-form-item label="企业全称:" class="bole-form-item" prop="enterpriseName" required>
|
<nut-input
|
v-model.trim="form.enterpriseName"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入您营业执照上的企业名称"
|
type="text"
|
:max-length="35"
|
/>
|
</nut-form-item>
|
<nut-form-item
|
label="统一社会信用代码:"
|
class="bole-form-item"
|
prop="societyCreditCode"
|
required
|
>
|
<nut-input
|
v-model.trim="form.societyCreditCode"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入您营业执照上的信用代码"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item label="法人姓名:" class="bole-form-item" prop="legalPersonName" required>
|
<nut-input
|
v-model.trim="form.legalPersonName"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写企业法人的姓名"
|
type="text"
|
/>
|
</nut-form-item>
|
<ProFormItemCell label="经办人身份证照片:" required>
|
<div class="id-imgUrl-wrapper">
|
<nut-form-item
|
label=" "
|
class="bole-form-item"
|
prop="proxyPersonIdFrontImgUrl"
|
label-width="0px"
|
>
|
<Uploader
|
v-model:file-list="form.proxyPersonIdFrontImgUrl"
|
:maximum="1"
|
:limitFileSize="10"
|
class="bole-uploader nopaddingtop"
|
@my-success="handleFrontImgUrlChange"
|
>
|
<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="proxyPersonIdBackImgUrl"
|
label-width="0px"
|
>
|
<Uploader
|
v-model:file-list="form.proxyPersonIdBackImgUrl"
|
: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="proxyPersonName" required>
|
<nut-input
|
v-model.trim="form.proxyPersonName"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写经办人的姓名"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item
|
label="经办人身份证号:"
|
class="bole-form-item"
|
prop="proxyPersonIdNumber"
|
required
|
>
|
<nut-input
|
v-model.trim="form.proxyPersonIdNumber"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写经办人的身份证号码"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item
|
label="经办人手机号:"
|
class="bole-form-item"
|
prop="proxyPersonContactPhone"
|
required
|
>
|
<nut-input
|
v-model.trim="form.proxyPersonContactPhone"
|
class="nut-input-text bole-input-text"
|
placeholder="请填写经办人的手机号码"
|
type="text"
|
>
|
<template #right>
|
<ProFormCaptcha
|
:onGetCaptcha="() => onGetCaptcha(form.proxyPersonContactPhone)"
|
phonePropName="proxyPersonContactPhone"
|
:validateField="formRef?.validate"
|
></ProFormCaptcha>
|
</template>
|
</nut-input>
|
</nut-form-item>
|
<nut-form-item label="短信验证码:" class="bole-form-item" prop="verificationCode" required>
|
<nut-input
|
v-model.trim="form.verificationCode"
|
class="nut-input-text bole-input-text"
|
placeholder="请输入验证码"
|
type="number"
|
/>
|
</nut-form-item>
|
<nut-form-item
|
label="企业授权书:"
|
class="bole-form-item alignTop"
|
prop="proxyPowerAttorneyUrl"
|
required
|
>
|
<Uploader
|
v-model:file-list="form.proxyPowerAttorneyUrl"
|
:maximum="1"
|
:limitFileSize="10"
|
class="bole-uploader nopaddingtop"
|
>
|
</Uploader>
|
<div class="pro-form-item-tips">
|
请上传加盖公章的企业授权书照片或扫描件，支持png/jpg/jpeg/pdf格式，文件大小不超过10MB
|
<span class="primary" @click="downloadPowerAttorneyTemplate">授权书模板下载</span>
|
</div>
|
</nut-form-item>
|
</nut-form>
|
</ContentScrollView>
|
<PageFooter :isOnlyAction="false">
|
<PageFooterBtn type="primary" @click="handleSubmit()" :loading="loading"
|
>提交认证</PageFooterBtn
|
>
|
</PageFooter>
|
</template>
|
|
<script setup lang="ts">
|
import { useAuthenticationFlow, useDownloadPowerAttorneyTemplate } from '../hooks';
|
import {
|
UserCertificationModeEnumV2,
|
VerificationCodeBusinessType,
|
UserCertificationElementEnum,
|
} from '@12333/constants';
|
import { ProFormCaptcha, ProFormItemCell } from 'senin-mini/components';
|
import * as commonServices from '@12333/services/api/Common';
|
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
|
import { vatLicense, userCredentialVerifyOcrIDCard } from '@12333/hooks';
|
import { Message } from '@12333/utils';
|
import { Photograph } from '@nutui/icons-vue-taro';
|
|
defineOptions({
|
name: 'InnerPage',
|
});
|
|
const { form, rules, formRef, handleSubmit, loading } = useAuthenticationFlow({
|
certificationMode: UserCertificationModeEnumV2.ProxyPersonPhoneCertification,
|
certificationElement: UserCertificationElementEnum.Identity3,
|
});
|
|
const { downloadPowerAttorneyTemplate } = useDownloadPowerAttorneyTemplate();
|
|
async function onGetCaptcha(phoneNumber: string) {
|
await commonServices.sendPhoneCertificationVerificationCode(
|
{
|
name: form.proxyPersonName,
|
identity: form.proxyPersonIdNumber,
|
mobile: form.proxyPersonContactPhone,
|
businessType: VerificationCodeBusinessType.UserCertificationPhoneCertification,
|
},
|
{ showLoading: false }
|
);
|
}
|
|
const handleLicenseUrlChange = (response: FileItem) => {
|
vatLicense(response, {
|
onSuccess(res) {
|
let tips: string[] = [];
|
res?.name ? (form.enterpriseName = res.name) : tips.push('企业名称');
|
res?.societyCode ? (form.societyCreditCode = res.societyCode) : tips.push('统一社会信用代码');
|
if (tips.length > 0) {
|
Message.error(`未能识别到您上传的图片，请重新上传清晰的图片或手动输入${tips.join('和')}`);
|
}
|
},
|
});
|
};
|
|
function handleFrontImgUrlChange(response: FileItem) {
|
userCredentialVerifyOcrIDCard(response, {
|
onSuccess(res) {
|
if (res.realName) form.proxyPersonName = res.realName;
|
if (res.idcardNum) form.proxyPersonIdNumber = res.idcardNum;
|
},
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.authenticationJBR-page-wrapper {
|
.photograph-wrapper {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
</style>
|
