feat(图片上传): 添加图片压缩功能以减少上传文件大小

在handle.vue和submit.vue文件中引入compressorjs库，对上传的图片进行压缩处理，设置压缩质量为0.8，最大宽度和高度为1280像素，以减少上传文件大小并提升上传效率

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@vant/touch-emulator": "1.4.0",
     "axios": "1.7.9",
+    "compressorjs": "1.2.1",
     "dayjs": "1.11.13",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: 1.7.9
         version: 1.7.9
+      compressorjs:
+        specifier: 1.2.1
+        version: 1.2.1
       dayjs:
         specifier: 1.11.13
         version: 1.11.13
@@ -1801,6 +1804,9 @@ packages:
   birpc@0.2.19:
     resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
 
+  blueimp-canvas-to-blob@3.29.0:
+    resolution: {integrity: sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -1929,6 +1935,9 @@ packages:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
 
+  compressorjs@1.2.1:
+    resolution: {integrity: sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -2580,6 +2589,10 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
 
+  is-blob@2.1.0:
+    resolution: {integrity: sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==}
+    engines: {node: '>=6'}
+
   is-builtin-module@4.0.0:
     resolution: {integrity: sha512-rWP3AMAalQSesXO8gleROyL2iKU73SX5Er66losQn9rWOWL4Gef0a/xOEOVqjWGMuR2vHG3FJ8UUmT700O8oFg==}
     engines: {node: '>=18.20'}
@@ -5501,6 +5514,8 @@ snapshots:
 
   birpc@0.2.19: {}
 
+  blueimp-canvas-to-blob@3.29.0: {}
+
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.11:
@@ -5619,6 +5634,11 @@ snapshots:
 
   comment-parser@1.4.1: {}
 
+  compressorjs@1.2.1:
+    dependencies:
+      blueimp-canvas-to-blob: 3.29.0
+      is-blob: 2.1.0
+
   concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
@@ -6400,6 +6420,8 @@ snapshots:
     dependencies:
       binary-extensions: 2.3.0
 
+  is-blob@2.1.0: {}
+
   is-builtin-module@4.0.0:
     dependencies:
       builtin-modules: 4.0.0

src/common/apis/approval/type.ts

@@ -13,6 +13,7 @@ export interface HandleApprovalRequestData {
   returnAmount: number
   auditImages: string
   auditRemark: string
+  userid: string
 }
 
 export interface SearchApiReturnApprovalQuery {
@@ -69,6 +70,8 @@ export interface ReturnApprovalEntity {
   name: string
   /** 是否内部用户（0否 1汇邦云用户 2企业微信用户） */
   isInternal: number
+  /** 审核人姓名 */
+  auditName: string
 }
 
 export type SubmitApprovalResponseData = ApiResponseMsgData<{

src/pages/approval/handle.vue

@@ -1,25 +1,28 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { showConfirmDialog, showSuccessToast, showFailToast, showToast, UploaderFileListItem, Popup, Picker } from 'vant'
-
 import axios from "axios"
 import { handleApprovalApi } from '@/common/apis/approval'
 import { openCabinetApi } from '@/common/apis/shop'
 import type { HandleApprovalRequestData } from '@/common/apis/approval/type'
 import { useRoute, useRouter } from 'vue-router'
 import { useApprovalStore } from '@/pinia/stores/approval'
+import { useWxStore } from '@/pinia/stores/wx';
+import Compressor from 'compressorjs';
 
 const { VITE_APP_BASE_API } = import.meta.env;
 const router = useRouter()
 const route = useRoute()
-const approvalStore = useApprovalStore()
+const approvalStore = useApprovalStore();
+const wxStore = useWxStore();
 
 const formData = ref<HandleApprovalRequestData>({
     approvalId: approvalStore.currentApproval?.approvalId || 0,
     status: 2,
     returnAmount: approvalStore.currentApproval?.goodsPrice || 0,
     auditImages: '',
-    auditRemark: ''
+    auditRemark: '',
+    userid: wxStore.userid
 })
 
 const submitting = ref(false)
@@ -75,8 +78,30 @@ const handleFileUpload = async (items: UploaderFileListItem | UploaderFileListIt
             item.status = 'uploading'
             item.message = '上传中...'
             const file = item.file as File
+            let compressedFile = file;
+            try {
+                compressedFile = await new Promise<File>((resolve, reject) => {
+                    new Compressor(file, {
+                        quality: 0.8,
+                        maxWidth: 1280,
+                        maxHeight: 1280,
+                        success(result) {
+                            resolve(new File([result], file.name, {
+                                type: 'image/jpeg',
+                                lastModified: Date.now()
+                            }))
+                        },
+                        error(err) {
+                            reject(err)
+                        }
+                    })
+                })
+            } catch (error) {
+                console.error('压缩失败:', error)
+            }
+
             const formData = new FormData()
-            formData.append('file', file)
+            formData.append('file', compressedFile)
 
             const { data } = await axios.post<{
                 code: number
@@ -186,6 +211,7 @@ const handleSubmit = async () => {
 
     submitting.value = true
     try {
+        formData.value.userid = wxStore.userid;
         const { code, msg } = await handleApprovalApi(formData.value)
 
         if (code === 0) {
@@ -232,6 +258,7 @@ const handleSubmit = async () => {
                 <van-cell title="商品单价" :value="`¥${approvalStore.currentApproval?.goodsPrice}`" />
                 <van-cell title="当前状态" :value="statusMap[approvalStore.currentApproval?.status || 1]" />
                 <van-cell title="退还说明" :value="approvalStore.currentApproval?.returnRemark" />
+                <van-cell title="审批人" :value="approvalStore.currentApproval?.auditName" />
             </van-cell-group>
 
             <van-cell-group class="image-section">

src/pages/approval/submit.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import Compressor from 'compressorjs'
 import { showConfirmDialog, showSuccessToast, showToast, UploaderFileListItem } from 'vant'
 import axios from "axios"
 import { submitApprovalApi } from '@/common/apis/approval'
@@ -54,10 +55,32 @@ const handleFileUpload = async (items: UploaderFileListItem | UploaderFileListIt
     try {
         const uploadPromises = files.map(async (item) => {
             item.status = 'uploading'
-            item.message = '上传中...'
-            const file = item.file as File
-            const formData = new FormData()
-            formData.append('file', file)
+            item.message = '上传中...';
+            const file = item.file as File;
+            let compressedFile = file;
+            try {
+                compressedFile = await new Promise<File>((resolve, reject) => {
+                    new Compressor(file, {
+                        quality: 0.8,
+                        maxWidth: 1280,
+                        maxHeight: 1280,
+                        success(result) {
+                            resolve(new File([result], file.name, {
+                                type: 'image/jpeg',
+                                lastModified: Date.now()
+                            }))
+                        },
+                        error(err) {
+                            reject(err)
+                        }
+                    })
+                })
+            } catch (error) {
+                console.error('压缩失败:', error)
+            }
+
+            const formData = new FormData();
+            formData.append('file', compressedFile);
 
             const { data } = await axios.post<{
                 code: number

src/pages/product/ProductList.vue

@@ -8,7 +8,10 @@ import VanPopup from "vant/es/popup"
 import { computed, onBeforeUnmount, onMounted, ref } from "vue"
 import Cart from "./components/cart.vue"
 import Detail from "./components/detail.vue"
+import { useRoute } from 'vue-router'
 
+const router = useRouter()
+const route = useRoute()
 // 状态管理
 const productStore = useProductStore()
 const cartStore = useCartStore()
@@ -102,6 +105,7 @@ const currentProducts = computed(() => {
 
 // 组件挂载时添加滚动监听
 onMounted(() => {
+  productStore.getGoods();
   scrollListener.push(scrollContainer.value?.addEventListener("scroll", throttledScroll))
   scrollListener.push(scrollContainer.value?.addEventListener("scroll", throttledUpdate))
 })
@@ -113,11 +117,17 @@ onBeforeUnmount(() => {
 })
 
 // 结算方法
-const router = useRouter()
 
 function handleCheckout() {
   router.push("/product/checkout")
 }
+
+// 路由更新时刷新数据
+watch(() => route.path, (newPath) => {
+  if (newPath === '/') {
+    productStore.getGoods()
+  }
+})
 </script>
 
 <template>