From 4d2c038972602271d700c78d88095b9b689a7199 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 20 Nov 2024 23:44:25 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=AE=A1=E7=AE=97=E6=B6=88=E6=81=AF=E6=9C=80=E5=90=8E?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E6=97=B6=E9=97=B4=E8=B7=9D=E7=A6=BB=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=A8=E8=BF=87=E5=8E=BB=E4=BA=86=E5=A4=9A=E4=B9=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  | 20 ++++++++++++++++++-
 .../kefu/components/KeFuMessageList.vue       | 12 +++++------
 src/views/mall/promotion/kefu/index.vue       |  7 ++++---
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 3f28f9c2..042a29fd 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -26,7 +26,7 @@
           <div class="flex justify-between items-center w-100%">
             <span class="username">{{ item.userNickname }}</span>
             <span class="color-[#999]" style="font-size: 13px">
-              {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
+              {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
             </span>
           </div>
           <!-- 最后聊天内容 -->
@@ -89,6 +89,14 @@ const { replaceEmoji } = useEmoji()
 const activeConversationId = ref(-1) // 选中的会话
 const collapse = computed(() => appStore.getCollapse) // 折叠菜单
 
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>())
+/** 计算消息最后发送时间距离现在过去了多久 */
+const calculationLastMessageTime = () => {
+  kefuStore.getConversationList?.forEach((item) => {
+    lastMessageTimeMap.value.set(item.id, formatPast(item.lastMessageTime, 'YYYY-MM-DD'))
+  })
+}
+defineExpose({ calculationLastMessageTime })
 /** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
@@ -177,6 +185,16 @@ watch(showRightMenu, (val) => {
     document.body.removeEventListener('click', closeRightMenu)
   }
 })
+
+const timer = ref<any>()
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10) // 十秒计算一次
+})
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 87c0112d..68bd4324 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -414,7 +414,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       .kefu-message {
         background-color: rgb(245, 245, 245);
         margin-left: 10px;
-        margin-top: 18px;
+        margin-top: 3px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         border-bottom-left-radius: 10px;
@@ -427,7 +427,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       .kefu-message {
         background-color: rgb(206, 223, 255);
         margin-right: 10px;
-        margin-top: 18px;
+        margin-top: 3px;
         border-top-left-radius: 10px;
         border-bottom-right-radius: 10px;
         border-bottom-left-radius: 10px;
@@ -454,11 +454,11 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
     .date-message,
     .system-message {
       width: fit-content;
-      border-radius: 12rpx;
-      padding: 8rpx 16rpx;
-      margin-bottom: 16rpx;
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      padding: 0 5px;
       color: #999;
-      font-size: 24rpx;
+      font-size: 10px;
     }
   }
 
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 553f69c2..f0fa2a02 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -31,7 +31,6 @@ const server = ref(
 ) // WebSocket 服务地址
 
 /** 发起 WebSocket 连接 */
-// TODO puhui999: websocket 连接有点问题收不到消息 🤣
 const { data, close, open } = useWebSocket(server.value, {
   autoReconnect: true,
   heartbeat: true
@@ -49,7 +48,6 @@ watchEffect(() => {
     }
     // 2.1 解析 type 消息类型
     const jsonMessage = JSON.parse(data.value)
-    console.log(jsonMessage)
     const type = jsonMessage.type
     if (!type) {
       message.error('未知的消息类型：' + data.value)
@@ -83,10 +81,13 @@ const handleChange = (conversation: KeFuConversationRespVO) => {
   memberInfoRef.value?.initHistory(conversation)
 }
 
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
 /** 初始化 */
 onMounted(() => {
   /** 加载会话列表 */
-  kefuStore.setConversationList()
+  kefuStore.setConversationList().then(() => {
+    keFuConversationRef.value?.calculationLastMessageTime()
+  })
   // 打开 websocket 连接
   open()
 })