From 416df14b8caff12dae98de6629706fdf6c2c262e Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 17 Jul 2024 11:25:26 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?= =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E9=87=8D=E6=9E=84=E6=B6=88=E6=81=AF=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kefu/components/KeFuMessageList.vue | 80 ++++++++++++------- src/views/mall/promotion/kefu/index.vue | 4 +- 2 files changed, 53 insertions(+), 31 deletions(-) diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue index a43ab0ec..bdcab5dc 100644 --- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue +++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue @@ -108,6 +108,7 @@ import { UserTypeEnum } from '@/utils/constants' import { formatDate } from '@/utils/formatTime' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' +import { debounce } from 'lodash-es' dayjs.extend(relativeTime) @@ -127,17 +128,7 @@ const queryParams = reactive({ const total = ref(0) // 消息总条数 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效 /** 获得消息列表 */ -const getMessageList = async (val: KeFuConversationRespVO, conversationChange: boolean) => { - // 会话切换,重置相关参数 - if (conversationChange) { - queryParams.pageNo = 1 - messageList.value = [] - total.value = 0 - loadHistory.value = false - refreshContent.value = false - } - conversation.value = val - queryParams.conversationId = val.id +const getMessageList = async () => { const res = await KeFuMessageApi.getKeFuMessagePage(queryParams) total.value = res.total // 情况一：加载最新消息 @@ -146,14 +137,20 @@ const getMessageList = async (val: KeFuConversationRespVO, conversationChange: b } else { // 情况二：加载历史消息 for (const item of res.list) { - if (messageList.value.some((val) => val.id === item.id)) { - continue - } - messageList.value.push(item) + pushMessage(item) } } refreshContent.value = true - await scrollToBottom() +} +/** 添加消息 */ +const pushMessage = (message: any) => { + if (message.conversationId !== conversation.value.id) { + return + } + if (messageList.value.some((val) => val.id === message.id)) { + return + } + messageList.value.push(message) } /** 按照时间倒序，获取消息列表 */ @@ -163,20 +160,40 @@ const getMessageList0 = computed(() => { }) /** 刷新消息列表 */ -const refreshMessageList = async () => { +const refreshMessageList = async (message?: any) => { if (!conversation.value) { return } - queryParams.pageNo = 1 - await getMessageList(conversation.value, false) + if (typeof message !== 'undefined') { + pushMessage(message) + } else { + queryParams.pageNo = 1 + await getMessageList() + } + if (loadHistory.value) { // 右下角显示有新消息提示 showNewMessageTip.value = true + } else { + // 滚动到最新消息处 + await handleToNewMessage() } } - -defineExpose({ getMessageList, refreshMessageList }) +const getNewMessageList = async (val: KeFuConversationRespVO) => { + // 会话切换,重置相关参数 + queryParams.pageNo = 1 + messageList.value = [] + total.value = 0 + loadHistory.value = false + refreshContent.value = false + // 设置会话相关属性 + conversation.value = val + queryParams.conversationId = val.id + // 获取消息 + await refreshMessageList() +} +defineExpose({ getNewMessageList, refreshMessageList }) const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域 const skipGetMessageList = computed(() => { // 已加载到最后一页的话则不触发新的消息获取 @@ -221,9 +238,7 @@ const sendMessage = async (msg: any) => { await KeFuMessageApi.sendKeFuMessage(msg) message.value = '' // 加载消息列表 - await getMessageList(conversation.value, false) - // 滚动到最新消息处 - await scrollToBottom() + await refreshMessageList() } /** 滚动到底部 */ @@ -248,17 +263,24 @@ const handleToNewMessage = async () => { await scrollToBottom() } -/** 加载历史消息 */ const loadHistory = ref(false) // 加载历史消息 -const handleScroll = async ({ scrollTop }) => { +/** 处理消息列表滚动事件(debounce 限流) */ +const handleScroll = debounce(({ scrollTop }) => { if (skipGetMessageList.value) { return } // 触顶自动加载下一页数据 if (scrollTop === 0) { - await handleOldMessage() + handleOldMessage() } -} + const wrap = scrollbarRef.value?.wrapRef + // 触底重置 + if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) { + loadHistory.value = false + refreshMessageList() + } +}, 200) +/** 加载历史消息 */ const handleOldMessage = async () => { // 记录已有页面高度 const oldPageHeight = innerRef.value?.clientHeight @@ -268,7 +290,7 @@ const handleOldMessage = async () => { loadHistory.value = true // 加载消息列表 queryParams.pageNo += 1 - await getMessageList(conversation.value, false) + await getMessageList() // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置 scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight) } diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue index fae88d71..06a6f02b 100644 --- a/src/views/mall/promotion/kefu/index.vue +++ b/src/views/mall/promotion/kefu/index.vue @@ -60,7 +60,7 @@ watchEffect(() => { // 刷新会话列表 getConversationList() // 刷新消息列表 - keFuChatBoxRef.value?.refreshMessageList() + keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content)) return } // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ @@ -82,7 +82,7 @@ const getConversationList = () => { /** 加载指定会话的消息列表 */ const keFuChatBoxRef = ref>() const handleChange = (conversation: KeFuConversationRespVO) => { - keFuChatBoxRef.value?.getMessageList(conversation, true) + keFuChatBoxRef.value?.getNewMessageList(conversation) } /** 初始化 */ From 34542cae4beeee3dabf5e3e2f2684c631e597f37 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Wed, 17 Jul 2024 15:17:58 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?= =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E8=AE=A2=E5=8D=95=E5=8D=A1=E7=89=87=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/message/OrderMessageItem.vue | 40 +++---------------- .../kefu/components/message/ProductItem.vue | 29 +++++--------- 2 files changed, 17 insertions(+), 52 deletions(-) diff --git a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue index 61c81e47..0422575d 100644 --- a/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue +++ b/src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue @@ -13,7 +13,7 @@
订单号：{{ getMessageContent.no }}
-
+
{{ formatOrderStatus(getMessageContent) }}
@@ -26,7 +26,7 @@ :title="item.spuName" />
-
+
共 {{ getMessageContent?.productCount }} 件商品,总金额: @@ -108,23 +108,23 @@ function formatOrderStatus(order: any) { background-color: #e2e2e2; .order-card-header { - height: 80px; + height: 28px; .order-no { - font-size: 26px; + font-size: 16px; font-weight: 500; } } .pay-box { .discounts-title { - font-size: 24px; + font-size: 16px; line-height: normal; color: #999999; } .discounts-money { - font-size: 24px; + font-size: 16px; line-height: normal; color: #999; font-family: OPPOSANS; @@ -134,34 +134,6 @@ function formatOrderStatus(order: any) { color: #333; } } - - .order-card-footer { - height: 100px; - - .more-item-box { - padding: 20px; - - .more-item { - height: 60px; - - .title { - font-size: 26px; - } - } - } - - .more-btn { - color: #999999; - font-size: 24px; - } - - .content { - width: 154px; - color: #333333; - font-size: 26px; - font-weight: 500; - } - } } .warning-color { diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue index 39233deb..7808023d 100644 --- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue +++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue @@ -110,33 +110,26 @@ const skuString = computed(() => { diff --git a/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue new file mode 100644 index 00000000..3c2d0dd0 --- /dev/null +++ b/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/views/mall/promotion/kefu/components/index.ts b/src/views/mall/promotion/kefu/components/index.ts index 88e52832..585d0da7 100644 --- a/src/views/mall/promotion/kefu/components/index.ts +++ b/src/views/mall/promotion/kefu/components/index.ts @@ -1,4 +1,5 @@ import KeFuConversationList from './KeFuConversationList.vue' import KeFuMessageList from './KeFuMessageList.vue' +import MemberBrowsingHistory from './history/MemberBrowsingHistory.vue' -export { KeFuConversationList, KeFuMessageList } +export { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue index 06a6f02b..03deb895 100644 --- a/src/views/mall/promotion/kefu/index.vue +++ b/src/views/mall/promotion/kefu/index.vue @@ -1,22 +1,28 @@ diff --git a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue b/src/views/mall/promotion/kefu/components/message/MessageItem.vue similarity index 53% rename from src/views/mall/promotion/kefu/components/message/TextMessageItem.vue rename to src/views/mall/promotion/kefu/components/message/MessageItem.vue index fd4b6edb..c3033ac3 100644 --- a/src/views/mall/promotion/kefu/components/message/TextMessageItem.vue +++ b/src/views/mall/promotion/kefu/components/message/MessageItem.vue @@ -1,8 +1,7 @@ @@ -16,17 +20,22 @@ diff --git a/src/views/mall/promotion/kefu/components/message/OrderItem.vue b/src/views/mall/promotion/kefu/components/message/OrderItem.vue index 80a4ab72..47c8df80 100644 --- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue +++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue @@ -1,5 +1,5 @@