<template>
|
<PageLayout title="在线签约" has-border>
|
<LoadingLayout :loading="isLoading">
|
<ContentScrollView>
|
<ProForm :model="form" ref="formRef" label-width="auto">
|
<ProFormItemV2
|
label="身份证正面照片："
|
prop="idFrontUrl"
|
:check-rules="[{ message: '请上传身份证正面照片', type: 'upload' }]"
|
>
|
<ProFormImageUpload
|
v-model:file-url="form.idFrontUrl"
|
:limitFileSize="10"
|
:showTip="false"
|
:on-success="handleFrontUrlChange"
|
>
|
</ProFormImageUpload>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="身份证反面照片："
|
prop="idBackUrl"
|
:check-rules="[{ message: '请上传身份证反面照片', type: 'upload' }]"
|
>
|
<ProFormImageUpload
|
v-model:file-url="form.idBackUrl"
|
:limitFileSize="10"
|
:showTip="false"
|
>
|
</ProFormImageUpload>
|
</ProFormItemV2>
|
<ProFormItemV2 label="姓名：" prop="name" :check-rules="[{ message: '请输入您的姓名' }]">
|
<ProFormText placeholder="请输入您的姓名" v-model.trim="form.name"></ProFormText>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="身份证号："
|
prop="idNumber"
|
:check-rules="[{ message: '请输入您的身份证号', type: 'idCard' }]"
|
>
|
<ProFormText
|
placeholder="请输入您的身份证号"
|
v-model.trim="form.idNumber"
|
></ProFormText>
|
</ProFormItemV2>
|
|
<ProFormItemV2
|
label="手机号:"
|
prop="phone"
|
:check-rules="[{ type: 'phone', message: '请输入您的手机号' }]"
|
>
|
<ProFormText v-model.trim="form.phone" placeholder="请输入您的手机号">
|
<template #suffix v-if="signChannel === SignChannelEnum.BestSign">
|
<ProFormCaptcha
|
:onGetCaptcha="onGetCaptcha"
|
:phonePropName="['phone', 'name', 'idNumber', 'idFrontUrl', 'idBackUrl']"
|
class="code-btn"
|
link
|
></ProFormCaptcha>
|
</template>
|
</ProFormText>
|
</ProFormItemV2>
|
<ProFormItemV2
|
label="验证码:"
|
prop="vcode"
|
:check-rules="[{ trigger: 'blur', message: '请输入验证码' }]"
|
v-if="signChannel === SignChannelEnum.BestSign"
|
>
|
<ProFormText v-model.trim="form.vcode" class="code-input" placeholder="请输入验证码">
|
</ProFormText>
|
</ProFormItemV2>
|
<ProFormItemV2 class="pro-form-item-label-hidden pro-form-item-center" prop="isAgree">
|
<el-checkbox v-model="form.isAgree">
|
<span class="text">我已阅读并同意 </span>
|
<span class="primary-text" @click.stop.prevent="goFaq"
|
>《818平台数字证书使用协议》</span
|
>
|
</el-checkbox>
|
<div class="tip-text">
|
数字证书申请中，该证书存储在上上签电子签约平台。仅在您同意的情况下，您的证书方可被调用签署相关的电子合同等法律文件。
|
</div>
|
</ProFormItemV2>
|
<PageFooterBtn @click="handleConfirm" style="width: 100%" :hasMargin="false"
|
>确认提交</PageFooterBtn
|
>
|
</ProForm>
|
</ContentScrollView>
|
<!-- <PageFooter>
|
<PageFooterBtn @click="handleConfirm">确认提交</PageFooterBtn>
|
</PageFooter> -->
|
</LoadingLayout>
|
</PageLayout>
|
</template>
|
|
<script setup lang="ts">
|
import { FormInstance } from 'element-plus';
|
import {
|
ProForm,
|
ProFormItemV2,
|
ProFormText,
|
UploadUserFile,
|
ProFormImageUpload,
|
ProFormCaptcha,
|
bolePreview,
|
LoadingLayout,
|
} from '@bole-core/components';
|
import * as lgGigWorkerServices from '@/services/api/LgGigWorker';
|
import { DigitalProtocolTempPath, SignChannelEnum } from '@/constants';
|
import { Message } from '@bole-core/core';
|
import { getPreviewOfficeUrl } from '@/utils';
|
import {
|
useCheckUserRealVerifyStatus,
|
userCredentialVerifyOcrIDCard,
|
useSignChannelByBussinessCode,
|
} from '@/hooks';
|
|
defineOptions({
|
name: 'OnlineSign',
|
});
|
|
const route = useRoute();
|
const customerId = (route.query.customerId as string) ?? '';
|
const templateId = (route.query.templateId as string) ?? '';
|
const companyId = (route.query.companyId as string) ?? '';
|
const name = (route.query.name as string) ?? '';
|
const phoneNumber = (route.query.phoneNumber as string) ?? '';
|
const action = Number(route.query.action as string);
|
const bussinessCode = (route.query.bussinessCode as string) ?? '';
|
console.log('bussinessCode: ', bussinessCode);
|
|
const { isLoading } = useCheckUserRealVerifyStatus({
|
customerId,
|
templateId,
|
companyId,
|
action,
|
phoneNumber,
|
bussinessCode,
|
});
|
|
const { signChannel } = useSignChannelByBussinessCode({ bussinessCode });
|
|
const form = reactive({
|
name: decodeURI(name),
|
idNumber: '',
|
idFrontUrl: [] as UploadUserFile[],
|
idBackUrl: [] as UploadUserFile[],
|
phone: decodeURI(phoneNumber),
|
vcode: '',
|
isAgree: false,
|
});
|
|
const onGetCaptcha = async (phoneNumber: string) => {
|
let res = await userGoToContactSignVerify();
|
personalIdentity3Key.value = res.data;
|
if (!!res?.data2) {
|
goContractPreview(res);
|
}
|
};
|
|
function userGoToContactSignVerify() {
|
return lgGigWorkerServices.userGoToContactSignVerify(
|
{
|
name: form.name,
|
idNumber: form.idNumber,
|
idFrontUrl: form.idFrontUrl?.[0]?.path ?? '',
|
idBackUrl: form.idBackUrl?.[0]?.path ?? '',
|
phone: form.phone,
|
companyId: companyId,
|
bussinessCode: bussinessCode,
|
},
|
{ showLoading: false }
|
);
|
}
|
|
function handleFrontUrlChange(response: UploadUserFile) {
|
userCredentialVerifyOcrIDCard(response, {
|
onSuccess(res) {
|
if (res.realName) form.name = res.realName;
|
if (res.idcardNum) form.idNumber = res.idcardNum;
|
},
|
});
|
}
|
|
const formRef = ref<FormInstance>();
|
|
async function handleConfirm() {
|
// showFailToast({
|
// message: '请勾选数字证书使用协议',
|
// icon: 'close',
|
// });
|
// showSuccessToast('请勾选数字证书使用协议');
|
if (!formRef.value) return;
|
if (!form.isAgree) {
|
Message.errorMessage('请勾选数字证书使用协议');
|
return;
|
}
|
await formRef.value?.validate?.();
|
userPersonalRegAndRealNameAndApplyCert();
|
}
|
|
const router = useRouter();
|
|
const personalIdentity3Key = ref('');
|
|
async function userPersonalRegAndRealNameAndApplyCert() {
|
try {
|
if (signChannel.value === SignChannelEnum.Alipay) {
|
await userGoToContactSignVerify();
|
}
|
let params: API.UserPersonRealVerifyInput = {
|
name: form.name,
|
idNumber: form.idNumber,
|
idFrontUrl: form.idFrontUrl?.[0]?.path ?? '',
|
idBackUrl: form.idBackUrl?.[0]?.path ?? '',
|
phone: form.phone,
|
vcode: form.vcode,
|
companyId: companyId,
|
personalIdentity3Key: personalIdentity3Key.value,
|
bussinessCode: bussinessCode,
|
};
|
let res = await lgGigWorkerServices.userPersonalRegAndRealNameAndApplyCert(params);
|
goContractPreview(res);
|
} catch (error) {}
|
}
|
|
function goContractPreview(res: API.BestSignRequestResultDto) {
|
/**原先上上签逻辑 */
|
// if (res && res.success && res.data && res.data2) {
|
if (res && res.success && res.data2) {
|
router.replace({
|
name: 'ContractPreview',
|
query: {
|
url: res.data,
|
lgGigSignId: res.data2,
|
},
|
});
|
} else {
|
router.push({
|
name: 'OnlineAuthFail',
|
});
|
}
|
}
|
|
function goFaq() {
|
// bolePreview({
|
// fileUrl: DigitalProtocolTempPath,
|
// });
|
location.href = getPreviewOfficeUrl(DigitalProtocolTempPath);
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.text {
|
color: getCssVar('text-color', 'regular') !important;
|
}
|
|
.primary-text {
|
color: boleGetCssVar('color', 'primary') !important;
|
}
|
|
.tip-text {
|
color: getCssVar('text-color', 'secondary');
|
line-height: 1.5;
|
}
|
|
.pro-form-item-center {
|
:deep(.el-form-item__content) {
|
justify-content: center;
|
}
|
}
|
</style>
|
