feat: 优化售后服务页面与上传组件

- 在 AfterSaleDetail.vue 中添加样式以增强商品信息展示的可读性。
- 在 ApplyAfterSale.vue 中更新选择原因的下拉框，确保与服务类型关联。
- 在多个上传组件中添加图片选择与确认功能，提升用户体验。
- 在订单投诉与退款页面中调整表格列宽，确保信息展示的清晰性。

seller/src/views/my-components/lili/upload-pic-input.vue

@@ -56,8 +56,14 @@
         ref="ossManage"
         :is-component="true"
         :initialize="picModalFlag"
+        :max-select="1"
         @callback="callbackSelected"
+        @selected="handleOssSelected"
       />
+      <template #footer>
+        <el-button @click="picModalFlag = false">取消</el-button>
+        <el-button type="primary" @click="confirmSelectedImage">确认</el-button>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -108,6 +114,7 @@ export default {
       picModalFlag: false,
       selectedFormBtnName: "",
       picIndex: "",
+      selectedImage: [],
     };
   },
   methods: {
@@ -115,6 +122,7 @@ export default {
       this.picModalFlag = true;
       this.selectedFormBtnName = val;
       this.picIndex = index;
+      this.selectedImage = [];
       this.$nextTick(() => {
         if (this.$refs.ossManage) {
           this.$refs.ossManage.selectImage = true;
@@ -122,8 +130,20 @@ export default {
       });
     },
     callbackSelected(val) {
+      if (val?.url) {
+        this.selectedImage = [val.url];
+      }
+    },
+    handleOssSelected(list) {
+      this.selectedImage = (list || []).map((item) => item.split(",")[1]).filter(Boolean);
+    },
+    confirmSelectedImage() {
+      if (!this.selectedImage.length) {
+        this.$Message.warning("请选择图片");
+        return;
+      }
+      this.currentValue = this.selectedImage[this.selectedImage.length - 1];
       this.picModalFlag = false;
-      this.currentValue = val.url;
       this.picIndex = "";
       this.emitValue(this.currentValue);
     },

seller/src/views/my-components/lili/upload-pic-thumb.vue

@@ -145,15 +145,32 @@ export default {
     handleCLickImg(val) {
       this.picModelFlag = true;
       this.selectedFormBtnName = val;
+      this.selectedImage = [];
       this.$nextTick(() => {
         if (this.$refs.ossManage) {
           this.$refs.ossManage.selectImage = true;
         }
       });
     },
+    parseOssSelectionUrl(item) {
+      if (!item) {
+        return "";
+      }
+      if (typeof item === "string") {
+        const index = item.indexOf(",");
+        return index >= 0 ? item.slice(index + 1) : item;
+      }
+      return item.url || "";
+    },
     callbackSelected(val) {
+      if (this.multiple) {
+        return;
+      }
+      if (!val?.url) {
+        return;
+      }
       this.picModelFlag = false;
-      if (!this.multiple && this.uploadList.length > 0) {
+      if (this.uploadList.length > 0) {
         this.uploadList.splice(0, 1);
       }
       this.uploadList.push({ ...val, status: "finished" });
@@ -162,9 +179,13 @@ export default {
     confirmUrls() {
       if (this.selectedImage.length) {
         this.selectedImage.forEach((element) => {
-          this.uploadList.push({ url: element.url, status: "finished" });
+          const url = this.parseOssSelectionUrl(element);
+          if (url) {
+            this.uploadList.push({ url, status: "finished" });
+          }
         });
       }
+      this.selectedImage = [];
       this.picModelFlag = false;
       this.returnValue();
     },
@@ -268,7 +289,6 @@ export default {
   background: #fff;
   position: relative;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  margin-right: 5px;
   vertical-align: middle;
 }
 .upload-list img {
@@ -297,7 +317,9 @@ export default {
   cursor: pointer;
 }
 .list-group {
-  display: inline-block;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 .thumb-ghost {
   opacity: 0.5;