From 9b8a92f93bdf0697d059e35895ec9edd4a2610bf Mon Sep 17 00:00:00 2001 From: mixtan <424491071@qq.com> Date: Thu, 19 Jun 2025 20:26:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8E=8B=E7=BC=A910M->50k=EF=BC=9B=E5=A4=84?= =?UTF-8?q?=E7=90=86=E7=BD=91=E7=BB=9C=E8=AF=B7=E6=B1=82=E8=B6=85=E6=97=B6?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=BF=87=E5=B0=8F=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 1 + src/utils/file.js | 87 ++++++++++++++++ src/utils/http.js | 2 +- src/views/HeadMenu.vue | 2 +- src/views/start/check.vue | 14 +-- src/views/start/start.vue | 214 +++++++++++++++++++++++++++++--------- 6 files changed, 262 insertions(+), 58 deletions(-) create mode 100644 src/utils/file.js diff --git a/components.d.ts b/components.d.ts index 61bef71..7d98a42 100644 --- a/components.d.ts +++ b/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'] diff --git a/src/utils/file.js b/src/utils/file.js new file mode 100644 index 0000000..27f9516 --- /dev/null +++ b/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); + }); + } \ No newline at end of file diff --git a/src/utils/http.js b/src/utils/http.js index 3ac3a9a..bf372ec 100644 --- a/src/utils/http.js +++ b/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 diff --git a/src/views/HeadMenu.vue b/src/views/HeadMenu.vue index 938378e..41c0349 100644 --- a/src/views/HeadMenu.vue +++ b/src/views/HeadMenu.vue @@ -33,7 +33,7 @@
- +
{ 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; diff --git a/src/views/start/start.vue b/src/views/start/start.vue index 5ea9b26..d918adb 100644 --- a/src/views/start/start.vue +++ b/src/views/start/start.vue @@ -186,7 +186,11 @@ prop="biz_license_image" > 结算信息
点击免填卡号 @@ -680,10 +708,16 @@ v-if="applyFormData.entity_type == 1 || applyFormData.bank_image" > - + - + + +
+ + + + + 搜不到我的开户银行，怎么处理？ + +
@@ -711,9 +773,8 @@
- 提交审核 +
检查并确认店铺信息和证件信息无误
+ 提交审核
@@ -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) => { - loading.value = false; - return res; - }).catch(()=> { - loading.value = false; - const _uploadRef = uploadRefs.value[field] - if(_uploadRef){ - _uploadRef.clearFiles() - uploadFiles[field] = [] - cleanFile(field) - } - ElMessage.error('网络异常，请重试！') - }); + file = await compressImage(file); + const rsp = await batchNoApi(file, type) + .then((res) => { + loading.value = false; + return res; + }) + .catch(() => { + loading.value = false; + const _uploadRef = uploadRefs.value[field]; + if (_uploadRef) { + _uploadRef.clearFiles(); + 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]=[]; - } else { - applyFormData[field] = ""; - } - currentFile.value = null; -} + applyFormData[field] = []; + } else { + applyFormData[field] = ""; + } + 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; + } }