feat(groupPackage): 更新团购包图片上传功能

- 修改图片列表字段名从 imageList 为 imageValueStr
- 调整图片上传接口地址为平台统一上传服务
- 新增 imageId 字段用于关联图片标识
- 优化图片上传成功回调，保存 imageId 至文件对象
- 完善图片删除逻辑，同步移除对应 imageId
- 修正图片预览列表生成方式
- 移除旧版图片参数处理函数 handleImageParam
- 更新表单验证规则匹配新字段名
- 修复初始化数据时图片列表处理逻辑
- 添加 imageId 数组转字符串提交处理

src/views/groupPackageManagement/detail.vue

@@ -17,13 +17,14 @@
             <div class="detail-value">
               <div class="image-list">
                 <el-image
-                  v-for="(image, index) in storeInfoModel.imageList"
+                  v-for="(image, index) in storeInfoModel.imageValueStr"
                   :key="index"
                   :src="getImageUrl(image)"
-                  fit="cover"
                   class="detail-image"
                   :preview-src-list="imagePreviewList"
                   :initial-index="index"
+                  show-progress
+                  preview-teleported
                 />
               </div>
             </div>
@@ -193,7 +194,7 @@ const id = ref<string>("");
 // ==================== 团购包信息数据模型 ====================
 const storeInfoModel = ref<any>({
   // 团购图片列表
-  imageList: [],
+  imageValueStr: [],
   // 团购名称
   groupName: "",
   // 开始售卖时间设置方式：0-审核通过后立即开始，1-设置售卖时间
@@ -265,7 +266,7 @@ const businessTypes = ref([
 
 // 图片预览列表
 const imagePreviewList = computed(() => {
-  return storeInfoModel.value.imageList.map((item: any) => getImageUrl(item));
+  return storeInfoModel.value.imageValueStr.map((item: any) => getImageUrl(item));
 });
 
 // 发票信息列表
@@ -344,12 +345,6 @@ const loadDetailData = async () => {
     if (res && res.code == 200) {
       // 合并主数据
       storeInfoModel.value = { ...storeInfoModel.value, ...res.data.lifeGroupBuyMain };
-
-      // 处理图片列表
-      let imageList: any[] = [];
-      handleImageParam((res.data as any).businessLicenseAddress || [], imageList);
-      storeInfoModel.value.imageList = imageList;
-
       // 处理发票信息
       if (storeInfoModel.value.invoiceType) {
         storeInfoModel.value.invoiceInformation = storeInfoModel.value.invoiceType.split(";");
@@ -501,25 +496,6 @@ const getImageUrl = (item: any): string => {
   }
   return "";
 };
-
-/**
- * 图片list 转换为upload 组件的参数
- * @param list 图片URL列表
- * @param result 结果数组
- */
-const handleImageParam = (list: any[], result: any[]) => {
-  (list || []).forEach((item: any) => {
-    // 使用split方法以'/'为分隔符将URL拆分成数组
-    const parts = item.split("/");
-    // 取数组的最后一项，即图片名称
-    const imageName = parts[parts.length - 1];
-    result.push({
-      name: imageName,
-      percentage: 100,
-      url: item
-    });
-  });
-};
 </script>
 
 <style scoped lang="scss">

src/views/groupPackageManagement/newGroup.vue

@@ -12,10 +12,10 @@
           <!-- 基础信息模块 -->
           <div class="model">
             <h3 style="font-weight: bold">基础信息：</h3>
-            <!-- 团购图片上传 prop="imageList" 本地服务测不了上传图片 先去掉必填-->
+            <!-- 团购图片上传 prop="imageValueStr" 本地服务测不了上传图片 先去掉必填-->
             <el-form-item label="图片">
               <el-upload
-                v-model:file-list="storeInfoModel.imageList"
+                v-model:file-list="storeInfoModel.imageValueStr"
                 :action="uploadUrl"
                 list-type="picture-card"
                 :accept="'.jpg,.png'"
@@ -481,11 +481,11 @@ const type = ref<string>(""); // 页面类型：add-新增, edit-编辑
 const id = ref<string>(""); // 页面ID参数
 
 // 文件上传地址
-const uploadUrl = ref(`${import.meta.env.VITE_API_URL_STORE}/file/upload`);
+const uploadUrl = ref(`${import.meta.env.VITE_API_URL_PLATFORM}/file/uploadImg`);
 
 // ==================== 表单验证规则 ====================
 const rules = reactive({
-  imageList: [{ required: true, message: "请上传图片" }],
+  imageValueStr: [{ required: true, message: "请上传图片" }],
   groupName: [{ required: true, message: "请填写团购名称" }],
   startTimeType: [{ required: true, message: "请选择开始售卖时间" }],
   startTimeValue: [
@@ -805,7 +805,8 @@ const rules = reactive({
 // ==================== 团购包信息数据模型 ====================
 const storeInfoModel = ref<any>({
   // 团购图片列表
-  imageList: [],
+  imageValueStr: [],
+  imageId: [],
   // 团购名称
   groupName: "",
   // 开始售卖时间设置方式：0-审核通过后立即开始，1-设置售卖时间
@@ -1059,13 +1060,22 @@ onMounted(async () => {
     };
     let res: any = await getThaliById(params);
     storeInfoModel.value = { ...storeInfoModel.value, ...res.data.lifeGroupBuyMain };
-    let imageList: any[] = [];
-    handleImageParam((res.data as any).businessLicenseAddress || [], imageList);
-    storeInfoModel.value.imageList = imageList;
-    storeInfoModel.value.invoiceInformation = storeInfoModel.value.invoiceType.split(";");
+    storeInfoModel.value.imageId = storeInfoModel.value.imageId ? storeInfoModel.value.imageId.split(",") : [];
+    let imageValueStr: any[] = [];
+    handleImageParam(storeInfoModel.value.imageValueStr || [], imageValueStr);
+    // 将 imageId 关联到对应的文件对象中（假设 imageValueStr 和 imageId 的顺序是对应的）
+    if (imageValueStr.length > 0 && storeInfoModel.value.imageId.length > 0) {
+      imageValueStr.forEach((file, index) => {
+        if (storeInfoModel.value.imageId[index]) {
+          file.imageId = storeInfoModel.value.imageId[index];
+        }
+      });
+    }
+    storeInfoModel.value.imageValueStr = imageValueStr;
+    storeInfoModel.value.invoiceInformation = storeInfoModel.value.invoiceType ? storeInfoModel.value.invoiceType.split(";") : [];
     // 确保星期和节日字段存在
     if (storeInfoModel.value.disableDateType == 1) {
-      const listVal = storeInfoModel.value.disableDateValue.split(";");
+      const listVal = storeInfoModel.value.disableDateValue ? storeInfoModel.value.disableDateValue.split(";") : [];
       storeInfoModel.value.unavailableWeekdays = listVal[0] ? listVal[0].split(",").filter((item: string) => item) : [];
       storeInfoModel.value.unavailableHolidays = listVal[1] ? listVal[1].split(",").filter((item: string) => item) : [];
     }
@@ -1147,6 +1157,16 @@ const handleBeforeRemove = async (uploadFile: any, uploadFiles: any[]): Promise<
  * @param uploadFiles 删除后的文件列表
  */
 const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
+  // 从被删除的文件对象中获取 imageId
+  const file = uploadFile as any;
+  const imageId = file.imageId;
+  if (imageId) {
+    // 从 imageId 数组中删除对应的 imageId
+    const index = storeInfoModel.value.imageId.indexOf(imageId);
+    if (index > -1) {
+      storeInfoModel.value.imageId.splice(index, 1);
+    }
+  }
   // 删除成功后提示
   ElMessage.success("图片已删除");
 };
@@ -1154,10 +1174,21 @@ const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
 /**
  * 图片上传 - 上传成功回调
  * @param response 上传响应数据
+ * @param uploadFile 上传的文件对象
+ * @param uploadFiles 当前文件列表
  */
-const handleSuccess = (response: any) => {
+const handleSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
+  const imageId = response?.data[0];
+  // 将 imageId 添加到 storeInfoModel 的 imageId 数组中
+  if (!storeInfoModel.value.imageId.includes(imageId)) {
+    storeInfoModel.value.imageId.push(imageId);
+  }
+  // 将 imageId 保存到文件对象中，以便删除时使用
+  if (uploadFile) {
+    (uploadFile as any).imageId = imageId;
+  }
   ElMessage.success("图片上传成功");
-  // 上传成功后，imageList 会自动更新，response.data 包含图片URL
+  // 上传成功后，imageValueStr 会自动更新，response.data 包含图片URL
 };
 
 /**
@@ -1166,7 +1197,7 @@ const handleSuccess = (response: any) => {
  */
 const handlePictureCardPreview = (file: any) => {
   // 获取所有图片的 URL 列表
-  const urlList = storeInfoModel.value.imageList.map((item: any) => item.url || item.response?.data || item);
+  const urlList = storeInfoModel.value.imageValueStr.map((item: any) => item.url || item.response?.data || item);
   // 找到当前点击的图片索引
   const currentIndex = urlList.findIndex((url: string) => url === file.url);
   imageViewerUrlList.value = urlList;
@@ -1722,6 +1753,12 @@ const packageFormRules = computed(() => {
  */
 const handleSubmit = async (type?) => {
   let params: any = { ...storeInfoModel.value };
+  // 确保 imageId 是数组，然后转换为逗号分隔的字符串
+  if (Array.isArray(params.imageId)) {
+    params.imageId = params.imageId.join(",");
+  } else {
+    params.imageId = "";
+  }
   if (params.disableDateType == 1) {
     params.disableDateValue = params.unavailableWeekdays.join(",") + ";" + params.unavailableHolidays.join(",");
     delete params.unavailableWeekdays;