11

src/views/channel/detail.vue

@@ -7,7 +7,7 @@
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="24" class="video">
-            <video autoplay controls :src="form.videodata" style="width:100%;height:100%"></video>
+            <video autoplay controls :src="videoUrl" style="width:100%;height:100%"></video>
           </el-col>
           <el-col :span="24" class="text">
             <van-collapse v-model="activeNames">
@@ -30,8 +30,14 @@
             </el-col>
             <el-col :span="24" class="two">
               <van-swipe :loop="false" :width="300">
-                <van-swipe-item class="videodata" v-for="(item, index) in form.videodata" :key="index">
-                  {{ item.url }}
+                <van-swipe-item
+                  class="videodata"
+                  v-for="(item, index) in form.videodata"
+                  :key="index"
+                  @click.native="change(index, item)"
+                  :class="{ active: changeColor == index }"
+                >
+                  {{ item.name }}
                 </van-swipe-item>
               </van-swipe>
             </el-col>
@@ -65,10 +71,14 @@ export default {
       navShow: true,
       activeNames: [],
       form: {},
+      changeColor: 0,
+      videoUrl: '',
     };
   },
-  created() {
-    this.search();
+  async created() {
+    await this.search();
+    this.videoUrl = this.form.videodata[0].url;
+    this.change(0, videoUrl);
   },
   methods: {
     ...channel(['query', 'fetch']),
@@ -81,6 +91,10 @@ export default {
     back() {
       this.$router.push({ path: 'index' });
     },
+    change(index, item) {
+      this.changeColor = index;
+      this.videoUrl = item.url;
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -99,6 +113,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.active {
+  color: #409eff;
+}
 .style {
   width: 100%;
   min-height: 667px;
@@ -144,7 +161,16 @@ export default {
       }
     }
     .two {
+      margin-top: 5px;
       .videodata {
+        height: 100px;
+        background-color: #f1f1f1;
+        margin-right: 10px;
+        font-size: 16px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 100px;
+        border-radius: 5px;
       }
     }
   }