feat: main引入reset重置样式后续可慢慢添加，引入lodash工具库方便处理数据，添加搜索银行（支行）分页列表接口，银行卡资料填写支持开户支行搜索或手动填写

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

@@ -239,3 +239,20 @@ export function GetBizCategoryList(params) {
     data: params,
   });
 }
+
+
+/**
+ * 搜索银行（支行）分页列表
+ * @author Seven
+ * @data 2025-5-13
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/mobile/shop/lakala/tk/bank/search
+ */
+
+export function branchBankSearchApi(params) {
+  return http({
+    url: '/shop/lakala/tk/bank/search',
+    method: 'post',
+    data: params,
+  });
+}

java-mall-app-shop-admin/main.js

@@ -5,6 +5,7 @@ import uView from '@/uni_modules/uview-ui'
 import './uni.promisify.adaptor'
 import tui from './utils/httpRequest'
 import Socket  from './utils/socket.js'
+import "@/static/reset.css"
 // import Utils from './utils/http'
 // import "@/static/font/iconfont.css"
 

java-mall-app-shop-admin/package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "dependencies": {
         "axios": "^0.27.2",
-        "axios-adapter-uniapp": "^0.1.4"
+        "axios-adapter-uniapp": "^0.1.4",
+        "lodash": "^4.17.21"
       },
       "devDependencies": {
         "sass": "^1.80.6",
@@ -475,6 +476,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "http://npm.ifengqun.com:4873/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://mirrors.tencent.com/npm/micromatch/-/micromatch-4.0.8.tgz",
@@ -864,6 +871,11 @@
       "dev": true,
       "optional": true
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "http://npm.ifengqun.com:4873/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "micromatch": {
       "version": "4.0.8",
       "resolved": "https://mirrors.tencent.com/npm/micromatch/-/micromatch-4.0.8.tgz",

java-mall-app-shop-admin/package.json

@@ -5,6 +5,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "axios-adapter-uniapp": "^0.1.4"
+    "axios-adapter-uniapp": "^0.1.4",
+    "lodash": "^4.17.21"
   }
 }

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

@@ -1,26 +1,29 @@
 <template>
   <view class="shop-3-container">
-    <u-navbar
+    <u-navbar :autoBack="true" :safeAreaInsetTop="true" title="填写店铺信息第3步 / 共3步">
-      :autoBack="true"
-      :safeAreaInsetTop="true"
-      title="填写店铺信息第3步 / 共3步"
-    >
       <template slot="right">
         <view class="btn-login-out" @click="loginOut">退出登录</view>
       </template>
     </u-navbar>
     <u-form :model="form" ref="uForm" label-width="90">
-      <u-form-item
+      <u-form-item label="开户名称" required prop="account_holder_name">
-        label="开户行"
+        <u-input v-model="form.account_holder_name" placeholder="请输入开户名称" />
-        prop="bank_name"
+      </u-form-item>
-        required
+
-        @click="showActionSheet"
+      <u-form-item label="银行卡号" required prop="account_number">
-      >
+        <u-input
+          type="number"
+          v-model="form.account_number"
+          placeholder="请输入银行卡号"
+        />
+      </u-form-item>
+
+      <u-form-item label="开户行" prop="bank_name" required @click="showActionSheet">
         <u-input
           style="pointer-events: none"
           class="form-input"
           v-model="form.bank_name"
-          placeholder="请选择您的开户行"
+          placeholder="请选择开户行"
           readonly
         />
         <u-icon
@@ -30,62 +33,103 @@
           color="aaaaaa"
         ></u-icon>
       </u-form-item>
-      <u-form-item label="开户银行的支行名称" required prop="bank_branch_name">
+
+      <u-form-item
+        label="开户支行"
+        prop="bank_branch_name"
+        @click="branchBankActionSheet"
+      >
         <u-input
+          :readonly="!form.bank_name"
+          :style="{ pointerEvents: form.bank_name ? '' : 'none' }"
+          class="form-input"
           v-model="form.bank_branch_name"
-          placeholder="请输入开户银行的支行名称"
+          placeholder="请选择开户支行名称"
-        />
+          @change="onBranchBankChange"
-      </u-form-item>
-      <u-form-item label="收款账户" required prop="account_number">
-        <u-input
-          v-model="form.account_number"
-          placeholder="请输入收款账户号码"
-        />
-      </u-form-item>
-      <u-form-item label="账户姓名" required prop="account_holder_name">
-        <u-input
-          v-model="form.account_holder_name"
-          placeholder="请输入账户姓名"
         />
+        <u-icon
+          style="display: inline-block; margin-left: 8rpx"
+          name="arrow-down"
+          size="12"
+          color="aaaaaa"
+        ></u-icon>
       </u-form-item>
     </u-form>
-    <!-- <u-picker
+
-      v-if="showActionSheet"
-      mode="selector"
-      :show="showActionSheet"
-      :safe-area-inset-bottom="true"
-      :default-selector="[0]"
-      :columns="bankList"
-      keyName="bank_name"
-      @cancel="handleCancel"
-      @confirm="handleConfirm"
-    >
-    </u-picker> -->
     <lzcPicker
       :pickerList="bankList"
       :showKey="'bank_name'"
       @change="handleCancel"
-      :searchPlaceholder="'请输入银行名称进行搜索'"
+      :searchPlaceholder="'输入开户支行名称'"
       ref="lzcPicker"
-      pickerTittle="选择银行"
+      pickerTittle="选择开户支行"
     ></lzcPicker>
+
+    <tui-dropdown-list
+      :show="BranchBankDropdownShow"
+      :height="500"
+      class="dropdown_branch"
+    >
+      <template v-slot:dropdownbox>
+        <div class="branch_list">
+          <template v-if="branchBankList.length">
+            <view
+              class="branch_list_item"
+              v-for="(item, index) in branchBankList"
+              :key="item.id"
+              @click="onBranchBankSelect(item, $event)"
+            >
+              {{ item.branch_bank_name }}
+            </view>
+          </template>
+          <view v-else class="nodata">
+            <template v-if="firstBranchBankLoad">
+              <view class="tit">暂无法搜索到该开户支行</view>
+              <view class="tips" @click="onUseBankBranchClick">点击填写</view>
+            </template>
+            <template v-else>
+              <view class="tit">数据加载中...</view>
+            </template>
+          </view>
+        </div>
+        <u-icon
+          v-if="firstBranchBankLoad"
+          name="close-circle"
+          color="#999"
+          size="28"
+          class="icon_close"
+          @click="onBranchBankDropdownClose"
+        ></u-icon>
+      </template>
+    </tui-dropdown-list>
+
     <view class="btn-content">
       <u-button class="btn-submit" @click="handleSubmit">提交审核</u-button>
     </view>
+
+    <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-import { GetBankList, GetMerchApply, GetRestartMerchApply } from "@/api/audit";
+import {
+  GetBankList,
+  GetMerchApply,
+  GetRestartMerchApply,
+  branchBankSearchApi,
+} from "@/api/audit";
 import lzcPicker from "@/components/lzc-picker/lzc-picker.vue";
+import tuiDropdownList from "@/components/tui-dropdown-list/tui-dropdown-list.vue";
 import { mapState } from "vuex";
+import { throttle, debounce } from "lodash";
+
 export default {
   components: {
     lzcPicker,
+    tuiDropdownList,
   },
   data() {
     return {
-      // showActionSheet: false,
       form: {
         bank_name: "",
         bank_branch_name: "",
@@ -93,19 +137,16 @@ export default {
         account_holder_name: "",
       },
       bankList: [],
+      firstBranchBankLoad: false,
+      BranchBankDropdownShow: false,
+      branchBankDebounceFn: null,
+      currentBranchBank: null,
+      branchBankList: [],
       rules: {
         bank_name: [
           {
             required: true,
-            message: "请选择您的开户行",
+            message: "请选择开户行",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: ["change", "blur"],
-          },
-        ],
-        bank_branch_name: [
-          {
-            required: true,
-            message: "请输入开户银行的支行名称",
             // 可以单个或者同时写两个触发验证方式
             trigger: ["change", "blur"],
           },
@@ -113,7 +154,7 @@ export default {
         account_number: [
           {
             required: true,
-            message: "请输入收款账户号码",
+            message: "请输入银行卡号",
             // 可以单个或者同时写两个触发验证方式
             trigger: ["change", "blur"],
           },
@@ -121,7 +162,7 @@ export default {
         account_holder_name: [
           {
             required: true,
-            message: "请输入账户姓名",
+            message: "请输入开户名称",
             // 可以单个或者同时写两个触发验证方式
             trigger: ["change", "blur"],
           },
@@ -138,14 +179,35 @@ export default {
   onShow() {
     this.getBankList();
   },
+  beforeUnmount() {
+    this.branchBankDebounceFn?.cancel();
+  },
+  mounted() {
+    let auditItem = uni.getStorageSync("auditItem");
+
+    this.form.account_holder_name = auditItem.biz_license_company;
+    this.branchBankDebounceFn = debounce(this.getBranchBankList, 500);
+  },
   methods: {
     async getBankList() {
       let res = await GetBankList();
+
       if (res && res.status == 200) {
         this.bankList = res.data;
       }
     },
-    actionSheetCallback() {},
+
+    async getBranchBankList(keyword) {
+      let res = await branchBankSearchApi({
+        keyword,
+        pageNum: 1,
+        pageSize: 10,
+      });
+
+      this.branchBankList = res.data.items;
+      this.firstBranchBankLoad = true;
+    },
+
     async handleSubmit() {
       let valid = this.$refs.uForm.validate().then((valid) => {
         return valid;
@@ -159,8 +221,11 @@ export default {
         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);
@@ -183,15 +248,59 @@ export default {
         }
       }
     },
+
     showActionSheet() {
       this.$refs["lzcPicker"].handleShow();
       if (this.bankList.length <= 0) {
         this.getBankList();
       }
     },
+
+    branchBankActionSheet() {
+      if (!this.form.bank_name) {
+        this.$refs.uToast.show({
+          message: "请选择开户行",
+          type: "error",
+          duration: 1000,
+        });
+        return;
+      }
+
+      if (!this.form.bank_branch_name) {
+        this.branchBankDebounceFn(this.form.bank_name || "中国银行");
+      }
+
+      this.BranchBankDropdownShow = true;
+    },
+
+    onUseBankBranchClick() {
+      this.BranchBankDropdownShow = false;
+    },
+
+    onBranchBankSelect(data) {
+      const { area_code, branch_bank_name, branch_bank_no, clear_no } = data;
+      this.currentBranchBank = {
+        area_code,
+        branch_bank_name,
+        openning_bank_code: branch_bank_no,
+        clearing_bank_code: clear_no,
+      };
+      this.BranchBankDropdownShow = false;
+      this.form.bank_branch_name = data.branch_bank_name;
+    },
+
+    onBranchBankDropdownClose() {
+      this.BranchBankDropdownShow = false;
+    },
+
+    async onBranchBankChange() {
+      this.branchBankDebounceFn(this.form.bank_branch_name);
+    },
+
     handleCancel(item) {
       this.form.bank_name = item.bank_name;
     },
+
     loginOut() {
       this.$store.dispatch("user/LoginOut");
     },
@@ -203,6 +312,53 @@ export default {
 .shop-3-container {
   padding: 24rpx;
 
+  ::v-deep .tui-dropdownlist-show {
+    box-shadow: 1rpx 1rpx 20rpx rgba(100, 100, 100, 0.1);
+    border: 1rpx solid rgba(100, 100, 100, 0.1);
+    overflow: visible;
+
+    .icon_close {
+      position: absolute;
+      bottom: -80rpx;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .branch_list {
+    height: 500rpx;
+    overflow: auto;
+    background: #fff;
+
+    .branch_list_item {
+      font-size: 28rpx;
+      line-height: 28rpx;
+      padding: 20rpx;
+      border-bottom: 1rpx solid #eee;
+    }
+
+    .nodata {
+      height: 500rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-size: 28rpx;
+
+      .tit {
+        color: #666;
+        padding-bottom: 80rpx;
+      }
+
+      .tips {
+        padding: 10rpx 20rpx;
+        color: #fff;
+        border-radius: 100rpx;
+        background: #4b71ff;
+      }
+    }
+  }
+
   .u-navbar {
     height: 88rpx;
   }

java-mall-app-shop-admin/static/reset.css

@@ -0,0 +1,8 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+ul{
+    list-style: none;
+}