feat(claim): 添加视频预览功能

src/views/claim/index.js

@@ -26,6 +26,14 @@ export default {
       auditFormLoading: false,
       currentClaimRow: null,
       auditFormMode: 'add', // 'add' | 'edit'
+      // 图片预览相关状态
+      imagePreviewVisible: false,
+      previewImageUrl: '',
+      previewImageList: [],
+      currentPreviewIndex: 0,
+      // 视频预览相关状态
+      videoPreviewVisible: false,
+      previewVideoUrl: '',
       auditForm: {
         id: null,
         claimId: null,
@@ -61,11 +69,6 @@ export default {
           { required: true, message: '请选择审核时间', trigger: 'change' }
         ]
       },
-      // 添加图片预览相关状态
-      imagePreviewVisible: false,
-      previewImageUrl: '',
-      previewImageList: [],
-      currentPreviewIndex: 0,
       option: {
         height: 'auto',
         calcHeight: 30,
@@ -458,12 +461,18 @@ export default {
      * @param {number} index - 当前图片索引
      */
     previewImage(file, index = 0) {
-      // 获取所有图片文件
-      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
+      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
+      }
     },
 
     /**
@@ -477,6 +486,14 @@ export default {
     },
 
     /**
+     * 关闭视频预览
+     */
+    closeVideoPreview() {
+      this.videoPreviewVisible = false
+      this.previewVideoUrl = ''
+    },
+
+    /**
      * 处理图片加载错误
      * @param {Event} event - 错误事件
      */
@@ -529,6 +546,15 @@ export default {
     },
 
     /**
+     * 处理视频加载错误
+     * @param {Event} event - 错误事件
+     */
+    handleVideoError(event) {
+      console.error('视频加载失败:', event)
+      this.$message.error('视频加载失败，请检查视频文件')
+    },
+
+    /**
      * 获取审核结果文本
      * @param {number} result - 审核结果
      * @returns {string} 结果文本

src/views/claim/index.scss

@@ -100,4 +100,56 @@
   .el-dialog__footer {
     flex-shrink: 0;
   }
+}
+
+.video-preview-dialog {
+  .el-dialog {
+    margin-top: 5vh !important;
+    margin-bottom: 5vh !important;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .el-dialog__body {
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
+  }
+  
+  .el-dialog__footer {
+    flex-shrink: 0;
+  }
+}
+
+.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;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    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

@@ -162,6 +162,33 @@
       </span>
     </el-dialog>
 
+    <!-- 视频预览对话框 -->
+    <el-dialog title="视频播放"
+               :visible.sync="videoPreviewVisible"
+               width="80%"
+               :close-on-click-modal="false"
+               append-to-body
+               custom-class="video-preview-dialog"
+               @close="closeVideoPreview">
+      <div class="video-preview-container">
+        <video v-if="previewVideoUrl"
+               :src="previewVideoUrl"
+               controls
+               preload="metadata"
+               class="preview-video"
+               @error="handleVideoError">
+          您的浏览器不支持视频播放。
+        </video>
+        <div v-else class="video-error">
+          <i class="el-icon-video-camera"></i>
+          <p>视频加载失败</p>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeVideoPreview">关闭</el-button>
+      </span>
+    </el-dialog>
+
     <!-- 审核记录对话框 -->
     <el-dialog title="审核记录"
                :visible.sync="auditVisible"