1

src/views/live/parts/videoDetail.vue

@@ -217,13 +217,13 @@ export default {
   },
   watch: {
     times: {
+      immediate: true,
+      deep: true,
       handler(val) {
         if (val && val == 5) {
           this.daojishi();
         }
       },
-      immediate: true,
-      deep: true,
     },
   },
 };

src/views/live/parts/videoDetail2.vue

@@ -4,6 +4,14 @@
       <el-col :span="24" class="main">
         <el-col :span="24" class="video">
           <el-link :underline="false" class="back" @click="back()"><i class="el-icon-arrow-left"></i></el-link>
+          <el-col :span="24" class="videoone" v-if="videodock.file_path != null || ''">
+            <video :src="videodock.file_path" autoplay="" controls="controls">
+              您的浏览器不支持 video 标签。
+            </video>
+          </el-col>
+          <el-col :span="24" class="videotwo" v-else>
+            {{ videodock.videointro }}
+          </el-col>
         </el-col>
         <el-col :span="24" class="chat">
           聊天
@@ -24,6 +32,7 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
   name: 'videoDetail2',
   props: {},
@@ -32,6 +41,10 @@ export default {
     return {
       // 展会id
       dock_id: '',
+      // 视频信息
+      videodock: {},
+      // 倒计时查询详情
+      times: 5,
     };
   },
   async created() {
@@ -41,8 +54,29 @@ export default {
     await this.search();
   },
   methods: {
+    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
     // 查询
     search() {},
+    //倒计时查询展会视频详情
+    counttime() {
+      this.timer = setInterval(() => {
+        this.times--;
+        if (this.times === 0) {
+          this.searchvideo();
+          this.times = 5;
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    },
+    async searchvideo() {
+      if (this.dock_id) {
+        let res = await this.dockFetch(this.dock_id);
+        if (this.$checkRes(res)) {
+          // 对接会详情
+          this.$set(this, `videodock`, res.data);
+        }
+      }
+    },
     // 返回
     back() {
       this.$router.push({ path: '/live/index' });
@@ -54,6 +88,17 @@ export default {
       return this.$route.query.id;
     },
   },
+  watch: {
+    times: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val == 5) {
+          this.counttime();
+        }
+      },
+    },
+  },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
@@ -64,16 +109,35 @@ export default {
 .main {
   // 视频
   .video {
-    height: 240px;
-    background: red;
+    height: 215px;
+    overflow: hidden;
+
     .back {
+      position: fixed;
       i {
         font-size: 30px;
         font-weight: bold;
         margin: 5px 0 0px 5px;
-        color: blue;
+        color: #409eff;
+      }
+    }
+    .videoone {
+      height: 215px;
+      overflow: hidden;
+      video {
+        width: 100%;
       }
     }
+    .videotwo {
+      background: url('~@/assets/directBack.png');
+      background-size: 100% 100%;
+      height: 215px;
+      overflow: hidden;
+      text-align: center;
+      color: #fff;
+      font-size: 20px;
+      padding: 15% 3%;
+    }
   }
   // 聊天
   .chat {