Seven/chat-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化联系人消息获取

Browse Source
This commit is contained in:
Seven
2026-09-14 21:31:34 +08:00
parent b959d1dcc5
commit 25c684d16b
2 changed files with 85 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/ChatPage.vue
+76 -58
View File
@@ -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() {
// 清除 token 和用户信息
this.$store.commit("SET_TOKEN", "");
this.$store.commit("SET_USERNAME", "");
this.$router.push("/login");
getMessageList() {
// 获取当前用户的联系人消息列表
getContactMessages()
.then((response) => {
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]) {
this.$set(this.messages, this.currentContact.id, []);
if (!this.groupedMessages[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
+9 -1
View File
@@ -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'
})
}