1

src/router/index.js

@@ -26,6 +26,12 @@ const routes = [
     meta: { title: '直播详情', isleftarrow: true },
     component: () => import('../views/live/detail.vue'),
   },
+  {
+    path: '/live/detail2',
+    name: 'detail2',
+    meta: { title: '直播详情', isleftarrow: true },
+    component: () => import('../views/live/detail2.vue'),
+  },
   // 科技超市
   {
     path: '/market/index',

src/views/live/detail2.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="detail2">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="title">{{ detailinfo.title }}</el-col>
+          <el-col :span="24" class="info">
+            <span>时间：{{ detailinfo.publish_time }}</span>
+            <span>来源：{{ detailinfo.orgin }}</span>
+          </el-col>
+          <el-col :span="24" class="img">
+            <el-image :src="detailinfo.picture" style="width:100%; height: 100%"></el-image>
+          </el-col>
+          <el-col :span="24" class="video">
+            <video :src="detailinfo.filepath" controls="controls">
+              您的浏览器不支持 video 标签。
+            </video>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p v-html="detailinfo.content"></p>
+          </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: newsguidance } = createNamespacedHelpers('newsguidance');
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail2',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      //详情
+      detailinfo: {},
+    };
+  },
+  created() {
+    if (this.id) {
+      this.search();
+    }
+  },
+  methods: {
+    ...newsguidance(['fetch']),
+    ...newsroadshow(['fetch']),
+    async search() {
+      if (this.type === '1') {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `detailinfo`, res.data);
+        }
+      } else {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `detailinfo`, res.data);
+        }
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    type() {
+      return this.$route.query.type;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  .title {
+    color: #409eff;
+    font-size: 18px;
+    text-align: center;
+    margin-top: 20px;
+  }
+  .info {
+    text-align: center;
+    margin-top: 10px;
+    border-bottom: 1px solid gray;
+    padding-bottom: 10px;
+    span:nth-child(2) {
+      margin-left: 15px;
+    }
+  }
+  .img {
+    padding: 0px 10px;
+    height: 200px;
+    text-align: center;
+    margin-top: 10px;
+  }
+  .video {
+    video {
+      width: 100%;
+      margin-top: 10px;
+    }
+  }
+  .content {
+    margin-top: 10px;
+    padding: 0px 10px;
+  }
+}
+</style>

src/views/live/parts/videoDetail2.vue

@@ -40,7 +40,13 @@
           <van-tabs v-model="jbxmactive" type="card" animated>
             <van-tab title="嘉宾访谈">
               <el-col :span="24" class="jiabinlist">
-                <el-col :span="24" class="jiabin" v-for="(item, index) in zxzdlist" :key="index">
+                <el-col
+                  :span="24"
+                  class="jiabin"
+                  v-for="(item, index) in zxzdlist"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/detail2', query: { id: item.id, type: '1' } })"
+                >
                   <el-col :span="5" class="img4">
                     <img :src="item.picture" style="width: 100%; height: 100%" />
                   </el-col>
@@ -58,7 +64,13 @@
             </van-tab>
             <van-tab title="项目路演">
               <el-col :span="24" class="xmly">
-                <el-col :span="24" class="xmlylist" v-for="(item, index) in xmlyList" :key="index">
+                <el-col
+                  :span="24"
+                  class="xmlylist"
+                  v-for="(item, index) in xmlyList"
+                  :key="index"
+                  @click.native="$router.push({ path: '/live/detail2', query: { id: item.id, type: '2' } })"
+                >
                   <el-col :span="17" class="name textOver">
                     {{ item.title }}
                   </el-col>
@@ -152,7 +164,6 @@ export default {
       //嘉宾访谈
       let jbftData = await this.danceQuery({ dock_id: this.id });
       if (this.$checkRes(jbftData)) this.$set(this, `zxzdlist`, jbftData.data);
-      console.log(this.zxzdlist);
       // 项目路演
       let xmly = await this.newsroadshowquery({ dock_id: this.id });
       if (this.$checkRes(xmly)) this.$set(this, `xmlyList`, xmly.data);
@@ -288,6 +299,10 @@ export default {
             font-size: 18px;
             font-weight: bolder;
           }
+          .title:hover {
+            color: #409eff;
+            cursor: pointer;
+          }
           .time {
             text-align: right;
           }
@@ -319,6 +334,10 @@ export default {
           font-size: 18px;
           font-weight: bold;
         }
+        .name:hover {
+          color: #409eff;
+          cursor: pointer;
+        }
         .date {
           font-size: 16px;
           text-align: right;