【功能完善】商城: 客服动态计算消息最后发送时间距离现在过去了多久

Author: puhui999

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>

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;
     }
   }
 

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()
 })