1

src/views/hall/direct.vue

@@ -53,7 +53,8 @@
                   </el-col>
                 </el-col>
                 <el-col :span="24" class="leftDown">
-                  <video id="videoElement" controls autoplay class="h5video"></video>
+                  <!-- <video id="videoElement" controls autoplay class="h5video"></video> -->
+                  <videoSwiper></videoSwiper>
                 </el-col>
               </el-col>
               <el-col :span="12" class="right">
@@ -131,6 +132,7 @@
 import imgTab from './newParts/imgTab.vue';
 import marketProduct from './newParts/marketProduct.vue';
 import expertData from './newParts/expertData.vue';
+import videoSwiper from './newParts/videoSwiper.vue';
 import chat from '@/components/parts/chat.vue';
 // 底部信息
 import liveFoot from '@/layout/live/foot.vue';
@@ -157,6 +159,7 @@ export default {
     marketProduct,
     expertData,
     chat,
+    videoSwiper,
   },
   data: function() {
     return {
@@ -385,7 +388,7 @@ export default {
         }
         .leftDown {
           height: 415px;
-          background-color: #000;
+          // background-color: #000;
           .h5video {
             width: 100%;
             height: 415px;

src/views/hall/newParts/videoSwiper.vue

@@ -0,0 +1,151 @@
+<template>
+  <div id="videoSwiper">
+    <el-row>
+      <el-col :span="24" class="mian">
+        <el-col :span="24" class="top">
+          <video :src="videoPath" controls autoplay loop v-if="videoData != ''">
+            <source src="movie.mp4" type="video/mp4" />
+            <source src="movie.ogg" type="video/ogg" />
+          </video>
+          <div class="videointro" v-else>
+            <p>{{ dockInfo.title }}</p>
+          </div>
+        </el-col>
+        <el-col :span="24" class="down">
+          <swiper :list="videoData" :options="options">
+            <template v-slot="{ index, item }">
+              <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">{{ item.videointro }}</p>
+            </template>
+          </swiper>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const { mapActions: dock } = createNamespacedHelpers('dock');
+import swiper from '@c/swiper-frame.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'videoSwiper',
+  props: {},
+  components: {
+    swiper,
+  },
+  data: function() {
+    return {
+      dock_id: '',
+      dockInfo: {},
+      menuIndex: '0',
+      videoData: [],
+      videoPath: '',
+      options: {
+        slidesPerView: 7,
+        spaceBetween: 10,
+        // 分页
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      },
+    };
+  },
+  async created() {
+    this.$set(this, `dock_id`, this.$route.query.id);
+    await this.search();
+  },
+  methods: {
+    // 展会
+    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
+    async search() {
+      let res = await this.dockFetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `dockInfo`, res.data);
+        this.$set(this, `videoData`, res.data.videodata);
+        this.changeMenu('0', this.videoData[0]);
+      }
+    },
+    changeMenu(index, item) {
+      if (item) {
+        this.menuIndex = index;
+        this.$set(this, `videoPath`, item.file_path);
+      }
+    },
+    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);
+    },
+  },
+  mounted() {
+    this.channelvideo();
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 370px;
+    video {
+      width: 100%;
+      height: 370px;
+    }
+    .videointro {
+      height: 360px;
+      text-align: center;
+      background-image: url('~@/assets/directBack.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      p {
+        text-align: center;
+        font-size: 30px;
+        padding: 60px 15px;
+        color: #fff;
+      }
+    }
+  }
+  .down {
+    height: 40px;
+    .videodata {
+      border-radius: 10px;
+      background: #cccccc8f;
+      height: 39px;
+      line-height: 39px;
+      text-align: center;
+      margin: 2px 0 0 0;
+      font-weight: bold;
+    }
+    .videodata:hover {
+      cursor: pointer;
+      color: #fff;
+      background: #409eff;
+    }
+    .indexClass {
+      border-radius: 10px;
+      height: 39px;
+      line-height: 39px;
+      text-align: center;
+      margin: 2px 0 0 0;
+      font-weight: bold;
+      color: #fff;
+      background: #409eff;
+    }
+  }
+}
+</style>