1

src/router/index.js

@@ -20,12 +20,35 @@ const routes = [
     meta: { title: '直播大厅', isleftarrow: false },
     component: () => import('../views/live/index.vue'),
   },
-  // {
-  //   path: '/live/detail',
-  //   name: 'detail',
-  //   meta: { title: '视频详情', isleftarrow: true },
-  //   component: () => import('../views/live/detail.vue'),
-  // },
+  // 展会详情
+  {
+    path: '/live/liveDetail',
+    name: 'liveDetail',
+    meta: { title: '展会详情', isleftarrow: true },
+    component: () => import('../views/live/liveDetail.vue'),
+  },
+  // 科技频道详情
+  {
+    path: '/live/channelDetail',
+    name: 'channelDetail',
+    meta: { title: '科技频道', isleftarrow: true },
+    component: () => import('../views/live/channelDetail.vue'),
+  },
+  // 嘉宾访谈
+  {
+    path: '/live/interviewDeatil',
+    name: 'interviewDeatil',
+    meta: { title: '嘉宾访谈详情', isleftarrow: true },
+    component: () => import('../views/live/interviewDeatil.vue'),
+  },
+  // 项目路演详情
+  {
+    path: '/live/roadshowDetail',
+    name: 'roadshowDetail',
+    meta: { title: '项目路演详情', isleftarrow: true },
+    component: () => import('../views/live/roadshowDetail.vue'),
+  },
+
   // // 1005视频详情
   // {
   //   path: '/live/detailtwo',

src/views/live/channelDetail.vue

@@ -0,0 +1,251 @@
+<template>
+  <div id="channelDetail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="back"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="video">
+            <video
+              autoplay="autoplay"
+              controls="controls"
+              preload="meta"
+              x-webkit-airplay="true"
+              webkit-playsinline="true"
+              playsinline="true"
+              x5-video-player-type="h5"
+              x5-video-player-fullscreen="true"
+              controlsList="nodownload"
+              :src="videoUrl"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </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">
+                  <p><span>更新时间：</span>{{ form.create_time }}</p>
+                  <p><span>来源：</span>{{ form.orgin }}</p>
+                  <p><span>简介：</span>{{ form.desc }}</p>
+                </el-col>
+              </van-collapse-item>
+              <van-collapse-item name="2">
+                <template #title>
+                  <div class="title">视频列表</div>
+                </template>
+                <el-col :span="24" class="videodata">
+                  <el-col :span="12" class="videolist" v-for="(item, index) in videodata" :key="index" @click.native="changevideo(item, index)">
+                    <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.title }}</p>
+                    <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.start_time }}</p>
+                  </el-col>
+                </el-col>
+              </van-collapse-item>
+            </van-collapse>
+          </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');
+const { mapActions: channelVideo } = createNamespacedHelpers('channelVideo');
+var moment = require('moment');
+const _ = require('lodash');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'channelDetail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      activeNames: ['1', '2'],
+      form: {},
+      // 视频列表
+      videodata: [],
+      // 视频路径
+      videoUrl: '',
+      // 选集参数
+      menuIndex: '',
+      menuColor: 'rgb(64,158,255)',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...channel(['query', 'fetch']),
+    ...channelVideo({ videoquery: 'query' }),
+    async search() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `form`, res.data);
+      }
+      res = await this.videoquery({ user_id: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `videodata`, _.orderBy(res.data, ['start_time'], ['asc']));
+      }
+    },
+    changevideo(item, index) {
+      if (item) {
+        console.log(item.file_path);
+        this.menuIndex = index;
+        this.$set(this, `videoUrl`, item.file_path);
+      }
+    },
+    searchvideo() {
+      let data = this.videodata;
+      let adate = moment().format('YYYY-MM-DD HH:mm');
+      // let adate = '2020-11-13 10:16';
+      let arr = data.find(i => i.start_time <= adate && i.end_time >= adate);
+      let index = data.findIndex(i => i.start_time <= adate && i.end_time >= adate);
+      if (arr && index) {
+        this.changevideo(arr, index);
+      } else {
+        this.changevideo(data[0], '0');
+      }
+    },
+    back() {
+      this.$router.push({ path: '/live/index' });
+    },
+  },
+  watch: {
+    videodata: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.searchvideo();
+        }
+      },
+    },
+  },
+  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>
+.active {
+  color: #ff0000;
+}
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  .video {
+    video {
+      width: 100%;
+      height: 200px;
+      background-color: #000;
+    }
+    video::-webkit-media-controls-mute-button {
+      display: none !important;
+    }
+  }
+  .text {
+    padding: 5px 10px;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .con {
+      p {
+        span {
+          font-weight: bold;
+          padding: 10px 0 0 0;
+        }
+      }
+    }
+    .videodata {
+      margin: 5px 0 0 0;
+      .videolist {
+        text-align: center;
+        background: #f1f1f1;
+        margin: 0 10px 10px 0;
+        border-radius: 10px;
+        height: 100px;
+        width: 48%;
+        padding: 15px 0;
+        p:nth-child(1) {
+          font-size: 16px;
+          font-weight: bold;
+          padding: 0 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+        p:nth-child(2) {
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+      .videolist:nth-child(2n) {
+        margin: 0 0 10px 0;
+      }
+    }
+  }
+}
+/deep/.van-cell {
+  background-color: transparent;
+  padding: 5px 10px;
+}
+/deep/.van-collapse-item__content {
+  background-color: transparent;
+  color: black;
+  padding: 0 10px;
+}
+/deep/.van-swipe__indicators {
+  display: none;
+}
+/deep/.van-collapse-item {
+  border-bottom: 1px solid #f1f1f1;
+}
+/deep/.van-cell::after {
+  border: 0;
+}
+/deep/[class*='van-hairline']::after {
+  border: 0;
+}
+</style>

src/views/live/index.vue

@@ -26,16 +26,16 @@
         </el-col>
         <el-col :span="24" class="foot">
           <van-tabbar v-model="active" @change="clickItem">
-            <van-tabbar-item icon="home-o">在线展会</van-tabbar-item>
-            <van-tabbar-item icon="search">科技频道</van-tabbar-item>
-            <van-tabbar-item icon="friends-o" class="train" @click="trainClick"
+            <van-tabbar-item icon="video-o">在线展会</van-tabbar-item>
+            <van-tabbar-item icon="cashier-o">科技频道</van-tabbar-item>
+            <van-tabbar-item icon="chat-o" class="train" @click="trainClick"
               >培训访谈
               <el-col :span="4" class="itemCon" v-if="trainShow">
                 <el-col :span="24" class="text" @click.native.stop="interviewClick('嘉宾访谈')">嘉宾访谈</el-col>
                 <el-col :span="24" class="text" @click.native.stop="interviewClick('技能培训')">技能培训</el-col>
               </el-col>
             </van-tabbar-item>
-            <van-tabbar-item icon="setting-o">项目路演</van-tabbar-item>
+            <van-tabbar-item icon="desktop-o">项目路演</van-tabbar-item>
           </van-tabbar>
         </el-col>
       </el-col>

src/views/live/interviewDeatil.vue

@@ -0,0 +1,167 @@
+<template>
+  <div id="interviewDeatil">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="name">
+            {{ info.title }}
+          </el-col>
+          <el-col :span="24" class="date">
+            <span class="textOver">发布时间：{{ info.publish_time }}</span>
+            <span class="textOver"> 信息来源：{{ info.orgin }}</span>
+          </el-col>
+          <el-col :span="24" class="image" v-if="info.picture != null">
+            <el-image :src="info.picture">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i></div
+            ></el-image>
+          </el-col>
+          <el-col :span="24" class="video">
+            <video
+              autoplay="autoplay"
+              controls="controls"
+              preload="meta"
+              x-webkit-airplay="true"
+              webkit-playsinline="true"
+              playsinline="true"
+              x5-video-player-type="h5"
+              x5-video-player-fullscreen="true"
+              controlsList="nodownload"
+              :src="info.filepath"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </video>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p v-html="info.content"></p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+export default {
+  name: 'interviewDeatil',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...newsguidance(['fetch']),
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `info`, res.data);
+        }
+      }
+    },
+    // 返回
+    onClickLeft() {
+      this.$router.push({ path: '/live/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    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;
+  }
+  .info {
+    .name {
+      text-align: center;
+      padding: 15px 10px 0 10px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .date {
+      margin: 15px 0;
+      span {
+        display: inline-block;
+        width: 50%;
+        text-align: center;
+        color: #666;
+      }
+    }
+    .image {
+      padding: 10px;
+      .el-image {
+        width: 100%;
+        height: 210px;
+      }
+    }
+    .video {
+      video {
+        width: 100%;
+        height: 215px;
+      }
+    }
+    .content {
+      padding: 10px 5px;
+    }
+  }
+}
+
+/deep/.content p img {
+  width: 100%;
+  height: 300px;
+  margin: 5px 0px;
+  display: block;
+}
+/deep/.content div img {
+  width: 100%;
+  height: 260px;
+  display: block;
+}
+/deep/.content p {
+  font-size: 14px;
+  color: #444;
+}
+</style>

src/views/live/liveDetail.vue

@@ -0,0 +1,233 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="video">
+          <el-col :span="24" class="top">
+            <!-- 直播 -->
+            <!-- <video id="videoElement" controls class="h5video"></video> -->
+            <!-- 视频播放 -->
+            <video
+              autoplay="autoplay"
+              controls="controls"
+              preload="meta"
+              x-webkit-airplay="true"
+              webkit-playsinline="true"
+              playsinline="true"
+              x5-video-player-type="h5"
+              x5-video-player-fullscreen="true"
+              :src="videoPath"
+              v-if="videoData.length > 0"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </video>
+            <p v-else>{{ dockInfo.title }}</p>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-button type="primary" size="mini" @click="back()">返回列表</el-button>
+            <el-button type="primary" size="mini" @click="showPopup()">选择视频</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="imgchat">
+          <van-tabs v-model="active">
+            <van-tab title="图文直播">
+              <imgtxtdock></imgtxtdock>
+            </van-tab>
+            <van-tab title="公共聊天">
+              <dockchat></dockchat>
+            </van-tab>
+            <van-tab title="参展项目">
+              <czxm></czxm>
+            </van-tab>
+            <van-tab title="项目路演">
+              <!-- <jbft></jbft> -->
+              <xmly></xmly>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+    <van-popup v-model="show" position="bottom">
+      <van-picker
+        title="视频信息"
+        v-model="show"
+        show-toolbar
+        :columns="videoData"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        @change="onChange"
+        value-key="videointro"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+// 图文直播
+import imgtxtdock from './liveParts/imgtxtdock.vue';
+// 公共聊天
+import dockchat from './liveParts/dockchat.vue';
+// 参展项目
+import czxm from './liveParts/czxm.vue';
+// 嘉宾访谈
+import jbft from './liveParts/jbft.vue';
+// 项目路演
+import xmly from './liveParts/xmly.vue';
+
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+import moment from 'moment';
+import flvjs from 'flv.js';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    // 图文直播
+    imgtxtdock,
+    // 公共聊天
+    dockchat,
+    // 参展项目
+    czxm,
+    // 嘉宾访谈
+    // jbft,
+    // 项目路演
+    xmly,
+  },
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      //展会详情
+      dockInfo: {},
+      // 视频管理
+      show: false,
+      menuIndex: '0',
+      videoData: [],
+      videoPath: '',
+      // 图文直播
+      active: 0,
+    };
+  },
+  async created() {
+    if (this.id) {
+      this.$set(this, `dock_id`, this.id);
+    }
+    await this.search();
+    await this.seachtVideo();
+    this.$nextTick(() => {
+      // this.searchLive();
+    });
+  },
+  methods: {
+    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
+    async search() {
+      //展会详情
+      let res = await this.dockFetch(this.dock_id);
+      if (this.$checkRes(res)) this.$set(this, `dockInfo`, res.data);
+    },
+    // 视频管理
+    // 打开
+    showPopup() {
+      this.show = true;
+    },
+    // 查询视频
+    async seachtVideo() {
+      let res = await this.dockFetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `videoData`, res.data.videodata);
+        this.changeMenu('0', this.videoData[0]);
+      }
+    },
+    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);
+    },
+    // 选择视频
+    changeMenu(index, item) {
+      if (item) {
+        this.menuIndex = index;
+        this.$set(this, `videoPath`, item.file_path);
+      }
+    },
+    // 确定选择
+    onConfirm(value, index) {
+      this.changeMenu(index, value);
+      this.onCancel();
+    },
+    onChange(value, index) {
+      this.changeMenu(index, value);
+    },
+    // 取消
+    onCancel() {
+      this.show = false;
+    },
+    // 返回列表
+    back() {
+      this.$router.push({ path: '/live/index' });
+    },
+    searchLive() {
+      let player = document.getElementById('videoElement');
+      let rmtpUrl = `${process.env.VUE_APP_LIVE_URL + this.dockInfo.room_id}`;
+      if (flvjs.isSupported()) {
+        var flvPlayer = flvjs.createPlayer({
+          isLive: true,
+          type: 'flv',
+          url: rmtpUrl,
+        });
+        flvPlayer.attachMediaElement(player);
+        flvPlayer.load(); //加载
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .video {
+    .top {
+      height: 215px;
+      background-color: #000;
+      video {
+        width: 100%;
+        height: 215px;
+      }
+      .h5video {
+        width: 100%;
+        height: 215px;
+      }
+      p {
+        font-size: 18px;
+      }
+    }
+    .down {
+      text-align: center;
+      height: 40px;
+      padding: 5px 0;
+    }
+  }
+  .imgchat {
+    padding: 0 10px;
+  }
+}
+</style>

src/views/live/liveDetailtwo.vue

@@ -0,0 +1,472 @@
+<template>
+  <div id="detailtwo">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="video">
+          <el-col :span="24" class="top">
+            <el-col :span="24" class="downVideo" v-if="videoData != ''">
+              <video
+                autoplay="autoplay"
+                controls="controls"
+                preload="meta"
+                x-webkit-airplay="true"
+                webkit-playsinline="true"
+                playsinline="true"
+                x5-video-player-type="h5"
+                x5-video-player-fullscreen="true"
+                controlsList="nodownload"
+                :src="videoPath"
+                loop="loop"
+              >
+                <source src="movie.ogg" type="video/ogg" />
+                <source src="movie.mp4" type="video/mp4" />
+              </video>
+            </el-col>
+            <el-col :span="24" class="downTxt" v-else>
+              <p>{{ dockInfo.title }}</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-col :span="12" class="left">
+              <el-link :underline="false" class="back" @click="back()">返回列表</el-link>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-link :underline="false" class="back" @click="showPopup">选择视频</el-link>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="chat">
+          <van-tabs v-model="chatactive" type="card" animated>
+            <!-- <van-tab title="图文直播">
+              <textVideo :list="lunboList"></textVideo>
+            </van-tab> -->
+            <van-tab title="公共聊天">
+              <chat></chat>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+        <el-col :span="24" class="market">
+          <van-tabs v-model="marketactive" type="card" animated>
+            <van-tab title="技术成果">
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="list" v-for="(item, index) in achieveList" :key="index">
+                  <p class="textOver">{{ item.name }}</p>
+                  <p class="textOver">领域：{{ item.field }}</p>
+                  <p class="textOver">联系人：{{ item.contacts }}</p>
+                </el-col>
+              </el-col>
+            </van-tab>
+            <van-tab title="科技需求">
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="list" v-for="(item, index) in techolList" :key="index">
+                  <p class="textOver">{{ item.name }}</p>
+                  <p class="textOver">领域：{{ item.field }}</p>
+                  <p class="textOver">联系人：{{ item.contacts }}</p>
+                </el-col>
+              </el-col>
+            </van-tab>
+            <van-tab title="专家智库">
+              <el-col :span="24" class="three">
+                <el-col :span="24" class="expertList" v-for="(item, index) in expertList" :key="index" @click.native="expertBtn(item)">
+                  <el-col :span="5" class="image">
+                    <el-image
+                      :src="item.expertimage"
+                      style="width:70px;height: 70px;border: 1px solid #f1f1f1;"
+                      v-if="item.expertimage != null || undefined"
+                    ></el-image>
+                    <el-image :src="expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;" v-else></el-image>
+                  </el-col>
+                  <el-col :span="19" class="info1">
+                    <el-col :span="24" class="name textOver">
+                      {{ item.name }}
+                    </el-col>
+                    <el-col :span="24" class="txt textOver"> {{ item.zwzc || '暂无' }} </el-col>
+                    <el-col :span="24" class="txt textOver"> {{ item.company || '暂无' }} </el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </van-tab>
+          </van-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+    <van-popup v-model="show" position="bottom">
+      <van-picker
+        title="视频信息"
+        v-model="show"
+        show-toolbar
+        :columns="videoData"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        @change="onChange"
+        value-key="videointro"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+// 公共聊天
+import chat from '@/components/parts/chat.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: marketuser } = createNamespacedHelpers('marketuser');
+const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
+const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+import moment from 'moment';
+export default {
+  name: 'detailtwo',
+  props: {},
+  components: {
+    chat,
+  },
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      //展会详情
+      dockInfo: [],
+      // 聊天
+      chatactive: 0,
+      // 图文直播
+      lunboList: [],
+      // 科技超市
+      marketactive: 0,
+      // 技术成果
+      achieveList: [],
+      // 科技需求
+      techolList: [],
+      // 专家智库
+      expertList: [],
+      expertimage: require('@/assets/222.png'),
+      // 嘉宾，项目
+      jbxmactive: 0,
+      // 嘉宾访谈
+      zxzdlist: [],
+      // 项目路演
+      xmlyList: [],
+      // 视频管理
+      show: false,
+      menuIndex: '0',
+      videoData: [],
+      videoPath: '',
+    };
+  },
+  async created() {
+    if (this.id) {
+      this.$set(this, `dock_id`, this.id);
+    }
+    await this.search();
+    await this.seachtVideo();
+    await this.seachLunbo();
+  },
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
+    ...exportuser({ expertQuery: 'query' }),
+    ...marketuser({ operaFetch: 'operaFetch' }),
+    ...newsguidance({ danceQuery: 'query' }),
+    ...newsroadshow({ newsroadshowquery: 'query' }),
+    // 查询
+    async search() {
+      //展会详情
+      let res = await this.dockFetch(this.dock_id);
+      if (this.$checkRes(res)) this.$set(this, `dockInfo`, res.data);
+      let czxm = res.data.apply.map(item => item.goodsList);
+      czxm = _.flattenDeep(czxm);
+      var czxmNew = czxm.filter(item => item.dockStatus == '1');
+      //科技需求
+      var jishuData = czxmNew.filter(item => item.type === '0');
+      this.$set(this, `techolList`, jishuData);
+      //技术成果
+      var chanpinData = czxmNew.filter(item => item.type === '1');
+      if (chanpinData) this.$set(this, `achieveList`, chanpinData);
+      // 专家智库
+      let exportdata = await this.expertQuery({ role: 6 });
+      if (this.$checkRes(exportdata)) this.$set(this, `expertList`, exportdata.data);
+      //嘉宾访谈
+      let jbftData = await this.danceQuery({ dock_id: this.id });
+      if (this.$checkRes(jbftData)) this.$set(this, `zxzdlist`, jbftData.data);
+      // 项目路演
+      let xmly = await this.newsroadshowquery({ dock_id: this.id });
+      if (this.$checkRes(xmly)) this.$set(this, `xmlyList`, xmly.data);
+    },
+    // 查询图文直播
+    async seachLunbo() {
+      let res = await this.operaFetch({ dockid: this.id });
+      for (const val of res.data) {
+        var date = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
+        val.date = date;
+      }
+      if (this.$checkRes(res)) {
+        this.$set(this, `lunboList`, res.data);
+      }
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/dock_video/${this.dock_id}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      this.$set(this.dockinfo, `file_path`, message.body);
+    },
+    // 专家详情
+    expertBtn(data) {
+      this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/live/index' });
+    },
+    // 选择视频
+    showPopup() {
+      this.show = true;
+    },
+    // 视频管理
+    async seachtVideo() {
+      let res = await this.dockFetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `videoData`, res.data.videodata);
+        this.changeMenu('0', this.videoData[0]);
+      }
+    },
+    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);
+    },
+    changeMenu(index, item) {
+      if (item) {
+        this.menuIndex = index;
+        this.$set(this, `videoPath`, item.file_path);
+      }
+    },
+    // 确定
+    onConfirm(value, index) {
+      this.changeMenu(index, value);
+      this.onCancel();
+    },
+    // 选择
+    onChange(value, index) {
+      this.changeMenu(index, value);
+    },
+    onCancel() {
+      this.show = false;
+    },
+  },
+  mounted() {
+    this.channelvideo();
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  // 视频
+  .video {
+    height: 255px;
+    overflow: hidden;
+    .top {
+      height: 215px;
+      overflow: hidden;
+      .downVideo {
+        position: fixed;
+        z-index: 1;
+        width: 100%;
+        video {
+          width: 100%;
+          height: 215px;
+        }
+      }
+      .downTxt {
+        height: 215px;
+        text-align: center;
+        background-image: url('~@/assets/dock1.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        p {
+          font-size: 25px;
+          color: #fff;
+          padding: 25px 10px;
+        }
+      }
+    }
+    .down {
+      height: 40px;
+      overflow: hidden;
+      background-color: #f1f1f1;
+      .left {
+        height: 40px;
+        line-height: 40px;
+        border-right: 1px dashed #ccc;
+        text-align: center;
+        .el-link {
+          color: #333;
+          font-weight: bold;
+        }
+      }
+      .right {
+        text-align: center;
+        height: 40px;
+        line-height: 40px;
+        .el-link {
+          color: #333;
+          font-weight: bold;
+        }
+      }
+    }
+    // .back {
+    //   position: fixed;
+    //   z-index: 999;
+    //   i {
+    //     font-size: 30px;
+    //     font-weight: bold;
+    //     margin: 5px 0 0px 5px;
+    //     color: #409eff;
+    //   }
+    // }
+    // .videoone {
+    //   height: 215px;
+    //   overflow: hidden;
+    //   video {
+    //     width: 100%;
+    //   }
+    // }
+    // .videotwo {
+    //   background: url('~@/assets/directBack.png');
+    //   background-size: 100% 100%;
+    //   height: 215px;
+    //   overflow: hidden;
+    //   text-align: center;
+    //   color: #fff;
+    //   font-size: 20px;
+    //   padding: 15% 3%;
+    // }
+  }
+  // 聊天
+  .chat {
+    margin: 15px 0 0 0;
+    height: 400px;
+    overflow: hidden;
+  }
+  // 科技超市
+  .market {
+    margin: 15px 0 0 0;
+    .one {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 102px;
+      .list {
+        border-bottom: 1px dashed #ccc;
+        padding: 10px 0;
+        p {
+          font-size: 16px;
+          color: #666;
+          padding: 5px 0 0 0;
+        }
+        p:nth-child(1) {
+          font-size: 18px;
+          font-weight: bold;
+          color: #000;
+        }
+      }
+    }
+    .three {
+      max-height: 550px;
+      overflow-y: auto;
+      padding: 0 16px;
+      min-height: 92px;
+      .expertList {
+        padding: 5px 0px;
+        border-bottom: 1px dashed #ccc;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        .name {
+          font-size: 18px;
+          font-weight: bolder;
+        }
+        .field {
+          margin-top: 8px;
+          font-size: 16px;
+          color: #666;
+        }
+        .image {
+          margin-top: 5px;
+          .el-image {
+            border-radius: 90%;
+          }
+        }
+        .info1 {
+          padding: 6px 0px 1px 20px;
+        }
+      }
+    }
+  }
+  // 主办方
+  .company {
+    margin: 15px 0 0 0;
+    .name {
+      margin: 0 0 20px 0;
+      padding: 0 10px;
+      p {
+        text-align: center;
+        color: #409eff;
+      }
+      p:nth-child(1) {
+        font-family: cursive;
+        font-size: 30px;
+        font-weight: bolder;
+        text-shadow: 5px 5px 2px #ccc;
+      }
+      p:nth-child(2) {
+        padding: 10px 0 0 0;
+        font-size: 20px;
+      }
+    }
+  }
+}
+// 标签样式重定义
+/deep/.van-tab {
+  font-size: 16px;
+}
+/deep/.van-tabs--card > .van-tabs__wrap {
+  height: 35px;
+}
+/deep/.van-tabs__nav--card {
+  height: 35px;
+  // margin: 0;
+}
+/deep/.van-tabs__nav--card {
+  border: 1px solid #409eff;
+}
+/deep/.van-tabs__nav--card .van-tab {
+  color: #666;
+  border-right: 1px solid #409eff;
+}
+/deep/.van-tabs__nav--card .van-tab.van-tab--active {
+  background-color: #409eff;
+  color: #fff;
+}
+</style>

src/views/live/liveParts/czxm.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="czxm">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="19" class="textOver name">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="5" class="textOver type">
+            {{ item.type == '0' ? '科技需求' : '技术成果' }}
+          </el-col>
+          <el-col :span="24" class="textOver other"> 领域：{{ item.field }} </el-col>
+          <el-col :span="24" class="textOver other"> 领域：{{ item.contacts }} </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  name: 'czxm',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      list: [],
+    };
+  },
+  async created() {
+    if (this.id) {
+      this.$set(this, `dock_id`, this.id);
+    }
+    await this.search();
+  },
+  methods: {
+    ...dock(['fetch']),
+    async search() {
+      // 参展项目
+      let res = await this.fetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        let czxm = res.data.apply.map(item => item.goodsList);
+        czxm = _.flattenDeep(czxm);
+        this.$set(this, `list`, czxm);
+      }
+    },
+    // 详情页面
+    detailBtn(data) {
+      this.$router.push({ path: '/market/productDetail', query: { id: data._id, type: data.type } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  min-height: 365px;
+  max-height: 365px;
+  overflow-y: auto;
+  .list {
+    padding: 5px 0;
+    border-bottom: 1px dashed #ccc;
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .type {
+      font-size: 14px;
+      text-align: center;
+    }
+    .other {
+      font-size: 14px;
+      padding: 5px 0 0 0;
+    }
+  }
+}
+</style>

src/views/live/liveParts/dockchat.vue

@@ -0,0 +1,254 @@
+<template>
+  <div id="dockchat">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-for="(i, index) in list" :key="index">
+          <span v-if="!isEmotion(i.content)">
+            <el-col :span="24" class="one">
+              [<span>{{ i.send_time | getTime }}</span
+              >]
+              <span>{{ i.sender_name }}</span>
+            </el-col>
+            <el-col :span="24" class="two">
+              <span> {{ i.content }}</span>
+            </el-col>
+          </span>
+          <span v-else>
+            <el-col :span="24" class="thr">
+              <span class="textOver">{{ i.sender_name }}</span>
+              <span>送出一朵/个</span>
+              <span v-html="i.content"></span>
+            </el-col>
+          </span>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-col :span="24" class="sendtxt">
+      <van-button icon="chat" type="info" round @click="show = true" />
+    </el-col>
+    <van-popup v-model="show" position="bottom" class="popup">
+      <van-col span="24" class="one">
+        <p>快捷发言</p>
+        <p>
+          <span v-for="(i, index) in kjfyList" :key="index" @click="changekjfy(i.name)">{{ i.name }}</span>
+        </p>
+      </van-col>
+      <van-col span="24" class="two">
+        <van-col span="19">
+          <van-field v-model="text" placeholder="请输入内容" />
+        </van-col>
+        <van-col span="5" style="text-align:center;">
+          <van-button round type="info" @click="send()">发言</van-button>
+        </van-col>
+      </van-col>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: chat } = createNamespacedHelpers('chat');
+var moment = require('moment');
+import _ from 'lodash';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'dockchat',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      list: [],
+      // 发言
+      show: false,
+      text: '',
+      // 快捷发言列表
+      kjfyList: [{ name: '欢迎欢迎' }, { name: '科技创新' }, { name: '大咖云集' }],
+    };
+  },
+  async created() {
+    this.$set(this, 'dock_id', this.$route.query.id);
+    this.search();
+  },
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...chat(['query', 'create']),
+    async search() {
+      const res = await this.query({ skip: 0, dock_id: this.dock_id });
+      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
+    },
+    isEmotion(word) {
+      return word.startsWith('<img');
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/public_chat/${this.dock_id}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      console.log(message);
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.list.push(body);
+        this.text = '';
+      }
+      this.search();
+    },
+    // 发言
+    async send() {
+      if (this.text != '') {
+        let object = { sender_name: this.user.name ? this.user.name : '游客', content: this.text, dock_id: this.dock_id };
+        if (this.user.uid) {
+          object.sender_id = this.user.uid;
+          object.role = this.user.role;
+        }
+        let res = await this.create(object);
+        this.text = '';
+        this.show = false;
+        this.$checkRes(res, null, res.errmsg || '发言失败');
+      } else this.$message.error('请输入信息后发送');
+    },
+    // 选择快捷发言
+    changekjfy(data) {
+      this.$set(this, `text`, data);
+      this.send();
+    },
+  },
+  filters: {
+    getTime(date) {
+      if (!date) return '很久以前';
+      let today = moment().format('YYYY-MM-DD');
+      let dd = moment(date).format('YYYY-MM-DD');
+      let time;
+      if (today == dd) time = moment(date).format('HH:mm');
+      else time = moment(date).format('YYYY-MM-DD');
+      return time;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  min-height: 365px;
+  max-height: 365px;
+  overflow-y: auto;
+  .list {
+    padding: 5px 0;
+    .one {
+      padding: 5px 0;
+      span:nth-child(1) {
+        color: #ff0000;
+      }
+      span:nth-child(2) {
+        font-size: 16px;
+        color: #999;
+      }
+    }
+    .two {
+      min-height: 30px;
+      span {
+        font-size: 15px;
+        background: #f1f1f1;
+        padding: 5px;
+        border-radius: 5px;
+        min-width: 30%;
+        display: inline-block;
+      }
+    }
+    .thr {
+      text-align: center;
+      background: #f1f1f1;
+      border-radius: 25px;
+      width: 80%;
+      margin: 0 10%;
+      padding: 5px 0;
+      span:nth-child(1) {
+        color: #db7093;
+        font-weight: bold;
+        position: relative;
+        top: -3px;
+        font-size: 15px;
+        display: inline-block;
+        width: 45%;
+      }
+      span:nth-child(2) {
+        color: #000000;
+        position: relative;
+        top: -7px;
+        font-size: 15px;
+      }
+      span:nth-child(3) {
+        position: relative;
+        top: 2px;
+        left: 5px;
+      }
+    }
+  }
+}
+// 发言
+.sendtxt {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  width: 100%;
+  z-index: 999;
+  text-align: right;
+}
+.popup {
+  .one {
+    color: #fff;
+    p:nth-child(1) {
+      text-align: center;
+      padding: 25px 0;
+      font-size: 20px;
+    }
+    p:nth-child(2) {
+      padding: 0 10px;
+      text-align: center;
+      span {
+        background-color: #409eff9f;
+        display: inline-block;
+        border-radius: 25px;
+        margin: 0 10px 10px 0;
+        font-size: 15px;
+        padding: 5px 10px;
+      }
+      span:nth-child(4n) {
+        margin: 0 0 10px 0;
+      }
+    }
+  }
+  .two {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 5px 5px;
+    height: 40px;
+    /deep/.van-cell {
+      padding: 3px 5px;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+      width: 98%;
+    }
+    /deep/.van-button {
+      height: 31px;
+    }
+  }
+}
+/deep/.van-popup {
+  height: 30%;
+  background-color: #0000005f !important;
+}
+</style>

src/views/live/liveParts/imgtxtdock.vue

@@ -0,0 +1,110 @@
+<template>
+  <div id="imgtxtdock">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="txt">
+            <span> <van-icon name="underway" />{{ getDate(item.meta.createdAt) }}</span>
+            <span>{{ item.user_name }}</span>
+          </el-col>
+          <el-col :span="24" class="brief">
+            {{ item.brief }}
+          </el-col>
+          <el-col :span="24" class="image">
+            <el-image :src="tag.url" class="imagelist" v-for="(tag, tagindex) in item.image" :key="tagindex"></el-image>
+          </el-col>
+          <el-col :span="24" class="video" v-if="item.file_path">
+            <el-link :href="item.file_path" target="_blank" :underline="false">视频播放</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: imgtxtdock } = createNamespacedHelpers('imgtxtdock');
+import moment from 'moment';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'imgtxtdock',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      list: [],
+    };
+  },
+  async created() {
+    if (this.id) {
+      this.$set(this, `dock_id`, this.id);
+    }
+    await this.search();
+  },
+  methods: {
+    ...imgtxtdock(['query']),
+    async search() {
+      // 图文直播
+      let res = await this.query({ dock_id: this.dock_id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    // 过滤时间
+    getDate(val) {
+      let newDate = moment(val).format('hh:mm');
+      if (newDate) return newDate;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  min-height: 365px;
+  max-height: 365px;
+  overflow-y: auto;
+  .list {
+    padding: 10px 0;
+    .txt {
+      span:nth-child(1) {
+        color: #ff0000;
+        i {
+          margin: 0 5px 0 0;
+          top: 2px;
+        }
+      }
+      span:nth-child(2) {
+        font-size: 14px;
+        padding: 4px 5px;
+        background: #f1f1f1;
+        margin: 0 0 0 10px;
+        border-radius: 10px;
+        color: #666;
+        font-weight: bold;
+      }
+    }
+    .brief {
+      font-size: 14px;
+      padding: 5px 0;
+    }
+    .image {
+      .imagelist {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/live/liveParts/jbft.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="jbft">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="19" class="textOver title">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="5" class="date">
+            {{ item.publish_time }}
+          </el-col>
+          <el-col :span="24" class="textOver orgin">
+            来源：<span>{{ item.orgin }} </span>
+          </el-col>
+          <el-col :span="24" class="titlejj">
+            简介：<span>{{ item.titlejj }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+export default {
+  name: 'jbft',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      list: [],
+    };
+  },
+  async created() {
+    if (this.id) {
+      this.$set(this, `dock_id`, this.id);
+    }
+    await this.search();
+  },
+  methods: {
+    ...newsguidance(['query']),
+    async search() {
+      let res = await this.query({ dock_id: this.dock_id });
+      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
+    },
+    // 详情页面
+    detailBtn(data) {
+      this.$router.push({ path: '/service/techDetail', query: { id: data.id, type: '3' } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  min-height: 365px;
+  max-height: 365px;
+  overflow-y: auto;
+  .list {
+    padding: 5px 0;
+    border-bottom: 1px dashed #ccc;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .date {
+      font-size: 14px;
+      text-align: right;
+      padding: 3px 0 0 0;
+    }
+    .orgin {
+      font-size: 14px;
+      padding: 5px 0;
+      span {
+        color: #999;
+      }
+    }
+    .titlejj {
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      span {
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/views/live/liveParts/xmly.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="xmly">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
+          <el-col :span="19" class="textOver title">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="5" class="date">
+            {{ item.publish_time }}
+          </el-col>
+          <el-col :span="24" class="textOver orgin">
+            来源：<span>{{ item.orgin }} </span>
+          </el-col>
+          <el-col :span="24" class="titlejj">
+            简介：<span>{{ item.titlejj }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+export default {
+  name: 'xmly',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      // 展会id
+      dock_id: '',
+      list: [],
+    };
+  },
+  async created() {
+    if (this.id) {
+      this.$set(this, `dock_id`, this.id);
+    }
+    await this.search();
+  },
+  methods: {
+    ...newsroadshow(['query']),
+    async search() {
+      let res = await this.query({ dock_id: this.dock_id });
+      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
+    },
+    // 详情页面
+    detailBtn(data) {
+      this.$router.push({ path: '/live/roadshowDetail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  min-height: 365px;
+  max-height: 365px;
+  overflow-y: auto;
+  .list {
+    padding: 5px 0;
+    border-bottom: 1px dashed #ccc;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .date {
+      font-size: 14px;
+      text-align: right;
+      padding: 3px 0 0 0;
+    }
+    .orgin {
+      font-size: 14px;
+      padding: 5px 0;
+      span {
+        color: #999;
+      }
+    }
+    .titlejj {
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      span {
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/views/live/parts/channel.vue

@@ -6,7 +6,13 @@
           <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
         </el-col>
         <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="$router.push({ path: '/live/channelDetail', query: { id: item.id } })"
+          >
             <el-col :span="11" class="video">
               <el-image :src="noimage"> </el-image>
             </el-col>

src/views/live/parts/interview.vue

@@ -6,7 +6,13 @@
           <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
         </el-col>
         <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="$router.push({ path: '/live/interviewDeatil', query: { id: item.id } })"
+          >
             <el-col :span="24" class="name textOver">
               {{ item.title }}
             </el-col>

src/views/live/parts/liveList.vue

@@ -19,7 +19,7 @@
               >
             </span>
             <span v-else>
-              <el-button type="primary" size="mini" @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-if="item.status == '1'"
+              <el-button type="primary" size="mini" @click="$router.push({ path: '/live/liveDetail', query: { id: item.id } })" v-if="item.status == '1'"
                 >进入房间</el-button
               >
             </span>

src/views/live/parts/onlineEx.vue

@@ -79,9 +79,9 @@ export default {
     async searchList({ skip = 0, limit = 10, status, ...info } = {}) {
       let res = await this.dockQuery({ is_allowed: 1, skip, status, ...info });
       if (res.errcode == 0) {
-        if (status == '0') this.$set(this, `listPre`, res.data);
-        else if (status == '1') this.$set(this, `listNow`, res.data);
-        else if (status == '2') this.$set(this, `listPast`, res.data);
+        if (status == '0') this.$set(this, `listPre`, _.orderBy(res.data, ['start_time'], ['asc']));
+        else if (status == '1') this.$set(this, `listNow`, _.orderBy(res.data, ['start_time'], ['asc']));
+        else if (status == '2') this.$set(this, `listPast`, _.orderBy(res.data, ['start_time'], ['asc']));
       }
     },
     //下拉选择

src/views/live/parts/roadshow.vue

@@ -6,7 +6,13 @@
           <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
         </el-col>
         <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="$router.push({ path: '/live/roadshowDetail', query: { id: item.id } })"
+          >
             <el-col :span="24" class="name textOver">
               {{ item.title }}
             </el-col>

src/views/live/roadshowDetail.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id="roadshowDetail">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="info">
+          <el-col :span="24" class="name">
+            {{ info.title }}
+          </el-col>
+          <el-col :span="24" class="date">
+            <span class="textOver">发布时间：{{ info.publish_time }}</span>
+            <span class="textOver"> 信息来源：{{ info.orgin }}</span>
+          </el-col>
+          <el-col :span="24" class="image" v-if="info.picture != null">
+            <el-image :src="info.picture">
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i></div
+            ></el-image>
+          </el-col>
+          <el-col :span="24" class="video">
+            <video
+              autoplay="autoplay"
+              controls="controls"
+              preload="meta"
+              x-webkit-airplay="true"
+              webkit-playsinline="true"
+              playsinline="true"
+              x5-video-player-type="h5"
+              x5-video-player-fullscreen="true"
+              controlsList="nodownload"
+              :src="info.filepath"
+              loop="loop"
+            >
+              <source src="movie.ogg" type="video/ogg" />
+              <source src="movie.mp4" type="video/mp4" />
+            </video>
+          </el-col>
+          <el-col :span="24" class="content">
+            <p v-html="info.content"></p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+export default {
+  name: 'roadshowDetail',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...newsroadshow(['fetch']),
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `info`, res.data);
+        }
+      }
+    },
+    // 返回
+    onClickLeft() {
+      // this.$router.push({ path: '/live/index' });
+      this.$router.go(-1);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    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;
+  }
+  .info {
+    .name {
+      text-align: center;
+      padding: 15px 10px 0 10px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .date {
+      margin: 15px 0;
+      span {
+        display: inline-block;
+        width: 50%;
+        text-align: center;
+        color: #666;
+      }
+    }
+    .image {
+      padding: 10px;
+      .el-image {
+        width: 100%;
+        height: 210px;
+      }
+    }
+    .video {
+      video {
+        width: 100%;
+        height: 215px;
+      }
+    }
+    .content {
+      padding: 10px 5px;
+    }
+  }
+}
+
+/deep/.content p img {
+  width: 100%;
+  height: 300px;
+  margin: 5px 0px;
+  display: block;
+}
+/deep/.content div img {
+  width: 100%;
+  height: 260px;
+  display: block;
+}
+/deep/.content p {
+  font-size: 14px;
+  color: #444;
+}
+</style>