1

src/store/index.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import dock from './live/dock';
 import chat from './live/chat';
 import apply from './live/apply';
+import imgtxtdock from './live/imgtxtdock';
 // 技术交流
 import column from './live/column';
 import news from './live/news';
@@ -50,6 +51,7 @@ export default new Vuex.Store({
     dock,
     place,
     chat,
+    imgtxtdock,
     // 技术交流
     column,
     news,

src/store/live/imgtxtdock.js

@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  imgtxtdockInfo: `/api/live/imgtxtdock`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.imgtxtdockInfo}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.imgtxtdockInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.imgtxtdockInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.imgtxtdockInfo}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.imgtxtdockInfo}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/live/detail(第一版).vue

@@ -0,0 +1,538 @@
+<template>
+  <div id="roomDetail">
+    <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 :src="videoPath" autoplay="autoplay" controls="controls" loop="loop">
+                您的浏览器不支持 video 标签。
+              </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 :span="24" class="jbxm">
+          <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"
+                  @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>
+                  <el-col :span="19" class="info">
+                    <el-col :span="16" class="title">
+                      {{ item.title }}
+                    </el-col>
+                    <el-col :span="8" class="time">
+                      {{ item.publish_time }}
+                    </el-col>
+                    <el-col :span="24" class="con">{{ item.titlejj }}</el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </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"
+                  @click.native="$router.push({ path: '/live/detail2', query: { id: item.id, type: '2' } })"
+                >
+                  <el-col :span="17" class="name textOver">
+                    {{ item.title }}
+                  </el-col>
+                  <el-col :span="7" class="date">{{ item.publish_time }} </el-col>
+                  <el-col :span="24" class="jianjie">
+                    {{ item.titlejj }}
+                  </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 textVideo from '@/components/parts/textVideo.vue';
+// 公共聊天
+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: 'roomDetail',
+  props: {},
+  components: {
+    textVideo,
+    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();
+  },
+  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);
+      }
+    },
+    // 专家详情
+    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;
+    },
+  },
+
+  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/directBack.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        p {
+          font-size: 25px;
+          color: #fff;
+          padding: 25px 10px;
+        }
+      }
+    }
+    .down {
+      height: 30px;
+      overflow: hidden;
+      background-color: #f1f1f1;
+      .left {
+        height: 30px;
+        line-height: 30px;
+        border-right: 1px dashed #ccc;
+        text-align: center;
+        .el-link {
+          color: #333;
+          font-weight: bold;
+        }
+      }
+      .right {
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        .el-link {
+          color: #333;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  // 聊天
+  .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;
+        }
+      }
+    }
+  }
+  // 嘉宾，项目
+  .jbxm {
+    margin: 15px 0 0 0;
+    // height: 500px;
+    overflow: hidden;
+    margin-bottom: 20px;
+    .jiabinlist {
+      max-height: 450px;
+      margin-top: 10px;
+      padding: 0px 16px;
+      overflow-y: auto;
+      min-height: 70px;
+      .jiabin {
+        height: 70px;
+        margin-bottom: 6px;
+        border-bottom: 1px dashed #ccc;
+        .img4 {
+          height: 65px;
+        }
+        .info {
+          padding-left: 10px;
+          .title {
+            font-size: 18px;
+            font-weight: bolder;
+            text-overflow: ellipsis;
+            font-size: 18px;
+            font-weight: bolder;
+          }
+          .title:hover {
+            color: #409eff;
+            cursor: pointer;
+          }
+          .time {
+            text-align: right;
+          }
+          .con {
+            font-size: 16px;
+            color: #666;
+            margin-top: 3px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+        }
+      }
+      .jiabin:last-child {
+        margin-bottom: 0px;
+      }
+    }
+    .xmly {
+      max-height: 450px;
+      margin-top: 10px;
+      padding: 0px 16px;
+      overflow-y: auto;
+      min-height: 70px;
+      .xmlylist {
+        border-bottom: 1px dashed #ccc;
+        height: 70px;
+        margin-bottom: 5px;
+        .name {
+          font-size: 18px;
+          font-weight: bold;
+        }
+        .name:hover {
+          color: #409eff;
+          cursor: pointer;
+        }
+        .date {
+          font-size: 16px;
+          text-align: right;
+        }
+        .jianjie {
+          height: 45px;
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .xmlylist:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+}
+// 标签样式重定义
+/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/detail.vue

@@ -1,124 +1,26 @@
 <template>
-  <div id="roomDetail">
+  <div id="detail">
     <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 :src="videoPath" autoplay="autoplay" controls="controls" loop="loop">
-                您的浏览器不支持 video 标签。
-              </video>
-            </el-col>
-            <el-col :span="24" class="downTxt" v-else>
-              <p>{{ dockInfo.title }}</p>
-            </el-col>
+            <video :src="videoPath" v-if="videoData != ''" autoplay="autoplay" controls="controls" loop="loop">
+              您的浏览器不支持 video 标签。
+            </video>
+            <p v-else>{{ dockInfo.title }}</p>
           </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-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="chat">
-          <van-tabs v-model="chatactive" type="card" animated>
+        <el-col :span="24" class="imgchat">
+          <van-tabs v-model="active">
             <van-tab title="图文直播">
-              <textVideo :list="lunboList"></textVideo>
+              <imgtxtdock></imgtxtdock>
             </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 :span="24" class="jbxm">
-          <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"
-                  @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>
-                  <el-col :span="19" class="info">
-                    <el-col :span="16" class="title">
-                      {{ item.title }}
-                    </el-col>
-                    <el-col :span="8" class="time">
-                      {{ item.publish_time }}
-                    </el-col>
-                    <el-col :span="24" class="con">{{ item.titlejj }}</el-col>
-                  </el-col>
-                </el-col>
-              </el-col>
-            </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"
-                  @click.native="$router.push({ path: '/live/detail2', query: { id: item.id, type: '2' } })"
-                >
-                  <el-col :span="17" class="name textOver">
-                    {{ item.title }}
-                  </el-col>
-                  <el-col :span="7" class="date">{{ item.publish_time }} </el-col>
-                  <el-col :span="24" class="jianjie">
-                    {{ item.titlejj }}
-                  </el-col>
-                </el-col>
-              </el-col>
+              <dockchat></dockchat>
             </van-tab>
           </van-tabs>
         </el-col>
@@ -141,22 +43,24 @@
 
 <script>
 // 图文直播
-import textVideo from '@/components/parts/textVideo.vue';
+import imgtxtdock from './parts/imgtxtdock.vue';
 // 公共聊天
-import chat from '@/components/parts/chat.vue';
+import dockchat from './parts/dockchat.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: 'roomDetail',
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
   props: {},
   components: {
-    textVideo,
-    chat,
+    // 图文直播
+    imgtxtdock,
+    // 公共聊天
+    dockchat,
   },
   data: function() {
     return {
@@ -164,31 +68,13 @@ export default {
       dock_id: '',
       //展会详情
       dockInfo: {},
-      // 聊天
-      chatactive: 0,
-      // 图文直播
-      lunboList: [],
-      // 科技超市
-      marketactive: 0,
-      // 技术成果
-      achieveList: [],
-      // 科技需求
-      techolList: [],
-      // 专家智库
-      expertList: [],
-      expertimage: require('@/assets/222.png'),
-      // 嘉宾，项目
-      jbxmactive: 0,
-      // 嘉宾访谈
-      zxzdlist: [],
-      // 项目路演
-      xmlyList: [],
-      // 选择视频
-      show: false,
       // 视频管理
+      show: false,
       menuIndex: '0',
       videoData: [],
       videoPath: '',
+      // 图文直播
+      active: 1,
     };
   },
   async created() {
@@ -197,62 +83,20 @@ export default {
     }
     await this.search();
     await this.seachtVideo();
-    await this.seachLunbo();
   },
   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);
-      }
-    },
-    // 专家详情
-    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)) {
@@ -272,24 +116,29 @@ export default {
       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' });
+    },
   },
   mounted() {
     this.channelvideo();
@@ -300,312 +149,31 @@ export default {
       return this.$route.query.id;
     },
   },
-
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
+  watch: {},
 };
 </script>
 
 <style lang="less" scoped>
 .main {
-  // 视频
   .video {
-    height: 255px;
-    overflow: hidden;
     .top {
-      height: 215px;
-      overflow: hidden;
-      .downVideo {
-        position: fixed;
-        z-index: 1;
+      background-color: #000;
+      video {
         width: 100%;
-        video {
-          width: 100%;
-          height: 215px;
-        }
-      }
-      .downTxt {
         height: 215px;
-        text-align: center;
-        background-image: url('~@/assets/directBack.png');
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        p {
-          font-size: 25px;
-          color: #fff;
-          padding: 25px 10px;
-        }
+      }
+      p {
+        font-size: 18px;
       }
     }
     .down {
+      text-align: center;
       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;
-        }
-      }
-    }
-  }
-  // 嘉宾，项目
-  .jbxm {
-    margin: 15px 0 0 0;
-    // height: 500px;
-    overflow: hidden;
-    margin-bottom: 20px;
-    .jiabinlist {
-      max-height: 450px;
-      margin-top: 10px;
-      padding: 0px 16px;
-      overflow-y: auto;
-      min-height: 70px;
-      .jiabin {
-        height: 70px;
-        margin-bottom: 6px;
-        border-bottom: 1px dashed #ccc;
-        .img4 {
-          height: 65px;
-        }
-        .info {
-          padding-left: 10px;
-          .title {
-            font-size: 18px;
-            font-weight: bolder;
-            text-overflow: ellipsis;
-            font-size: 18px;
-            font-weight: bolder;
-          }
-          .title:hover {
-            color: #409eff;
-            cursor: pointer;
-          }
-          .time {
-            text-align: right;
-          }
-          .con {
-            font-size: 16px;
-            color: #666;
-            margin-top: 3px;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-          }
-        }
-      }
-      .jiabin:last-child {
-        margin-bottom: 0px;
-      }
-    }
-    .xmly {
-      max-height: 450px;
-      margin-top: 10px;
-      padding: 0px 16px;
-      overflow-y: auto;
-      min-height: 70px;
-      .xmlylist {
-        border-bottom: 1px dashed #ccc;
-        height: 70px;
-        margin-bottom: 5px;
-        .name {
-          font-size: 18px;
-          font-weight: bold;
-        }
-        .name:hover {
-          color: #409eff;
-          cursor: pointer;
-        }
-        .date {
-          font-size: 16px;
-          text-align: right;
-        }
-        .jianjie {
-          height: 45px;
-          font-size: 16px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          -webkit-line-clamp: 2;
-          word-break: break-all;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-        }
-      }
-      .xmlylist:last-child {
-        margin-bottom: 0px;
-      }
+      padding: 5px 0;
     }
   }
-  // 主办方
-  .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;
-}
-// 视频样式
-.videodata {
-  text-align: center;
-  padding: 0 10px;
-  margin: 10px 0 0 0;
-  p {
-    border-radius: 10px;
-    height: 60px;
-    line-height: 60px;
-    border: 1px dashed #000;
-  }
-}
-.indexClass {
-  text-align: center;
-  padding: 0 10px;
-  margin: 10px 0 0 0;
-  p {
-    background: #409eff;
-    border-radius: 10px;
-    height: 60px;
-    color: #fff;
-    line-height: 60px;
+  .imgchat {
+    padding: 0 10px;
   }
 }
 </style>

src/views/live/parts/dockchat.vue

@@ -0,0 +1,155 @@
+<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>
+  </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: [],
+    };
+  },
+  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`, _.reverse(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 = '';
+      }
+    },
+  },
+  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;
+      }
+    }
+  }
+}
+</style>

src/views/live/parts/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>