聊天

src/views/Service/chat/index.vue

@@ -5,17 +5,28 @@
         <li class="infinite-list-head">
           <img :src="userInfo.headImg"/>{{ userInfo.name }}
         </li>
-        <li v-for="item in friends" :key="item.id" @click="chat(item.name)" class="infinite-list-item">
+        <li v-for="item in friends" :key="item.id" @click="chat(item)" class="infinite-list-item">
           <img :src="item.headImg"/>{{ item.name }}
         </li>
       </ul>
     </div>
     <div class="chat-div">
-      <div class="chat-title"><span>{{ current }}</span></div>
+      <div class="chat-title"><span>{{ current.name }}</span></div>
       <hr/>
-      <div class="news">
-        <template>
-          这里展示
+      <div class="news" >
+        <template v-for="item in sendMessage">
+          <!-- 发送的消息 -->
+          <div v-if="item.sendUserId === userInfo.id" class="right-news-bubble">
+            <div>
+              <img :src="userInfo."/>
+            </div>
+            <div>{{item.content}}</div>
+          </div>
+
+          <!-- 接受的消息 -->
+          <div class="left-news-bubble">
+
+          </div>
         </template>
       </div>
       <hr/>
@@ -24,7 +35,8 @@
           <!--表情-->
           <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>
@@ -38,7 +50,7 @@
             class="send-textarea"
             v-model="content">
           </el-input>
-          <span>按Enter发送 <el-button type="primary" class="send-but" @click="sendBut">发 送</el-button></span>
+          <span><el-button type="primary" class="send-but" @click="sendBut">发 送</el-button></span>
         </div>
       </div>
     </div>
@@ -46,164 +58,189 @@
 </template>
 
 <script>
-  export default {
-    name: "chat",
-    data() {
-      return {
-        friends: [],
-        userInfo: '',
-        current: '',    // 当前对象
-        content: '',    // 内容
+export default {
+  name: "chat",
+  data() {
+    return {
+      friends: [],
+      userInfo: '',   // 当前用户信息
+      current: '',    // 当前聊天对象
+      content: '',    // 内容
+      em: ["惊讶", "难过", "亲亲", "再见", "奋斗", "鄙视", "得意", "坏笑", "调皮", "笑哭", "口吐芬芳", "微笑", "皱眉", "尴尬", "厉害", "吃瓜", "凶狠", "绿帽", "鼓掌", "非洲酋长", "好色", "微笑温暖", "偷笑", "无奈", "疑问", "犯困", "发呆", "有趣", "大哭", "白眼", "衰", "生病", "听歌", "打脸", "摸头", "吐血", "财", "机智", "敲头", "666", "海绵宝宝1", "闭嘴", "可怜", "拒绝", "发火", "害羞1", "无奈流汗", "害羞2", "感动", "胜利", "抓狂", "伤心", "海绵宝宝2", "送爱心", "笑哭2", "晕", "骷髅", "地雷", "击掌", "赞", "握手", "低头", "可爱皱眉", "气爆炸", "呕吐", "惊吓", "吓坏", "亲", "心", "玫瑰"],
+      sendMessage: [],  // 存储消息数组
+
+
+      /* 根据发送消息id进行判断消息放在左边还是右边
+      发送消息方id
+      接受消息方id
+      消息内容：
+      消息类型： 1文字(含表情图片)，2图片，3文件
+      发送类型： 1私聊，2群聊，3广播
+      消息时间： */
+    }
+  },
+  created() {
+    this.getFriends();
+  },
+  methods: {
+    // 切换对象
+    chat(va) {
+      this.current = va;
+    },
 
-        em:'惊讶][难过][亲亲][再见][奋斗][鄙视][得意][坏笑][调皮][笑哭][口吐芬芳][微笑][皱眉][尴尬][厉害][吃瓜][凶狠][绿帽][鼓掌][非洲酋长][好色][微笑温暖][偷笑][无奈][疑问][犯困][发呆][有趣][大哭][白眼][衰][生病][听歌][打脸][摸头][吐血][财][机智][敲头][666][海绵宝宝1][闭嘴][可怜][拒绝][发火][害羞1][无奈流汗][害羞2][感动][胜利][抓狂][伤心][海绵宝宝2][送爱心][笑哭2][晕][骷髅][地雷][击掌][赞][握手][低头][可爱皱眉][气爆炸][呕吐][惊吓][吓坏][亲][心][玫瑰',
+    // 获取好友列表
+    async getFriends() {
+      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
+      await this.api.getApi("/chat/friends/get?id=" + this.userInfo.id).then(res => {
+        this.friends = res.data;
+        if (this.friends.length > 0) {
+          this.current = this.friends[0];
+        }
+      })
+    },
 
+    // 发送按钮
+    sendBut() {
+      if (this.content !== '') {
+        let msg = {
+          sendUserId: this.userInfo.id,
+          receiveUserId: this.current.id,
+          content: this.content,
+          msgType: '',
+          sendType: '',
+          sendTime: new Date()
+        }
+        // 判断消息类型，发送类型
+        msg.msgType = '1';
+        msg.sendType = '1';
+        this.sendMessage.push(msg);
       }
     },
-    created() {
-      this.getFriends();
-    },
-    methods: {
-      chat(va) {
-        this.current = va;
-      },
-
-      // 获取好友列表
-      async getFriends() {
-        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
-        await this.api.getApi("/chat/friends/get?id=" + this.userInfo.id).then(res => {
-          this.friends = res.data;
-          if (this.friends.length > 0) {
-            this.current = this.friends[0].name;
-          }
-        })
-      },
-
-      // 发送按钮
-      sendBut() {
-        if (this.content !== '') {
-
-          console.log(this.content);
-        }
-      },
-
-      // 选择表情
-      selectEmjio(value){
-        let split = this.em.split("][");
-        console.log(split)
-        let s = this.content + '[' + split[value-1] + ']';
-
 
-      }
+    // 选择表情
+    selectEmjio(value) {
+      let split = this.em[value - 1];
+      let s = this.content + '[' + split + ']';
+      this.content = s;
     }
   }
+}
 </script>
 
 <style scoped>
-  /* 左边的列表 */
-  .leftDiv {
-    width: 200px;
-    height: 600px;
-    float: left;
-    background-color: #2e2e2e;
-  }
-
-  .infinite-list {
-    padding: 0;
-    margin: 0;
-    color: white;
-    list-style-type: none;
-  }
-
-  .infinite-list-head {
-    height: 50px;
-    margin-top: 1px;
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #2e2e2e;
-  }
-
-  .infinite-list-item {
-    cursor: pointer; /*鼠标放上变手*/
-    height: 50px;
-    margin-top: 1px;
-    padding: 10px;
-    display: flex;
-    justify-content: center; /*水平居中*/
-    align-items: center; /*垂直居中*/
-    background-color: #535353;
-  }
-
-  /* 右边内容 */
-  .chat-div {
-    width: 500px;
-    height: 600px;
-    float: left;
-    border: solid 1px #a3a3a3;
-  }
-
-  .chat-title {
-    height: 45px;
-    padding-left: 15px;
-    display: flex;
-    align-items: center;
-  }
-
-  .chat-title span {
-    font-size: 20px;
-  }
-
-  /* 右边中间消息展示 */
-  .news {
-    width: 500px;
-    height: 400px;
-  }
-
-  .expression {
-    width: 100%;
-    height: 30px;
-    padding-left: 15px;
-  }
-
-  .expression-emjio {
-    width: 35px;
-    height: 35px;
-    display : inline-block;
-  }
-
-  .expression i {
-    font-size: 20px;
-    color: #7d7d7d;
-    margin: 0 8px 0 0;
-  }
-
-  .send-message {
-
-  }
-
-  .send-textarea {
-    margin-left: 5px;
-    width: 98%;
-  }
-
-  .send-textarea >>> .el-textarea__inner {
-    border: 0;
-    resize: none;
-  }
-
-  .send-message span {
-    font-size: 13px;
-    margin: 8px 9px 1px 0;
-    float: right;
-    display: block;
-    color: #aaa9a9;
-  }
-
-  .send-but {
-    margin: 0;
-    padding: 0;
-    height: 25px;
-    width: 50px;
-  }
+/* 左边的列表 */
+.leftDiv {
+  width: 200px;
+  height: 600px;
+  float: left;
+  background-color: #2e2e2e;
+}
+
+.infinite-list {
+  padding: 0;
+  margin: 0;
+  color: white;
+  list-style-type: none;
+}
+
+.infinite-list-head {
+  height: 50px;
+  margin-top: 1px;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2e2e2e;
+}
+
+.infinite-list-item {
+  cursor: pointer; /*鼠标放上变手*/
+  height: 50px;
+  margin-top: 1px;
+  padding: 10px;
+  display: flex;
+  justify-content: center; /*水平居中*/
+  align-items: center; /*垂直居中*/
+  background-color: #535353;
+}
+
+/* 右边内容 */
+.chat-div {
+  width: 500px;
+  height: 600px;
+  float: left;
+  border: solid 1px #a3a3a3;
+}
+
+.chat-title {
+  height: 45px;
+  padding-left: 15px;
+  display: flex;
+  align-items: center;
+}
+
+.chat-title span {
+  font-size: 20px;
+}
+
+/* 右边中间消息展示 */
+.news {
+  width: 500px;
+  height: 400px;
+}
+
+.expression {
+  width: 100%;
+  height: 30px;
+  padding-left: 15px;
+}
+
+.expression-emjio {
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+}
+
+.expression i {
+  font-size: 20px;
+  color: #7d7d7d;
+  margin: 0 8px 0 0;
+}
+
+.send-message {
+
+}
+
+.send-textarea {
+  margin-left: 5px;
+  width: 98%;
+}
+
+.send-textarea >>> .el-textarea__inner {
+  border: 0;
+  resize: none;
+}
+
+.send-message span {
+  font-size: 13px;
+  margin: 8px 9px 1px 0;
+  float: right;
+  display: block;
+  color: #aaa9a9;
+}
+
+.send-but {
+  margin: 0;
+  padding: 0;
+  height: 25px;
+  width: 50px;
+}
+
+.right-news-bubble{
+  float: right;
+}
+
+.left-news-bubble{
+
+}
 </style>