fix(weChat): 修复消息加载顺序和加载状态显示问题
调整消息数组拼接顺序,确保新消息正确追加 添加加载状态图标并优化加载更多消息的逻辑 设置消息加载状态延迟更新以避免闪烁
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { Avatar, Divider } from "antd";
|
||||
import { UserOutlined } from "@ant-design/icons";
|
||||
import { UserOutlined, LoadingOutlined } from "@ant-design/icons";
|
||||
import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
|
||||
import { formatWechatTime } from "@/utils/common";
|
||||
import styles from "./MessageRecord.module.scss";
|
||||
@@ -194,11 +194,40 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const loadMoreMessages = () => {
|
||||
// 兼容性处理:检查消息数组和时间戳
|
||||
if (!currentMessages || currentMessages.length === 0) {
|
||||
console.warn("No messages available for loading more");
|
||||
return;
|
||||
}
|
||||
|
||||
const firstMessage = currentMessages[0];
|
||||
if (!firstMessage || !firstMessage.createTime) {
|
||||
console.warn("Invalid message or createTime");
|
||||
return;
|
||||
}
|
||||
|
||||
// 兼容性处理:确保时间戳格式正确
|
||||
let timestamp;
|
||||
try {
|
||||
const date = new Date(firstMessage.createTime);
|
||||
if (isNaN(date.getTime())) {
|
||||
console.warn("Invalid createTime format:", firstMessage.createTime);
|
||||
return;
|
||||
}
|
||||
timestamp = date.getTime() - 20000;
|
||||
} catch (error) {
|
||||
console.error("Error parsing createTime:", error);
|
||||
return;
|
||||
}
|
||||
|
||||
loadChatMessages(false, timestamp);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.messagesContainer}>
|
||||
<div className={styles.loadMore} onClick={() => loadChatMessages(false)}>
|
||||
点击加载更早的信息{messagesLoading ? "中" : "1"}
|
||||
<div className={styles.loadMore} onClick={() => loadMoreMessages()}>
|
||||
点击加载更早的信息 {messagesLoading ? <LoadingOutlined /> : ""}
|
||||
</div>
|
||||
{groupMessagesByTime(currentMessages).map((group, groupIndex) => (
|
||||
<React.Fragment key={`group-${groupIndex}`}>
|
||||
|
||||
@@ -72,8 +72,8 @@ export const useWeChatStore = create<WeChatState>()(
|
||||
} else {
|
||||
set({
|
||||
currentMessages: [
|
||||
...state.currentMessages,
|
||||
...(messages || []),
|
||||
...state.currentMessages,
|
||||
],
|
||||
});
|
||||
}
|
||||
@@ -85,8 +85,8 @@ export const useWeChatStore = create<WeChatState>()(
|
||||
} else {
|
||||
set({
|
||||
currentMessages: [
|
||||
...state.currentMessages,
|
||||
...(messages || []),
|
||||
...state.currentMessages,
|
||||
],
|
||||
});
|
||||
}
|
||||
@@ -94,7 +94,9 @@ export const useWeChatStore = create<WeChatState>()(
|
||||
} catch (error) {
|
||||
console.error("获取聊天消息失败:", error);
|
||||
} finally {
|
||||
set({ messagesLoading: false });
|
||||
setTimeout(() => {
|
||||
set({ messagesLoading: false });
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user