优化图片大小限制

src/api/common/index.ts

@@ -37,16 +37,14 @@ export const getCategory = () => {
 }
 
 interface getBankBranchListParams {
-  province?: string; // 省份
+  bankAliceCode?: string;
-  city?: string; // 城市 
+  cityCode?: string;
-  instId?: string; // 顶级机构ID
 }
 /**
  * 获取所有支行
  * @params
- * province?: string;   // 省份
+ * bankAliceCode    银行别名code bankAliasCode 从 /system/admin/common/bankInfo 获取
- * city?: string;       // 城市 
+ * cityCode         市编码 wxProvinceCode 从 /system/admin/common/region 获取
- * instId?: string;     // 顶级机构ID 
  * @returns
  */
 export const getBankBranchList = (params: getBankBranchListParams) => {

src/views/applyments/applyment_in.vue

@@ -47,13 +47,15 @@
           </el-form-item>
           <el-form-item label="联系人身份证号" prop="merchantBaseInfo.contactPersonId">
             <el-input v-model.trim="form.merchantBaseInfo.contactPersonId" placeholder="请输入联系人身份证号"
-              style="width: 300px;"></el-input>
+              style="width: 300px;" v-loading="contactIdCardFrontPicUploadLoading"></el-input>
           </el-form-item>
-          <el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate">
+          <el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate"
+            v-loading="contactIdCardBackPicUploadLoading">
             <el-date-picker v-model="form.merchantBaseInfo.contactPersonIdStartDate" type="date" placeholder="选择日期"
               value-format="YYYY-MM-DD" style="width: 300px;" />
           </el-form-item>
-          <el-form-item label="联系人证件有效期结束日期" prop="merchantBaseInfo.contactPersonIdEndDate">
+          <el-form-item label="联系人证件有效期结束日期" prop="merchantBaseInfo.contactPersonIdEndDate"
+            v-loading="contactIdCardBackPicUploadLoading">
             <div class="center">
               <el-date-picker v-model="form.merchantBaseInfo.contactPersonIdEndDate" type="date" placeholder="选择日期"
                 value-format="YYYY-MM-DD" style="width: 300px;" />
@@ -109,19 +111,21 @@
               <div class="tips">(上传图片自动识别 有效期)</div>
             </div>
           </el-form-item>
-          <el-form-item label="法定代表人姓名" prop="legalPersonInfo.legalPersonName">
+          <el-form-item label="法定代表人姓名" prop="legalPersonInfo.legalPersonName" v-loading="idCardFrontPicSuccessLoading">
             <el-input v-model.trim="form.legalPersonInfo.legalPersonName" placeholder="请输入法定代表人姓名"
               style="width: 300px;"></el-input>
           </el-form-item>
-          <el-form-item label="法定代表人身份证号" prop="legalPersonInfo.legalPersonId">
+          <el-form-item label="法定代表人身份证号" prop="legalPersonInfo.legalPersonId" v-loading="idCardFrontPicSuccessLoading">
             <el-input v-model.trim="form.legalPersonInfo.legalPersonId" placeholder="请输入法定代表人身份证号"
               style="width: 300px;"></el-input>
           </el-form-item>
-          <el-form-item label="法定代表人身份证开始日期" prop="legalPersonInfo.legalIdPersonStartDate">
+          <el-form-item label="法定代表人身份证开始日期" prop="legalPersonInfo.legalIdPersonStartDate"
+            v-loading="idCardBackPicSuccessLoading">
             <el-date-picker v-model="form.legalPersonInfo.legalIdPersonStartDate" type="date" placeholder="选择日期"
               value-format="YYYY-MM-DD" style="width: 300px;" />
           </el-form-item>
-          <el-form-item label="法定代表人身份证结束日期" prop="legalPersonInfo.legalPersonIdEndDate">
+          <el-form-item label="法定代表人身份证结束日期" prop="legalPersonInfo.legalPersonIdEndDate"
+            v-loading="idCardBackPicSuccessLoading">
             <div class="center">
               <el-date-picker v-model="form.legalPersonInfo.legalPersonIdEndDate" type="date" placeholder="选择日期"
                 value-format="YYYY-MM-DD" style="width: 300px;" />
@@ -156,7 +160,7 @@
             <el-input v-model.trim="form.businessLicenceInfo.licenceName" placeholder="请输入营业执照全称"
               style="width: 300px;"></el-input>
           </el-form-item>
-          <el-form-item label="营业执照注册号" prop="businessLicenceInfo.licenceNo">
+          <el-form-item label="营业执照注册号" prop="businessLicenceInfo.licenceNo" v-loading="licensePicSuccessLoading">
             <el-input v-model.trim="form.businessLicenceInfo.licenceNo" placeholder="请输入营业执照注册号"
               style="width: 300px;"></el-input>
           </el-form-item>
@@ -227,7 +231,7 @@
             <el-input v-model.trim="form.settlementInfo.settlementCardNo" placeholder="请输入结算卡号"
               style="width: 300px;"></el-input>
           </el-form-item>
-          <el-form-item label="开户名称" prop="settlementInfo.settlementName">
+          <el-form-item label="开户名称" prop="settlementInfo.settlementName" v-loading="bankCardFrontPicSuccessLoading">
             <el-input v-model.trim="form.settlementInfo.settlementName" placeholder="请输入开户名称"
               style="width: 300px;"></el-input>
           </el-form-item>
@@ -236,33 +240,36 @@
               style="width: 300px;"></el-input>
           </el-form-item>
           <el-form-item label="开户行省市区" prop="settlementInfo.openAccProvinceId">
-            <selectAddress v-model:provCode="form.settlementInfo.openAccProvinceId"
+            <selectAddress v-model:wxProvinceCode="wxProvinceCode"
+              v-model:provCode="form.settlementInfo.openAccProvinceId"
               v-model:cityCode="form.settlementInfo.openAccCityId" v-model:areaCode="form.settlementInfo.openAccAreaId"
               v-model:prov="form.settlementInfo.openAccProvince" v-model:city="form.settlementInfo.openAccCity"
               v-model:area="form.settlementInfo.openAccArea" />
           </el-form-item>
           <el-form-item label="开户行" prop="settlementInfo.bankInstId">
             <selectBank :province="form.settlementInfo.openAccProvince" :city="form.settlementInfo.openAccCity"
-              v-model:bankInstId="form.settlementInfo.bankInstId" v-model:bankName="form.settlementInfo.bankName"
+              :city-code="wxProvinceCode" v-model:bankInstId="form.settlementInfo.bankInstId"
+              v-model:bankName="form.settlementInfo.bankName"
               v-model:bank-branch-code="form.settlementInfo.bankBranchCode"
               v-model:bank-branch-name="form.settlementInfo.bankBranchName" />
           </el-form-item>
           <el-form-item label="银行卡正面" prop="settlementInfo.bankCardFrontPic.url">
             <div class="column">
-              <SingleImageUpload v-model="form.settlementInfo.bankCardFrontPic.url"
+              <SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardFrontPic.url"
                 @on-success="bankCardFrontPicSuccess" />
               <div class="tips">(上传图片自动识别 银行卡号)</div>
             </div>
           </el-form-item>
           <el-form-item label="银行卡反面" prop="settlementInfo.bankCardBackPic.url">
-            <SingleImageUpload v-model="form.settlementInfo.bankCardBackPic.url" />
+            <SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardBackPic.url" />
           </el-form-item>
           <el-form-item label="开户许可证" prop="settlementInfo.openAccountLicencePic.url">
-            <SingleImageUpload v-model="form.settlementInfo.openAccountLicencePic.url" />
+            <SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.openAccountLicencePic.url" />
           </el-form-item>
         </el-form>
       </div>
-      <div class="btn_wrap" :style="{ width: `${containerDomInfo.width}px`, left: `${containerDomInfo.left}px` }">
+      <div class="btn_wrap" :style="{ width: `${containerDomInfo.width}px`, left: `${containerDomInfo.left}px` }"
+        v-if="formType != 'check'">
         <div class="btn_content">
           <div class="btn">
             <el-button type="primary" size="large" style="width: 100%;" :loading="loading"
@@ -278,12 +285,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, onUnmounted } from "vue";
 import selectAddress from "./components/selectAddress.vue";
 import selectBank from "./components/selectBank.vue";
 import selectCategory from "./components/selectCategory.vue";
 import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
 import { entryManagerPost, getInfoByImg, entryManagerDetail } from '@/api/common'
+import _ from 'lodash'
 import dayjs from "dayjs";
 import { isValidMobile } from "@/utils";
 import { useRouter, useRoute } from 'vue-router'
@@ -300,350 +308,222 @@ const containerDomInfo = ref({
 
 const longTime = ref('2099-12-31')
 
+const wxProvinceCode = ref('')
+
 // 获取进件详情
 async function getDetailAjax(shopId: string, licenceNo: string) {
   try {
-    const res = await entryManagerDetail({
+    const res: any = await entryManagerDetail({
       shopId: shopId,
       licenceNo: licenceNo
     })
-
+    form.value = res
-    console.log('getDetailAjax===', res);
-
-    // 如果接口返回数组，则取第一个元素；否则直接使用返回对象，使用断言避免类型不匹配
-    form.value = (Array.isArray(res) ? res[0] : res) as any
-
-    console.log('getDetailAjax.form.value===', form.value);
   } catch (error) {
     console.log(error);
   }
 }
 
-onMounted(() => {
+// 获取containerDomInfo信息
+function getContainerDomInfo() {
+  console.log('getContainerDomInfo');
+
   containerDomInfo.value = containerRef.value?.getBoundingClientRect() ?? {}
+}
+
+const debouncedCheckWidth = _.debounce(getContainerDomInfo, 100)
+
+onMounted(() => {
+  getContainerDomInfo()
+  window.addEventListener('resize', debouncedCheckWidth)
 
   const shopId: string = String(route.query.shopId ?? '')
   const licenceNo: string = String(route.query.licenceNo ?? '')
   if (shopId && licenceNo) {
+    formType.value = 'editor'
     getDetailAjax(shopId, licenceNo)
   }
-})
 
-const formRef = ref<any>(null);
+  const type = route.query.type
-// const form = ref({
+  if (type && type == 'check') {
-//   shopId: route.query.shopId,
+    formType.value = 'check'
-//   merchantCode: '',
-//   // 【必填】商户基础信息
-//   merchantBaseInfo: {
-//     userType: 0, // 0: 个体商户;1: 企业商户;3: 小微商户 暂不支持
-//     shortName: '', // 商户简称--企业、个体必填
-//     mccCode: '', // 行业类别码--必填
-//     alipayAccount: '', // 【必填】支付宝账号
-//     contactPersonType: 'LEGAL', // 联系人类型 LEGAL: 经营者/法定代表人 SUPER: 经办人 默认LEGAL
-//     contactName: '', // 联系人姓名
-//     certType: 0, // 证件类型 目前只支持身份证 传值：0
-//     contactPersonId: '', // 联系人身份证号
-//     contactPersonIdStartDate: '', // 联系人证件有效期开始日期
-//     contactPersonIdEndDate: '', // 联系人证件有效期结束日期
-//     // 联系人身份证反面照片
-//     contactIdCardBackPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 联系人身份证正面照片
-//     contactIdCardFrontPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     contactPhone: '', // 联系人手机号
-//     contactAddr: '', // 联系人地址
-//     contactEmail: '', // 联系人电子邮箱
-//     companyChildType: 1, // 企业类型，1：普通企业，2：事业单位，3：政府机关，4：社会组织  默认值:1
-//   },
-//   // 【必填】法人信息
-//   legalPersonInfo: {
-//     legalPersonName: '', // 法定代表人姓名
-//     legalPersonId: '', // 法定代表人身份证号
-//     legalIdPersonStartDate: '', // 法定代表人证件有效期开始日期
-//     legalPersonIdEndDate: '', // 法定代表人证件有效期结束日期
-//     legalPersonPhone: '', // 法定代表人手机号
-//     legalPersonEmail: '', // 法定代表人电子邮箱
-//     legalGender: '', // 法人性别（0男 1女）
-//     legalAddress: '', // 法人联系地址
-//     // 身份证手持 图片
-//     idCardHandPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 身份证正面 图片
-//     idCardFrontPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 身份证反面 图片
-//     idCardBackPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//   },
-//   // 【必填】营业执照信息
-//   businessLicenceInfo: {
-//     licenceName: '', // 营业执照全称--非小微必填
-//     licenceNo: '', // 营业执照注册号--非小微必填
-//     licenceStartDate: '', // 营业执照有效期开始日期--非小微必填
-//     licenceEndDate: '', // 营业执照有效期结束日期--非小微必填
-//     registeredAddress: '', // 注册地址--非小微必填
-//     licensePic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//   },
-//   // 【必填】门店信息
-//   storeInfo: {
-//     mercProvCode: '', // 【必填】商户归属省Code
-//     mercCityCode: '', // 【必填】商户归属市Code
-//     mercAreaCode: '', // 【必填】商户归属区Code
-//     mercProv: '', // 商户归属省
-//     mercCity: '', // 商户归属市
-//     mercArea: '', // 商户归属区
-//     businessAddress: '', // 【必填】 营业地址
-//     // 经营场所内设照片
-//     insidePic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 门头照
-//     doorPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 收银台照
-//     cashierDeskPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//   },
-//   // 【必填】结算信息
-//   settlementInfo: {
-//     settlementType: 1, // 结算类型 0:非法人结算, 1:法人结算
-//     noLegalName: '', // 非法人姓名
-//     noLegalId: '', // 非法人身份证号
-//     settlementCardType: '', // 结算卡类型 必填 11 对私借记卡（结算卡正面照、结算卡反面照图片必传） 21 对公借记卡（只须结算卡正面照片）
-//     settlementCardNo: '', // 结算卡号
-//     settlementName: '', // 开户名称
-//     bankMobile: '', // 结算银行预留手机号
-//     openAccProvinceId: '', // 开户行省ID
-//     openAccCityId: '', // 开户行市ID
-//     openAccAreaId: '', // 开户行区ID
-//     openAccProvince: '', // 开户行省
-//     openAccCity: '', // 开户行市
-//     openAccArea: '', // 开户行区
-//     bankName: '', // 开户行别名名称 bankAlias
-//     bankInstId: '', // 开户行缩写 bankCode
-//     bankType: '', // 开户行编号 bankAliasCode
-//     bankBranchName: '', // 支行开户行行别名称 branchName
-//     bankBranchCode: '', // 支行开户行编号 bankCode
-//     // 银行卡正面
-//     bankCardFrontPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 银行卡反面
-//     bankCardBackPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 开户许可证
-//     openAccountLicencePic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 非法人手持结算授权书
-//     noLegalHandSettleAuthPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 非法人结算授权书
-//     noLegalSettleAuthPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 非法人身份证正面
-//     noLegalIdCardFrontPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//     // 非法人身份证反面
-//     noLegalIdCardBackPic: {
-//       url: '',
-//       wechatId: '', // 微信图片ID
-//       alipayId: '', // 支付宝图片ID
-//     },
-//   }
-// });
-
-const form = ref({
-  "shopId": "138",
-  "merchantCode": "",
-  "merchantBaseInfo": {
-    "userType": 1,
-    "shortName": "菲慕斯博",
-    "mccCode": "A0003_B0046",
-    "alipayAccount": "18191655977",
-    "contactPersonType": "LEGAL",
-    "contactName": "",
-    "certType": 0,
-    "contactPersonId": "612501199212187875",
-    "contactPersonIdStartDate": "2019-02-01",
-    "contactPersonIdEndDate": "2039-02-01",
-    "contactIdCardBackPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/df744d901e45480284fdca519ed99713.png",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "contactIdCardFrontPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/624a1bba691b4468b078407e216288fc.png",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "contactPhone": "18191655977",
-    "contactAddr": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
-    "contactEmail": "892675422@qq.com",
-    "companyChildType": 1
-  },
-  "legalPersonInfo": {
-    "legalPersonName": "蔺佳佳",
-    "legalPersonId": "612501199212187875",
-    "legalIdPersonStartDate": "2019-02-01",
-    "legalPersonIdEndDate": "2039-02-01",
-    "legalPersonPhone": "18191655977",
-    "legalPersonEmail": "892675422@qq.com",
-    "legalGender": "0",
-    "legalAddress": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
-    "idCardHandPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/7984afd823fe4f0da51d4b245bf5db25.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "idCardFrontPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/88819f6ae3404c199526c159e4d58fd9.png",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "idCardBackPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/0f3d15a9498e4853aeb8c579698955d9.png",
-      "wechatId": "",
-      "alipayId": ""
-    }
-  },
-  "businessLicenceInfo": {
-    "licenceName": "西安菲慕斯博市场营销策划有限公司",
-    "licenceNo": "91610131MA6TXACP28",
-    "licenceStartDate": "2021-02-24",
-    "licenceEndDate": "2099-12-31",
-    "registeredAddress": "陕西省西安市高新区科技路37号海星城市广场B座2002-080室",
-    "licensePic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/9d8e1118c44e46d29078968aa309db02.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    }
-  },
-  "storeInfo": {
-    "mercProvCode": "610000",
-    "mercCityCode": "610100",
-    "mercAreaCode": "610113",
-    "mercProv": "陕西省",
-    "mercCity": "西安市",
-    "mercArea": "雁塔区",
-    "businessAddress": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
-    "insidePic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/cd9629863a114ee3842e4616ec730cd6.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "doorPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/ec5bafd00f96466fb3efe545a058f08b.png",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "cashierDeskPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/057c0781e07c46d785b38a3c0ac2cba4.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    }
-  },
-  "settlementInfo": {
-    "settlementType": 1,
-    "noLegalName": "",
-    "noLegalId": "",
-    "settlementCardType": "21",
-    "settlementCardNo": "611011580000054186",
-    "settlementName": "西安银行",
-    "bankMobile": "18191655977",
-    "openAccProvinceId": "610000",
-    "openAccCityId": "610100",
-    "openAccAreaId": "610113",
-    "openAccProvince": "陕西省",
-    "openAccCity": "西安市",
-    "openAccArea": "雁塔区",
-    "bankName": "長安銀行",
-    "bankInstId": "XAB",
-    "bankType": "",
-    "bankBranchName": "",
-    "bankBranchCode": "",
-    "bankCardFrontPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/41410600705d4ebe98442b935a4f63b0.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "bankCardBackPic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/c82d5579145e4668ba7c201733b8e5b9.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "openAccountLicencePic": {
-      "url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/c989896f18724fe4b2d5254e97065a65.jpg",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "noLegalHandSettleAuthPic": {
-      "url": "",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "noLegalSettleAuthPic": {
-      "url": "",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "noLegalIdCardFrontPic": {
-      "url": "",
-      "wechatId": "",
-      "alipayId": ""
-    },
-    "noLegalIdCardBackPic": {
-      "url": "",
-      "wechatId": "",
-      "alipayId": ""
-    }
   }
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', debouncedCheckWidth)
+})
+
+// 表单操作类型 add添加 editor编辑 check查看
+const formType = ref('add')
+const formRef = ref<any>(null);
+const form = ref({
+  shopId: route.query.shopId,
+  merchantCode: '',
+  // 【必填】商户基础信息
+  merchantBaseInfo: {
+    userType: '0', // 0: 个体商户;1: 企业商户;3: 小微商户 暂不支持
+    shortName: '', // 商户简称--企业、个体必填
+    mccCode: '', // 行业类别码--必填
+    alipayAccount: '', // 【必填】支付宝账号
+    contactPersonType: 'LEGAL', // 联系人类型 LEGAL: 经营者/法定代表人 SUPER: 经办人 默认LEGAL
+    contactName: '', // 联系人姓名
+    certType: '0', // 证件类型 目前只支持身份证 传值：0
+    contactPersonId: '', // 联系人身份证号
+    contactPersonIdStartDate: '', // 联系人证件有效期开始日期
+    contactPersonIdEndDate: '', // 联系人证件有效期结束日期
+    // 联系人身份证反面照片
+    contactIdCardBackPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 联系人身份证正面照片
+    contactIdCardFrontPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    contactPhone: '', // 联系人手机号
+    contactAddr: '', // 联系人地址
+    contactEmail: '', // 联系人电子邮箱
+    companyChildType: '1', // 企业类型，1：普通企业，2：事业单位，3：政府机关，4：社会组织  默认值:1
+  },
+  // 【必填】法人信息
+  legalPersonInfo: {
+    legalPersonName: '', // 法定代表人姓名
+    legalPersonId: '', // 法定代表人身份证号
+    legalIdPersonStartDate: '', // 法定代表人证件有效期开始日期
+    legalPersonIdEndDate: '', // 法定代表人证件有效期结束日期
+    legalPersonPhone: '', // 法定代表人手机号
+    legalPersonEmail: '', // 法定代表人电子邮箱
+    legalGender: '', // 法人性别（0男 1女）
+    legalAddress: '', // 法人联系地址
+    // 身份证手持 图片
+    idCardHandPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 身份证正面 图片
+    idCardFrontPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 身份证反面 图片
+    idCardBackPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+  },
+  // 【必填】营业执照信息
+  businessLicenceInfo: {
+    licenceName: '', // 营业执照全称--非小微必填
+    licenceNo: '', // 营业执照注册号--非小微必填
+    licenceStartDate: '', // 营业执照有效期开始日期--非小微必填
+    licenceEndDate: '', // 营业执照有效期结束日期--非小微必填
+    registeredAddress: '', // 注册地址--非小微必填
+    licensePic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+  },
+  // 【必填】门店信息
+  storeInfo: {
+    mercProvCode: '', // 【必填】商户归属省Code
+    mercCityCode: '', // 【必填】商户归属市Code
+    mercAreaCode: '', // 【必填】商户归属区Code
+    mercProv: '', // 商户归属省
+    mercCity: '', // 商户归属市
+    mercArea: '', // 商户归属区
+    businessAddress: '', // 【必填】 营业地址
+    // 经营场所内设照片
+    insidePic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 门头照
+    doorPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 收银台照
+    cashierDeskPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+  },
+  // 【必填】结算信息
+  settlementInfo: {
+    settlementType: '1', // 结算类型 0:非法人结算, 1:法人结算
+    noLegalName: '', // 非法人姓名
+    noLegalId: '', // 非法人身份证号
+    settlementCardType: '', // 结算卡类型 必填 11 对私借记卡（结算卡正面照、结算卡反面照图片必传） 21 对公借记卡（只须结算卡正面照片）
+    settlementCardNo: '', // 结算卡号
+    settlementName: '', // 开户名称
+    bankMobile: '', // 结算银行预留手机号
+    openAccProvinceId: '', // 开户行省ID
+    openAccCityId: '', // 开户行市ID
+    openAccAreaId: '', // 开户行区ID
+    openAccProvince: '', // 开户行省
+    openAccCity: '', // 开户行市
+    openAccArea: '', // 开户行区
+    bankName: '', // 开户行别名名称 bankAlias
+    bankInstId: '', // 开户行缩写 bankCode
+    bankType: '', // 开户行编号 bankAliasCode
+    bankBranchName: '', // 支行开户行行别名称 branchName
+    bankBranchCode: '', // 支行开户行编号 bankCode
+    // 银行卡正面
+    bankCardFrontPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 银行卡反面
+    bankCardBackPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 开户许可证
+    openAccountLicencePic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 非法人手持结算授权书
+    noLegalHandSettleAuthPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 非法人结算授权书
+    noLegalSettleAuthPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 非法人身份证正面
+    noLegalIdCardFrontPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+    // 非法人身份证反面
+    noLegalIdCardBackPic: {
+      url: '',
+      wechatId: '', // 微信图片ID
+      alipayId: '', // 支付宝图片ID
+    },
+  }
+});
+
+
 const rules = reactive({
   'merchantBaseInfo.userType': [{ required: true, message: '请选择商户类型', trigger: 'change' }],
   'merchantBaseInfo.shortName': [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
@@ -726,10 +606,6 @@ const rules = reactive({
     {
       required: true,
       validator: (rule: any, value: any, callback: any) => {
-        console.log('form.value.settlementInfo.openAccProvinceId', form.value.settlementInfo.openAccProvinceId);
-        console.log('form.value.settlementInfo.openAccCityId', form.value.settlementInfo.openAccCityId);
-        console.log('form.value.settlementInfo.openAccAreaId', form.value.settlementInfo.openAccAreaId);
-
         if (form.value.settlementInfo.openAccProvinceId == '' || form.value.settlementInfo.openAccCityId == '' || form.value.settlementInfo.openAccAreaId == '') {
           callback(new Error('请选择开户行省市区'))
         } else {
@@ -776,8 +652,13 @@ const rules = reactive({
 })
 
 // 联系人身份证正面照片
+const contactIdCardFrontPicUploadLoading = ref(false)
 async function contactIdCardFrontPicUpload(url: string) {
   try {
+    form.value.merchantBaseInfo.contactIdCardFrontPic.alipayId = ''
+    form.value.merchantBaseInfo.contactIdCardFrontPic.wechatId = ''
+
+    contactIdCardFrontPicUploadLoading.value = true
     const res: any = await getInfoByImg({
       url: url,
       type: 'IdCard'
@@ -786,11 +667,17 @@ async function contactIdCardFrontPicUpload(url: string) {
   } catch (error) {
     console.log(error);
   }
+  contactIdCardFrontPicUploadLoading.value = false
 }
 
 // 联系人身份证反面照片
+const contactIdCardBackPicUploadLoading = ref(false)
 async function contactIdCardBackPicUpload(url: any) {
   try {
+    form.value.merchantBaseInfo.contactIdCardBackPic.alipayId = ''
+    form.value.merchantBaseInfo.contactIdCardBackPic.wechatId = ''
+
+    contactIdCardBackPicUploadLoading.value = true
     const res: any = await getInfoByImg({
       url: url,
       type: 'IdCard'
@@ -801,11 +688,17 @@ async function contactIdCardBackPicUpload(url: any) {
   } catch (error) {
     console.log(error);
   }
+  contactIdCardBackPicUploadLoading.value = false
 }
 
 // 法人信息 身份证正面图片
+const idCardFrontPicSuccessLoading = ref(false)
 async function idCardFrontPicSuccess(url: string) {
   try {
+    form.value.legalPersonInfo.idCardFrontPic.alipayId = ''
+    form.value.legalPersonInfo.idCardFrontPic.wechatId = ''
+
+    idCardFrontPicSuccessLoading.value = true
     const res: any = await getInfoByImg({
       url: url,
       type: 'IdCard'
@@ -815,11 +708,17 @@ async function idCardFrontPicSuccess(url: string) {
   } catch (error) {
     console.log(error);
   }
+  idCardFrontPicSuccessLoading.value = false
 }
 
 // 法人信息 身份证反图片
+const idCardBackPicSuccessLoading = ref(false)
 async function idCardBackPicSuccess(url: string) {
   try {
+    form.value.legalPersonInfo.idCardBackPic.alipayId = ''
+    form.value.legalPersonInfo.idCardBackPic.wechatId = ''
+
+    idCardBackPicSuccessLoading.value = true
     const res: any = await getInfoByImg({
       url: url,
       type: 'IdCard'
@@ -830,11 +729,17 @@ async function idCardBackPicSuccess(url: string) {
   } catch (error) {
     console.log(error);
   }
+  idCardBackPicSuccessLoading.value = false
 }
 
 // 营业执照信息 营业执照照片
+const licensePicSuccessLoading = ref(false)
 async function licensePicSuccess(url: string) {
   try {
+    form.value.businessLicenceInfo.licensePic.alipayId = ''
+    form.value.businessLicenceInfo.licensePic.wechatId = ''
+
+    licensePicSuccessLoading.value = true
     const res: any = await getInfoByImg({
       url: url,
       type: 'BusinessLicense'
@@ -849,11 +754,17 @@ async function licensePicSuccess(url: string) {
   } catch (error) {
     console.log(error);
   }
+  licensePicSuccessLoading.value = false
 }
 
 // 结算信息 银行卡正面
+const bankCardFrontPicSuccessLoading = ref(false)
 async function bankCardFrontPicSuccess(url: string) {
   try {
+    form.value.settlementInfo.bankCardFrontPic.alipayId = ''
+    form.value.settlementInfo.bankCardFrontPic.wechatId = ''
+
+    bankCardFrontPicSuccessLoading.value = true
     const res: any = await getInfoByImg({
       url: url,
       type: 'BankCard'
@@ -865,6 +776,7 @@ async function bankCardFrontPicSuccess(url: string) {
   } catch (error) {
     console.log(error);
   }
+  bankCardFrontPicSuccessLoading.value = false
 }
 
 const loading = ref(false)

src/views/applyments/components/selectAddress.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, watch } from "vue";
 import { getRegion } from "@/api/common";
 
 const provList = ref<any[]>([]);
@@ -27,9 +27,18 @@ const provCode = defineModel("provCode", {
 
 // 监听省份code变化
 watch(provCode, async (n, o) => {
-  if (n !== undefined && n) {
+  await getRegionAjax()
-    await getRegionAjax()
+  if (n && n !== undefined) {
     provChange(n, true)
+
+    // 监听市区code变化
+    watch(cityCode, async (n, o) => {
+      if (n !== undefined && n) {
+        cityChange(n, true)
+      }
+    }, {
+      immediate: true // 可选：初始化立即执行，验证是否监听到初始值
+    })
   }
 }, {
   immediate: true // 可选：初始化立即执行，验证是否监听到初始值
@@ -40,16 +49,6 @@ const cityCode = defineModel("cityCode", {
   default: "",
 });
 
-// 监听市区code变化
-watch(cityCode, async (n, o) => {
-  if (n !== undefined && n) {
-    await getRegionAjax()
-    cityChange(n, true)
-  }
-}, {
-  immediate: true // 可选：初始化立即执行，验证是否监听到初始值
-})
-
 const areaCode = defineModel("areaCode", {
   type: String,
   default: "",
@@ -70,6 +69,11 @@ const area = defineModel("area", {
   default: "",
 });
 
+const wxProvinceCode = defineModel('wxProvinceCode', {
+  type: String,
+  default: ''
+})
+
 // 省份变化 e code isEcho是否回显
 function provChange(e: string, isEcho: boolean = false) {
   if (!isEcho) {
@@ -92,9 +96,11 @@ function cityChange(e: string, isEcho: boolean = false) {
     areaList.value = [];
   }
   const cityObj = cityList.value.find((item) => item.regionId == e);
+
   city.value = cityObj ? cityObj.regionName : "";
   if (cityObj && cityObj.children) {
     areaList.value = cityObj.children;
+    wxProvinceCode.value = cityObj.wxProvinceCode
   }
 }
 
@@ -113,10 +119,6 @@ async function getRegionAjax() {
     console.error('获取省市区数据失败：', error);
   }
 }
-
-onMounted(() => {
-  getRegionAjax();
-});
 </script>
 
 <style scoped lang="scss">

src/views/applyments/components/selectBank.vue

@@ -8,17 +8,18 @@
     <!-- 支行 -->
     <el-select v-model="bankBranchCode" placeholder="请选择支行" style="width: 200px;" :disabled="!bankInstId"
       @change="bankBranchChange">
-      <el-option v-for="item in bankBranchList" :key="item.bankCode" :label="item.branchName"
+      <el-option v-for="item in bankBranchList" :key="item.bank_branch_id" :label="item.bank_branch_name"
-        :value="item.bankCode"></el-option>
+        :value="item.bank_branch_id"></el-option>
     </el-select>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, watch } from "vue";
 import { getBankInfo, getBankBranchList } from "@/api/common";
 
 const loading = ref(false)
+const bankNameValue = ref('')
 
 const props = defineProps({
   province: {
@@ -28,10 +29,31 @@ const props = defineProps({
   city: {
     type: String,
     default: ''
+  },
+  cityCode: {
+    type: String,
+    default: ''
   }
 })
 
-const bankAlias = ref('')
+watch(() => props.cityCode, async (newValue, oldValue) => {
+  try {
+    // console.log('watch.props.cityCode===', `newValue=${newValue},oldValue=${oldValue}`);
+    await getBankInfoAjax()
+    if (newValue && newValue !== undefined) {
+      // 监听银行code变化
+      watch(bankInstId, (n, o) => {
+        if (n !== undefined && n) {
+          bankChange(n)
+        }
+      }, {
+        immediate: true // 可选：初始化立即执行，验证是否监听到初始值
+      })
+    }
+  } catch (error) {
+    console.log(error);
+  }
+})
 
 const bankList = ref<Array<{ id: string; bankAlias: string, bankCode: string, bankAliasCode: string }>>([]);
 
@@ -40,15 +62,7 @@ const bankInstId = defineModel('bankInstId', {
   default: "",
 });
 
-// 监听银行code变化
+
-watch(bankInstId, async (n, o) => {
-  if (n !== undefined && n) {
-    await getBankInfoAjax()
-    bankChange(n)
-  }
-}, {
-  immediate: true // 可选：初始化立即执行，验证是否监听到初始值
-})
 
 const bankName = defineModel('bankName', {
   type: String,
@@ -61,7 +75,7 @@ function bankChange(e: any) {
   if (obj && obj.id) {
     bankName.value = obj.bankAlias
     bankInstId.value = obj.bankCode
-    getBankBranchListAjax(obj.bankCode)
+    getBankBranchListAjax(obj.bankAliasCode)
   }
 }
 
@@ -79,22 +93,21 @@ const bankBranchName = defineModel('bankBranchName', {
 
 // 选择支行
 function bankBranchChange(e: string) {
-  let obj = bankBranchList.value.find(item => item.bankCode == e)
+  let obj = bankBranchList.value.find(item => item.bank_branch_id == e)
-  if (obj && obj.bankCode) {
+  if (obj && obj.bank_branch_id) {
-    bankBranchName.value = obj.branchName
+    bankBranchName.value = obj.bank_branch_name
   }
 }
 
 // 支行列表
-const bankBranchList = ref<Array<{ bankCode: string; branchName: string }>>([]);
+const bankBranchList = ref<Array<{ bank_branch_id: string; bank_branch_name: string }>>([]);
-async function getBankBranchListAjax(bankCode: string) {
+async function getBankBranchListAjax(bankAliasCode: string) {
   try {
-    const res = await getBankBranchList({
+    const res: any = await getBankBranchList({
-      province: props.province,
+      bankAliceCode: bankAliasCode,
-      city: props.city,
+      cityCode: props.cityCode
-      instId: bankCode,
     })
-    bankBranchList.value = res
+    bankBranchList.value = res.data
   } catch (error) {
     console.log('', error);
   }
@@ -109,21 +122,20 @@ function remoteGetBank(query: string) {
 }
 
 // 获取银行列表
-const bankNameValue = ref('')
 async function getBankInfoAjax() {
   try {
     loading.value = true
-    const res: any = await getBankInfo({ page: 1, size: 100, bankName: bankNameValue.value });
+    const res: any = await getBankInfo({
+      page: 1,
+      size: 100,
+      bankName: bankNameValue.value
+    });
     bankList.value = res.records || [];
   } catch (error) {
     console.log(error);
   }
   loading.value = false
 }
-
-onMounted(() => {
-  getBankInfoAjax()
-});
 </script>
 
 <style scoped lang="scss">

src/views/applyments/index.vue

@@ -44,9 +44,13 @@
           <el-table-column label="支付宝进件状态" prop="alipayStatus" min-width="200">
             <template v-slot="scope">
               <div class="column">
-                <div>{{ statusListFilter(scope.row.alipayStatus).label }}</div>
+                <div>
-                <el-text type="danger" v-if="scope.row.alipayStatus == 'REJECTED'">{{ scope.row.alipayErrorMsg
+                  <el-tag :type="statusListFilter(scope.row.alipayStatus).type" disable-transitions>{{
-                }}</el-text>
+                    statusListFilter(scope.row.alipayStatus).label }}</el-tag>
+                </div>
+                <div class="error_text" v-if="scope.row.alipayStatus == 'REJECTED'">
+                  {{ scope.row.alipayErrorMsg }}
+                </div>
                 <el-link type="primary" v-if="scope.row.alipayStatus == 'SIGN '"
                   @click="singCodeDialogRef?.show(scope.row.alipaySignUrl, 1)">查看签约码</el-link>
               </div>
@@ -55,9 +59,13 @@
           <el-table-column label="微信进件状态" prop="wechatStatus" min-width="200">
             <template v-slot="scope">
               <div class="column">
-                <div>{{ statusListFilter(scope.row.wechatStatus).label }}</div>
+                <div>
-                <el-text type="danger" v-if="scope.row.wechatStatus == 'REJECTED'">{{ scope.row.wechatErrorMsg
+                  <el-tag :type="statusListFilter(scope.row.wechatStatus).type" disable-transitions>{{
-                }}</el-text>
+                    statusListFilter(scope.row.wechatStatus).label }}</el-tag>
+                </div>
+                <div class="error_text" v-if="scope.row.wechatStatus == 'REJECTED'">
+                  {{ scope.row.wechatErrorMsg }}
+                </div>
                 <el-link type="primary" v-if="scope.row.wechatStatus == 'SIGN '"
                   @click="singCodeDialogRef?.show(scope.row.wechatSignUrl, 2)">查看签约码</el-link>
               </div>
@@ -67,8 +75,9 @@
           <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
           <el-table-column label="操作" fixed="right" width="150">
             <template v-slot="scope">
-              <el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
+              <el-button link type="primary" @click="toDetail(scope.row, 'check')">详情</el-button>
-              <el-button link type="primary" @click="toDetail(scope.row)">修改</el-button>
+              <el-button link type="primary" @click="toDetail(scope.row, 'editor')"
+                v-if="scope.row.alipayStatus == 'REJECTED' || scope.row.wechatStatus == 'REJECTED'">修改</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -131,27 +140,33 @@ function userTypeListFilter(userType) {
 const statusList = ref([
   {
     value: 'WAIT',
-    label: '待提交'
+    label: '待提交',
+    type: 'info'
   },
   {
     value: 'INIT',
-    label: '待处理'
+    label: '待处理',
+    type: 'info'
   },
   {
     value: 'AUDIT',
-    label: '待审核'
+    label: '待审核',
+    type: 'warning'
   },
   {
     value: 'SIGN',
-    label: '待签约'
+    label: '待签约',
+    type: 'warning'
   },
   {
     value: 'FINISH',
-    label: '已完成'
+    label: '已完成',
+    type: 'success'
   },
   {
     value: 'REJECTED',
-    label: '失败'
+    label: '失败',
+    type: 'danger'
   },
 ])
 
@@ -227,13 +242,14 @@ async function getTableData() {
 }
 
 // 跳转编辑页面
-function toDetail(row) {
+function toDetail(row, type) {
   const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
   router.push({
     name: 'applyment_in',
     query: {
       shopId: row.shopId,
-      licenceNo: businessLicenceInfo.licenceNo
+      licenceNo: businessLicenceInfo.licenceNo,
+      type: type
     }
   })
 }
@@ -265,4 +281,9 @@ onMounted(() => {
   flex-direction: column;
   gap: 4px;
 }
+
+.error_text {
+  font-size: 14px;
+  color: var(--el-color-danger);
+}
 </style>