fix: 修复消息列表的时间显示

src/components/ChatList/ChatListItem.vue

@@ -10,7 +10,7 @@
                 >{{ displayName }}</div>
                 <div
                     class="txt whitespace-nowrap overflow-hidden overflow-ellipsis flex-shrink-0"
-                >{{ latest_msg_timeStamp && timestampFormat(latest_msg_timeStamp) }}</div>
+                >{{ datetime && timestampFormat2(datetime) }}</div>
             </div>
             <div class="flex justify-between mb-5 mt-1">
                 <div
@@ -25,21 +25,20 @@
     </div>
 </template>
 <script setup lang="ts">
-import { timestampFormat } from "@/utils/time";
+import { timestampFormat2 } from "@/utils/time";
 
 const props = defineProps({
     avatar_url: { type: String, default: '--' },
     id: { type: String, default: '--' },
-    latest_msg_timeStamp: {
-        type: Number,
-        default: new Date().getTime() - 1000 * 60,
-    },
     latest_msg_content: { type: String, default: '--' },
     unReadMsgNum: {
         type: Number,
         default: 10
     },
     displayName: String,
+    datetime: {
+        type: Number,
+    }
 })
 
 </script>

src/db/ChatListCardDB.ts

@@ -35,6 +35,7 @@ export default class ChatListCardDB extends MyAppDatabase {
     targetId: string,
     count: number,
     content: string,
+    datetime: number
   ) {
     this.chatListCard
       .filter((item) => {
@@ -43,6 +44,7 @@ export default class ChatListCardDB extends MyAppDatabase {
       .modify((item) => {
         item.unreadMsgCount = count
         item.content = content
+        item.datetime = datetime
       })
   }
 
@@ -89,11 +91,15 @@ export default class ChatListCardDB extends MyAppDatabase {
 
     const unreadMsgCount = cardItem?.unreadMsgCount || 0
 
+    console.log(data.msg, 'show msg when update newest card');
+    
+
     this.updateCard(
       masterId,
       targetId,
       isChattingWithTargetId ? 0 : unreadMsgCount + 1,
       content,
+      data.msg.datetime
     )
   }
 
@@ -112,6 +118,7 @@ export default class ChatListCardDB extends MyAppDatabase {
       unreadMsgCount: data.isChattingWithTargetId ? 0 : 1,
       content,
       inChat: false,
+      datetime: data.msg.datetime
     })
   }
 

src/db/ChatMessageDB.ts

@@ -30,7 +30,7 @@ export default class ChatMessageDB extends MyAppDatabase {
   }
 
   async deleteMsg({ uuid, logid }: { uuid?: string; logid?: string }) {
-    const updateChatList = async (masterId: string, target: string) => {
+    const updateChatList = async (masterId: string, target: string, deletedMsgDatetime: number) => {
       const latestedMsg = await this.getLatestedMessage(masterId, target)
 
       if (latestedMsg) {
@@ -38,23 +38,29 @@ export default class ChatMessageDB extends MyAppDatabase {
         // latestedMsg.content.content
         this.chatListCard
           .filter((i) => i.masterId === masterId && i.targetId === target)
-          .modify((i) => (i.content = latestedMsg.content.content as string))
+          .modify((i) => {
+            i.content = latestedMsg.content.content as string;
+            i.datetime = latestedMsg.datetime;
+          })
       } else {
         /* 如果和target没有聊天消息 */
         this.chatListCard
           .filter((i) => i.masterId === masterId && i.targetId === target)
-          .modify((i) => (i.content = ''))
+          .modify((i) => {
+            i.content = ''
+            i.datetime = deletedMsgDatetime
+          })
       }
     }
 
     if (uuid) {
       const item = await this.chatMessage.where('uuid').equals(uuid).first()
       await this.chatMessage.where('uuid').equals(uuid).delete()
-      item && updateChatList(item?.masterId, getTargetIdFromDisplayMsg(item))
+      item && updateChatList(item?.masterId, getTargetIdFromDisplayMsg(item), item?.datetime)
     } else if (logid) {
       const item = await this.chatMessage.where('logid').equals(logid).first()
       await this.chatMessage.where('logid').equals(logid).delete()
-      item && updateChatList(item?.masterId, getTargetIdFromDisplayMsg(item))
+      item && updateChatList(item?.masterId, getTargetIdFromDisplayMsg(item), item?.datetime)
     } else {
       throw new Error('没有uuid或者logid')
     }

src/db/index.ts

@@ -11,6 +11,7 @@ export interface iChatListCard {
   targetId: string
   unreadMsgCount: number
   content: string
+  datetime: number
   inChat: boolean // 会话状态，会话中？
 }
 
@@ -23,7 +24,7 @@ export class MyAppDatabase extends Dexie {
   constructor() {
     super('MyAppDatabase')
 
-    this.version(1.2).stores({
+    this.version(1.3).stores({
       chatMessage:
         '++id, content, from, uuid, state, uploadProgress, type, datetime, hideDatetime, logid, masterId, readed',
       chatListCard: '++id, masterId, targetId, unreadMsgCount, content, inChat',

src/utils/time.ts

@@ -63,6 +63,63 @@ export function timestampFormat(timestamp: number) {
   }
 }
 
+/* timestampFormat版本2，参照微信设计的最新消息时间显示， HH:mm   昨天 MM/dd */
+export function timestampFormat2(timestamp: number) {
+  if (String(timestamp).length === new Date().getTime().toString().length) {
+    timestamp /= 1000
+  }
+
+  function zeroize(num: number) {
+    return (String(num).length == 1 ? '0' : '') + num
+  }
+
+  var curTimestamp = new Date().getTime() / 1000 //当前时间戳
+  var timestampDiff = curTimestamp - timestamp // 参数时间戳与当前时间戳相差秒数
+
+  var curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
+  var tmDate = new Date(timestamp * 1000) // 参数时间戳转换成的日期对象
+
+  var Y = tmDate.getFullYear(),
+    m = tmDate.getMonth() + 1,
+    d = tmDate.getDate()
+  var H = tmDate.getHours(),
+    i = tmDate.getMinutes(),
+    s = tmDate.getSeconds()
+
+  if (
+    curDate.getFullYear() == Y &&
+    curDate.getMonth() + 1 == m &&
+    curDate.getDate() == d
+  ) {
+    return zeroize(H) + ':' + zeroize(i)
+  } else {
+    var newDate = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
+    if (
+      newDate.getFullYear() == Y &&
+      newDate.getMonth() + 1 == m &&
+      newDate.getDate() == d
+    ) {
+      return '昨天' + zeroize(H) + ':' + zeroize(i)
+    } else if (curDate.getFullYear() == Y) {
+      return (
+        zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
+      )
+    } else {
+      return (
+        Y +
+        '年' +
+        zeroize(m) +
+        '月' +
+        zeroize(d) +
+        '日 ' +
+        zeroize(H) +
+        ':' +
+        zeroize(i)
+      )
+    }
+  }
+}
+
 export function format(timestamp: string, format: string) {
   return dayjs(timestamp).format(format)
 }

src/views/withMenu/ChatList/index.vue

@@ -18,6 +18,7 @@
                             :id="item.targetId"
                             :displayName="item.displayName"
                             :latest_msg_content="item.content"
+                            :datetime="item.datetime"
                         ></ChatListItem>
                     </template>
                 </van-popover>