发送消息时自动更新最近联系人消息列表

src/pages/index/ChatPage.vue

@@ -69,7 +69,8 @@
           class="contact-item"
           :class="{
             active:
-              currentContact && currentContact.contactName === contact.contactName,
+              currentContact &&
+              currentContact.contactName === contact.contactName,
           }"
           @click="selectContact(contact)"
         >
@@ -216,7 +217,13 @@
 </template>
 
 <script>
-import { getUserInfo, getContactInfo, getRecentMessages, getContactMessages, sendMessage } from "@/utils/api";
+import {
+  getUserInfo,
+  getContactInfo,
+  getRecentMessages,
+  getContactMessages,
+  sendMessage,
+} from "@/utils/api";
 export default {
   name: "ChatPage",
 
@@ -251,7 +258,7 @@ export default {
       const keyword = this.searchText.trim().toLowerCase();
 
       return this.recentChats.filter((contact) =>
-        contact.contactName.toLowerCase().includes(keyword),
+        contact.contactName.toLowerCase().includes(keyword)
       );
     },
 
@@ -275,7 +282,7 @@ export default {
     changeMenu(menu) {
       this.activeMenu = menu;
       this.currentContact = null;
-      if(menu === "contacts") {
+      if (menu === "contacts") {
         this.getContactList();
       }
     },
@@ -339,9 +346,9 @@ export default {
     getContactMessageList(contactName, limit) {
       // 获取当前联系人的消息列表
       getContactMessages({
-          contactName: contactName,
+        contactName: contactName,
-          limit: limit,
+        limit: limit,
-        })
+      })
         .then((response) => {
           const contactMessages = {};
           const messages = response.data.messages || [];
@@ -352,7 +359,8 @@ export default {
             }
             contactMessages[contactName].push({
               ...item,
-              from: item.senderName === this.currentUser.username ? "me" : "other",
+              from:
+                item.senderName === this.currentUser.username ? "me" : "other",
               time: item.time || item.createdAt,
             });
           });
@@ -399,8 +407,8 @@ export default {
         return;
       }
 
-      if (!this.contactMessages[this.currentContact.id]) {
+      if (!this.contactMessages[this.currentContact.contactName]) {
-        this.$set(this.contactMessages, this.currentContact.id, []);
+        this.$set(this.contactMessages, this.currentContact.contactName, []);
       }
 
       const newMessage = {
@@ -416,6 +424,28 @@ export default {
             ...newMessage,
             from: "me",
           });
+
+          // 更新最近消息列表
+          const contactName = this.currentContact.contactName;
+          const index = this.recentChats.findIndex(
+            (item) => item.contactName === contactName
+          );
+
+          if (index !== -1) { //找到这条数据，修改内容并移除后添加到数组最前面
+            const chat = this.recentChats[index];
+
+            chat.content = content;
+            chat.createdAt = newMessage.createdAt;
+
+            this.recentChats.splice(index, 1);
+            this.recentChats.unshift(chat);
+          } else { // 没有找到这条数据，直接添加到数组最前面
+            this.recentChats.unshift({
+              contactName: contactName,
+              content: content,
+              createdAt: newMessage.createdAt,
+            });
+          }
         })
         .catch((error) => {
           console.error(error);