hhh

src/layout/live/detailInfo.vue

@@ -17,13 +17,17 @@
               <i class="iconfont iconmaikefeng-tianchong"></i>
               <p>麦克风</p>
             </el-col>
+            <el-col :span="8" class="btn" @click.native="chatBtn()">
+              <i class="el-icon-user"></i>
+              <p>聊天</p>
+            </el-col>
           </el-col>
         </el-col>
         <el-col :span="20" class="right">
           <el-col :span="24" class="rightTop">
-            <span @click="liveon"><i class="iconfont iconshexiangtou"></i>摄像头</span>
+            <span @click="liveon"><i class="iconfont iconshexiangtou"></i>直播</span>
             <span @click="liveclose">关闭</span>
-            <span @click="shareon"><i class="iconfont iconfenxiang"></i>分享</span>
+            <span @click="shareon"><i class="iconfont iconfenxiang"></i>屏幕</span>
           </el-col>
           <el-col :span="2" class="noVideo"> </el-col>
           <el-col :span="20" class="video">
@@ -46,12 +50,34 @@
         <el-option v-for="item in microphones" :key="item.deviceId" :label="item.label" :value="item.deviceId"> </el-option>
       </el-select>
     </el-dialog>
+    <el-dialog title="讨论" :visible.sync="chatDia" width="50%" :before-close="handleClose">
+      <el-row>
+        <el-col :span="24" class="chatList">
+          <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
+            <p>
+              <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="chatInput">
+          <el-col :span="19" class="input">
+            <el-input type="textarea" maxlength="5000" show-word-limit v-model="content"></el-input>
+          </el-col>
+          <el-col :span="5" class="btn">
+            <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
+          </el-col>
+        </el-col>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: gensign } = createNamespacedHelpers('gensign');
+const { mapActions: chat } = createNamespacedHelpers('chat');
 import TRTC from 'trtc-js-sdk';
 export default {
   name: 'detailInfo',
@@ -67,6 +93,7 @@ export default {
       cameras: [],
       // 麦克风
       tianchongDia: false,
+      chatDia: false,
       microphoneId: '',
       microphones: [],
       client_: '',
@@ -75,14 +102,57 @@ export default {
 
       userId_: '1111',
       open_: false,
+      content: '',
+      dataList: [],
     };
   },
   created() {
     this.initclient();
     this.getDevices();
+    this.chatSearch();
+  },
+  mounted() {
+    this.channel();
   },
   methods: {
     ...gensign(['gensignFetch']),
+    ...chat(['query', 'create', 'fetch']),
+    async chatSearch({ skip = 0, limit = 1000 } = {}) {
+      const info = { roomid: this.id };
+      let res = await this.query({ skip, limit, ...info });
+      this.$set(this, `dataList`, res.data);
+    },
+    async chatCreate() {
+      let data = {};
+      data.roomid = this.id;
+      data.type = '0';
+      data.content = this.content;
+      data.sendid = this.user.uid;
+      data.sendname = this.user.name;
+      const res = await this.create(data);
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+        this.content = '';
+      }
+    },
+    channel() {
+      console.log('in function:');
+      this.$stomp({
+        [`/exchange/public_chat_` + this.id]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      // console.log('receive a message: ', message.body);
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.dataList.push(body);
+        this.content = '';
+      }
+      // const { content, contenttype, sendid, sendname, icon, groupid, sendtime, type } = message.headers;
+      // let object = { content, contenttype, sendid, sendname, icon, groupid, sendtime, type };
+      // this.list.push(object);
+    },
     async getDevices() {
       this.cameras = await TRTC.getCameras();
       this.microphones = await TRTC.getMicrophones();
@@ -139,7 +209,7 @@ export default {
         });
         shareClient.setDefaultMuteRemoteStreams(true);
         await shareClient.join({ roomId: this.name });
-        const localStream = TRTC.createStream({ audio: true, screen: true });
+        const localStream = TRTC.createStream({ audio: false, screen: true });
         //localStream.setScreenProfile({ width: 200, height: 200, float: 'left', frameRate: 5, bitrate: 1600 /* kbps */ });
         await localStream.initialize();
         console.log('initialize share stream success');
@@ -188,6 +258,9 @@ export default {
     tianchongBtn() {
       this.tianchongDia = true;
     },
+    chatBtn() {
+      this.chatDia = true;
+    },
     // 关闭摄像头&麦克风
     handleClose(done) {
       done();
@@ -282,4 +355,33 @@ export default {
   min-height: 600px;
   grid-area: 1/1/3/4;
 }
+.chatList {
+  height: 400px;
+  padding: 5px 5px 5px 0px;
+  overflow-y: auto;
+  .list {
+    margin: 0 0 10px 0;
+    span:first-child {
+      float: left;
+      width: 15%;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      // font-weight: bold;
+    }
+    span:last-child {
+      float: right;
+      width: 84%;
+    }
+  }
+}
+.chatInput {
+  position: absolute;
+  bottom: 0;
+  .el-button {
+    width: 100%;
+    padding: 20px 0;
+  }
+}
 </style>