优化联系人消息获取

src/pages/index/ChatPage.vue

@@ -41,45 +41,15 @@
         <input v-model="searchText" type="text" placeholder="搜索联系人" />
       </div>
 
-      <!-- 联系人列表 -->
+      <!-- 最近联系人列表 -->
-      <!-- 
       <div class="message-list">
         <div
           v-for="contact in filteredContacts"
-          :key="contact.id"
-          class="contact-item"
-          :class="{
-            active: currentContact && currentContact.id === contact.id,
-          }"
-          @click="selectContact(contact)"
-        >
-          <div class="avatar">
-            {{ contact.name.charAt(0) }}
-          </div>
-
-          <div class="contact-info">
-            <div class="contact-name">
-              {{ contact.name }}
-            </div>
-
-            <div class="last-message">
-              {{ getLastMessage(contact.id) }}
-            </div>
-          </div>
-
-          <div v-if="contact.unread > 0" class="unread">
-            {{ contact.unread }}
-          </div>
-        </div>
-      </div>
-      -->
-
-      <!-- 联系人列表 -->
-      <div class="contact-list">
-        <div
-          v-for="contact in contactList"
           :key="contact.contactId"
           class="contact-item"
+          :class="{
+            active: currentContact && currentContact.contactId === contact.contactId,
+          }"
           @click="selectContact(contact)"
         >
           <div class="avatar">
@@ -90,9 +60,18 @@
             <div class="contact-name">
               {{ contact.contactName }}
             </div>
+
+            <div class="last-message">
+              {{ getLastMessage(contact.contactId) }}
+            </div>
+          </div>
+
+          <div v-if="contact.unread > 0" class="unread">
+            {{ contact.unread }}
           </div>
         </div>
       </div>
+
     </div>
 
     <!-- 右侧聊天区域 -->
@@ -108,7 +87,7 @@
         <!-- 聊天顶部 -->
         <div class="chat-header">
           <div class="avatar">
-            {{ currentContact.name.charAt(0) }}
+            {{ currentContact.contactName.charAt(0) }}
           </div>
 
           <div class="chat-user-info">
@@ -135,7 +114,7 @@
           >
             <!-- 对方头像 -->
             <div v-if="message.from === 'other'" class="avatar message-avatar">
-              {{ currentContact.name.charAt(0) }}
+              {{ currentContact.contactName.charAt(0) }}
             </div>
 
             <div class="message-content">
@@ -190,7 +169,7 @@
 </template>
 
 <script>
-import { getUserInfo, getContactInfo } from "@/utils/user";
+import { getUserInfo, getContactInfo, getContactMessages } from "@/utils/user";
 export default {
   name: "ChatPage",
 
@@ -207,7 +186,7 @@ export default {
       currentContact: null,
 
       // 聊天消息
-      messages: {},
+      groupedMessages: {},
     };
   },
 
@@ -220,7 +199,7 @@ export default {
 
       const keyword = this.searchText.trim().toLowerCase();
 
-      return this.contacts.filter((contact) =>
+      return this.contactList.filter((contact) =>
         contact.name.toLowerCase().includes(keyword),
       );
     },
@@ -231,23 +210,23 @@ export default {
         return [];
       }
 
-      return this.messages[this.currentContact.id] || [];
+      return this.groupedMessages[this.currentContact.contactId] || [];
     },
   },
 
-  mounted() {
-    // 默认选择第一个联系人
-    // if (this.contacts.length > 0) {
-    //   this.selectContact(this.contacts[0]);
-    // }
-  },
-
   created() {
     this.getCurrentUser();
-    // this.getContactList();
+    this.getContactList();
+    this.getMessageList();
   },
 
   methods: {
+    logout() {
+      // 清除 token 和用户信息
+      this.$store.commit("SET_TOKEN", "");
+      this.$store.commit("SET_USERNAME", "");
+      this.$router.push("/login");
+    },
     getCurrentUser() {
       // 获取当前登录用户信息
       getUserInfo()
@@ -260,16 +239,48 @@ export default {
           this.$router.push("/login");
         });
     },
-    logout() {
+    getMessageList() {
-      // 清除 token 和用户信息
+      // 获取当前用户的联系人消息列表
-      this.$store.commit("SET_TOKEN", "");
+      getContactMessages()
-      this.$store.commit("SET_USERNAME", "");
+        .then((response) => {
-      this.$router.push("/login");
+          const groupedMessages = {};
+          const messages = response.data.messages || [];
+          // 把联系人的消息按联系人 id 分组存储
+          messages.forEach((item) => {
+            // 这个联系人的 id 是和当前用户聊天消息的发送者 id 或接收者 id
+            const contactId =
+              item.senderId === this.currentUser.userId
+                ? item.receiverId
+                : item.senderId;
+            
+            // 把联系人 id 为属性进行分组，每个联系人id对应一个消息数组，内容有接收消息也有发送消息
+            if (!groupedMessages[contactId]) {
+              groupedMessages[contactId] = [];
+            }
+
+            groupedMessages[contactId].push({
+              ...item,
+              from: item.senderId === this.currentUser.userId ? "me" : "other",
+              time: item.time || item.createdAt,
+            });
+          });
+          this.groupedMessages = groupedMessages;
+          console.log("groupedMessages", groupedMessages)
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("获取消息列表失败");
+        });
     },
     getContactList() {
       getContactInfo()
         .then((response) => {
-          this.contactList = response.data.contacts;
+          this.contactList = response.data.contacts.map((contact) => ({
+            ...contact,
+            unread: contact.unread || 0,
+          }));
+          console.log("contactList", this.contactList);
+          this.selectFirstContact();
         })
         .catch((error) => {
           console.error(error);
@@ -289,9 +300,16 @@ export default {
       });
     },
 
+    // 选择第一个联系人
+    selectFirstContact() {
+      if (!this.currentContact && this.contactList.length > 0) {
+        this.selectContact(this.contactList[0]);
+      }
+    },
+
     // 获取最后一条消息
     getLastMessage(contactId) {
-      const messageList = this.messages[contactId];
+      const messageList = this.groupedMessages[contactId];
 
       if (!messageList || messageList.length === 0) {
         return "暂无消息";
@@ -308,11 +326,11 @@ export default {
         return;
       }
 
-      if (!this.messages[this.currentContact.id]) {
+      if (!this.groupedMessages[this.currentContact.id]) {
-        this.$set(this.messages, this.currentContact.id, []);
+        this.$set(this.groupedMessages, this.currentContact.id, []);
       }
 
-      this.messages[this.currentContact.id].push({
+      this.groupedMessages[this.currentContact.id].push({
         id: Date.now(),
         from: "me",
         content: content,

src/utils/user.js

@@ -29,7 +29,15 @@ export function getUserInfo() {
 // 获取用户的联系人信息
 export function getContactInfo() {
   return request({
-    url: '/contactInfo',
+    url: '/contactsInfo',
+    method: 'get'
+  })
+}
+
+// 获取用户的联系人消息
+export function getContactMessages() {
+  return request({
+    url: '/messagesInfo',
     method: 'get'
   })
 }