front/website
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 补充改造开店法人和个人证件信息，并且支持图片内容识别功能

Browse Source
This commit is contained in:
mixtan 2025-06-05 14:41:26 +08:00
parent acace24d47
commit bcd2043346
2 changed files with 318 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -16,6 +16,7 @@ declare module 'vue' {
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCol: typeof import('element-plus/es')['ElCol']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']

366
src/views/start/start.vue
View File

@ -32,6 +32,9 @@
disabled
/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="applyFormData.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="经营品类" prop="biz_category">
<el-cascader
v-model="applyFormData.biz_category"
@ -219,7 +222,10 @@
<el-button
type="info"
plain
v-if="applyFormData.biz_license_image && !applyFormData.biz_license_company"
v-if="
applyFormData.biz_license_image &&
!applyFormData.biz_license_company
"
@click="handleOcrText(currentBbatchNo, 'biz_license_image')"
>点击免填营业执照信息</el-button
>
@ -244,6 +250,16 @@
placeholder="请输入法人姓名"
/>
</el-form-item>
<el-form-item
label="法人手机号"
prop="legal_person_mobile"
v-if="applyFormData.biz_license_image"
>
<el-input
v-model="applyFormData.legal_person_mobile"
placeholder="请输入法人手机号"
/>
</el-form-item>
<el-form-item
label="注册号"
prop="biz_license_number"
@ -254,10 +270,18 @@
placeholder="请输入注册号"
/>
</el-form-item>
<!-- <el-form-item label="法人手机号" prop="legal_person_mobile">
<el-input v-model="applyFormData.legal_person_mobile" placeholder="请输入法人手机号" />
</el-form-item> -->
<el-form-item
label="经营范围"
prop="biz_license_content"
v-if="applyFormData.biz_license_image"
>
<el-input
:rows="2"
type="textarea"
v-model="applyFormData.biz_license_content"
placeholder="请输入经营范围"
/>
</el-form-item>
<el-form-item
label="许可证类型"
prop="license_type"
@ -370,8 +394,13 @@
<el-button
type="info"
plain
v-if="applyFormData.legal_person_id_images && !applyFormData.legal_person_id_number"
@click="handleOcrText(currentBbatchNo, 'legal_person_id_images')"
v-if="
applyFormData.legal_person_id_images &&
!applyFormData.legal_person_id_number
"
@click="
handleOcrText(currentBbatchNo, 'legal_person_id_images')
"
>点击免填身份证</el-button
>
</el-form-item>
@ -423,6 +452,43 @@
placeholder="请输入法人身份证号码"
/>
</el-form-item>
<el-form-item
label="身份证详细地址"
prop="legal_person_id_addr"
v-if="applyFormData.legal_person_id_images"
>
<el-input
v-model="applyFormData.legal_person_id_addr"
placeholder="请输入身份证详细地址"
/>
</el-form-item>
<el-form-item
label="身份证生效日期"
prop="legal_person_id_period_begin"
v-if="applyFormData.legal_person_id_images2"
>
<el-date-picker
v-model="applyFormData.legal_person_id_period_begin"
type="date"
placeholder="请选择有效日期"
/>
</el-form-item>
<el-form-item
label="身份证截止日期"
prop="legal_person_id_period_end"
v-if="applyFormData.legal_person_id_images2"
>
<el-radio-group v-model="legal_person_date_type">
<el-radio :label="1">长期</el-radio>
<el-radio :label="2">非长期</el-radio>
</el-radio-group>
<el-date-picker
v-if="legal_person_date_type == 2"
v-model="applyFormData.legal_person_id_period_end"
type="date"
placeholder="请选择截止日期"
/>
</el-form-item>
</div>
<div v-if="applyFormData.entity_type === 2">
<!-- 个人身份证正反面 -->
@ -513,6 +579,43 @@
placeholder="请输入个人身份证号"
/>
</el-form-item>
<el-form-item
label="身份证详细地址"
prop="individual_id_number"
v-if="applyFormData.individual_id_images"
>
<el-input
v-model="applyFormData.individual_id_addr"
placeholder="请输入身份证详细地址"
/>
</el-form-item>
<el-form-item
label="身份证生效日期"
prop="individual_id_period_begin"
v-if="applyFormData.individual_id_images2"
>
<el-date-picker
v-model="applyFormData.individual_id_period_begin"
type="date"
placeholder="请选择有效日期"
/>
</el-form-item>
<el-form-item
label="身份证截止日期"
prop="individual_id_period_end"
v-if="applyFormData.individual_id_images2"
>
<el-radio-group v-model="individual_date_type">
<el-radio :label="1">长期</el-radio>
<el-radio :label="2">非长期</el-radio>
</el-radio-group>
<el-date-picker
v-if="individual_date_type == 2"
v-model="applyFormData.individual_id_period_end"
type="date"
placeholder="请选择截止日期"
/>
</el-form-item>
</div>
</div>
@ -544,7 +647,7 @@
<el-icon class="avatar-uploader-icon">
<Plus />
</el-icon>
<div class="uploader-tips">上传银行卡<br>免填卡号</div>
<div class="uploader-tips">上传银行卡<br />免填卡号</div>
</el-upload>
<el-button
type="info"
@ -554,7 +657,9 @@
>点击免填卡号</el-button
>
</el-form-item>
<template v-if="applyFormData.entity_type==1 || applyFormData.bank_image">
<template
v-if="applyFormData.entity_type == 1 || applyFormData.bank_image"
>
<el-form-item label="开户名称" prop="account_holder_name">
<el-input v-model="applyFormData.account_holder_name" />
</el-form-item>
@ -574,17 +679,13 @@
style="width: 350px"
:options="bankList2"
>
<!-- <el-option
v-for="bank in bankList2"
:key="bank.id"
:label="bank.branch_bank_name"
:value="bank.branch_bank_name"
/> -->
<template #prefix>
<el-icon>
<Search />
</el-icon>
</template>
</el-select-v2>
</el-form-item>
<!-- <el-form-item label="支行名称" prop="bank_branch_name">
<el-input v-model="applyFormData.bank_branch_name" />
</el-form-item> -->
</template>
</div>
</el-form>
@ -605,7 +706,7 @@
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { Plus, Search } from "@element-plus/icons-vue";
import cityData from "../../stores/cityData";
import type { CityDataStructure } from "../../stores/cityData";
@ -679,7 +780,9 @@ const bankList2 = ref([]);
let orcTimeout = 0;
let currentFile = ref(null);
let currentBbatchNo = ref('');
let currentBbatchNo = ref("");
let legal_person_date_type = ref(2);
let individual_date_type = ref(2);
const handleChangeBizCategory = (value) => {
if (value && value.length === 2) {
@ -703,6 +806,7 @@ const applyFormData = reactive({
biz_license_image: "",
biz_license_number: "",
biz_second_category: null,
biz_license_content: "",
city_id: null,
contact_name: "",
county_id: null,
@ -712,11 +816,17 @@ const applyFormData = reactive({
individual_id_images: "",
individual_id_images2: "",
individual_id_number: "",
individual_id_addr: "",
individual_id_period_begin: "",
individual_id_period_end: "",
legal_person_id_images: "",
legal_person_id_images2: "",
legal_person_id_number: "",
legal_person_mobile: "",
legal_person_name: "",
legal_person_id_addr: "",
legal_person_id_period_begin: "",
legal_person_id_period_end: "",
license_image: [],
license_number: "",
license_type: "1",
@ -733,6 +843,7 @@ const applyFormData = reactive({
store_area: "",
user_status: "",
bank_image: "",
email: "",
});
const optionsPermitType = [
{
@ -752,6 +863,13 @@ const rules = reactive({
contact_name: [
{ required: true, message: "请输入联系人姓名", trigger: "blur" },
],
legal_person_id_addr: [
{ required: true, message: "请输入法人身份证详细地址", trigger: "blur" },
],
biz_license_content: [
{ required: true, message: "请输入经营范围内容", trigger: "blur" },
],
email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
biz_category: [
{ required: true, message: "请选择经营品类", trigger: "change" },
],
@ -784,13 +902,26 @@ const rules = reactive({
legal_person_mobile: [
{ required: true, message: "请输入法人手机号", trigger: "blur" },
],
legal_person_id_period_begin: [
{
required: true,
message: "请输入法人身份证开始有效日期",
trigger: "blur",
},
],
legal_person_id_period_end: [
{
required: true,
message: "请输入法人身份证截止有效日期",
trigger: "blur",
},
],
legal_person_id_number: [
{ required: true, message: "请输入法人身份证号", trigger: "blur" },
],
biz_license_image: [
{ required: true, message: "请上传营业执照", trigger: "change" },
],
// license_image: [{ required: true, message: '请上传许可证', trigger: 'change' }],
legal_person_id_images: [
{ required: true, message: "请上传法人身份证正面", trigger: "change" },
],
@ -806,6 +937,23 @@ const rules = reactive({
individual_id_images2: [
{ required: true, message: "请上传个人身份证反面", trigger: "change" },
],
individual_id_addr: [
{ required: true, message: "请输入个人身份证详细地址", trigger: "change" },
],
individual_id_period_begin: [
{
required: true,
message: "请选择个人身份证开始有效日期",
trigger: "change",
},
],
individual_id_period_end: [
{
required: true,
message: "请选择个人身份证截止有效日期",
trigger: "change",
},
],
bank_branch_name: [
{ required: true, message: "请选择银行", trigger: "change" },
],
@ -818,6 +966,24 @@ const rules = reactive({
],
});
watch(legal_person_date_type, (newVal) => {
if (newVal == 1) {
applyFormData.legal_person_id_period_end = "9999-12-31";
} else {
applyFormData.legal_person_id_period_end = "";
}
formRef.value.validate("legal_person_id_period_end");
});
watch(individual_date_type, (newVal) => {
if (newVal == 1) {
applyFormData.individual_id_period_end = "9999-12-31";
} else {
applyFormData.individual_id_period_end = "";
}
formRef.value.validate("individual_id_period_end");
});
const handleMerchApply = async () => {
console.log(2001);
const {
@ -828,7 +994,6 @@ const handleMerchApply = async () => {
clearing_bank_code,
account_number,
account_holder_name,
biz_category,
biz_license_company,
biz_license_image,
biz_license_number,
@ -857,6 +1022,14 @@ const handleMerchApply = async () => {
store_longitude,
store_name,
store_area,
biz_category,
biz_license_content,
legal_person_id_addr,
legal_person_id_period_begin,
legal_person_id_period_end,
individual_id_addr,
individual_id_period_begin,
individual_id_period_end,
} = applyFormData;
const res = await merchApply({
bank_name,
@ -867,6 +1040,7 @@ const handleMerchApply = async () => {
account_number,
account_holder_name,
biz_category,
biz_license_content,
biz_license_company,
biz_license_image,
biz_license_number,
@ -895,6 +1069,12 @@ const handleMerchApply = async () => {
store_longitude,
store_name,
store_area,
legal_person_id_addr,
legal_person_id_period_begin,
legal_person_id_period_end,
individual_id_addr,
individual_id_period_begin,
individual_id_period_end,
});
};
@ -903,13 +1083,13 @@ const checkForm = async () => {
return valid;
});
if(applyFormData.entity_type==2 && !applyFormData.bank_image){
ElMessage.error("请上传银行卡")
return
if (applyFormData.entity_type == 2 && !applyFormData.bank_image) {
ElMessage.error("请上传银行卡");
return;
}
if (isValid) {
handleMerchApply()
handleMerchApply();
}
};
@ -1127,7 +1307,7 @@ const isUploadHidden = (field: string) => {
if (field === "license_image") {
return applyFormData[field].length >= limit;
} else {
return applyFormData[field] !== "" && applyFormData[field] != null;
return applyFormData[field] != "" || applyFormData[field].length != 0;
}
};
@ -1183,19 +1363,72 @@ const handleOcrText = async (batchNo, imgType) => {
switch (imgType) {
case "biz_license_image":
var res = (await getOcrText(batchNo, orcImgTypeConf.BUSINESS_LICENCE)) as any;
var res = (await getOcrText(
batchNo,
orcImgTypeConf.BUSINESS_LICENCE
)) as any;
console.log("biz_license_image", res);
applyFormData.biz_license_company = res.bizLicenseCompanyName;
applyFormData.legal_person_name = res.bizLicenseOwnerName;
applyFormData.biz_license_number = res.bizLicenseCreditCode;
applyFormData.biz_license_content = res.bizLicenseScope;
applyFormData.account_holder_name = res.bizLicenseCompanyName;
break;
case "legal_person_id_images":
var res = (await getOcrText(batchNo, orcImgTypeConf.ID_CARD_FRONT)) as any;
var res = (await getOcrText(
batchNo,
orcImgTypeConf.ID_CARD_FRONT
)) as any;
console.log("legal_person_id_images", res);
applyFormData.legal_person_id_number = res.idNumber;
applyFormData.legal_person_id_addr = res.address;
break;
case "legal_person_id_images2":
var res = (await getOcrText(
batchNo,
orcImgTypeConf.ID_CARD_BEHIND
)) as any;
var validity = res.validity.split('-')
console.log("legal_person_id_images2", res);
applyFormData.legal_person_id_period_begin = validity[0];
if(validity[1]!='长期'){
applyFormData.legal_person_id_period_end = validity[1];
} else {
legal_person_date_type=1
applyFormData.legal_person_id_period_end = "9999-12-31"
}
break;
case "individual_id_images":
var res = (await getOcrText(
batchNo,
orcImgTypeConf.FR_ID_CARD_FRONT
)) as any;
console.log("individual_id_images", res);
applyFormData.individual_id_number = res.idNumber;
applyFormData.individual_id_addr = res.address;
break;
case "individual_id_images2":
var res = (await getOcrText(
batchNo,
orcImgTypeConf.ID_CARD_BEHIND
)) as any;
var validity = res.validity.split('-')
console.log("individual_id_images2", res);
applyFormData.individual_id_period_begin = validity[0];
if(validity[1]!='长期'){
applyFormData.individual_id_period_end = validity[1];
} else {
legal_person_date_type=1
applyFormData.individual_id_period_end = "9999-12-31"
}
break;
case "bank_image":
var res = (await getOcrText(batchNo, orcImgTypeConf.BANK_CARD)) as any;
@ -1205,7 +1438,7 @@ const handleOcrText = async (batchNo, imgType) => {
}
loading.value = false;
formRef.value.validate()
formRef.value.validate();
};
const handleUploadSuccess = async (response, file, fileList, field) => {
@ -1224,18 +1457,33 @@ const handleUploadSuccess = async (response, file, fileList, field) => {
switch (field) {
case "biz_license_image":
var res = await getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE);
currentBbatchNo.value = res.batchNo
handleOcrText(res.batchNo, field)
currentBbatchNo.value = res.batchNo;
handleOcrText(res.batchNo, field);
break;
case "legal_person_id_images":
var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT);
currentBbatchNo.value = res.batchNo
handleOcrText(res.batchNo, field)
currentBbatchNo.value = res.batchNo;
handleOcrText(res.batchNo, field);
break;
case "legal_person_id_images2":
var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND);
currentBbatchNo.value = res.batchNo;
handleOcrText(res.batchNo, field);
break;
case "individual_id_images":
var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT);
currentBbatchNo.value = res.batchNo;
handleOcrText(res.batchNo, field);
break;
case "individual_id_images2":
var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND);
currentBbatchNo.value = res.batchNo;
handleOcrText(res.batchNo, field);
break;
case "bank_image":
var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD);
currentBbatchNo.value = res.batchNo
handleOcrText(res.batchNo, field)
currentBbatchNo.value = res.batchNo;
handleOcrText(res.batchNo, field);
break;
}
} else {
@ -1247,38 +1495,40 @@ const handleUploadSuccess = async (response, file, fileList, field) => {
loading.value = false;
}
formRef.value.validate()
formRef.value.validate();
};
const handleUploadError = (error, file) => {
loading.value = false;
ElMessage.error("文件上传失败");
};
const clearOtherFields = () => {
// if (applyFormData.entity_type === 1) {
// // 清空个人部分的字段
// applyFormData.individual_id_number = "";
// applyFormData.individual_id_images = "";
// applyFormData.individual_id_images2 = "";
// } else if (applyFormData.entity_type === 2) {
// // 清空企业部分的字段
// applyFormData.license_type = "1";
// applyFormData.license_number = "";
// applyFormData.biz_license_number = "";
// applyFormData.biz_license_company = "";
// applyFormData.legal_person_name = "";
// applyFormData.legal_person_mobile = "";
// applyFormData.legal_person_id_number = "";
// applyFormData.biz_license_image = "";
// applyFormData.license_image = [];
// applyFormData.legal_person_id_images = "";
// applyFormData.legal_person_id_images2 = "";
// }
applyFormData.individual_id_number = "";
applyFormData.individual_id_images = "";
applyFormData.individual_id_images2 = "";
applyFormData.individual_id_addr = "";
applyFormData.individual_id_period_begin = "";
applyFormData.individual_id_period_end = "";
applyFormData.license_type = "1";
applyFormData.license_number = "";
applyFormData.license_image = [];
applyFormData.biz_license_image = "";
applyFormData.biz_license_number = "";
applyFormData.biz_license_company = "";
applyFormData.biz_license_content = "";
applyFormData.legal_person_name = "";
applyFormData.legal_person_mobile = "";
applyFormData.legal_person_id_number = "";
applyFormData.legal_person_id_images = "";
applyFormData.legal_person_id_images2 = "";
applyFormData.legal_person_id_addr = "";
applyFormData.legal_person_id_period_begin = "";
applyFormData.legal_person_id_period_end = "";
};
onMounted(() => {
bankListRemoteMethod();
GetStoreCategories()
.then((res) => {
if (res.code === 0 && res.status === 200) {