SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复聊天功能未读状态问题：自己发送的消息不显示红点，进入/退出页面自动标记已读

pull/1/head
徐飞洋 2 months ago
parent
8d1784d1f8
commit
7bad740af7
2 changed files with 141 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      pages/chat-detail/index.js
  2. 154
      pages/chat/index.js

36
pages/chat-detail/index.js
View File

@ -412,6 +412,20 @@ Page({
}
console.log('消息发送成功:', res);
// 发送消息成功后，立即将该聊天标记为已查看
const viewedChats = wx.getStorageSync('viewedChats') || {};
// 获取消息ID（如果服务器返回了消息ID）
const messageId = res && res.id ? res.id : Date.now().toString();
viewedChats[managerPhone] = {
hasViewed: true,
lastViewedMessageId: messageId,
viewedTime: Date.now()
};
wx.setStorageSync('viewedChats', viewedChats);
console.log('消息发送成功后，自动标记聊天为已查看:', managerPhone);
}).catch(error => {
// 检查页面是否已卸载
if (this.isUnloaded) {
@ -458,5 +472,27 @@ Page({
clearInterval(this.data.timer);
this.setData({ timer: null });
}
// 用户退出页面时，自动将该聊天标记为已查看
const managerPhone = this.data.managerPhone;
if (managerPhone) {
const viewedChats = wx.getStorageSync('viewedChats') || {};
// 获取最后一条消息的ID
let lastMessageId = Date.now().toString();
if (this.data.messages && this.data.messages.length > 0) {
const lastMessage = this.data.messages[this.data.messages.length - 1];
lastMessageId = lastMessage.id || Date.now().toString();
}
viewedChats[managerPhone] = {
hasViewed: true,
lastViewedMessageId: lastMessageId,
viewedTime: Date.now()
};
wx.setStorageSync('viewedChats', viewedChats);
console.log('用户退出聊天详情页，自动标记聊天为已查看:', managerPhone);
}
}
});

154
pages/chat/index.js
View File

@ -266,64 +266,110 @@ Page({
const chatId = chatItem.manager_phone;
// 获取最新消息内容和时间
let lastMessage = null;
try {
const cacheKey = chatId;
const cache = this.data.chatContentCache[cacheKey];
const now = Date.now();
// 每次刷新列表时都尝试获取最新消息，确保消息实时性
const messages = await API.getChatMessages(chatId, userPhone, { limit: 1 });
if (messages.length > 0) {
lastMessage = messages[0];
chatItem.content = lastMessage.content || '暂无消息内容';
// 同时更新时间为最新消息的时间
chatItem.time = lastMessage.created_at || null;
let lastMessage = null;
try {
const cacheKey = chatId;
const cache = this.data.chatContentCache[cacheKey];
const now = Date.now();
// 更新缓存
const newCache = {
...this.data.chatContentCache,
[cacheKey]: {
content: chatItem.content,
time: chatItem.time,
timestamp: now,
messageId: lastMessage.id || lastMessage.message_id || null
}
};
this.setData({ chatContentCache: newCache });
console.log('更新聊天内容缓存:', cacheKey);
} else if (!chatItem.content) {
chatItem.content = '暂无消息内容';
}
} catch (error) {
console.error('获取聊天消息失败:', error);
// 如果获取失败，尝试使用缓存内容
const cacheKey = chatId;
const cache = this.data.chatContentCache[cacheKey];
if (cache && !chatItem.content) {
chatItem.content = cache.content;
chatItem.time = cache.time;
console.log('获取最新消息失败，使用缓存内容:', cacheKey);
} else if (!chatItem.content) {
chatItem.content = '暂无消息内容';
// 每次刷新列表时都尝试获取最新消息，确保消息实时性
const messages = await API.getChatMessages(chatId, userPhone, { limit: 1 });
if (messages.length > 0) {
lastMessage = messages[0];
chatItem.content = lastMessage.content || '暂无消息内容';
// 同时更新时间为最新消息的时间
chatItem.time = lastMessage.created_at || null;
// 更新缓存
const newCache = {
...this.data.chatContentCache,
[cacheKey]: {
content: chatItem.content,
time: chatItem.time,
timestamp: now,
messageId: lastMessage.id || lastMessage.message_id || null,
senderPhone: lastMessage.sender_phone || null // 保存发送者手机号
}
};
this.setData({ chatContentCache: newCache });
console.log('更新聊天内容缓存:', cacheKey);
} else if (!chatItem.content) {
chatItem.content = '暂无消息内容';
}
} catch (error) {
console.error('获取聊天消息失败:', error);
// 如果获取失败，尝试使用缓存内容
const cacheKey = chatId;
const cache = this.data.chatContentCache[cacheKey];
if (cache && !chatItem.content) {
chatItem.content = cache.content;
chatItem.time = cache.time;
console.log('获取最新消息失败，使用缓存内容:', cacheKey);
} else if (!chatItem.content) {
chatItem.content = '暂无消息内容';
}
}
}
// 格式化时间
chatItem.time = this.formatDateTime(chatItem.time || null);
// 未读状态判断：基于用户是否查看过该聊天
// 只在用户未查看过时显示未读红点
// 未读状态判断：基于用户查看时的最新消息ID
console.log('当前已查看的聊天:', viewedChats);
console.log('当前聊天ID:', chatId);
// 检查该聊天是否已被查看过
const isViewed = viewedChats[chatId] === true;
console.log('是否已查看:', isViewed);
// 获取当前聊天的最后一条消息ID和发送者
const currentMessageId = lastMessage ? (lastMessage.id || lastMessage.message_id) : null;
const currentMessageSender = lastMessage ? (lastMessage.sender_phone) : null;
console.log('当前最新消息ID:', currentMessageId);
console.log('当前最新消息发送者:', currentMessageSender);
console.log('当前用户手机号:', userPhone);
// 检查该聊天的查看记录
const chatViewRecord = viewedChats[chatId] || {};
const lastViewedMessageId = chatViewRecord.lastViewedMessageId;
console.log('上次查看时的消息ID:', lastViewedMessageId);
// 检查是否是用户自己发送的消息
const isMyMessage = currentMessageSender === userPhone;
console.log('是否是自己发送的消息:', isMyMessage);
// 设置未读状态：未查看过则显示未读
chatItem.unread = !isViewed;
// 如果最后一条消息是用户自己发送的，自动标记为已查看
if (isMyMessage && !chatViewRecord.hasViewed) {
console.log('最后一条消息是自己发送的，自动标记为已查看:', chatId);
viewedChats[chatId] = {
hasViewed: true,
lastViewedMessageId: currentMessageId,
viewedTime: Date.now()
};
// 立即更新本地存储
wx.setStorageSync('viewedChats', viewedChats);
// 重新获取更新后的查看记录
chatViewRecord.hasViewed = true;
chatViewRecord.lastViewedMessageId = currentMessageId;
}
// 设置未读状态：
// 1. 如果是自己发送的消息，不显示未读
// 2. 如果从未查看过且不是自己发送的，显示未读
// 3. 如果有新消息（当前消息ID不同且不是自己发送的），显示未读
// 4. 否则不显示未读
let unread = false;
if (!isMyMessage) {
if (!chatViewRecord.hasViewed) {
// 从未查看过，显示未读
unread = true;
} else if (currentMessageId && lastViewedMessageId && currentMessageId !== lastViewedMessageId) {
// 有新消息，显示未读
unread = true;
} else if (currentMessageId && !lastViewedMessageId) {
// 之前没有消息，现在有新消息，显示未读
unread = true;
}
}
chatItem.unread = unread;
console.log('设置unread的值:', chatItem.unread);
chatItem.lastMessageId = currentMessageId; // 保存当前消息ID供点击事件使用
// 保存最后一条消息的ID或内容作为标识（可选）
if (lastMessage) {
@ -444,9 +490,19 @@ Page({
}
}
// 1. 更新localStorage中的viewedChats，标记为已查看
// 1. 更新localStorage中的viewedChats，标记为已查看并记录当前最新消息ID
const viewedChats = wx.getStorageSync('viewedChats') || {};
viewedChats[chatId] = true;
// 获取当前聊天项的最新消息ID
const currentMessageId = chatItem.lastMessageId;
// 更新查看记录：包含是否已查看和查看时的最新消息ID
viewedChats[chatId] = {
hasViewed: true,
lastViewedMessageId: currentMessageId,
viewedTime: Date.now()
};
wx.setStorageSync('viewedChats', viewedChats);
console.log('更新localStorage中的viewedChats:', chatId, viewedChats[chatId]);

Write Preview
Loading…
Cancel
Save