update

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import login from '@common/store/login';
 import chat from '@common/store/live/chat';
+import roomchat from '@common/store/live/room-chat';
 import apply from '@common/store/live/apply';
 import dock from '@common/store/live/dock';
 import news from '@common/store/live/news';
@@ -16,5 +17,15 @@ export default new Vuex.Store({
   state: { ...ustate },
   mutations: { ...umutations },
   actions: {},
-  modules: { marketproduct, talentExperts, market, chat, dock, apply, news, login },
+  modules: {
+    roomchat,
+    marketproduct,
+    talentExperts,
+    market,
+    chat,
+    dock,
+    apply,
+    news,
+    login,
+  },
 });

src/views/hall/hallDetail.vue

@@ -51,8 +51,8 @@
               </el-col>
               <el-col :span="24" class="info">
                 <template v-for="(i, index) in mainTalk">
-                  <span :key="`${index + new Date().getTime()}`">[{{ i.send_time }}]</span>
-                  <span v-html="i.content" :key="`${index + new Date().getTime()}`"></span>
+                  <span :key="`${index + new Date().getTime() + 1}`">[{{ i.send_time }}]</span>
+                  <span v-html="i.content" :key="`${index + new Date().getTime() + 2}`"></span>
                 </template>
               </el-col>
             </el-col>
@@ -62,8 +62,8 @@
               </el-col>
               <el-col :span="24" class="info">
                 <template v-for="(i, index) in otherTalk">
-                  <span :key="`${index + new Date().getTime()}`">[{{ i.send_time }}]</span>
-                  <span v-html="i.content" :key="`${index + new Date().getTime()}`"></span>
+                  <span :key="`${index + new Date().getTime() + 3}`">[{{ i.send_time }}]</span>
+                  <span v-html="i.content" :key="`${index + new Date().getTime() + 4}`"></span>
                 </template>
               </el-col>
             </el-col>
@@ -104,6 +104,8 @@
 <script>
 import wangEditor from '@/components/wang-editor.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+const { mapActions: roomchat } = createNamespacedHelpers('roomchat');
 export default {
   name: 'hallDetail',
   props: {},
@@ -124,18 +126,66 @@ export default {
         send_time: '11:05:10',
       },
     ],
+    info: {},
+    buyerList: [],
+    sellerList: [],
   }),
   created() {
     this.search();
   },
+  mounted() {
+    this.channel();
+  },
   methods: {
-    sendMessage() {},
+    ...dock(['fetch']),
+    ...roomchat(['create']),
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        let { apply, ...info } = res.data;
+        this.$set(this, `info`, info);
+        let buyList = apply.filter(f => f.buyer == '0');
+        this.$set(this, `buyerList`, buyList);
+        let sellList = apply.filter(f => f.buyer == '1');
+        this.$set(this, `sellerList`, sellList);
+      }
+    },
+    async sendMessage() {
+      if (!this.user.uid) {
+        this.$message.error('游客不能发言,请先注册');
+        return;
+      }
+      if (this.text != '') {
+        let object = { number: this.id, sender_name: this.user.name, content: this.content };
+        if (this.user.uid) object.sender_id = this.user.uid;
+        let res = await this.create(object);
+        this.$checkRes(res, null, res.errmsg || '发言失败');
+      } else this.$message.error('请输入信息后发送');
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/room_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);
+        let is_seller = this.sellerList.find(f => f.user_id == body.sender_id);
+        if (is_seller) this.mainTalk.push({ sender_name: body.sender_name, send_time: body.send_time, content: body.content });
+        else this.otherTalk.push({ sender_name: body.sender_name, send_time: body.send_time, content: body.content });
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    id() {
+      return this.$route.query.id;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };