聊天框数据根据最新时间逐步往上显示

src/pages/index/ChatPage.vue

@@ -152,7 +152,7 @@
           :class="activeMenu === 'settings' ? '' : 'active'"
         >
           <div
-            v-for="message in currentMessages"
+            v-for="message in contactMessages"
             :key="message.id"
             class="message-row"
             :class="{
@@ -238,7 +238,7 @@ export default {
       // 最近聊天列表
       recentChats: [],
       // 聊天消息
-      contactMessages: {},
+      contactMessages: [],
       // 搜索联系人
       searchText: "",
       // 输入的消息内容
@@ -261,15 +261,6 @@ export default {
         contact.contactName.toLowerCase().includes(keyword)
       );
     },
-
-    // 当前联系人对应的消息
-    currentMessages() {
-      if (!this.currentContact) {
-        return [];
-      }
-
-      return this.contactMessages[this.currentContact.contactName] || [];
-    },
   },
 
   created() {
@@ -350,21 +341,18 @@ export default {
         limit: limit,
       })
         .then((response) => {
-          const contactMessages = {};
+          const contactMessages = [];
           const messages = response.data.messages || [];
           // 把联系人的消息按联系人 id 分组存储
           messages.forEach((item) => {
-            if (!contactMessages[contactName]) {
+            contactMessages.push({
-              contactMessages[contactName] = [];
-            }
-            contactMessages[contactName].push({
               ...item,
               from:
                 item.senderName === this.currentUser.username ? "me" : "other",
               time: item.time || item.createdAt,
             });
           });
-          this.contactMessages = contactMessages;
+          this.contactMessages = contactMessages.reverse();
           console.log("contactMessages", contactMessages);
         })
         .catch((error) => {