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

java-mall-app-shop-admin/api/upload.js

@@ -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,
+  })
+}

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

@@ -1,238 +1,104 @@
 <template>
   <view class="shop-2-container">
-    <u-navbar
+    <u-navbar :autoBack="true" :safeAreaInsetTop="true" title="填写店铺信息第2步 / 共3步">
-      :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
+      <u-subsection class="subsection" :list="list" :current="active" @change="handleSubsection"></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>
 
-      <view class="up-block" v-if="active == 0">
+      <view class="up-block" v-show="active == 0">
-        <view class="up-title"> 营业执照 点击上传 </view>
+        <view class="up-title"> 营业执照 <text class="color_red">（必传项）</text> </view>
-        <u-upload
+        <u-upload :class="fileList.length == 0 ? 'shop2-2-upload' : ''" class="shop2-2-upload"
-          :class="fileList.length == 0 ? 'shop2-2-upload' : ''"
+          @afterRead="afterRead($event, 'businessLicense')" @delete="deletePic($event, 'businessLicense')" accept="image"
-          class="shop2-2-upload"
+          uploadIcon="" :fileList="fileList" :max-count="1" width="125" height="88"></u-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
+          <u-icon style="display: inline-block; margin: 0 8rpx" @click="handlePopup" name="question-circle" size="12"
-            style="display: inline-block; margin: 0 8rpx"
+            color="aaaaaa">
-            @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
+          <u-upload :class="fileList5.length == 0 ? 'shop2-4-upload' : ''" @afterRead="afterRead($event, 'personIdFront')"
-            :class="fileList5.length == 0 ? 'shop2-4-upload' : ''"
+            @delete="deletePic($event, 'personIdFront')" accept="image" :fileList="fileList5" :max-count="1" width="180"
-            @afterRead="afterRead($event, 'personIdFront')"
+            height="110" :upload-text="''" uploadIcon=""></u-upload>
-            @delete="deletePic($event, 'personIdFront')"
+          <u-upload :class="fileList6.length == 0 ? 'shop2-5-upload' : ''"
-            accept="image"
+            @afterRead="afterRead($event, 'personIdReverse')" @delete="deletePic($event, 'personIdReverse')"
-            :fileList="fileList5"
+            accept="image" :fileList="fileList6" :max-count="1" width="180" height="110" :upload-text="''"
-            :max-count="1"
+            uploadIcon=""></u-upload>
-            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
+    <u-popup class="shop2-popup" :mask="true" @close="closePopup" :show="showPopup" :closeable="true" mode="bottom"
-      class="shop2-popup"
+      :mask-close-able="true" :safe-area-inset-bottom="true">
-      :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 class="popup-tips">请根据您的主营品类上传真实有效的许可证，能够提高入驻通过的效率。目前支持的许可证如下：</view>
-          >请根据您的主营品类上传真实有效的许可证，能够提高入驻通过的效率。目前支持的许可证如下：</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 class="btn-queren" @click="showPopup = false">我知道了</u-button>
-          >我知道了</u-button
-        >
       </view>
     </u-popup>
-    <u-picker
+    <u-picker :show="showPicker" :columns="columns" :safe-area-inset-bottom="true" :default-selector="[0]"
-      :show="showPicker"
+      :keyName="'name'" @cancel="handleCancel" @confirm="handleConfirm"></u-picker>
-      :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.fileList = [];
-      this.fileList2 = [];
+      // this.fileList2 = [];
-      this.fileList3 = [];
+      // this.fileList3 = [];
-      this.fileList4 = [];
+      // this.fileList4 = [];
-      this.fileList5 = [];
+      // this.fileList5 = [];
-      this.fileList6 = [];
+      // 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>