聊天

src/views/Service/chat/index.vue

@@ -14,11 +14,15 @@
       <div class="chat-title"><span>{{ current.name }}</span></div>
       <hr/>
       <div class="news">
-        <template v-for="item in sendMessage">
+        <template v-for="(item,index) in sendMessage">
+          <!--时间/通知等-->
+          <div v-if="item.msgType === '10'" class="chat-notice">
+            <span>{{ timeFormat(item.sendTime) }}</span>
+          </div>
+
           <!-- 发送的消息 -->
           <div v-if="item.sendUser === userInfo.id" class="chat-receiver">
-            <!--<div><img :src="userInfo.headImg"/></div>-->
-            <div><img :src="require('@/assets/img/w1.png')"></div>
+            <div><img :src="userInfo.headImg"/></div>
             <div>{{ userInfo.name }}</div>
             <div>
               <div class="chat-right_triangle"></div>
@@ -28,19 +32,13 @@
 
           <!-- 接收的消息 -->
           <div v-if="item.acceptUser === userInfo.id" class="chat-sender">
-            <!--<div><img :src="current.headImg"/></div>-->
-            <div><img src="img/ben.png"></div>
+            <div><img :src="current.headImg"/></div>
             <div>{{ current.name }}</div>
             <div>
               <div class="chat-left_triangle"></div>
               <span> {{ item.msg }} </span>
             </div>
           </div>
-
-          <!--时间/通知等-->
-          <div v-if="false" class="chat-notice">
-            <span>2021年06月10日 12:13</span>
-          </div>
         </template>
       </div>
       <hr/>
@@ -49,8 +47,7 @@
           <!--表情-->
           <el-popover placement="top" width="320" trigger="click">
             <span v-for="index in 70" :key="index">
-              <img class="expression-emjio" @click="selectEmjio(index)"
-                   :src="require('@/assets/img/emjio/'+index +'.png')"/>
+              <img class="expression-emjio" @click="selectEmjio(index)" :src="require('@/assets/img/emjio/'+index +'.png')"/>
             </span>
             <i slot="reference" class="iconfont icon-smiling"></i>
           </el-popover>
@@ -82,16 +79,7 @@
         content: '',    // 内容
         em: ["惊讶", "难过", "亲亲", "再见", "奋斗", "鄙视", "得意", "坏笑", "调皮", "笑哭", "口吐芬芳", "微笑", "皱眉", "尴尬", "厉害", "吃瓜", "凶狠", "绿帽", "鼓掌", "非洲酋长", "好色", "微笑温暖", "偷笑", "无奈", "疑问", "犯困", "发呆", "有趣", "大哭", "白眼", "衰", "生病", "听歌", "打脸", "摸头", "吐血", "财", "机智", "敲头", "666", "海绵宝宝1", "闭嘴", "可怜", "拒绝", "发火", "害羞1", "无奈流汗", "害羞2", "感动", "胜利", "抓狂", "伤心", "海绵宝宝2", "送爱心", "笑哭2", "晕", "骷髅", "地雷", "击掌", "赞", "握手", "低头", "可爱皱眉", "气爆炸", "呕吐", "惊吓", "吓坏", "亲", "心", "玫瑰"],
         sendMessage: [],  // 存储消息数组
-        websock: '',
-
-
-        /* 根据发送消息id进行判断消息放在左边还是右边
-        发送消息方id
-        接受消息方id
-        消息内容：
-        消息类型： 1文字(含表情图片)，2图片，3文件
-        发送类型： 1私聊，2群聊，3广播
-        消息时间： */
+        websocket: '',
       }
     },
 
@@ -101,7 +89,7 @@
     },
 
     destroyed() {
-      this.websock.close();
+      this.websocket.close();
     },
 
     methods: {
@@ -114,8 +102,8 @@
 
       initWebSocket() {
         const wsuri = 'ws://localhost:2020/stu/chat/' + this.userInfo.id;
-        this.websock = new WebSocket(wsuri);
-        this.websock.onmessage = this.websocketonmessage;
+        this.websocket = new WebSocket(wsuri);
+        this.websocket.onmessage = this.websocketonmessage;
       },
 
       // 接收数据
@@ -126,7 +114,7 @@
 
       // 数据发送
       websocketsend(agentData) {
-        this.websock.send(agentData);
+        this.websocket.send(agentData);
       },
 
       // 获取好友列表
@@ -143,12 +131,17 @@
       // 发送按钮
       sendBut() {
         if (this.content !== '') {
+          // 第一条消息之前加上时间
+          if (this.sendMessage.length === 0) {
+            this.timeAdd();
+          }
           let msg = {
             sendUser: this.userInfo.id,
             acceptUser: this.current.id,
             msg: this.content,
             msgType: '',
             sendType: '',
+            isRead: '1',
             sendTime: new Date()
           }
           // 判断消息类型，发送类型
@@ -166,7 +159,59 @@
         let split = this.em[value - 1];
         let s = this.content + '[' + split + ']';
         this.content = s;
+      },
+
+      // 时间添加
+      timeAdd(){
+        let msg = {
+          sendUser: '',
+          acceptUser: '',
+          msg: '',
+          msgType: '10',
+          sendType: '',
+          isRead: '',
+          sendTime: new Date()
+        }
+        this.sendMessage.push(msg);
+      },
+
+      // 时间判断
+      timeJudgment() {
+        let length = this.sendMessage.length;
+        if (length){
+
+        }
+
+      },
+
+      // 时间格式化
+      timeFormat(te) {
+        let timedate, s, mm, h, d, m, y, time;
+        if (te == '') {
+          return '';
+        } else if (te.length == 10) {
+          time = new Date(te * 1000);
+          y = time.getFullYear();
+          m = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
+          d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
+          h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
+          mm = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
+          s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
+          timedate = y + '年' + m + '月' + d + '日 ' + h + ':' + mm + ':' + s;
+          return timedate;
+        } else {
+          time = new Date(te);
+          y = time.getFullYear();
+          m = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
+          d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
+          h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
+          mm = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
+          s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
+          timedate = y + '年' + m + '月' + d + '日 ' + h + ':' + mm + ':' + s;
+          return timedate;
+        }
       }
+
     }
   }
 </script>
@@ -383,5 +428,10 @@
     padding: 5px 10px;
   }
 
+  .emjio-img{
+    width: 30px;
+    height: 30px;
+    margin-bottom: -8px;
+  }
 
 </style>