花束编辑优化：增加收集删除的图片，在提交表单后，批量删除图片

hdApp/src/admin/goods/detail.vue

@@ -149,6 +149,7 @@ import TuiListCell from "@/components/plugin/list-cell";
 const form = require("@/utils/formValidation.js");
 import { getClass } from "@/api/category";
 import { getGoodsDetail, updateGoodsData } from "@/api/goods";
+import { delImages } from "@/api/pic-text";
 //图片上传插件来源：https://ext.dcloud.net.cn/plugin?id=2922 已改造，不能再升级 shish 20211228
 import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
 //import productMins from "@/mixins/product"; //复制页面代码时，没去掉，引入的话会导致页面崩溃
@@ -164,6 +165,8 @@ export default {
     return {
       headers:{token:''},
       currentImgData: [],
+      // 收集待删除的小图URL，提交时批量删除
+      delImgQueue: [],
       loading: false, // 添加加载状态
 
       form: {
@@ -214,9 +217,44 @@ export default {
   },
   methods: {
     init(){},
+    // 规范化图片路径：去除域名与查询参数，保留以/开头的相对路径
+    normalizeImgPath(url){
+      if (!url || typeof url !== 'string') return ''
+      try {
+        // 去掉查询参数
+        const qIndex = url.indexOf('?')
+        const noQuery = qIndex >= 0 ? url.substring(0, qIndex) : url
+        // 提取以/开头的路径
+        const match = noQuery.match(/:\/\/[\w.-]+(\:\d+)?(\/[^?#]+)$/)
+        if (match && match[2]) {
+          return match[2]
+        }
+        // 若本身就是相对路径则直接返回
+        if (noQuery.startsWith('/')) return noQuery
+        // 若是无协议域名形式 //domain/path
+        if (noQuery.startsWith('//')) {
+          const idx = noQuery.indexOf('/', 2)
+          return idx > 0 ? noQuery.substring(idx) : ''
+        }
+        return noQuery
+      } catch (e) {
+        return ''
+      }
+    },
     imgDeleteFn(res){
       const index = res.index
+      // 先记录对应的短路径（无域名、无参数）
+      const shortDelPath = this.form.shopImg && this.form.shopImg[index]
+        ? this.form.shopImg[index]
+        : this.normalizeImgPath(res && res.del ? res.del : '')
+      // 从数组中移除
       this.form.shopImg.splice(index,1)
+      // 收集删除的小图短路径，去重
+      if (shortDelPath) {
+        if (!this.delImgQueue.includes(shortDelPath)) {
+          this.delImgQueue.push(shortDelPath)
+        }
+      }
       
       // 处理封面图片的临界情况
       if (this.form.shopImg.length === 0) {
@@ -477,6 +515,16 @@ export default {
         
         // 更新成功后，把更新的数据传递给前一页的列表页
         if (res.code === 1) {
+          // 如有删除的图片，提交给批量删除接口
+          if (this.delImgQueue && this.delImgQueue.length > 0) {
+            const filePaths = Array.from(new Set(this.delImgQueue))
+            delImages({ filePaths }).then(() => {
+              // 清空队列
+              this.delImgQueue = []
+            }).catch(() => {
+              // 忽略删除失败的提示，避免影响主流程
+            })
+          }
           try {
             let pages = getCurrentPages();
             let prevPage = pages[pages.length - 2];

hdApp/src/components/htz-image-upload/htz-image-upload.vue

@@ -4,16 +4,22 @@
       <view class="htz-image-upload-Item-video" v-if="!/.(gif|jpg|jpeg|png|gif|jpg|png)/i.test(item)">
         <video :disabled="false" :controls="false" :src="item">
           <cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo(item)"></cover-view>
-          <cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc == ''" @click="imgDel(index)">×</cover-view>
+          <cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc == ''" @click="imgDel(index)">
+            <zui-svg-icon icon="general-close" :width="13" :height="13" color="#fff" />
+          </cover-view>
         </video>
       </view>
       <image v-else :src="item" @click="imgPreview(item)"></image>
-      <view class="htz-image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view>
+      <view class="htz-image-upload-Item-del" v-if="remove" @click="imgDel(index)">
+        <zui-svg-icon icon="general-close" :width="13" :height="13" color="#fff" style="position: relative; top: 4rpx;" />
+      </view>
     </view>
     <view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length < max && add" @click="chooseFile"> + </view>
     <view class="preview-full" v-if="previewVideoSrc != ''">
       <video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
-        <cover-view class="preview-full-close" @click="previewVideoClose"> × </cover-view>
+        <cover-view class="preview-full-close" @click="previewVideoClose">
+          <zui-svg-icon icon="general-close" :width="13" :height="13" color="#fff" />
+        </cover-view>
       </video>
     </view>
   </view>