diff --git a/src/store/modules/mall/kefu.ts b/src/store/modules/mall/kefu.ts index 89e88d84..fae52f70 100644 --- a/src/store/modules/mall/kefu.ts +++ b/src/store/modules/mall/kefu.ts @@ -4,7 +4,6 @@ import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotio import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message' import { isEmpty } from '@/utils/is' -// TODO puhui999: 待优化完善 interface MallKefuInfoVO { conversationList: KeFuConversationRespVO[] // 会话列表 conversationMessageList: Map // 会话消息 @@ -19,11 +18,17 @@ export const useMallKefuStore = defineStore('mall-kefu', { getConversationList(): KeFuConversationRespVO[] { return this.conversationList }, - getConversationMessageList(): Map { - return this.conversationMessageList + getConversationMessageList(): (conversationId: number) => KeFuMessageRespVO[] | undefined { + return (conversationId: number) => this.conversationMessageList.get(conversationId) } }, actions: { + //======================= 会话消息相关 ======================= + /** 缓存历史消息 */ + saveMessageList(conversationId: number, messageList: KeFuMessageRespVO[]) { + this.conversationMessageList.set(conversationId, messageList) + }, + //======================= 会话相关 ======================= /** 加载会话缓存列表 */ async setConversationList() { this.conversationList = await KeFuConversationApi.getConversationList() diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue index cd2c2e96..7afa711e 100644 --- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue +++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue @@ -93,6 +93,10 @@ const emits = defineEmits<{ (e: 'change', v: KeFuConversationRespVO): void }>() const openRightMessage = (item: KeFuConversationRespVO) => { + // 同一个会话则不处理 + if (activeConversationId.value === item.id) { + return + } activeConversationId.value = item.id emits('change', item) } diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue index 80131a65..afea61ca 100644 --- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue +++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue @@ -236,19 +236,20 @@ const refreshMessageList = async (message?: any) => { } } -/** 获得新会话的消息列表 */ -// TODO @puhui999:可优化:可以考虑本地做每个会话的消息 list 缓存;然后点击切换时,读取缓存;然后异步获取新消息,merge 下; +/** 获得新会话的消息列表, 点击切换时,读取缓存;然后异步获取新消息,merge 下; */ const getNewMessageList = async (val: KeFuConversationRespVO) => { - // 会话切换,重置相关参数 - messageList.value = [] - total.value = 0 + // 1. 缓存当前会话消息列表 + kefuStore.saveMessageList(conversation.value.id, messageList.value) + // 2.1 会话切换,重置相关参数 + messageList.value = kefuStore.getConversationMessageList(val.id) || [] + total.value = messageList.value.length || 0 loadHistory.value = false refreshContent.value = false - // 设置会话相关属性 + // 2.2 设置会话相关属性 conversation.value = val queryParams.conversationId = val.id queryParams.createTime = undefined - // 获取消息 + // 3. 获取消息 await refreshMessageList() } defineExpose({ getNewMessageList, refreshMessageList }) @@ -299,8 +300,8 @@ const sendMessage = async (msg: any) => { message.value = '' // 加载消息列表 await refreshMessageList() - // 异步刷新 - kefuStore.updateConversation(conversation.value.id) + // 更新会话缓存 + await kefuStore.updateConversation(conversation.value.id) } /** 滚动到底部 */