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

feat: 联调OCR接口，自动识别OCR文件内容填充到表单，优化步骤2切换tab时保留用户数据提高用户体验

Browse Source
This commit is contained in:
mixtan 2025-05-10 12:14:33 +08:00
parent 47e9f6e313
commit 1987d6361a
2 changed files with 188 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
java-mall-app-shop-admin/api/upload.js
View File

@ -10,6 +10,9 @@
* @seehttps://mall.gpxscs.cn/mobile/shop/oss/upload
*/
import http from '../utils/http'
import config from '../config/config'
export function UploadFilePromise(filePath, formData) {
let ukey = uni.getStorageSync('ukey');
return new Promise((resolve, reject) => {
@ -30,3 +33,37 @@ export function UploadFilePromise(filePath, formData) {
});
});
}
export function batchNoApi (filePath, file, type){
return new Promise((resolve, reject) => {
uni.uploadFile({
url:'https://mall.gpxscs.cn/mobile/shop/lakala/tk/uploadOcrImg',
method: "POST",
filePath,
name:'upfile',
formData: {
imgType: type,
},
success: (res) =>{
if(res?.data){
resolve(JSON.parse(res?.data)?.data)
}
},
fail: (res) =>{
reject(res)
}
})
})
}
export function imgOcrResultApi (data){
return http({
url:'/shop/lakala/tk/imgOcrResult',
method:'POST',
headers: {
'content-type': 'application/x-www-form-urlencoded',
},
data,
})
}

393
java-mall-app-shop-admin/pages/audit/shop2.vue
View File

@ -1,238 +1,104 @@
<template>
<view class="shop-2-container">
<u-navbar
:autoBack="true"
:safeAreaInsetTop="true"
title="填写店铺信息第2步 / 共3步"
>
<u-navbar :autoBack="true" :safeAreaInsetTop="true" title="填写店铺信息第2步 / 共3步">
<template slot="right">
<view class="btn-login-out" @click="LoginOut">退出登录</view>
</template>
</u-navbar>
<view class="shop-2-content">
<u-subsection
class="subsection"
:list="list"
:current="active"
@change="handleSubsection"
></u-subsection>
<view
class="up-block up-block-2"
v-show="active == 0"
style="margin-top: 0"
>
<u-form :model="form" class="form" ref="uForm" label-width="100">
<u-form-item
label="许可证类型"
required
prop="license_type"
@click="showPicker = true"
>
<u-input
style="pointer-events: none"
class="form-input"
v-model="form.license_type"
placeholder="请选择许可证类型"
readonly
/>
<u-icon
style="display: inline-block; margin-left: 8rpx"
name="arrow-down"
size="12"
color="#aaaaaa"
></u-icon>
</u-form-item>
<u-form-item label="许可证编号" prop="license_number" required>
<u-input
class="form-input"
v-model="form.license_number"
placeholder="请输入许可证编号"
/>
</u-form-item>
<u-form-item label="营业执照编号" prop="biz_license_number" required>
<u-input
class="form-input"
v-model="form.biz_license_number"
placeholder="请输入营业执照编号"
/>
</u-form-item>
<u-form-item
label="营业执照公司名或真实的公司名"
prop="biz_license_company"
required
>
<u-input
class="form-input"
v-model="form.biz_license_company"
placeholder="请输入营业执照公司名或真实的公司名"
/>
</u-form-item>
<u-form-item label="法人姓名" prop="legal_person_name" required>
<u-input
class="form-input"
v-model="form.legal_person_name"
placeholder="请输入法人姓名"
/>
</u-form-item>
<u-form-item label="法人手机号" prop="legal_person_mobile" required>
<u-input
class="form-input"
v-model="form.legal_person_mobile"
maxlength="11"
placeholder="请输入法人手机号"
/>
</u-form-item>
<u-form-item
label="法人身份证号码"
prop="legal_person_id_number"
required
>
<u-input
class="form-input"
maxlength="18"
v-model="form.legal_person_id_number"
placeholder="请输入法人证号码"
/>
</u-form-item>
</u-form>
</view>
<view
class="up-block up-block-2"
v-show="active == 1"
style="margin-top: 0"
>
<u-form :model="form2" class="form" ref="uForm2" label-width="100">
<u-form-item label="身份证号码" prop="individual_id_number" required>
<u-input
class="form-input"
maxlength="18"
v-model="form2.individual_id_number"
placeholder="请输入身份证号码"
/>
</u-form-item>
</u-form>
</view>
<u-subsection class="subsection" :list="list" :current="active" @change="handleSubsection"></u-subsection>
<view class="up-block" v-if="active == 0">
<view class="up-title"> 营业执照 点击上传 </view>
<u-upload
:class="fileList.length == 0 ? 'shop2-2-upload' : ''"
class="shop2-2-upload"
@afterRead="afterRead($event, 'businessLicense')"
@delete="deletePic($event, 'businessLicense')"
accept="image"
uploadIcon=""
:fileList="fileList"
:max-count="1"
width="125"
height="88"
></u-upload>
<view class="up-block" v-show="active == 0">
<view class="up-title"> 营业执照 <text class="color_red">（必传项）</text> </view>
<u-upload :class="fileList.length == 0 ? 'shop2-2-upload' : ''" class="shop2-2-upload"
@afterRead="afterRead($event, 'businessLicense')" @delete="deletePic($event, 'businessLicense')" accept="image"
uploadIcon="" :fileList="fileList" :max-count="1" width="125" height="88"></u-upload>
</view>
<view class="up-block up-block-2" v-if="active == 0">
<view class="up-block up-block-3" v-show="active == 0">
<view class="up-title">
法人身份证正反面（{{ fileList3.length + fileList4.length }} /2） <text class="color_red">（必传项）</text>
</view>
<view class="up-block-3-content">
<u-upload :class="fileList3.length == 0 ? 'shop2-4-upload' : ''" @afterRead="afterRead($event, 'idFront')"
@delete="deletePic($event, 'idFront')" accept="image" :fileList="fileList3" :max-count="1" width="180"
height="110" uploadIcon=""></u-upload>
<u-upload :class="fileList4.length == 0 ? 'shop2-5-upload' : ''" @afterRead="afterRead($event, 'idReverse')"
@delete="deletePic($event, 'idReverse')" accept="image" :fileList="fileList4" :max-count="1" width="180"
height="110" uploadIcon=""></u-upload>
</view>
</view>
<view class="up-block up-block-2" v-show="active == 0">
<view class="up-title">
许可证(最大上传{{ fileList2.length }}/5)
<u-icon
style="display: inline-block; margin: 0 8rpx"
@click="handlePopup"
name="question-circle"
size="12"
color="aaaaaa"
>
<u-icon style="display: inline-block; margin: 0 8rpx" @click="handlePopup" name="question-circle" size="12"
color="aaaaaa">
</u-icon>
点击上传
</view>
<u-upload
:class="fileList2.length == 0 ? 'shop2-3-upload' : ''"
@afterRead="afterRead($event, 'licenseNumber')"
@delete="deletePic($event, 'licenseNumber')"
accept="image"
:uploadIcon="fileList2.length == 0 ? '' : 'camera-fill'"
:fileList="fileList2"
:max-count="5"
width="125"
height="88"
></u-upload>
</view>
<view class="up-block up-block-3" v-if="active == 0">
<view class="up-title">
法人身份证正反面（{{ fileList3.length + fileList4.length }} /2）
</view>
<view class="up-block-3-content">
<u-upload
:class="fileList3.length == 0 ? 'shop2-4-upload' : ''"
@afterRead="afterRead($event, 'idFront')"
@delete="deletePic($event, 'idFront')"
accept="image"
:fileList="fileList3"
:max-count="1"
width="180"
height="110"
uploadIcon=""
></u-upload>
<u-upload
:class="fileList4.length == 0 ? 'shop2-5-upload' : ''"
@afterRead="afterRead($event, 'idReverse')"
@delete="deletePic($event, 'idReverse')"
accept="image"
:fileList="fileList4"
:max-count="1"
width="180"
height="110"
uploadIcon=""
></u-upload>
（可传项）
</view>
<u-upload :class="fileList2.length == 0 ? 'shop2-3-upload' : ''" @afterRead="afterRead($event, 'licenseNumber')"
@delete="deletePic($event, 'licenseNumber')" accept="image"
:uploadIcon="fileList2.length == 0 ? '' : 'camera-fill'" :fileList="fileList2" :max-count="5" width="125"
height="88"></u-upload>
</view>
<!--个人-->
<view class="up-block up-block-3" v-if="active == 1">
<view class="up-block up-block-3" v-show="active == 1">
<view class="up-title">
法人身份证正反面（{{ fileList5.length + fileList6.length }} /2）
法人身份证正反面（{{ fileList5.length + fileList6.length }} /2）<text class="color_red">（必传项）</text>
</view>
<view class="up-block-3-content">
<u-upload
:class="fileList5.length == 0 ? 'shop2-4-upload' : ''"
@afterRead="afterRead($event, 'personIdFront')"
@delete="deletePic($event, 'personIdFront')"
accept="image"
:fileList="fileList5"
:max-count="1"
width="180"
height="110"
:upload-text="''"
uploadIcon=""
></u-upload>
<u-upload
:class="fileList6.length == 0 ? 'shop2-5-upload' : ''"
@afterRead="afterRead($event, 'personIdReverse')"
@delete="deletePic($event, 'personIdReverse')"
accept="image"
:fileList="fileList6"
:max-count="1"
width="180"
height="110"
:upload-text="''"
uploadIcon=""
></u-upload>
<u-upload :class="fileList5.length == 0 ? 'shop2-4-upload' : ''" @afterRead="afterRead($event, 'personIdFront')"
@delete="deletePic($event, 'personIdFront')" accept="image" :fileList="fileList5" :max-count="1" width="180"
height="110" :upload-text="''" uploadIcon=""></u-upload>
<u-upload :class="fileList6.length == 0 ? 'shop2-5-upload' : ''"
@afterRead="afterRead($event, 'personIdReverse')" @delete="deletePic($event, 'personIdReverse')"
accept="image" :fileList="fileList6" :max-count="1" width="180" height="110" :upload-text="''"
uploadIcon=""></u-upload>
</view>
</view>
<view class="up-block up-block-2" v-show="active == 0">
<u-form :model="form" class="form" ref="uForm" label-width="120">
<u-form-item label="许可证类型" prop="license_type" @click="showPicker = true">
<u-input style="pointer-events: none" class="form-input" v-model="form.license_type" placeholder="请选择许可证类型"
readonly />
<u-icon style="display: inline-block; margin-left: 8rpx" name="arrow-down" size="12" color="#aaaaaa"></u-icon>
</u-form-item>
<u-form-item label="公司名称" prop="biz_license_company" required>
<u-input class="form-input" v-model="form.biz_license_company" placeholder="请输入公司名称" />
</u-form-item>
<u-form-item label="法人姓名" prop="legal_person_name" required>
<u-input class="form-input" v-model="form.legal_person_name" placeholder="请输入法人姓名" />
</u-form-item>
<u-form-item label="法人手机号" prop="legal_person_mobile" required>
<u-input class="form-input" v-model="form.legal_person_mobile" maxlength="11" placeholder="请输入法人手机号" />
</u-form-item>
<u-form-item label="法人身份证号码" prop="legal_person_id_number" required>
<u-input class="form-input" maxlength="18" v-model="form.legal_person_id_number" placeholder="请输入法人身份证号码" />
</u-form-item>
<u-form-item label="营业执照编号" prop="biz_license_number">
<u-input class="form-input" v-model="form.biz_license_number" placeholder="请输入营业执照编号" />
</u-form-item>
<u-form-item label="许可证编号" prop="license_number">
<u-input class="form-input" v-model="form.license_number" placeholder="请输入许可证编号" />
</u-form-item>
</u-form>
</view>
<view class="up-block up-block-2" v-show="active == 1">
<u-form :model="form2" class="form" ref="uForm2" label-width="100">
<u-form-item label="身份证号码" prop="individual_id_number" required>
<u-input class="form-input" maxlength="18" v-model="form2.individual_id_number" placeholder="请输入身份证号码" />
</u-form-item>
</u-form>
</view>
</view>
<view class="btn-content">
<u-button class="btn-next" @click="handleNext">下一步</u-button>
</view>
<u-popup
class="shop2-popup"
:mask="true"
@close="closePopup"
:show="showPopup"
:closeable="true"
mode="bottom"
:mask-close-able="true"
:safe-area-inset-bottom="true"
>
<u-popup class="shop2-popup" :mask="true" @close="closePopup" :show="showPopup" :closeable="true" mode="bottom"
:mask-close-able="true" :safe-area-inset-bottom="true">
<view class="popup-content">
<view class="popup-title">可上传证件类型</view>
<view class="popup-tips"
>请根据您的主营品类上传真实有效的许可证，能够提高入驻通过的效率。目前支持的许可证如下：</view
>
<view class="popup-tips">请根据您的主营品类上传真实有效的许可证，能够提高入驻通过的效率。目前支持的许可证如下：</view>
<view class="popuo-prove-item">
<view class="item-title">许可证</view>
<view class="item-content">
@ -251,27 +117,28 @@
支持各种小证,因各地监管规则不一,请联系客服获取其他小证支持情况的详细。
</view>
</view>
<u-button class="btn-queren" @click="showPopup = false"
>我知道了</u-button
>
<u-button class="btn-queren" @click="showPopup = false">我知道了</u-button>
</view>
</u-popup>
<u-picker
:show="showPicker"
:columns="columns"
:safe-area-inset-bottom="true"
:default-selector="[0]"
:keyName="'name'"
@cancel="handleCancel"
@confirm="handleConfirm"
></u-picker>
<u-picker :show="showPicker" :columns="columns" :safe-area-inset-bottom="true" :default-selector="[0]"
:keyName="'name'" @cancel="handleCancel" @confirm="handleConfirm"></u-picker>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { mapActions } from "vuex";
import { UploadFilePromise } from "../../api/upload";
import { UploadFilePromise, batchNoApi, imgOcrResultApi } from "../../api/upload";
const orcImgTypeConf = {
FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
FR_ID_CARD_BEHIND: "FR_ID_CARD_BEHIND",
ID_CARD_FRONT: "ID_CARD_FRONT",
ID_CARD_BEHIND: "ID_CARD_BEHIND",
BUSINESS_LICENCE: "BUSINESS_LICENCE",
BANK_CARD: "BANK_CARD"
}
export default {
data() {
return {
@ -287,8 +154,6 @@ export default {
},
],
form: {
license_type: "", // 许可证类型
license_number: "", // 许可证编号
license_image: "", // 许可证路径
biz_license_number: "", //营业执照编号
biz_license_company: "", // 公司真实名字
@ -333,19 +198,9 @@ export default {
trigger: ["blur"],
message: "请选择您的许可证类型",
},
license_number: {
required: true,
message: "请输入许可证编号",
trigger: ["change", "blur"],
},
biz_license_number: {
required: true,
message: "请输入营业执照编号",
trigger: ["change", "blur"],
},
biz_license_company: {
required: true,
message: "请输入营业执照公司名或真实的公司名",
message: "请输入公司名称",
trigger: ["blur"],
},
legal_person_name: {
@ -387,6 +242,7 @@ export default {
trigger: ["blur"],
},
],
orcTimeout:null
},
rules2: {
individual_id_number: [
@ -415,6 +271,34 @@ export default {
},
methods: {
...mapActions("user", ["LoginOut"]),
getOcrText(filePath, file, type) {
return new Promise(async (resolve, reject) => {
const batchNoRes = await batchNoApi(filePath, file, type)
const batchNo = batchNoRes.batchNo
const formData = new FormData();
let formDataStr = '';
formData.append('batchNo', batchNo)
formData.append('imgType', type)
clearTimeout(this.orcTimeout)
this.orcTimeout = setTimeout(async () => {
formData.forEach((value, key) => {
if (formDataStr !== '') {
formDataStr += '&';
}
formDataStr += encodeURIComponent(key) + '=' + encodeURIComponent(value);
});
const imgOcrRes = await imgOcrResultApi(formDataStr)
clearTimeout(this.orcTimeout)
resolve(imgOcrRes?.data)
}, 1000);
})
},
//营业执照
async afterRead(e, type) {
const item = e.file;
@ -424,6 +308,7 @@ export default {
url: imgUrl,
};
switch (type) {
case "businessLicense":
this.fileList.push(group);
@ -446,6 +331,7 @@ export default {
}
let res = await UploadFilePromise(imgUrl);
if (res && res.status == 200) {
switch (type) {
case "businessLicense":
@ -472,6 +358,23 @@ export default {
break;
}
}
switch (type) {
case "businessLicense":
var ocr = await this.getOcrText(imgUrl, item, orcImgTypeConf.BUSINESS_LICENCE);
this.form.biz_license_company = ocr.bizLicenseCompanyName
this.form.legal_person_name = ocr.bizLicenseOwnerName
console.log("BUSINESS_LICENCE", ocr);
break;
case "licenseNumber":
break;
case "idFront":
var ocr = await this.getOcrText(imgUrl, item, orcImgTypeConf.ID_CARD_FRONT);
this.form.legal_person_name = ocr.name
this.form.legal_person_id_number = ocr.idNumber
console.log("ID_CARD_FRONT", ocr);
break;
}
},
deletePic(e, type) {
switch (type) {
@ -500,12 +403,12 @@ export default {
},
handleSubsection(e) {
this.active = e;
this.fileList = [];
this.fileList2 = [];
this.fileList3 = [];
this.fileList4 = [];
this.fileList5 = [];
this.fileList6 = [];
// this.fileList = [];
// this.fileList2 = [];
// this.fileList3 = [];
// this.fileList4 = [];
// this.fileList5 = [];
// this.fileList6 = [];
},
handlePopup() {
this.showPopup = true;
@ -637,6 +540,7 @@ export default {
.up-block {
background: #fff;
padding: 24rpx;
margin-bottom: 20rpx;
.up-title {
font-weight: bold;
@ -677,7 +581,8 @@ export default {
}
.up-block-2 {
margin: 20rpx 0;
// margin: 20rpx 0;
padding: 24rpx 24rpx 24rpx 32rpx;
}
.up-block-3-content {
@ -747,5 +652,9 @@ export default {
font-size: 28rpx;
color: #4b71ff;
}
.color_red {
color: red;
}
}
</style>