合并

src/router/index.js

@@ -251,6 +251,12 @@ const routes = [
     meta: { title: '科技频道', isleftarrow: false },
     component: () => import('../views/channel/index.vue'),
   },
+  {
+    path: '/channel/detail',
+    name: 'detail',
+    meta: { title: '科技频道', isleftarrow: true },
+    component: () => import('../views/channel/detail.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/channel/detail.vue

@@ -0,0 +1,175 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @click.native="back()"> </NavBar>
+        </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>
+          </el-col>
+          <el-col :span="24" class="text">
+            <van-collapse v-model="activeNames">
+              <van-collapse-item name="1">
+                <template #title>
+                  <div class="title">{{ form.title }}</div>
+                </template>
+                <el-col :span="24" class="con">
+                  <el-col :span="24" class="time">
+                    <p>更新时间：{{ form.create_time }}</p>
+                  </el-col>
+                  <el-col :span="24" class="orgin">
+                    <p>来源：{{ form.orgin }}</p>
+                  </el-col>
+                  <el-col :span="24" class="desc">
+                    <p>简介：{{ form.desc }}</p>
+                  </el-col>
+                </el-col>
+              </van-collapse-item>
+            </van-collapse>
+          </el-col>
+          <el-col :span="24" class="choose">
+            <el-col :span="24" class="name">
+              <div class="shu"></div>
+              选集
+            </el-col>
+            <el-col :span="24" class="videoList" :show-indicators="hh">
+              <van-swipe :loop="false" :width="150">
+                <van-swipe-item v-for="(item, index) in form.videodata" :key="index" style="margin-right: 10px;">
+                  <!-- <div style="width:150px;height:100px;background:red;margin-right:10px"></div> -->
+                  <video controls style="width:150px;height:100px" :src="item.url"></video>
+                </van-swipe-item>
+              </van-swipe>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: channel } = createNamespacedHelpers('channel');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      activeNames: [],
+      form: {},
+      hh: 'false',
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...channel(['query', 'fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      console.log(res);
+      if (this.$checkRes(res)) {
+        this.$set(this, `form`, res.data);
+      }
+    },
+    back() {
+      this.$router.push({ path: 'index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  .text {
+    margin-top: 10px;
+    padding: 0px 10px;
+    .title {
+      font-size: 16px;
+      font-weight: bolder;
+    }
+    .con {
+      .orgin {
+        margin-top: 10px;
+      }
+      .desc {
+        margin-top: 10px;
+      }
+    }
+  }
+  .choose {
+    padding: 10px;
+    .name {
+      height: 30px;
+      font-size: 18px;
+      font-weight: bolder;
+      line-height: 30px;
+      .shu {
+        width: 2px;
+        height: 90%;
+        background-color: red;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+/deep/.van-cell {
+  background-color: transparent;
+}
+/deep/[class*='van-hairline']::after {
+  border: 0;
+}
+/deep/.van-collapse-item__content {
+  background-color: transparent;
+}
+/deep/.van-collapse-item__content {
+  color: black;
+}
+/deep/.van-cell::after {
+  border: 0;
+}
+/deep/.van-swipe__indicators {
+  width: 0px;
+  height: 0px;
+}
+</style>

src/views/channel/index.vue

@@ -7,7 +7,7 @@
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="24" class="con">
-            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="show(item)">
               <el-col :span="11" class="video">
                 <el-image :src="item.image_path">
                   <div slot="error" class="image-slot">
@@ -66,6 +66,9 @@ export default {
         this.$set(this, `list`, res.data);
       }
     },
+    show(data) {
+      this.$router.push({ path: '/channel/detail', query: { id: data.id } });
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -82,6 +85,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.active {
+  color: #409eff;
+}
 .style {
   width: 100%;
   min-height: 667px;