fix(claim): 分离图片和视频预览功能并修复点击事件

src/views/claim/index.js

@@ -457,40 +457,25 @@ export default {
 
     /**
      * 预览图片
-     * @param {Object} file - 文件信息
-     * @param {number} index - 当前图片索引
+     * @param {Object} file - 文件对象
+     * @param {number} index - 索引
      */
     previewImage(file, index = 0) {
-      if (this.isVideoFile(file.fileName)) {
-        // 视频预览
-        this.previewVideoUrl = file.fileUrl
-        this.videoPreviewVisible = true
-      } else if (this.isImageFile(file.fileName)) {
-        // 图片预览
-        const imageFiles = this.attachmentList.filter(item => this.isImageFile(item.fileName))
-        this.previewImageList = imageFiles.map(item => item.fileUrl)
-        this.currentPreviewIndex = imageFiles.findIndex(item => item.id === file.id)
-        this.previewImageUrl = file.fileUrl
-        this.imagePreviewVisible = true
-      }
+      // 获取所有图片文件
+      const imageFiles = this.attachmentList.filter(item => this.isImageFile(item.fileName))
+      this.previewImageList = imageFiles.map(item => item.fileUrl)
+      this.currentPreviewIndex = imageFiles.findIndex(item => item.id === file.id)
+      this.previewImageUrl = file.fileUrl
+      this.imagePreviewVisible = true
     },
 
     /**
-     * 关闭图片预览
+     * 预览视频
+     * @param {Object} file - 文件对象
      */
-    closeImagePreview() {
-      this.imagePreviewVisible = false
-      this.previewImageUrl = ''
-      this.previewImageList = []
-      this.currentPreviewIndex = 0
-    },
-
-    /**
-     * 关闭视频预览
-     */
-    closeVideoPreview() {
-      this.videoPreviewVisible = false
-      this.previewVideoUrl = ''
+    previewVideo(file) {
+      this.previewVideoUrl = file.fileUrl
+      this.videoPreviewVisible = true
     },
 
     /**
@@ -546,6 +531,24 @@ export default {
     },
 
     /**
+     * 关闭图片预览
+     */
+    closeImagePreview() {
+      this.imagePreviewVisible = false
+      this.previewImageUrl = ''
+      this.previewImageList = []
+      this.currentPreviewIndex = 0
+    },
+
+    /**
+     * 关闭视频预览
+     */
+    closeVideoPreview() {
+      this.videoPreviewVisible = false
+      this.previewVideoUrl = ''
+    },
+
+    /**
      * 处理视频加载错误
      * @param {Event} event - 错误事件
      */

src/views/claim/index.scss

@@ -4,7 +4,7 @@
   align-items: center;
   width: 50px;
   height: 50px;
-  
+
   .thumbnail-image {
     width: 50px;
     height: 50px;
@@ -12,12 +12,12 @@
     border-radius: 4px;
     cursor: pointer;
     transition: transform 0.2s;
-    
+
     &:hover {
       transform: scale(1.1);
     }
   }
-  
+
   .thumbnail-video {
     width: 50px;
     height: 50px;
@@ -29,17 +29,17 @@
     align-items: center;
     cursor: pointer;
     transition: background-color 0.2s;
-    
+
     &:hover {
       background: #e6f7ff;
     }
-    
+
     i {
       font-size: 20px;
       color: #1890ff;
     }
   }
-  
+
   .thumbnail-file {
     width: 50px;
     height: 50px;
@@ -49,7 +49,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    
+
     i {
       font-size: 20px;
       color: #666;
@@ -59,13 +59,13 @@
 
 .image-preview-container {
   text-align: center;
-  
+
   .preview-image {
     max-width: 100%;
     max-height: 80vh; // 增加最大高度限制
     min-height: 200px; // 设置最小高度
   }
-  
+
   .image-slot {
     display: flex;
     flex-direction: column;
@@ -73,7 +73,7 @@
     align-items: center;
     height: 200px;
     color: #999;
-    
+
     i {
       font-size: 40px;
       margin-bottom: 10px;
@@ -90,13 +90,13 @@
     display: flex;
     flex-direction: column;
   }
-  
+
   .el-dialog__body {
     flex: 1;
     padding: 20px;
     overflow: auto;
   }
-  
+
   .el-dialog__footer {
     flex-shrink: 0;
   }
@@ -110,13 +110,13 @@
     display: flex;
     flex-direction: column;
   }
-  
+
   .el-dialog__body {
     flex: 1;
     padding: 20px;
     overflow: auto;
   }
-  
+
   .el-dialog__footer {
     flex-shrink: 0;
   }
@@ -124,14 +124,14 @@
 
 .video-preview-container {
   text-align: center;
-  
+
   .preview-video {
     max-width: 100%;
     max-height: 70vh;
     min-height: 300px;
     background: #000;
   }
-  
+
   .video-error {
     display: flex;
     flex-direction: column;
@@ -141,15 +141,15 @@
     color: #999;
     background: #f5f5f5;
     border-radius: 4px;
-    
+
     i {
       font-size: 60px;
       margin-bottom: 15px;
     }
-    
+
     p {
       font-size: 16px;
       margin: 0;
     }
   }
-}
+}

src/views/claim/index.vue

@@ -105,7 +105,7 @@
               <!-- 视频缩略图 -->
               <div v-else-if="isVideoFile(scope.row.fileName)"
                    class="thumbnail-video"
-                   @click="previewImage(scope.row)">
+                   @click="previewVideo(scope.row)">
                 <i class="el-icon-video-play"></i>
               </div>
               <!-- 其他文件类型图标 -->
@@ -128,6 +128,10 @@
                        type="text"
                        size="small"
                        @click="previewImage(scope.row)">预览</el-button>
+            <el-button v-else-if="isVideoFile(scope.row.fileName)"
+                       type="text"
+                       size="small"
+                       @click="previewVideo(scope.row)">播放</el-button>
             <el-button type="text" size="small" @click="downloadFile(scope.row)">下载</el-button>
           </template>
         </el-table-column>