update

src/layout/enterprise/parts/chat.vue

@@ -6,13 +6,17 @@
       </el-col>
       <el-col :span="24" class="chatInfo" id="chatBorder" ref="chatBorder">
         <template v-for="(i, index) in talk">
-          <template v-if="isSender(i)">
-            <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
-            <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
+          <template v-if="isSender(i, index)">
+            <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
+              <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
+              <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
+            </el-col>
           </template>
           <template v-else>
-            <span :key="`receverTime${i.id}${index}`">[{{ i.send_time }}] {{ i.receiver_name }}</span>
-            <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
+            <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
+              <span :key="`receverTime${i.id}${index}`"> {{ i.receiver_name }} [{{ i.send_time }}]</span>
+              <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
+            </el-col>
           </template>
         </template>
       </el-col>
@@ -68,7 +72,6 @@ export default {
         this.$set(this, `content`, '');
         this.$forceUpdate();
         if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
-          console.log(`in zhong tai chat`);
           this.talk.push(res.data);
           this.turnBottom();
         }
@@ -88,15 +91,11 @@ export default {
         console.warn('未获取到房间id,无法进行订阅');
         return;
       }
-      console.log(`this.user.uid`);
-      console.log(this.user.uid);
-      console.log(`${this.room.id}_${this.user.uid}`);
       this.$stomp({
         [`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
       });
     },
     onMessage(message) {
-      console.log(`in zhong tai message`);
       let body = _.get(message, 'body');
       if (body) {
         body = JSON.parse(body);
@@ -127,6 +126,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
 .chat {
   float: left;
   width: 100%;
@@ -150,4 +153,22 @@ export default {
   padding: 10px 80px;
   font-size: 20px;
 }
+.senderTime {
+  float: left;
+  width: 100%;
+}
+.receverTime {
+  float: right;
+  width: 100%;
+}
+.receverTime span:first-child {
+  float: right;
+  width: 100%;
+  text-align: right;
+}
+.receverTime span:last-child {
+  float: right;
+  width: 100%;
+  text-align: right;
+}
 </style>