Переглянути джерело

feat(groupPackage): 替换图片预览组件为 el-image-viewer

- 将原有的 el-dialog 图片预览替换为 el-image-viewer 组件
- 更新图片预览相关的响应式数据定义
- 修改 handlePictureCardPreview 方法以支持多图预览和初始索引定位- 移除旧的 previewImage 和 imagePopupVisible 变量
- 新增 imageViewerUrlList 和 imageViewerInitialIndex用于图片列表预览
congxuesong 1 місяць тому
батько
коміт
7c89c42bff
1 змінених файлів з 21 додано та 13 видалено
  1. 21 13
      src/views/groupPackageManagement/newGroup.vue

+ 21 - 13
src/views/groupPackageManagement/newGroup.vue

@@ -387,10 +387,13 @@
       <el-button @click="handleSubmit('cg')"> 存草稿 </el-button>
       <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
     </div>
-    <!-- 图片预览对话框 -->
-    <el-dialog v-model="imagePopupVisible" title="预览" width="30%">
-      <el-image style="width: 100%" :src="previewImage" fit="contain" />
-    </el-dialog>
+    <!-- 图片预览 -->
+    <el-image-viewer
+      v-if="imageViewerVisible"
+      :url-list="imageViewerUrlList"
+      :initial-index="imageViewerInitialIndex"
+      @close="imageViewerVisible = false"
+    />
     <!-- 菜品选择对话框 -->
     <el-dialog v-model="dishDialogVisible" title="菜品" width="600px" :close-on-click-modal="false">
       <div class="dish-dialog-content">
@@ -461,10 +464,10 @@ import { localGet, localSet } from "@/utils";
 
 // ==================== 响应式数据定义 ====================
 
-// 图片预览对话框显示状态
-const imagePopupVisible = ref(false);
-// 预览图片地址
-const previewImage = ref("");
+// 图片预览相关
+const imageViewerVisible = ref(false);
+const imageViewerUrlList = ref<string[]>([]);
+const imageViewerInitialIndex = ref(0);
 
 // 路由相关
 const router = useRouter();
@@ -1141,12 +1144,17 @@ const handleSuccess = (response: any) => {
 };
 
 /**
- * 图片预览 - 打开预览对话框
- * @param e 上传文件对象
+ * 图片预览 - 使用 el-image 预览功能
+ * @param file 上传文件对象
  */
-const handlePictureCardPreview = (e: any) => {
-  imagePopupVisible.value = true;
-  previewImage.value = e.url;
+const handlePictureCardPreview = (file: any) => {
+  // 获取所有图片的 URL 列表
+  const urlList = storeInfoModel.value.imageList.map((item: any) => item.url || item.response?.data || item);
+  // 找到当前点击的图片索引
+  const currentIndex = urlList.findIndex((url: string) => url === file.url);
+  imageViewerUrlList.value = urlList;
+  imageViewerInitialIndex.value = currentIndex >= 0 ? currentIndex : 0;
+  imageViewerVisible.value = true;
 };
 
 /**