feat: 实现前端图片压缩10M->50k；处理网络请求超时时间过小；

components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElStatistic: typeof import('element-plus/es')['ElStatistic']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FloatingMenu: typeof import('./src/components/floatingMenu.vue')['default']
     Login: typeof import('./src/components/login.vue')['default']

src/utils/file.js

@@ -0,0 +1,87 @@
+export async function compressImage(file, options = {}) {
+    // 提取选项参数，设置默认值
+    const { 
+      quality = 0.75, 
+      maxWidth = 800, 
+      maxHeight = 600 
+    } = options;
+  
+    // 验证输入是否为有效的File对象
+    if (!(file instanceof File)) {
+      throw new Error('输入参数必须是一个File对象');
+    }
+  
+    // 检查文件类型是否为图片
+    if (!file.type.startsWith('image/')) {
+      throw new Error('输入文件必须是图片类型');
+    }
+  
+    // 创建一个Promise来处理异步操作
+    return new Promise((resolve, reject) => {
+      // 创建Image对象用于加载图片
+      const img = new Image();
+      
+      // 监听图片加载完成事件
+      img.onload = () => {
+        // 创建Canvas元素
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 获取原始图片尺寸
+        let width = img.width;
+        let height = img.height;
+        
+        // 计算调整后的尺寸（保持原始比例）
+        if (width > maxWidth) {
+          height = height * (maxWidth / width);
+          width = maxWidth;
+        }
+        
+        if (height > maxHeight) {
+          width = width * (maxHeight / height);
+          height = maxHeight;
+        }
+        
+        // 设置Canvas尺寸
+        canvas.width = width;
+        canvas.height = height;
+        
+        // 在Canvas上绘制图片
+        ctx.drawImage(img, 0, 0, width, height);
+        
+        // 将Canvas内容转换为Blob对象
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              reject(new Error('图片转换失败'));
+              return;
+            }
+            
+            // 创建新的File对象
+            const compressedFile = new File(
+              [blob], 
+              file.name, 
+              { type: blob.type, lastModified: Date.now() }
+            );
+            
+            resolve(compressedFile);
+          },
+          file.type,  // 使用原始图片类型
+          quality     // 压缩质量
+        );
+      };
+      
+      // 监听图片加载错误事件
+      img.onerror = () => reject(new Error('图片加载失败'));
+      
+      // 读取图片数据
+      const reader = new FileReader();
+      reader.onload = () => {
+        img.src = reader.result;
+      };
+      reader.onerror = () => reject(new Error('文件读取失败'));
+      
+      // 开始读取文件
+      reader.readAsDataURL(file);
+    });
+  }

src/utils/http.js

@@ -10,7 +10,7 @@ const service = axios.create({
     // "X-Requested-With": "XMLHttpRequest",
     // "Content-Type": "application/json",
   },
-  timeout: 5000, // request timeout
+  timeout: 1000 * 60 * 5, // request timeout
 });
 // 拦截前
 // request interceptor 

src/views/HeadMenu.vue

@@ -33,7 +33,7 @@
 
       <div class="avatar" v-if="isLoggedIn">
         <div class="icon_avatar">
-          <el-icon size="20"><Avatar /></el-icon>
+          <el-icon size="20" color="#ccc"><Avatar /></el-icon>
         </div>
         <el-button
           link

src/views/start/check.vue

@@ -181,6 +181,7 @@ import { Plus,Search } from "@element-plus/icons-vue";
 import cityData from "../../stores/cityData";
 import type { CityDataStructure } from "../../stores/cityData";
 import { useUserStore } from "@/stores/userStore";
+import { compressImage } from "@/utils/file";
 
 import {
   GetStoreCategories,
@@ -803,6 +804,7 @@ const handlePictureCardPreview = (uploadFile) => {
 
 const getBatchNo = async (file, type) => {
   loading.value = true;
+  file = await compressImage(file);
   const rsp = await batchNoApi(file, type).then((res) => {
     return res;
   });
@@ -854,7 +856,7 @@ const handleOcrText = async (batchNo, imgType) => {
       applyFormData.biz_license_content = res.bizLicenseScope;
       break;
     case "legal_person_id_images":
-      var res = (await getOcrText(batchNo, orcImgTypeConf.ID_CARD_FRONT)) as any;
+      var res = (await getOcrText(batchNo, orcImgTypeConf.FR_ID_CARD_FRONT)) as any;
 
       console.log("legal_person_id_images", res);
       applyFormData.legal_person_id_number = res.idNumber;
@@ -863,7 +865,7 @@ const handleOcrText = async (batchNo, imgType) => {
       case "legal_person_id_images2":
       var res = (await getOcrText(
         batchNo,
-        orcImgTypeConf.ID_CARD_BEHIND
+        orcImgTypeConf.FR_ID_CARD_BEHIND
       )) as any;
       var validity = res.validity.split('-')
 
@@ -879,7 +881,7 @@ const handleOcrText = async (batchNo, imgType) => {
     case "individual_id_images":
       var res = (await getOcrText(
         batchNo,
-        orcImgTypeConf.FR_ID_CARD_FRONT
+        orcImgTypeConf.ID_CARD_FRONT
       )) as any;
 
       console.log("individual_id_images", res);
@@ -936,17 +938,17 @@ const handleUploadSuccess = async (response, file, fileList, field) => {
           handleOcrText(res.batchNo, field)
           break;
         case "legal_person_id_images":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT);
           currentBbatchNo.value = res.batchNo
           handleOcrText(res.batchNo, field)
           break;
         case "legal_person_id_images2":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_BEHIND);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "individual_id_images":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT);
+          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT);
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;

src/views/start/start.vue

@@ -186,7 +186,11 @@
               prop="biz_license_image"
             >
               <el-upload
-              :ref="(el)=>{ el && (uploadRefs.biz_license_image = el) }"
+                :ref="
+                  (el) => {
+                    el && (uploadRefs.biz_license_image = el);
+                  }
+                "
                 v-model:file-list="uploadFiles.biz_license_image"
                 multiple
                 :limit="1"
@@ -362,7 +366,11 @@
               prop="legal_person_id_images"
             >
               <el-upload
-              :ref="(el)=>{ el && (uploadRefs.legal_person_id_images = el) }"
+                :ref="
+                  (el) => {
+                    el && (uploadRefs.legal_person_id_images = el);
+                  }
+                "
                 v-model:file-list="uploadFiles.legal_person_id_images"
                 :limit="1"
                 list-type="picture-card"
@@ -400,7 +408,7 @@
                 plain
                 v-if="
                   applyFormData.legal_person_id_images &&
-                  !applyFormData.legal_person_id_number  &&
+                  !applyFormData.legal_person_id_number &&
                   currentBbatchNo
                 "
                 @click="
@@ -414,7 +422,11 @@
               prop="legal_person_id_images2"
             >
               <el-upload
-              :ref="(el)=>{ el && (uploadRefs.legal_person_id_images2 = el) }"
+                :ref="
+                  (el) => {
+                    el && (uploadRefs.legal_person_id_images2 = el);
+                  }
+                "
                 v-model:file-list="uploadFiles.legal_person_id_images2"
                 :limit="1"
                 list-type="picture-card"
@@ -503,7 +515,11 @@
               prop="individual_id_images"
             >
               <el-upload
-              :ref="(el)=>{ el && (uploadRefs.individual_id_images = el) }"
+                :ref="
+                  (el) => {
+                    el && (uploadRefs.individual_id_images = el);
+                  }
+                "
                 v-model:file-list="uploadFiles.individual_id_images"
                 :limit="1"
                 list-type="picture-card"
@@ -543,7 +559,11 @@
               prop="individual_id_images2"
             >
               <el-upload
-              :ref="(el)=>{ el && (uploadRefs.individual_id_images2 = el) }"
+                :ref="
+                  (el) => {
+                    el && (uploadRefs.individual_id_images2 = el);
+                  }
+                "
                 v-model:file-list="uploadFiles.individual_id_images2"
                 :limit="1"
                 list-type="picture-card"
@@ -641,7 +661,11 @@
           <div class="tit">结算信息</div>
           <el-form-item label="银行卡" prop="bank_image">
             <el-upload
-             :ref="(el)=>{ el && (uploadRefs.bank_image = el) }"
+              :ref="
+                (el) => {
+                  el && (uploadRefs.bank_image = el);
+                }
+              "
               v-model:file-list="uploadFiles.bank_image"
               :limit="1"
               list-type="picture-card"
@@ -671,7 +695,11 @@
             <el-button
               type="info"
               plain
-              v-if="applyFormData.bank_image && !applyFormData.account_number && currentBbatchNo"
+              v-if="
+                applyFormData.bank_image &&
+                !applyFormData.account_number &&
+                currentBbatchNo
+              "
               @click="handleOcrText(currentBbatchNo, 'bank_image')"
               >点击免填卡号</el-button
             >
@@ -680,10 +708,16 @@
             v-if="applyFormData.entity_type == 1 || applyFormData.bank_image"
           >
             <el-form-item label="开户名称" prop="account_holder_name">
-              <el-input v-model="applyFormData.account_holder_name" />
+              <el-input
+                v-model="applyFormData.account_holder_name"
+                placeholder="请输入开户名称"
+              />
             </el-form-item>
             <el-form-item label="银行卡号" prop="account_number">
-              <el-input v-model="applyFormData.account_number" />
+              <el-input
+                v-model="applyFormData.account_number"
+                placeholder="请输入银行卡号"
+              />
             </el-form-item>
             <el-form-item label="开户银行" prop="bank_branch_name">
               <el-select-v2
@@ -704,6 +738,34 @@
                   </el-icon>
                 </template>
               </el-select-v2>
+
+              <div class="bank_name_tip">
+                <el-tooltip placement="top"  effect="light">
+                  <template #content>
+                    <div class="bank_name_cont">
+                      <h3>开店时搜不到我的开户银行，怎么处理?</h3>
+                      <p>
+                        1.
+                        目前小店的结算账户仅支持下拉框中包含的银行，无法搜索到的银行在后续经营中可能无法正常结算、提现等功能，因此暂不支持。
+                      </p>
+                      <p>
+                        2.
+                        若遇到这类问题，请商户使用下拉框选项中包含的银行账户进行入驻，如开户地为县级市或乡镇区无法搜索到，可选择相同银行的市级网点，否则将无法进行身份验证。
+                      </p>
+                      <p>
+                        3.
+                        为了顺利注册开店与保障账号资产安全，推荐优先使用四大国有银行开户注册。
+                      </p>
+                    </div>
+                  </template>
+
+                  <el-button type="info" link>
+                    <el-icon color="#e6a23c" size="14"
+                      ><WarningFilled /></el-icon
+                    >搜不到我的开户银行，怎么处理？</el-button
+                  >
+                </el-tooltip>
+              </div>
             </el-form-item>
           </template>
         </div>
@@ -711,9 +773,8 @@
     </div>
 
     <div class="form-button">
-      <el-button type="primary" @click="merchToApply" class="custom-button"
+      <div class="myui_check_text">检查并确认店铺信息和证件信息无误</div>
-        >提交审核</el-button
+      <el-button type="primary" @click="merchToApply">提交审核</el-button>
-      >
     </div>
 
     <el-dialog v-model="dialogVisible" width="max-content">
@@ -726,7 +787,7 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import { Plus, Search } from "@element-plus/icons-vue";
+import { Plus, Search, WarningFilled } from "@element-plus/icons-vue";
 
 import cityData from "../../stores/cityData";
 import type { CityDataStructure } from "../../stores/cityData";
@@ -741,6 +802,7 @@ import {
   GetAppDistrict,
 } from "@/api/login";
 import { batchNoApi, imgOcrResultApi } from "@/api/upload";
+import { compressImage } from "@/utils/file";
 
 interface Bank {
   id: number;
@@ -1307,10 +1369,10 @@ const handleSelect = (item) => {
   (formRef.value as any).validate();
 };
 
-const beforeUpload = (file) => {
+const beforeUpload = async (file) => {
   const isJPG = file.type === "image/jpeg";
   const isPNG = file.type === "image/png";
-  const isLt2M = file.size / 1024 / 1024 < 10;
+  const isLarge = file.size / 1024 / 1024 < 10;
 
   loading.value = true;
 
@@ -1319,11 +1381,13 @@ const beforeUpload = (file) => {
     ElMessage.error("上传的图片必须是JPG或PNG格式！");
     return false;
   }
-  if (!isLt2M) {
+
+  if (!isLarge) {
     loading.value = false;
     ElMessage.error("上传的图片大小不能超过10MB！");
     return false;
   }
+
   return true;
 };
 
@@ -1365,21 +1429,24 @@ const handlePictureCardPreview = (uploadFile) => {
 const getBatchNo = async (file, type, field) => {
   loading.value = true;
   currentBbatchNo.value = "";
-  const rsp = await batchNoApi(file, type).then((res) => {
+  file = await compressImage(file);
-    loading.value = false;
+  const rsp = await batchNoApi(file, type)
-    return res;
+    .then((res) => {
-  }).catch(()=> {
+      loading.value = false;
-        loading.value = false;
+      return res;
-        const _uploadRef = uploadRefs.value[field]
+    })
-        if(_uploadRef){
+    .catch(() => {
-          _uploadRef.clearFiles()
+      loading.value = false;
-          uploadFiles[field] = []
+      const _uploadRef = uploadRefs.value[field];
-           cleanFile(field)
+      if (_uploadRef) {
-        }
+        _uploadRef.clearFiles();
-        ElMessage.error('网络异常，请重试！')
+        uploadFiles[field] = [];
-      });
+        cleanFile(field);
+      }
+      ElMessage.error("网络异常，请重试！");
+    });
 
-  if (rsp?.code==0 && rsp?.status == 200) {
+  if (rsp?.code == 0 && rsp?.status == 200) {
     return rsp?.data;
   } else {
     return null;
@@ -1396,7 +1463,7 @@ const getOcrText = async (batchNo, type) => {
     clearTimeout(orcTimeout);
 
     orcTimeout = setTimeout(async () => {
-      const imgOcrRes = await imgOcrResultApi(formData).finally(()=> {
+      const imgOcrRes = await imgOcrResultApi(formData).finally(() => {
         loading.value = false;
       });
 
@@ -1434,7 +1501,7 @@ const handleOcrText = async (batchNo, imgType) => {
     case "legal_person_id_images":
       var res = (await getOcrText(
         batchNo,
-        orcImgTypeConf.ID_CARD_FRONT
+        orcImgTypeConf.FR_ID_CARD_FRONT
       )) as any;
 
       console.log("legal_person_id_images", res);
@@ -1444,7 +1511,7 @@ const handleOcrText = async (batchNo, imgType) => {
     case "legal_person_id_images2":
       var res = (await getOcrText(
         batchNo,
-        orcImgTypeConf.ID_CARD_BEHIND
+        orcImgTypeConf.FR_ID_CARD_BEHIND
       )) as any;
       var validity = res.validity.split("-");
 
@@ -1461,7 +1528,7 @@ const handleOcrText = async (batchNo, imgType) => {
     case "individual_id_images":
       var res = (await getOcrText(
         batchNo,
-        orcImgTypeConf.FR_ID_CARD_FRONT
+        orcImgTypeConf.ID_CARD_FRONT
       )) as any;
 
       console.log("individual_id_images", res);
@@ -1499,14 +1566,14 @@ const handleOcrText = async (batchNo, imgType) => {
   (formRef.value as any).validate();
 };
 
-const cleanFile = (field)=>{
+const cleanFile = (field) => {
   if (field === "license_image") {
-        applyFormData[field]=[];
+    applyFormData[field] = [];
-      } else {
+  } else {
-        applyFormData[field] = "";
+    applyFormData[field] = "";
-      }
+  }
-      currentFile.value = null;
+  currentFile.value = null;
-}
+};
 
 const handleUploadSuccess = async (response, file, fileList, field) => {
   if (response && response.status === 200 && response.code === 0) {
@@ -1524,27 +1591,47 @@ const handleUploadSuccess = async (response, file, fileList, field) => {
 
       switch (field) {
         case "biz_license_image":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE, field);
+          var res = await getBatchNo(
+            file.raw,
+            orcImgTypeConf.BUSINESS_LICENCE,
+            field
+          );
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "legal_person_id_images":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT, field);
+          var res = await getBatchNo(
+            file.raw,
+            orcImgTypeConf.FR_ID_CARD_FRONT,
+            field
+          );
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "legal_person_id_images2":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND, field);
+          var res = await getBatchNo(
+            file.raw,
+            orcImgTypeConf.FR_ID_CARD_BEHIND,
+            field
+          );
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "individual_id_images":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT, field);
+          var res = await getBatchNo(
+            file.raw,
+            orcImgTypeConf.ID_CARD_FRONT,
+            field
+          );
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
         case "individual_id_images2":
-          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND, field);
+          var res = await getBatchNo(
+            file.raw,
+            orcImgTypeConf.ID_CARD_BEHIND,
+            field
+          );
           currentBbatchNo.value = res.batchNo;
           handleOcrText(res.batchNo, field);
           break;
@@ -1598,9 +1685,9 @@ const clearOtherFields = () => {
 };
 
 onMounted(() => {
-  if(!isLoggedIn.value){
+  if (!isLoggedIn.value) {
     router.push({ name: "index" });
-    return
+    return;
   }
   GetStoreCategories()
     .then((res) => {
@@ -1688,6 +1775,29 @@ onMounted(() => {
   }
 }
 
+.bank_name_tip {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+.bank_name_cont {
+  width: 360px;
+  h3{
+    margin-bottom: 12px;
+  }
+  p {
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+}
+
+.myui_check_text {
+  color: #999;
+  padding-bottom: 10px;
+  text-align: center;
+  font-size: 14px;
+}
+
 .auto-item {
   p {
     font-size: 15px;
@@ -1714,5 +1824,9 @@ onMounted(() => {
       width: 100%;
     }
   }
+
+  .bank_name_tip {
+    margin-left: 0px;
+  }
 }
 </style>