1

src/components/parts/textVideo.vue

@@ -0,0 +1,154 @@
+<template>
+  <div id="textVideo">
+    <el-row>
+      <el-col :span="24" class="textVideo">
+        <el-col class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="3" class="image">
+            <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
+          </el-col>
+          <el-col :span="21" class="other">
+            <el-col :span="24" class="one">
+              <span>{{ item.type == '0' || item.type == '2' ? item.login_name : item.type == '1' ? item.market_username : '暂无' }}</span>
+              <span>[{{ getlundate(item.date) }}]</span>
+            </el-col>
+            <el-col :span="24" class="two">
+              <span v-if="item.type == '0'">
+                <p class="hywl">
+                  <span>欢迎</span>
+                  <span>{{ item.login_name }}</span>
+                  <span>位临现场</span>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                </p>
+              </span>
+              <span v-else-if="item.type == '1'">
+                <p class="zh">
+                  <span>祝贺</span>
+                  <span>{{ item.market_username }}</span>
+                  <span>和</span>
+                  <span>{{ item.username }}</span>
+                  <span>{{ getstatus(item.status) }}</span>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                  <el-image :src="hand" class="hand"></el-image>
+                </p>
+              </span>
+              <span v-else-if="item.type == '2'">
+                <p class="remark">{{ item.remark }}</p>
+              </span>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import moment from 'moment';
+export default {
+  name: 'textVideo',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      touxiang: require('@/assets/touxiang.png'),
+    };
+  },
+  created() {},
+  methods: {
+    // 过滤轮播时间
+    getlundate(data) {
+      let newdata = moment(data).format('hh:mm');
+      if (newdata) return newdata;
+    },
+    // 过滤轮播交易状态
+    getstatus(status) {
+      if (status == '0') return '正在洽谈';
+      else if (status == '1') return '达成意向';
+      else if (status == '2') return '交易完成';
+      else if (status == '3') return '取消交易';
+      else if (status == '4') return '交易待确定';
+      else return '暂无';
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.textVideo {
+  height: 315px;
+  overflow-y: auto;
+  .list {
+    padding: 10px 0;
+    border-bottom: 1px dashed #ff0000;
+    .image {
+      text-align: center;
+    }
+    .other {
+      .one {
+        span:nth-child(1) {
+          color: #000;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        span:nth-child(2) {
+          display: inline-block;
+          margin: 0 0 0 15px;
+          color: #ccc;
+        }
+      }
+      .two {
+        margin: 5px 0 0 0;
+        color: #000;
+        .zh {
+          min-height: 20px;
+          font-size: 15px;
+          padding: 5px;
+          border-radius: 5px;
+          background: #ea4235;
+        }
+        .hywl {
+          min-height: 20px;
+          font-size: 15px;
+          padding: 5px;
+          border-radius: 5px;
+          background: #245efe5f;
+          .hand {
+            width: 30px;
+            top: 6px;
+            left: 5px;
+            margin: 0px 0 0 10px;
+          }
+        }
+        .remark {
+          min-height: 20px;
+          font-size: 15px;
+          padding: 5px;
+          border-radius: 5px;
+          background: #cccccc5f;
+        }
+      }
+    }
+  }
+}
+</style>

src/store/market/user.js

@@ -5,13 +5,19 @@ Vue.use(Vuex);
 const api = {
   interface: `/api/market/user`,
   userinterface: `/api/market/user/hwsxg`,
+  operaInfo: `/api/market/operationlog`,
 };
 const state = () => ({});
 const mutations = {};
 
 const actions = {
   async query({ commit }, { skip = 0, limit = undefined, isdel = '0', ...info } = {}) {
-    const res = await this.$axios.$get(api.interface, { skip, limit, isdel, ...info });
+    const res = await this.$axios.$get(api.interface, {
+      skip,
+      limit,
+      isdel,
+      ...info,
+    });
     return res;
   },
   async userquery({ commit }, { skip = 0, limit = undefined, isdel = '0', ...info } = {}) {
@@ -39,6 +45,14 @@ const actions = {
     const res = await this.$axios.$delete(`${api.interface}/${payload}`);
     return res;
   },
+  async operaFetch({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.operaInfo}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
 };
 
 export default {

src/views/live/index.vue

@@ -66,7 +66,6 @@ export default {
     };
   },
   async created() {
-    console.log(this.user);
     await this.searchPlace();
     await this.searchList({ status: '0' });
     await this.searchList({ status: '1' });

src/views/live/parts/videoDetail.vue

@@ -11,7 +11,14 @@
           </div>
         </el-col>
         <el-col :span="24" class="chat">
-          <chat></chat>
+          <van-tabs v-model="active">
+            <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="tab">
           <el-tabs v-model="activeName" stretch type="border-card">
@@ -57,15 +64,18 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: dock } = createNamespacedHelpers('dock');
 import chat from '@/components/parts/chat.vue';
+import textVideo from '@/components/parts/textVideo.vue';
+const { mapActions: dock } = createNamespacedHelpers('dock');
 const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
-
+const { mapActions: marketuser } = createNamespacedHelpers('marketuser');
+import moment from 'moment';
 export default {
   name: 'videoDetail',
   props: {},
   components: {
     chat,
+    textVideo,
   },
   data: function() {
     return {
@@ -80,15 +90,21 @@ export default {
       // 展会详情
       dockInfo: {},
       times: 5,
+      // 聊天
+      active: '1',
+      // 图文直播
+      lunboList: [],
     };
   },
   async created() {
     await this.seachdock();
     await this.seachInfo();
+    await this.seachLunbo();
   },
   methods: {
     ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
     ...exportuser({ expertQuery: 'query' }),
+    ...marketuser({ operaFetch: 'operaFetch' }),
     async seachInfo({ skip = 0, limit = 5, ...info } = {}) {
       let res = await this.dockFetch(this.id);
       if (this.$checkRes(res)) {
@@ -104,7 +120,6 @@ export default {
         // 专家智库
         let exportdata = await this.expertQuery({ role: 6, limit: 6 });
         if (this.$checkRes(exportdata)) this.$set(this, `expertList`, exportdata.data);
-        console.log('ad');
       }
     },
     // 文字/视频倒计时
@@ -119,10 +134,23 @@ export default {
       }, 1000);
     },
     async seachdock() {
-      let res = await this.dockFetch(this.id);
+      if (this.id) {
+        let res = await this.dockFetch(this.id);
+        if (this.$checkRes(res)) {
+          // 对接会详情
+          this.$set(this, `dockInfo`, res.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, `dockInfo`, res.data);
+        this.$set(this, `lunboList`, res.data);
       }
     },
   },
@@ -141,11 +169,12 @@ export default {
   watch: {
     times: {
       handler(val) {
-        if (val == 5) {
+        if (val && val == 5) {
           this.daojishi();
         }
       },
       immediate: true,
+      deep: true,
     },
   },
 };
@@ -166,7 +195,7 @@ export default {
       padding: 0px 0 15px 0px;
     }
     .videointro {
-      background: url(/img/directBack.d8126f77.png);
+      background: url('~@/assets/directBack.png');
       background-size: 100% 100%;
       color: #fff;
       padding: 0 15px;