修改

src/views/order/orderManage/applyAfter.vue

@@ -114,10 +114,25 @@
             <el-form-item label="问题描述" prop="problemDescription">
               <el-input v-model="form.problemDescription" type="textarea" :rows="5" placeholder="请输入问题描述" />
             </el-form-item>
-            <el-form-item label="凭证图片">
+            <!-- <el-form-item label="凭证图片">
               <el-upload v-model:file-list="form.voucherPhotoArray" list-type="picture-card" :action="action" :auto-upload="false" :limit="5">
                 <el-icon><Plus /></el-icon>
               </el-upload>
+            </el-form-item> -->
+            <el-form-item label="凭证图片">
+              <el-upload
+                class="avatar-uploader"
+                :action="action"
+                :limit="5"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+              >
+                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              </el-upload>
+              <div v-if="form.voucherPhoto && form.voucherPhoto != ''">
+                <img class="upload-img" v-for="(item, index) in form.voucherPhoto.split(',')" :key="index" :src="item" />
+              </div>
             </el-form-item>
           </el-form>
         </div>
@@ -221,7 +236,6 @@ const addressLoading = ref(false);
 const addressList = ref<any[]>([]);
 const selectedAddressId = ref<string>('');
 const selectedAddress = ref<any>(null);
-
 const orderInfo = reactive({
   orderId: 0,
   orderNo: '',
@@ -312,6 +326,32 @@ const handleRemoveProduct = (id: number) => {
   selectedProducts.value = selectedProducts.value.filter((p) => p.productId != id);
 };
 
+//上传成功
+const handleAvatarSuccess = (res: any) => {
+  if (res.code == 200) {
+    const url = res.data.url;
+    if (form.voucherPhoto) {
+      form.voucherPhoto = form.voucherPhoto + ',' + url;
+    } else {
+      form.voucherPhoto = url;
+    }
+  } else {
+    ElMessage({
+      message: res.msg,
+      type: 'warning'
+    });
+  }
+  console.log(res);
+};
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('不能大于2MB!');
+    return false;
+  }
+  return true;
+};
+
 const isDefaultAddress = (addr: any) => {
   const v = addr?.isDefault ?? addr?.defaultFlag;
   return v === 0 || v === '0' || v === 1 || v === '1' || v === true;
@@ -509,7 +549,7 @@ const handleSubmit = async () => {
   form.returnProductNum = summary.value.totalQty;
   form.afterSaleAmount = summary.value.totalAmount;
   form.returnAmount = summary.value.totalAmount;
-  form.voucherPhoto = form.voucherPhotoArray.join(',');
+  // form.voucherPhoto = (form.voucherPhotoArray || []).map((file: any) => file.url).join(',');
   form.orderReturnItemList = selectedProducts.value;
   const res = await addOrderReturn(form as any);
   if (res.code == 200) {
@@ -827,4 +867,32 @@ const handleSubmit = async () => {
     gap: 10px;
   }
 }
+
+.avatar-uploader {
+  margin: 10px 20px;
+  :deep(.el-upload) {
+    width: 108px;
+    height: 108px;
+    background: #f2f3f5;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+}
+
+.upload-img {
+  width: 108px;
+  height: 108px;
+  border-radius: 2px;
+  margin-right: 15px;
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
 </style>