feat: 寄售详情添加视频播放功能

src/views/consign/consignDetail.vue

@@ -46,11 +46,17 @@
           <div class="consign_content_item__image">
             <div style="width: 180px">藏品图片/视频：</div>
             <div class="image_content">
-              <div v-if="consignDetail.videosImageUrl" class="image_content_video">
+              <div v-if="consignDetail.videosImageUrl" class="image_content_video" @click="showVideoDialog = true">
                 <img :src="consignDetail.videosImageUrl" class="image_content_video_item">
-                <img class="image_content_video_icon" src="https://cdn.wanwudezhi.com/static/web-static/image/10651432d8c28651da81753c260d81b3_120x120.png">
+                <img
+                  class="image_content_video_icon"
+                  src="https://cdn.wanwudezhi.com/static/web-static/image/10651432d8c28651da81753c260d81b3_120x120.png">
               </div>
-              <div v-for="(item, index) in consignDetail.imageList" :key="item + index" class="select_item" @click="handleShowLargeDialog(item)">
+              <div
+                v-for="(item, index) in consignDetail.imageList"
+                :key="item + index"
+                class="select_item"
+                @click="handleShowLargeDialog(item)">
                 <img :src="item" class="image_content_item">
               </div>
             </div>
@@ -63,7 +69,11 @@
         </div>
         <div style="height: calc(100vh - 280px)">
           <el-steps :active="1" direction="vertical" finish-status="success">
-            <el-step v-for="item in consignSaleRecordVoList" :key="item.content + item.createTime" :title="item.content" :description="item.createTime"/>
+            <el-step
+              v-for="item in consignSaleRecordVoList"
+              :key="item.content + item.createTime"
+              :title="item.content"
+              :description="item.createTime" />
           </el-steps>
         </div>
       </el-card>
@@ -178,6 +188,10 @@
       :image-url="imageUrl"
       @closeLargeDialog="showLargeDialog = false"
     />
+    <CheckVideoDialog
+      :show-video-dialog="showVideoDialog"
+      :video-url="consignDetail.videosUrl"
+      @closeLargeDialog="showVideoDialog = false" />
   </div>
 </template>
 
@@ -185,10 +199,11 @@
 import { findDetail, imgValuate, identifyImage, finishValue, cancelValue } from '@/api/business/consign'
 import { MessageBox } from 'element-ui'
 import CheckLargeImageDialog from '../goods/components/CheckLargeImageDialog'
+import CheckVideoDialog from '../goods/components/CheckVideoDialog'
 
 export default {
   name: 'ConsignDetail',
-  components: { CheckLargeImageDialog },
+  components: { CheckVideoDialog, CheckLargeImageDialog },
   data() {
     return {
       saleId: '',
@@ -254,7 +269,9 @@ export default {
         ]
       },
       imageUrl: '',
-      showLargeDialog: false
+      showLargeDialog: false,
+      showVideoDialog: false,
+      videoUrl: ''
 
     }
   },
@@ -452,25 +469,31 @@ export default {
     height: 100%;
     display: flex;
     flex-direction: row;
+
     .consign_content_item__text {
       margin-top: 15px;
     }
+
     .consign_content_item__image {
       margin-top: 10px;
       display: flex;
       flex-direction: row;
+
       .image_content {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+
         .image_content_video {
           position: relative;
+
           .image_content_video_item {
             width: 90px;
             height: 90px;
             object-fit: cover;
             margin-right: 10px;
           }
+
           .image_content_video_icon {
             width: 25px;
             height: 25px;
@@ -479,6 +502,7 @@ export default {
             left: 5px;
           }
         }
+
         .image_content_item {
           width: 90px;
           height: 90px;

src/views/goods/components/CheckVideoDialog.vue

+<template>
+  <el-dialog
+    :visible.sync="showVideoDialog"
+    :before-close="handleClose"
+    width="800px"
+    height="800px">
+    <div class="content">
+      <video controls style="width: 600px; height: 600px">
+        <source :src="videoUrl" type="video/mp4" class="video">
+      </video>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'CheckVideoDialog',
+  props: {
+    showVideoDialog: {
+      type: Boolean,
+      default: false
+    },
+    videoUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('closeLargeDialog')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  text-align: center;
+}
+
+.video {
+  width: 600px;
+  height: auto;
+}
+
+</style>