feat: 优化消息滚动加载功能

src/views/SystemMessage/src/SystemMessage.vue

@@ -80,7 +80,7 @@ const unreadNotificationList = ref<any[]>([])
 // })
 const readNotificationList = ref<any[]>([])
 const pageInfo = ref({
-  cp: 1,
+  cp: 0,
   ps: 5
 })
 const getNotificationList = async (
@@ -88,6 +88,15 @@ const getNotificationList = async (
   isChangeNav: boolean = false
 ) => {
   loading.value = true
+  if (isChangeNav) {
+    pageInfo.value.cp = 1
+    notificationMessageCardRef.value.finished = false
+    unreadNotificationList.value = []
+    readNotificationList.value = []
+    notificationList.value = []
+  } else {
+    pageInfo.value.cp += 1
+  }
   const rulesType = Object.entries(notificationTypeList.value).find(
     (item) => item[1] === activeCardTypeName.value
   )?.[0]
@@ -109,30 +118,61 @@ const getNotificationList = async (
         info_type
       })
       .then((res) => {
-        if (res.code === 200) {
-          const data = res.data
-          notificationList.value = [...notificationList.value, ...data.cardList]
-          // tabCountList.value = data.countList
-          !data?.cardList?.length && (notificationMessageCardRef.value.finished = true)
-          if (tabType === 'All Notifications') {
-            tabCountList.value = data.countList
-            if (isChangeNav) {
-              notificationList.value = [...data.cardList]
-            } else {
-              notificationList.value = [...notificationList.value, ...data.cardList]
-            }
-          } else if (tabType === 'Unread') {
-            unreadNotificationList.value = [...unreadNotificationList.value, ...data.cardList]
-          } else {
-            readNotificationList.value = [...readNotificationList.value, ...data.cardList]
-          }
+        // if (res.code === 200) {
+        //   const data = res.data
+        //   if (!data?.cardList?.length || data?.cardList?.length < pageInfo.value.ps) {
+        //     notificationMessageCardRef.value.finished = true
+        //   }
+
+        //   if (tabType === 'All Notifications') {
+        //     tabCountList.value = data.countList
+        //     if (isChangeNav) {
+        //       notificationList.value = [...data.cardList]
+        //     } else {
+        //       notificationList.value = [...notificationList.value, ...data.cardList]
+        //     }
+        //   } else if (tabType === 'Unread') {
+        //     if (isChangeNav) {
+        //       unreadNotificationList.value = [...data.cardList]
+        //     } else {
+        //       unreadNotificationList.value = [...unreadNotificationList.value, ...data.cardList]
+        //     }
+        //   } else {
+        //     if (isChangeNav) {
+        //       readNotificationList.value = [...data.cardList]
+        //     } else {
+        //       readNotificationList.value = [...readNotificationList.value, ...data.cardList]
+        //     }
+        //   }
+        // }
+        const data = res.data
+
+        // 判断是否结束加载
+        if (!data?.cardList?.length || data.cardList.length < pageInfo.value.ps) {
+          notificationMessageCardRef.value.finished = true
+        }
+
+        const lists = {
+          'All Notifications': { list: notificationList, count: tabCountList },
+          Unread: { list: unreadNotificationList },
+          Read: { list: readNotificationList }
+        }
+
+        const config = lists[tabType]
+        if (config) {
+          config.list.value = isChangeNav
+            ? [...data.cardList]
+            : [...config.list.value, ...data.cardList]
+        }
+
+        if (config?.count) {
+          config.count.value = data.countList
         }
       })
       .finally(() => {
         loading.value = false
         curTabCount.value = []
         notificationMessageCardRef.value.loading = false
-        isChangeNav && (pageInfo.value.cp += 1)
       })
   } catch (error) {
     loading.value = false
@@ -140,10 +180,6 @@ const getNotificationList = async (
   }
 }
 const notificationMessageCardRef = ref()
-const handleMessageLoading = async () => {
-  pageInfo.value.cp += 1
-  await getNotificationList(activeTabName.value)
-}
 
 const changeCardRead = () => {
   const readCardMap = notificationMsgStore.readCardMap
@@ -163,6 +199,7 @@ const handleTabChange = () => {
   //     item.info.isRead = true
   //   }
   // })
+
   pageInfo.value.cp = 1
   getNotificationList(activeTabName.value, true)
 }
@@ -237,6 +274,7 @@ onMounted(() => {
           <el-tab-pane label="Unread" name="Unread">
             <template #label>
               <span style="margin-right: 4px">Unread</span>
+              <span>{{ unreadNotificationList.length }}</span>
               <div
                 class="count"
                 :style="{ 'padding-top': isMac ? 0 : '1px' }"
@@ -255,6 +293,7 @@ onMounted(() => {
                 :isShowInsertionTime="true"
                 :updateReadCardsOnChange="false"
                 @loading="getNotificationList('Unread')"
+                ref="notificationMessageCardRef"
               ></NotificationMessageCard>
             </div>
           </el-tab-pane>
@@ -268,6 +307,7 @@ onMounted(() => {
                 :isShowInsertionTime="true"
                 :data="readNotificationList"
                 @loading="getNotificationList('Read')"
+                ref="notificationMessageCardRef"
               >
               </NotificationMessageCard>
             </div>

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -157,7 +157,6 @@ const handleGuide = () => {
     return
   }
   const { start } = useDriver(steps)
-  console.log(allData.value?.transportInfo?.mode, 'value')
   start() // 开始引导
 }