1

src/views/live/detail.vue

@@ -3,14 +3,23 @@
     <el-row>
       <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 :span="24" class="top">
+            <el-col :span="24" class="downVideo" v-if="videoData != ''">
+              <video :src="videoPath" autoplay="autoplay" controls="controls" loop="loop">
+                您的浏览器不支持 video 标签。
+              </video>
+            </el-col>
+            <el-col :span="24" class="downTxt" v-else>
+              <p>{{ dockInfo.title }}</p>
+            </el-col>
           </el-col>
-          <el-col :span="24" class="videotwo" v-else>
-            {{ videodock.videointro }}
+          <el-col :span="24" class="down">
+            <el-col :span="12" class="left">
+              <el-link :underline="false" class="back" @click="back()">返回列表</el-link>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-link :underline="false" class="back" @click="showPopup">选择视频</el-link>
+            </el-col>
           </el-col>
         </el-col>
         <el-col :span="24" class="chat">
@@ -115,6 +124,29 @@
         </el-col>
       </el-col>
     </el-row>
+    <!-- <van-popup v-model="show" position="right" :style="{ width: '50%', height: '100%' }">
+      <van-col
+        span="24"
+        v-for="(item, index) in videoData"
+        :key="index"
+        :class="menuIndex == index ? 'indexClass' : 'videodata'"
+        @click.native="changeMenu(index, item)"
+      >
+        <p>{{ item.videointro }}</p>
+      </van-col>
+    </van-popup> -->
+    <van-popup v-model="show" position="bottom">
+      <van-picker
+        title="视频信息"
+        v-model="show"
+        show-toolbar
+        :columns="videoData"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        @change="onChange"
+        value-key="videointro"
+      />
+    </van-popup>
   </div>
 </template>
 
@@ -141,12 +173,8 @@ export default {
     return {
       // 展会id
       dock_id: '',
-      // 视频信息
-      videodock: {},
-      // 倒计时查询详情
-      times: 5,
       //展会详情
-      dockinfo: [],
+      dockInfo: {},
       // 聊天
       chatactive: 0,
       // 图文直播
@@ -166,6 +194,12 @@ export default {
       zxzdlist: [],
       // 项目路演
       xmlyList: [],
+      // 选择视频
+      show: false,
+      // 视频管理
+      menuIndex: '0',
+      videoData: [],
+      videoPath: '',
     };
   },
   async created() {
@@ -173,6 +207,7 @@ export default {
       this.$set(this, `dock_id`, this.id);
     }
     await this.search();
+    await this.seachtVideo();
     await this.seachLunbo();
   },
   methods: {
@@ -185,7 +220,7 @@ export default {
     async search() {
       //展会详情
       let res = await this.dockFetch(this.dock_id);
-      if (this.$checkRes(res)) this.$set(this, `dockinfo`, res.data);
+      if (this.$checkRes(res)) this.$set(this, `dockInfo`, res.data);
       let czxm = res.data.apply.map(item => item.goodsList);
       czxm = _.flattenDeep(czxm);
       var czxmNew = czxm.filter(item => item.dockStatus == '1');
@@ -216,26 +251,6 @@ export default {
         this.$set(this, `lunboList`, res.data);
       }
     },
-    //倒计时查询展会视频详情
-    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);
-        }
-      }
-    },
     // 专家详情
     expertBtn(data) {
       this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
@@ -244,6 +259,52 @@ export default {
     back() {
       this.$router.push({ path: '/live/index' });
     },
+    // 选择视频
+    showPopup() {
+      this.show = true;
+    },
+    // 视频管理
+    // 查找视频
+    async seachtVideo() {
+      let res = await this.dockFetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `videoData`, res.data.videodata);
+        this.changeMenu('0', this.videoData[0]);
+      }
+    },
+    channelvideo() {
+      this.$stomp({
+        [`/exchange/dock_video/${this.dock_id}`]: this.onMessageVideo,
+      });
+    },
+    onMessageVideo(message) {
+      let arr = JSON.parse(message.body);
+      this.$set(this, `videoData`, arr);
+      let num = this.videoData.length - 1;
+      let newarr = _.last(arr);
+      this.changeMenu(num, newarr);
+    },
+    changeMenu(index, item) {
+      if (item) {
+        this.menuIndex = index;
+        this.$set(this, `videoPath`, item.file_path);
+      }
+    },
+    // 确定
+    onConfirm(value, index) {
+      this.changeMenu(index, value);
+      this.onCancel();
+    },
+    // 选择
+    onChange(value, index) {
+      this.changeMenu(index, value);
+    },
+    onCancel() {
+      this.show = false;
+    },
+  },
+  mounted() {
+    this.channelvideo();
   },
   computed: {
     ...mapState(['user']),
@@ -251,17 +312,7 @@ 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 };
   },
@@ -272,35 +323,84 @@ export default {
 .main {
   // 视频
   .video {
-    height: 215px;
+    height: 255px;
     overflow: hidden;
-    .back {
-      position: fixed;
-      z-index: 999;
-      i {
-        font-size: 30px;
-        font-weight: bold;
-        margin: 5px 0 0px 5px;
-        color: #409eff;
-      }
-    }
-    .videoone {
+    .top {
       height: 215px;
       overflow: hidden;
-      video {
+      .downVideo {
+        position: fixed;
+        z-index: 1;
         width: 100%;
+        video {
+          width: 100%;
+          height: 215px;
+        }
+      }
+      .downTxt {
+        height: 215px;
+        text-align: center;
+        background-image: url('~@/assets/directBack.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        p {
+          font-size: 25px;
+          color: #fff;
+          padding: 25px 10px;
+        }
       }
     }
-    .videotwo {
-      background: url('~@/assets/directBack.png');
-      background-size: 100% 100%;
-      height: 215px;
+    .down {
+      height: 40px;
       overflow: hidden;
-      text-align: center;
-      color: #fff;
-      font-size: 20px;
-      padding: 15% 3%;
+      background-color: #f1f1f1;
+      .left {
+        height: 40px;
+        line-height: 40px;
+        border-right: 1px dashed #ccc;
+        text-align: center;
+        .el-link {
+          color: #333;
+          font-weight: bold;
+        }
+      }
+      .right {
+        text-align: center;
+        height: 40px;
+        line-height: 40px;
+        .el-link {
+          color: #333;
+          font-weight: bold;
+        }
+      }
     }
+    // .back {
+    //   position: fixed;
+    //   z-index: 999;
+    //   i {
+    //     font-size: 30px;
+    //     font-weight: bold;
+    //     margin: 5px 0 0px 5px;
+    //     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 {
@@ -496,4 +596,28 @@ export default {
   background-color: #409eff;
   color: #fff;
 }
+// 视频样式
+.videodata {
+  text-align: center;
+  padding: 0 10px;
+  margin: 10px 0 0 0;
+  p {
+    border-radius: 10px;
+    height: 60px;
+    line-height: 60px;
+    border: 1px dashed #000;
+  }
+}
+.indexClass {
+  text-align: center;
+  padding: 0 10px;
+  margin: 10px 0 0 0;
+  p {
+    background: #409eff;
+    border-radius: 10px;
+    height: 60px;
+    color: #fff;
+    line-height: 60px;
+  }
+}
 </style>