refactor(approval): 使用 wd-upload 组件重构图片上传功能

移除自定义图片上传逻辑，改用 wd-upload 组件实现
简化代码结构，删除冗余的压缩和上传处理逻辑

.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

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)
 
-// 图片上传相关
+// 图片上传相关 - 使用 wd-upload 组件的 v-model 双向绑定
-interface UploadedFile {
+const fileList = ref<UploadFile[]>([])
-  url: string
-}
-const uploadedFiles = ref<UploadedFile[]>([])
 const uploading = ref(false)
 
 // 获取上传地址
 const uploadUrl = `${getEnvBaseUploadUrl()}/file/upload`
 
-// 选择图片
+// 上传前置处理
-const chooseImages = () => {
+const beforeUpload = ({ files, resolve }: { files: Record<string, any>[], resolve: (isPass: boolean) => void }) => {
-  uni.chooseMedia({
+  resolve(true)
-    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<string> => {
-  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<UploadedFile>((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)
 }
 
 // 表单验证
@@ -185,18 +82,11 @@ const validateForm = () => {
 const handleSubmit = async () => {
   if (!validateForm()) return
 
-  // 检查是否选择了图片，如果没有则自动调用chooseImages
+  // 检查是否选择了图片
-  if (uploadedFiles.value.length === 0) {
+  if (fileList.value.length === 0) {
-    uni.showModal({
+    uni.showToast({
-      title: '提示',
+      title: '请先上传凭证图片',
-      content: '请先上传凭证图片',
+      icon: 'none',
-      confirmText: '选择图片',
-      cancelText: '取消',
-      success: (res) => {
-        if (res.confirm) {
-          chooseImages()
-        }
-      },
     })
     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 () => {
 
       <wd-cell-group custom-class="upload-section">
         <wd-cell title="凭证图片" value="">
-          <template #extra>
+          <wd-upload
-            <view class="upload-area">
+            v-model:file-list="fileList"
-              <view
+            :action="uploadUrl"
-                v-for="(file, index) in uploadedFiles"
+            :limit="3"
-                :key="index"
+            image-mode="aspectFill"
-                class="uploaded-image"
+            :before-upload="beforeUpload"
-              >
+            accept="image"
-                <image
+            multiple
-                  :src="file.url"
+          >
-                  mode="aspectFill"
+            <template #default>
-                  class="image-preview"
+              <view class="upload-button">
-                />
-                <view class="delete-btn" @tap="() => deleteImage(index)">
-                  <wd-icon name="delete" size="16px" color="#fff" />
-                </view>
-              </view>
-              <view
-                v-if="uploadedFiles.length < 3"
-                class="upload-button"
-                @tap="chooseImages"
-              >
                 <wd-icon name="camera" size="32px" color="#ccc" />
                 <text class="upload-text">
                   {{ uploading ? '上传中...' : '点击上传' }}
                 </text>
               </view>
-            </view>
+            </template>
-          </template>
+          </wd-upload>
         </wd-cell>
       </wd-cell-group>
 
@@ -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;