From 95157936aff35573dc91584ffa6606c442999ae0 Mon Sep 17 00:00:00 2001 From: dzq Date: Tue, 11 Nov 2025 08:33:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor(approval):=20=E4=BD=BF=E7=94=A8=20wd-u?= =?UTF-8?q?pload=20=E7=BB=84=E4=BB=B6=E9=87=8D=E6=9E=84=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除自定义图片上传逻辑，改用 wd-upload 组件实现 简化代码结构，删除冗余的压缩和上传处理逻辑 --- .gitignore | 3 +- src/pages/approval/submit.vue | 202 +++++----------------------------- 2 files changed, 27 insertions(+), 178 deletions(-) diff --git a/.gitignore b/.gitignore index 1867c9f..480e91f 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,8 @@ node_modules dist *.local +.claude + # Editor directories and files .idea *.suo @@ -23,7 +25,6 @@ dist .stylelintcache .eslintcache -.claude docs/.vitepress/dist docs/.vitepress/cache diff --git a/src/pages/approval/submit.vue b/src/pages/approval/submit.vue index 52e0e5d..bad1711 100644 --- a/src/pages/approval/submit.vue +++ b/src/pages/approval/submit.vue @@ -5,6 +5,7 @@ import type { SubmitApprovalRequestData } from '@/api/approval/types' import { useOrderStore } from '@/pinia/stores/order' import { useWxStoreOutside } from '@/pinia/stores/wx' import { getEnvBaseUploadUrl } from '@/utils' +import type { UploadFile } from 'wot-design-uni/components/wd-upload/types' // 页面配置 definePage({ @@ -46,120 +47,16 @@ watch(orderGoodsId, (newVal) => { const submitting = ref(false) -// 图片上传相关 -interface UploadedFile { - url: string -} -const uploadedFiles = ref([]) +// 图片上传相关 - 使用 wd-upload 组件的 v-model 双向绑定 +const fileList = ref([]) const uploading = ref(false) // 获取上传地址 const uploadUrl = `${getEnvBaseUploadUrl()}/file/upload` -// 选择图片 -const chooseImages = () => { - uni.chooseMedia({ - count: 3 - uploadedFiles.value.length, - mediaType: ['image'], - sourceType: ['album', 'camera'], - maxDuration: 30, - camera: 'back', - success: (res) => { - console.log('选择图片成功:', res) - uploadImages(res.tempFiles) - }, - fail: (err) => { - console.error('选择图片失败:', err) - uni.showToast({ - title: '选择图片失败', - icon: 'none', - }) - }, - }) -} - -// 压缩图片（微信小程序替代方案） -// 注意：H5版本使用 compressorjs 库进行压缩 -// 但小程序环境没有 File API 和 Canvas，因此使用 uni.compressImage 作为替代 -const compressImage = (tempFilePath: string): Promise => { - return new Promise((resolve, reject) => { - uni.compressImage({ - src: tempFilePath, - quality: 0.8, // 压缩质量，范围0-1（类似 compressorjs 的 quality 参数） - maxWidth: 1280, // 最大宽度（类似 compressorjs 的 maxWidth 参数） - maxHeight: 1280, // 最大高度（类似 compressorjs 的 maxHeight 参数） - success: (res) => { - console.log('图片压缩成功:', res) - resolve(res.tempFilePath) - }, - fail: (err) => { - console.error('图片压缩失败:', err) - // 压缩失败则使用原图 - resolve(tempFilePath) - }, - }) - }) -} - -// 上传图片 -const uploadImages = (files: UniApp.MediaFile[]) => { - uploading.value = true - - const uploadPromises = files.map(async (file) => { - // 先压缩图片 - const compressedPath = await compressImage(file.tempFilePath) - - return new Promise((resolve, reject) => { - uni.uploadFile({ - url: uploadUrl, - filePath: compressedPath, - name: 'file', - formData: {}, - header: { - 'Content-Type': 'multipart/form-data', - }, - success: (uploadRes) => { - try { - const data = JSON.parse(uploadRes.data) - if (data.code === 0) { - resolve({ url: data.data.url }) - } else { - reject(new Error(data.message || '上传失败')) - } - } catch (error) { - reject(new Error('响应解析失败')) - } - }, - fail: (err) => { - reject(err) - }, - }) - }) - }) - - Promise.all(uploadPromises) - .then((results) => { - uploadedFiles.value.push(...results) - uni.showToast({ - title: '上传成功', - icon: 'success', - }) - }) - .catch((error) => { - console.error('上传失败:', error) - uni.showToast({ - title: error.message || '上传失败', - icon: 'none', - }) - }) - .finally(() => { - uploading.value = false - }) -} - -// 删除图片 -const deleteImage = (index: number) => { - uploadedFiles.value.splice(index, 1) +// 上传前置处理 +const beforeUpload = ({ files, resolve }: { files: Record[], resolve: (isPass: boolean) => void }) => { + resolve(true) } // 表单验证 @@ -185,18 +82,11 @@ const validateForm = () => { const handleSubmit = async () => { if (!validateForm()) return - // 检查是否选择了图片，如果没有则自动调用chooseImages - if (uploadedFiles.value.length === 0) { - uni.showModal({ - title: '提示', - content: '请先上传凭证图片', - confirmText: '选择图片', - cancelText: '取消', - success: (res) => { - if (res.confirm) { - chooseImages() - } - }, + // 检查是否选择了图片 + if (fileList.value.length === 0) { + uni.showToast({ + title: '请先上传凭证图片', + icon: 'none', }) return } @@ -204,7 +94,7 @@ const handleSubmit = async () => { submitting.value = true try { // 组装图片URL - formData.value.returnImages = uploadedFiles.value.map(item => item.url).join(',') + formData.value.returnImages = fileList.value.map(item => item.url).join(',') formData.value.corpid = wxStore.corpid formData.value.applyUserid = wxStore.userid @@ -265,34 +155,24 @@ const handleSubmit = async () => { - + @@ -326,38 +206,6 @@ const handleSubmit = async () => { margin: 20rpx 0; } -.upload-area { - display: flex; - flex-wrap: wrap; - gap: 16rpx; -} - -.uploaded-image { - position: relative; - width: 160rpx; - height: 160rpx; - border-radius: 8rpx; - overflow: hidden; -} - -.image-preview { - width: 100%; - height: 100%; -} - -.delete-btn { - position: absolute; - top: 8rpx; - right: 8rpx; - width: 40rpx; - height: 40rpx; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -} - .upload-button { width: 160rpx; height: 160rpx;