guhongwei 4 tahun lalu
induk
melakukan
bfb1e990d3

+ 6 - 0
src/router/index.js

@@ -104,6 +104,12 @@ const live = [
     meta: { title: '直播大厅-参展项目', subSite: true },
     component: () => import('../views/achieveLive/product/index.vue'),
   },
+  {
+    path: '/achieveLive/guestRoad/index',
+    name: 'achieveLive_guestRoad',
+    meta: { title: '直播大厅-嘉宾访谈,项目路演', subSite: true },
+    component: () => import('../views/achieveLive/guestRoad/index.vue'),
+  },
 
   {
     path: '/website',

+ 5 - 1
src/views/achieveLive/detail/guestData.vue

@@ -5,7 +5,7 @@
         <el-tabs v-model="active" type="card">
           <el-tab-pane label="嘉宾访谈" name="first">
             <el-col :span="24" class="info">
-              <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="detailBtn(item)">
                 <el-col :span="6" class="image">
                   <el-image :src="item.picture">
                     <div slot="error" class="image-slot">
@@ -52,6 +52,10 @@ export default {
       let res = await this.query({ skip, dock_id: this.id, ...info });
       if (this.$checkRes(res)) this.$set(this, `list`, res.data);
     },
+    // 查看详情
+    detailBtn(data) {
+      this.$router.push({ path: '/achieveLive/guestRoad/index', query: { dock_id: this.id, id: data.id, type: '嘉宾访谈' } });
+    },
   },
   computed: {
     ...mapState(['user']),

+ 5 - 1
src/views/achieveLive/detail/projectData.vue

@@ -5,7 +5,7 @@
         <el-tabs v-model="active" type="card">
           <el-tab-pane label="项目路演" name="first">
             <el-col :span="24" class="info">
-              <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="detailBtn(item)">
                 <el-col :span="24" class="text">
                   <el-col :span="18" class="title textOver">
                     {{ item.title }}
@@ -51,6 +51,10 @@ export default {
       let res = await this.query({ skip, dock_id: this.id, ...info });
       if (this.$checkRes(res)) this.$set(this, `list`, res.data);
     },
+    // 查看详情
+    detailBtn(data) {
+      this.$router.push({ path: '/achieveLive/guestRoad/index', query: { dock_id: this.id, id: data.id, type: '项目路演' } });
+    },
   },
   computed: {
     ...mapState(['user']),

+ 199 - 0
src/views/achieveLive/guestRoad/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <div class="w_1200">
+            <el-col :span="24" class="one">
+              {{ liveInfo.title }}
+            </el-col>
+            <el-col :span="24" class="two">
+              <span>主办方:</span>
+              <span>{{ liveInfo.sponsor }}</span>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="info">
+          <div class="w_1200">
+            <el-col :span="24" class="infoMess">
+              <el-col :span="24" class="btn">
+                <el-button type="primary" size="mini" @click="back">返回</el-button>
+              </el-col>
+              <el-col :span="24" class="detail">
+                <el-col :span="24" class="title textOver">
+                  {{ info.title }}
+                </el-col>
+                <el-col :span="24" class="other">
+                  <span>发布时间:{{ info.publish_time || '暂无' }}</span>
+                  <span>信息来源:{{ info.origin }}</span>
+                </el-col>
+                <el-col :span="24" class="image" v-if="info.picture">
+                  <el-image :src="info.picture"></el-image>
+                </el-col>
+                <el-col :span="24" class="video" v-if="info.filepath">
+                  <video :src="info.filepath" controls="controls">
+                    您的浏览器不支持 video 标签。
+                  </video>
+                </el-col>
+                <el-col :span="24" class="content">
+                  <p v-html="info.content"></p>
+                </el-col>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: interview } = createNamespacedHelpers('interview');
+const { mapActions: roadShow } = createNamespacedHelpers('roadShow');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 展会详情
+      liveInfo: {},
+      // 信息详情
+      info: {},
+    };
+  },
+  async created() {
+    if (this.dock_id) {
+      await this.search();
+    }
+  },
+  methods: {
+    ...dock(['fetch']),
+    ...interview({ interviewFetch: 'fetch' }),
+    ...roadShow({ roadShowFetch: 'fetch' }),
+    async search() {
+      let res = await this.fetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `liveInfo`, res.data);
+      }
+      if (this.type == '嘉宾访谈') {
+        let res = await this.interviewFetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `info`, res.data);
+        }
+      } else {
+        let res = await this.roadShowFetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `info`, res.data);
+        }
+      }
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/achieveLive/detail', query: { id: this.dock_id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    dock_id() {
+      return this.$route.query.dock_id;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+    type() {
+      return this.$route.query.type;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    background: url('~@common/src/assets/live/dock_top.png');
+    height: 400px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .one {
+      text-align: center;
+      font-size: 40px;
+      color: #fff;
+      padding: 4% 8% 0 10%;
+      height: 160px;
+      margin: 0 0 40px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+    }
+    .two {
+      text-align: center;
+      font-size: 30px;
+      color: #fff;
+      margin: 0 0 50px 0;
+    }
+  }
+  .info {
+    position: absolute;
+    top: 70%;
+    padding: 0 0 15px 0;
+    .infoMess {
+      min-height: 630px;
+      box-shadow: 0 0 5px #ccc;
+      background-color: #fff;
+      padding: 20px;
+      .btn {
+        text-align: right;
+        margin: 0 0 10px 0;
+      }
+      .detail {
+        .title {
+          text-align: center;
+          font-size: 30px;
+          font-weight: bold;
+          padding: 15px 0;
+        }
+        .other {
+          text-align: center;
+          font-size: 18px;
+          color: #666;
+          padding: 0 0 15px 0;
+          span {
+            padding: 0 0 0 10px;
+          }
+        }
+        .image {
+          text-align: center;
+          height: 300px;
+          overflow: hidden;
+          margin: 0 0 15px 0;
+          .el-image {
+            width: 50%;
+            height: 300px;
+          }
+        }
+        .video {
+          text-align: center;
+          margin: 0 0 15px 0;
+          height: 300px;
+          overflow: hidden;
+          video {
+            width: 50%;
+            height: 300px;
+            background-color: #000000;
+          }
+        }
+      }
+    }
+  }
+}
+</style>