发送消息功能

src/pages/index/ChatPage.vue

@@ -65,11 +65,11 @@
       >
         <div
           v-for="contact in filteredContacts"
-          :key="contact.contactId"
+          :key="contact.contactName"
           class="contact-item"
           :class="{
             active:
-              currentContact && currentContact.contactId === contact.contactId,
+              currentContact && currentContact.contactName === contact.contactName,
           }"
           @click="selectContact(contact)"
         >
@@ -83,7 +83,7 @@
             </div>
 
             <div class="last-message">
-              {{ getLastMessage(contact.contactId) }}
+              {{ getLastMessage(contact.contactName) }}
             </div>
           </div>
 
@@ -100,7 +100,7 @@
       >
         <div
           v-for="contact in contactList"
-          :key="contact.contactId"
+          :key="contact.contactName"
           class="contact-item"
           @click="selectContact(contact)"
         >
@@ -192,8 +192,8 @@
           <div class="empty-content">💬</div>
         </div>
 
-        <!-- 输入区域 -->
+        <!-- 输入消息区域 -->
-        <div class="input-panel">
+        <div v-if="activeMenu === 'messages'" class="input-panel">
           <div class="toolbar">
             <button type="button">😊</button>
             <button type="button">📎</button>
@@ -224,7 +224,7 @@
 </template>
 
 <script>
-import { getUserInfo, getContactInfo, getContactMessages } from "@/utils/user";
+import { getUserInfo, getContactInfo, getContactMessages, sendMessage } from "@/utils/user";
 export default {
   name: "ChatPage",
 
@@ -267,7 +267,7 @@ export default {
         return [];
       }
 
-      return this.groupedMessages[this.currentContact.contactId] || [];
+      return this.groupedMessages[this.currentContact.contactName] || [];
     },
   },
 
@@ -304,20 +304,20 @@ export default {
           const messages = response.data.messages || [];
           // 把联系人的消息按联系人 id 分组存储
           messages.forEach((item) => {
-            // 这个联系人的 id 是和当前用户聊天消息的发送者 id 或接收者 id
+            // 这个联系人的名称是和当前用户聊天消息的发送者名称或接收者名称
-            const contactId =
+            const contactName =
-              item.senderId === this.currentUser.userId
+              item.senderName === this.currentUser.username
-                ? item.receiverId
+                ? item.receiverName
-                : item.senderId;
+                : item.senderName;
 
             // 把联系人 id 为属性进行分组，每个联系人id对应一个消息数组，内容有接收消息也有发送消息
-            if (!groupedMessages[contactId]) {
+            if (!groupedMessages[contactName]) {
-              groupedMessages[contactId] = [];
+              groupedMessages[contactName] = [];
             }
 
-            groupedMessages[contactId].push({
+            groupedMessages[contactName].push({
               ...item,
-              from: item.senderId === this.currentUser.userId ? "me" : "other",
+              from: item.senderName === this.currentUser.username ? "me" : "other",
               time: item.time || item.createdAt,
             });
           });
@@ -367,8 +367,8 @@ export default {
     },
 
     // 获取最后一条消息
-    getLastMessage(contactId) {
+    getLastMessage(contactName) {
-      const messageList = this.groupedMessages[contactId];
+      const messageList = this.groupedMessages[contactName];
 
       if (!messageList || messageList.length === 0) {
         return "暂无消息";
@@ -389,11 +389,23 @@ export default {
         this.$set(this.groupedMessages, this.currentContact.id, []);
       }
 
-      this.groupedMessages[this.currentContact.id].push({
+      const newMessage = {
-        id: Date.now(),
+        senderName: this.currentUser.username,
-        from: "me",
+        receiverName: this.currentContact.contactName,
         content: content,
-        time: this.getCurrentTime(),
+      };
+
+      sendMessage(newMessage)
+        .then((response) => {
+          console.log("发送消息成功", response.data);
+          this.groupedMessages[this.currentContact.contactName].push({
+            ...newMessage,
+            from: "me",
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("发送消息失败");
         });
 
       // 清空输入框
@@ -404,16 +416,6 @@ export default {
       });
     },
 
-    // 获取当前时间
-    getCurrentTime() {
-      const date = new Date();
-
-      const hours = String(date.getHours()).padStart(2, "0");
-      const minutes = String(date.getMinutes()).padStart(2, "0");
-
-      return `${hours}:${minutes}`;
-    },
-
     // 滚动到底部
     scrollToBottom() {
       const messageList = this.$refs.messageList;

src/utils/user.js

@@ -41,3 +41,12 @@ export function getContactMessages() {
     method: 'get'
   })
 }
+
+// 发送消息
+export function sendMessage(data) {
+  return request({
+    url: '/sendMessage',
+    method: 'post',
+    data
+  })
+}