update: 地图组件更新格式和优化代码，店铺信息添加所在省市区字段，结算信息按新需求银行卡号和支行合并以及重构交互UI，先选择证件上传然后识别出来自动填写再显示表单内容，同时再选择银行，最后提交审核开店

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

@@ -7,7 +7,7 @@
         required
         @click="showMPCityPicker"
       >
-      <u-input
+        <u-input
           disabled
           disabledColor="#fff"
           class="form-input city-input"
@@ -32,9 +32,7 @@
         />
       </u-form-item>
     </u-form>
-    <view class="tips" v-if="searchAddressList.length > 0"
+    <view class="tips" v-if="searchAddressList.length > 0">单击地址确定</view>
-      >单击地址确定</view
-    >
     <scroll-view
       v-if="form.searchAddress.length > 0"
       class="uni-swiper-list"
@@ -207,12 +205,14 @@ export default {
       if (
         !this.locationItem.selectAddress ||
         !this.locationItem.administrativeRegion
-      )
+      ) {
         return;
+      }
 
-      if (this.locationItem);
+      if (this.locationItem) {
+        uni.setStorageSync("locationItem", this.locationItem);
+      }
 
-      uni.setStorageSync("locationItem", this.locationItem);
       uni.navigateBack();
     },
   },
@@ -303,8 +303,8 @@ export default {
     color: #fff;
   }
 
-  .city-input{
+  .city-input {
     pointer-events: none;
   }
 }
-</style>
+</style>

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

@@ -6,11 +6,7 @@
       icon-size="30"
       loading-text="加载中,请稍等..."
     ></u-loading-page> -->
-    <u-navbar
+    <u-navbar :autoBack="true" :safeAreaInsetTop="true" title="填写店铺信息">
-      :autoBack="true"
-      :safeAreaInsetTop="true"
-      title="填写店铺信息"
-    >
       <template slot="right">
         <view class="btn-login-out" @click="loginOut">退出登录</view>
       </template>
@@ -285,6 +281,11 @@ export default {
             params.mobile = userInfo.user_mobile;
           }
 
+          const store_area =
+            locationItem.administrativeRegion.label[0] +
+            locationItem.administrativeRegion.label[1] +
+            locationItem.administrativeRegion.label[2];
+
           let auditItem = {
             login_mobile: userInfo.user_mobile,
             store_name: this.form.store_name,
@@ -296,11 +297,8 @@ export default {
             province_id: locationItem.administrativeRegion.value[0],
             city_id: locationItem.administrativeRegion.value[1],
             county_id: locationItem.administrativeRegion.value[2],
-            store_address:
+            store_area,
-              locationItem.administrativeRegion.label[0] +
+            store_address: store_area + this.form.store_address,
-              locationItem.administrativeRegion.label[1] +
-              locationItem.administrativeRegion.label[2] +
-              this.form.store_address,
             front_facade_image: this.form.storefrontImg,
             environment_image: this.form.surroundingsImg,
           };
@@ -384,4 +382,4 @@ export default {
     color: #4b71ff;
   }
 }
-</style>
+</style>

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

@@ -8,151 +8,177 @@
 
     <view class="from1">
       <u-form :model="form" ref="uForm" label-width="90">
-      <u-form-item label="开户名称" required prop="account_holder_name">
+        <u-form-item label="" class="bankcard_item">
-        <u-input v-model="form.account_holder_name" placeholder="请输入开户名称" />
+          <u-upload
-      </u-form-item>
+            class="bankcard_upload"
+            @afterRead="afterRead($event, 'bankCard')"
+            @delete="deletePic($event, 'bankCard')"
+            accept="image"
+            :fileList="bankCardFiles"
+            :max-count="1"
+            uploadIconColor="#4b71ff"
+            width="268"
+            height="125"
+            uploadText="点击上传银行卡正面"
+          >
+          </u-upload>
+          <view
+            v-if="bankCardFiles.length && !form.account_number"
+            class="retry_ocr"
+            @click="onBankOcrretryClick"
+            >点击自动识别免填卡号</view
+          >
+        </u-form-item>
 
-      <u-form-item label="银行卡号" required prop="account_number">
+        <template v-if="bankCardFiles.length && bankCardOcrLoaded">
-        <u-input
+          <u-form-item label="开户名称" required prop="account_holder_name">
-          type="number"
+            <u-input
-          v-model="form.account_number"
+              v-model="form.account_holder_name"
-          placeholder="请输入银行卡号"
+              placeholder="请输入开户名称"
-        />
+              readonly
-      </u-form-item>
+            />
+          </u-form-item>
 
-      <u-form-item label="开户行" prop="bank_name" required @click="showActionSheet">
+          <u-form-item label="银行卡号" required prop="account_number">
-        <u-input
+            <u-input
-          style="pointer-events: none"
+              type="number"
-          class="form-input"
+              v-model="form.account_number"
-          v-model="form.bank_name"
+              placeholder="请输入银行卡号"
-          placeholder="请选择开户行"
+              readonly
-          readonly
+            />
-        />
+          </u-form-item>
-        <u-icon
-          style="display: inline-block; margin-left: 8rpx"
-          name="arrow-down"
-          size="12"
-          color="aaaaaa"
-        ></u-icon>
-      </u-form-item>
 
-      <u-form-item
+          <u-form-item
-        label="开户支行"
+            label="开户银行"
-        prop="bank_branch_name"
+            prop="branch_name"
-        @click="branchBankActionSheet"
+            @click="onBranchDialogOpen"
-      >
+            required
-        <u-input
+          >
-          :readonly="!form.bank_name"
+            <u-input
-          :style="{ pointerEvents: form.bank_name ? '' : 'none' }"
+              style="pointerevents: 'none'"
-          class="form-input"
+              class="form-input"
-          v-model="form.bank_branch_name"
+              v-model="form.branch_name"
-          placeholder="请选择开户支行名称"
+              placeholder="请选择开户银行"
-          @change="onBranchBankChange"
+              @change="onBranchBankChange"
-        />
+            />
-        <u-icon
+            <u-icon
-          style="display: inline-block; margin-left: 8rpx"
+              style="display: inline-block; margin-left: 8rpx"
-          name="arrow-down"
+              name="arrow-down"
-          size="12"
+              size="12"
-          color="aaaaaa"
+              color="aaaaaa"
-        ></u-icon>
+            ></u-icon>
-      </u-form-item>
+          </u-form-item>
-    </u-form>
+        </template>
+      </u-form>
     </view>
 
-
+    <u-popup
-    <lzcPicker
+      :show="showBankDialog"
-      :pickerList="bankList"
+      closeable
-      :showKey="'bank_name'"
+      @open="onBranchDialogOpen"
-      @change="handleCancel"
+      @close="onBranchDialogClose"
-      :searchPlaceholder="'输入开户支行名称'"
-      ref="lzcPicker"
-      pickerTittle="选择开户支行"
-    ></lzcPicker>
-
-    <tui-dropdown-list
-      :show="BranchBankDropdownShow"
-      :height="500"
-      class="dropdown_branch"
     >
-      <template v-slot:dropdownbox>
+      <u-input
-        <div class="branch_list">
+        class="search_box"
-          <template v-if="branchBankList.length">
+        prefixIcon="search"
-            <view
+        v-model="branchSearchText"
-              class="branch_list_item"
+        placeholder="搜索开户银行关键词"
-              v-for="(item, index) in branchBankList"
+        @change="onBranchBankChange"
-              :key="item.id"
+      />
-              @click="onBranchBankSelect(item, $event)"
+      <div class="branch_list">
-            >
+        <template v-if="bankList.length">
-              {{ item.branch_bank_name }}
+          <view
-            </view>
+            class="branch_list_item"
-          </template>
+            v-for="(item, index) in bankList"
-          <view v-else class="nodata">
+            :key="item.id"
-            <template v-if="firstBranchBankLoad">
+            @click="onBankSelect(item, $event)"
-              <view class="tit">暂无法搜索到该开户支行</view>
+          >
-              <view class="tips" @click="onUseBankBranchClick">点击填写</view>
+            {{ item.branch_bank_name }}
-            </template>
-            <template v-else>
-              <view class="tit">数据加载中...</view>
-            </template>
           </view>
-        </div>
+        </template>
-        <u-icon
+        <view v-else class="nodata">
-          v-if="firstBranchBankLoad"
+          <template v-if="firstBranchBankLoad">
-          name="close-circle"
+            <view class="tit">暂无法搜索到该银行支行</view>
-          color="#999"
+          </template>
-          size="28"
+          <template v-else>
-          class="icon_close"
+            <view class="tit">数据加载中...</view>
-          @click="onBranchBankDropdownClose"
+          </template>
-        ></u-icon>
+        </view>
-      </template>
+      </div>
-    </tui-dropdown-list>
+    </u-popup>
 
     <view class="btn-content">
-      <view class="myui_check_text">检查并确认资金结算信息无误</view>
+      <view class="myui_check_text" v-if="bankCardFiles.length"
-      <u-button text="提交审核" color="#4b71ff" @click="handleSubmit"></u-button>
+        >检查并确认结算证件信息无误</view
-      <u-button text="上一步" class="myui_btn_prev" @click="handlePrev"></u-button>
+      >
+      <u-button
+        text="提交审核"
+        color="#4b71ff"
+        :disabled="!bankCardFiles.length"
+        @click="handleSubmit"
+      ></u-button>
+      <u-button
+        text="上一步"
+        class="myui_btn_prev"
+        @click="handlePrev"
+      ></u-button>
     </view>
 
+    <u-loading-page
+      :loading="loading"
+      bgColor="rgba(0,0,0,0.5)"
+      fontSize="32rpx"
+      color="#fff"
+      loadingText="数据正在加载中..."
+    ></u-loading-page>
+
     <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
 import {
-  GetBankList,
   GetMerchApply,
   GetRestartMerchApply,
   branchBankSearchApi,
 } from "@/api/audit";
-import lzcPicker from "@/components/lzc-picker/lzc-picker.vue";
+import { batchNoApi, imgOcrResultApi } from "../../api/upload";
-import tuiDropdownList from "@/components/tui-dropdown-list/tui-dropdown-list.vue";
 import { mapState } from "vuex";
 import { throttle, debounce } from "lodash";
 
+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 {
-  components: {
+  components: {},
-    lzcPicker,
-    tuiDropdownList,
-  },
   data() {
     return {
       form: {
-        bank_name: "",
+        branch_name: "",
-        bank_branch_name: "",
         account_number: "",
         account_holder_name: "",
       },
-      bankList: [],
+      bankCardFiles: [],
+      loading: false,
+      branchSearchText: "",
+      bankCardOcrLoaded: false,
       firstBranchBankLoad: false,
-      BranchBankDropdownShow: false,
+      showBankDialog: false,
       branchBankDebounceFn: null,
-      currentBranchBank: null,
+      currentBank: {},
-      branchBankList: [],
+      currentBankFile: {},
+      bankList: [],
       rules: {
-        bank_name: [
+        branch_name: [
           {
             required: true,
-            message: "请选择开户行",
+            message: "请选择银行支行",
             // 可以单个或者同时写两个触发验证方式
             trigger: ["change", "blur"],
           },
@@ -182,9 +208,7 @@ export default {
   onReady() {
     this.$refs["uForm"].setRules(this.rules);
   },
-  onShow() {
+  onShow() {},
-    this.getBankList();
-  },
   beforeUnmount() {
     this.branchBankDebounceFn?.cancel();
   },
@@ -195,120 +219,184 @@ export default {
     this.branchBankDebounceFn = debounce(this.getBranchBankList, 500);
   },
   methods: {
-    async getBankList() {
+    getOcrText(filePath, file, type) {
-      let res = await GetBankList();
+      return new Promise(async (resolve, reject) => {
+        this.loading = true;
 
-      if (res && res.status == 200) {
+        const batchNoRes = await batchNoApi(filePath, file, type);
-        this.bankList = res.data;
+        const batchNo = batchNoRes.batchNo;
-      }
+
+        if (!batchNoRes) {
+          this.loading = false;
+          this.bankCardOcrLoaded = true;
+          reject(batchNoRes);
+        }
+
+        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);
+
+          if (imgOcrRes?.status == 200) {
+            this.showBankDialog = true;
+            resolve(imgOcrRes?.data);
+          } else {
+            reject(imgOcrRes);
+          }
+
+          clearTimeout(this.orcTimeout);
+          this.loading = false;
+          this.bankCardOcrLoaded = true;
+        }, 2000);
+      });
+    },
+
+    async setFromItemWithOcr() {
+      var ocr = await this.getOcrText(
+        this.currentBankFile.path,
+        this.currentBankFile.file,
+        orcImgTypeConf.BANK_CARD
+      );
+      this.form.account_number = ocr.card_number;
+      this.branchSearchText = ocr.issuer;
+      console.log("bankCard", ocr);
+    },
+
+    async afterRead(e) {
+      const item = e.file;
+      const imgUrl = item.url;
+
+      const group = {
+        url: imgUrl,
+      };
+
+      console.log(e);
+
+      this.currentBankFile = {
+        file: item,
+        path: imgUrl,
+      };
+
+      this.bankCardFiles.push(group);
+      this.setFromItemWithOcr();
+    },
+
+    async onBankOcrretryClick() {
+      this.setFromItemWithOcr();
+    },
+
+    deletePic(e) {
+      this.bankCardFiles.splice(0, 1);
+      this.form.account_number = "";
+      this.form.branch_name = "";
+      this.branchSearchText = "";
+      this.currentBank = {};
+      this.bankCardOcrLoaded = false;
     },
 
     async getBranchBankList(keyword) {
       let res = await branchBankSearchApi({
         keyword,
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 1000 * 10,
       });
 
-      this.branchBankList = res.data.items;
+      this.bankList = res.data.items;
       this.firstBranchBankLoad = true;
     },
 
     handlePrev() {
-      uni.navigateBack()
+      uni.navigateBack();
     },
 
     async handleSubmit() {
-      let valid = this.$refs.uForm.validate().then((valid) => {
+      if (!this.bankCardFiles.length) {
-        return valid;
-      });
-
-      if (valid) {
-        let auditItem = uni.getStorageSync("auditItem");
-
-        // auditItem.login_mobile = "18620139098";
-
-        let params = {
-          ...this.form,
-          ...auditItem,
-          ...this.currentBranchBank
-        };
-
-        console.log("params", params);
-
-        if (this.approvalStatus == 2) {
-          params.id = uni.getStorageSync("auditId");
-          let res = await GetRestartMerchApply(params);
-          if (res && res.status == 200) {
-            uni.removeStorageSync("locationItem");
-            uni.removeStorageSync("auditItem");
-            uni.removeStorageSync("typeItem");
-            uni.removeStorageSync("auditId");
-            uni.navigateTo({ url: "/pages/audit/checkAudit" });
-          }
-        } else {
-          let res = await GetMerchApply(params);
-          if (res && res.status == 200) {
-            uni.removeStorageSync("locationItem");
-            uni.removeStorageSync("auditItem");
-            uni.removeStorageSync("typeItem");
-            uni.removeStorageSync("auditId");
-            uni.navigateTo({ url: "/pages/audit/checkAudit" });
-          }
-        }
-      }
-    },
-
-    showActionSheet() {
-      this.$refs["lzcPicker"].handleShow();
-      if (this.bankList.length <= 0) {
-        this.getBankList();
-      }
-    },
-
-    branchBankActionSheet() {
-      if (!this.form.bank_name) {
         this.$refs.uToast.show({
-          message: "请选择开户行",
+          message: "请上传银行卡正面",
           type: "error",
           duration: 1000,
         });
         return;
       }
 
-      if (!this.form.bank_branch_name) {
+      this.$refs.uForm.validate().then(async (valid) => {
-        this.branchBankDebounceFn(this.form.bank_name || "中国银行");
+        if (valid) {
-      }
+          let auditItem = uni.getStorageSync("auditItem");
+          let params = {
+            ...this.form,
+            ...auditItem,
+            ...this.currentBank,
+            store_area: "北京北京市东城区北京动物园",
+          };
 
-      this.BranchBankDropdownShow = true;
+          console.log("params", params);
+
+          if (this.approvalStatus == 2) {
+            params.id = uni.getStorageSync("auditId");
+            let res = await GetRestartMerchApply(params);
+            if (res && res.status == 200) {
+              uni.removeStorageSync("locationItem");
+              uni.removeStorageSync("auditItem");
+              uni.removeStorageSync("typeItem");
+              uni.removeStorageSync("auditId");
+              uni.navigateTo({ url: "/pages/audit/checkAudit" });
+            }
+          } else {
+            let res = await GetMerchApply(params);
+            if (res && res.status == 200) {
+              uni.removeStorageSync("locationItem");
+              uni.removeStorageSync("auditItem");
+              uni.removeStorageSync("typeItem");
+              uni.removeStorageSync("auditId");
+              uni.navigateTo({ url: "/pages/audit/checkAudit" });
+            }
+          }
+        }
+      });
     },
 
-    onUseBankBranchClick() {
+    onBankSelect(data) {
-      this.BranchBankDropdownShow = false;
+      const { district, area, branch_bank_name, branch_bank_no, clear_no } =
-    },
+        data;
-
+      this.currentBank = {
-    onBranchBankSelect(data) {
+        bank_district: district,
-      const { area_code, branch_bank_name, branch_bank_no, clear_no } = data;
+        bank_area: area,
-      this.currentBranchBank = {
+        bank_name: branch_bank_name,
-        area_code,
-        branch_bank_name,
         openning_bank_code: branch_bank_no,
         clearing_bank_code: clear_no,
       };
-      this.BranchBankDropdownShow = false;
+      this.form.branch_name = branch_bank_name;
-      this.form.bank_branch_name = data.branch_bank_name;
+      this.showBankDialog = false;
     },
 
-    onBranchBankDropdownClose() {
+    onBranchDialogOpen() {
-      this.BranchBankDropdownShow = false;
+      if (this.branchSearchText) {
+        this.branchBankDebounceFn(this.branchSearchText || "中国银行");
+      }
+
+      this.showBankDialog = true;
+    },
+
+    onBranchDialogClose() {
+      this.showBankDialog = false;
     },
 
     async onBranchBankChange() {
-      this.branchBankDebounceFn(this.form.bank_branch_name);
+      this.branchBankDebounceFn(this.branchSearchText);
-    },
-
-    handleCancel(item) {
-      this.form.bank_name = item.bank_name;
     },
 
     loginOut() {
@@ -318,7 +406,15 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+/deep/ .u-form-item__body {
+  padding: 0 0 20rpx;
+}
+/deep/ .u-upload__wrap__preview,
+/deep/ .u-upload__button {
+  margin: 0;
+}
+
 .shop-3-container {
   ::v-deep .tui-dropdownlist-show {
     box-shadow: 1rpx 1rpx 20rpx rgba(100, 100, 100, 0.1);
@@ -333,7 +429,32 @@ export default {
     }
   }
 
+  /deep/ .u-popup__content__close {
+    top: -90rpx;
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    .u-icon__icon {
+      color: #fff !important;
+      border: 5rpx solid #fff;
+      padding: 10rpx;
+      font-size: 28rpx !important;
+      line-height: 28rpx !important;
+      border-radius: 100%;
+    }
+  }
+
+  .search_box {
+    margin: 24rpx;
+    background: rgba(238, 238, 238, 0.5);
+    border-radius: 100rpx;
+    /deep/ .input-placeholder {
+      color: #666 !important;
+    }
+  }
+
   .branch_list {
+    margin: 0 24rpx;
     height: 500rpx;
     overflow: auto;
     background: #fff;
@@ -371,13 +492,12 @@ export default {
     height: 88rpx;
   }
 
-
+  .from1 {
-  .from1{
+    padding: 24rpx 24rpx 0rpx 36rpx;
-    padding: 24rpx 24rpx 24rpx 36rpx;
   }
 
   .btn-content {
-    padding: 30rpx 24rpx 88rpx;
+    padding: 30rpx 48rpx 88rpx;
   }
 
   .btn-submit {
@@ -390,5 +510,25 @@ export default {
     font-size: 28rpx;
     color: #4b71ff;
   }
+
+  .bankcard_upload {
+    margin: auto;
+    align-items: center;
+  }
+  /deep/ .u-form-item__body__right {
+    position: relative;
+  }
+  .retry_ocr {
+    padding: 15rpx 24rpx;
+    border-radius: 100rpx;
+    color: #fff;
+    background: rgba(75, 113, 255, 0.95);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    font-size: 24rpx;
+    line-height: 24rpx;
+  }
 }
-</style>
+</style>