Merge branch 'master' of http://git.cc-lotus.info/service-platform/mobile-official into master

src/components/parts/chat.vue

@@ -1,24 +1,22 @@
 <template>
   <div id="chat">
-    <el-row class="chat">
-      <div class="chatList">
-        <ul>
-          <li v-for="(i, index) in list" :key="index">
-            <p>
-              <span>[{{ i.send_time | getTime }}]</span><span style="font-weight: bold;" :class="i.role == '8' ? 'nameColor' : ''">{{ i.sender_name }}：</span>
-              <span v-if="!isEmotion(i.content)"> {{ i.content }}</span>
-              <span v-else v-html="i.content"> </span>
-            </p>
-          </li>
-        </ul>
-        <el-row type="flex" :gutter="10" style="height:40px;line-height:40px;width:100%;background: transparent;">
+    <el-row class="main">
+      <div class="chat">
+        <el-col :span="24" class="chatlist">
+          <el-col :span="24" class="list" v-for="(i, index) in list" :key="index">
+            <span>[{{ i.send_time | getTime }}]</span><span style="font-weight: bold;" :class="i.role == '8' ? 'nameColor' : ''">{{ i.sender_name }}：</span>
+            <span v-if="!isEmotion(i.content)"> {{ i.content }}</span>
+            <span v-else v-html="i.content"> </span>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="send">
           <el-col :span="19">
             <el-input v-model="text" size="mini"></el-input>
           </el-col>
           <el-col :span="5">
-            <el-button @click="send" size="mini" round type="primary">发送</el-button>
+            <el-button @click="send" size="mini" type="primary">发送</el-button>
           </el-col>
-        </el-row>
+        </el-col>
       </div>
     </el-row>
   </div>
@@ -124,80 +122,29 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.chat {
-  float: left;
-  width: 100%;
-  height: 325px;
-  border-radius: 5px;
-  box-shadow: 0 0 5px #0085d2;
-  padding: 0 10px 0px 10px;
-  margin: 4px 0px 0 3px;
-}
-
-.chat .chatList {
-  background: #fff;
-  float: left;
+.main {
   width: 100%;
+  height: 360px;
   overflow: hidden;
-}
-
-.chat .chatList ul {
-  float: left;
-  width: 100%;
-  height: 270px;
-  padding: 10px 0 0 0;
-  overflow: auto;
-}
-
-.chat .chatList ul li {
-  padding: 0 10px;
-  margin: 0 0 5px 0;
-}
-
-.chat .chatList ul li span:first-child {
-  color: #666;
-  padding: 0 5px 0 0;
-}
-
-.chat .chatList .input {
-  height: 40px;
-  line-height: 40px;
-  float: left;
-  width: 100%;
-}
-
-.chat .chatList .input input[data-v-5189f7b7] {
-  border: 1px solid #ccc;
-  float: left;
-  height: 33px;
-  width: 75%;
-  margin: 19px 3% 0 0;
-}
-.chat .chatList .input button {
-  float: left;
-  background: #ff8500;
-  color: #fff;
-  height: 34px;
-  width: 21%;
-  max-width: 109px;
-  border-radius: 5px;
-}
-.jiabinlist ul {
-  margin: 0;
-  padding: 0;
-}
-
-.anniu {
-  float: left;
-  background: #ff8500;
-  color: #fff;
-  height: 34px;
-  width: 21%;
-  max-width: 109px;
-  margin: 20px 0 0 0;
-  border-radius: 5px;
-  /deep/.el-button {
-    margin: 0 10px;
+  padding: 0 16px;
+  .chat {
+    height: 359px;
+    overflow: hidden;
+    border-left: 1px dashed #f1f1f1;
+    border-right: 1px dashed #f1f1f1;
+    border-bottom: 1px dashed #f1f1f1;
+    .chatlist {
+      height: 320px;
+      overflow-y: auto;
+      .list {
+        padding: 5px 5px;
+      }
+    }
+    .send {
+      height: 40px;
+      line-height: 38px;
+      padding: 0 0 0 12px;
+    }
   }
 }
 .nameColor {

src/components/parts/textVideo.vue

@@ -97,11 +97,13 @@ export default {
 
 <style lang="less" scoped>
 .textVideo {
-  height: 315px;
+  height: 360px;
   overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 16px;
   .list {
     padding: 10px 0;
-    border-bottom: 1px dashed #ff0000;
+    border-bottom: 1px dashed #ccc;
     .image {
       text-align: center;
     }
@@ -136,9 +138,9 @@ export default {
           background: #245efe5f;
           .hand {
             width: 12px;
-            top: 6px;
+            top: 3px;
             left: 5px;
-            margin: 0px 0 0 10px;
+            margin: 0px 0 0 5px;
           }
         }
         .remark {
@@ -151,5 +153,8 @@ export default {
       }
     }
   }
+  .list:last-child {
+    border-bottom: none;
+  }
 }
 </style>

src/views/live/parts/videoDetail2.vue

@@ -14,10 +14,27 @@
           </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="技术成果">
+              技术成果
+            </van-tab>
+            <van-tab title="科技需求">
+              科技需求
+            </van-tab>
+            <van-tab title="专家智库">
+              专家智库
+            </van-tab>
+          </van-tabs>
         </el-col>
         <el-col :span="24" class="jbxm">
           <van-tabs v-model="jbxmactive" type="card" animated>
@@ -74,14 +91,23 @@
 </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: newsguidance } = createNamespacedHelpers('newsguidance');
 const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+import moment from 'moment';
 export default {
   name: 'videoDetail2',
   props: {},
-  components: {},
+  components: {
+    textVideo,
+    chat,
+  },
   data: function() {
     return {
       // 展会id
@@ -92,6 +118,12 @@ export default {
       times: 5,
       //展会详情
       dockinfo: [],
+      // 聊天
+      chatactive: 1,
+      // 图文直播
+      lunboList: [],
+      // 科技超市
+      marketactive: 0,
       // 嘉宾，项目
       jbxmactive: 0,
       // 嘉宾访谈
@@ -105,9 +137,11 @@ export default {
       this.$set(this, `dock_id`, this.id);
     }
     await this.search();
+    await this.seachLunbo();
   },
   methods: {
     ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
+    ...marketuser({ operaFetch: 'operaFetch' }),
     ...newsguidance({ danceQuery: 'query' }),
     ...newsroadshow({ newsroadshowquery: 'query' }),
     // 查询
@@ -123,6 +157,18 @@ export default {
       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);
+      }
+    },
     //倒计时查询展会视频详情
     counttime() {
       this.timer = setInterval(() => {
@@ -177,7 +223,6 @@ export default {
   .video {
     height: 215px;
     overflow: hidden;
-
     .back {
       position: fixed;
       i {
@@ -207,12 +252,18 @@ export default {
   }
   // 聊天
   .chat {
+    margin: 15px 0 0 0;
+    height: 400px;
+    overflow: hidden;
+    // border: 1px solid red;
   }
   // 科技超市
   .market {
+    margin: 15px 0 0 0;
   }
   // 嘉宾，项目
   .jbxm {
+    margin: 15px 0 0 0;
     height: 500px;
     overflow: hidden;
     margin-bottom: 20px;