【功能完善】客服聊天历史数据加载和回到顶部

pages/chat/components/messageList.vue

@@ -1,9 +1,13 @@
 <template>
   <!--  聊天列表使用scroll-view原生组件，整体倒置  -->
-  <scroll-view ref="scrollRef" class="chat-scroll-view" scroll-y :refresher-enabled="false"
+  <scroll-view ref="scrollRef" :scroll-top="scroll.top" class="chat-scroll-view" scroll-y :refresher-enabled="false"
-               @scroll="onScroll" style="transform: scaleY(-1);">
+               @scroll="onScroll" @scrolltolower="loadMoreHistory" style="transform: scaleY(-1);">
     <!-- 消息列表容器 -->
     <view class="message-container">
+      <!-- 加载更多提示 -->
+      <view v-if="isLoading" class="loading-more" style="transform: scaleY(-1);">
+        <text>加载中...</text>
+      </view>
       <!-- 消息列表 -->
       <view class="message-list">
         <view v-for="(item, index) in messageList" :key="item.id" class="message-item"
@@ -18,7 +22,7 @@
 
   <!-- 底部聊天输入框 -->
   <su-fixed bottom>
-    <view v-if="showNewMessageTip" :style="backToTopStyle">
+    <view v-if="showNewMessageTip" :style="backToTopStyle" @click="scrollToTop">
       <text>有新消息</text>
     </view>
     <slot name="bottom"></slot>
@@ -35,6 +39,13 @@
   const messageList = ref([]); // 消息列表
   const showNewMessageTip = ref(false); // 显示有新消息提示
   const refreshMessage = ref(false); // 更新消息列表
+  const isLoading = ref(false); // 是否正在加载更多
+  const hasMore = ref(true); // 是否还有更多数据
+  const scrollRef = ref(null); // 滚动视图引用
+  const scroll = ref({
+    top: 0,
+    oldTop: 0,
+  });
   const queryParams = reactive({
     no: 1, // 查询次数，只用于触底计算
     limit: 20,
@@ -50,49 +61,76 @@
     justifyContent: 'center',
     alignItems: 'center',
   }); // 返回顶部样式
-  // const pagingRef = ref(null); // 虚拟列表
-  const queryList = async (no, limit) => {
-    // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-    queryParams.no = no;
-    queryParams.limit = limit;
-    await getMessageList();
-  };
 
   // 获得消息分页列表
   const getMessageList = async () => {
-    const { data } = await KeFuApi.getKefuMessageList(queryParams);
+    isLoading.value = true;
-    if (isEmpty(data)) {
+    try {
-      // pagingRef.value.completeByNoMore([], true);
+      const { data } = await KeFuApi.getKefuMessageList(queryParams);
-      return;
+      if (isEmpty(data)) {
-    }
+        hasMore.value = false;
-    if (queryParams.no > 1 && refreshMessage.value) {
+        return;
-      const newMessageList = [];
-      for (const message of data) {
-        if (messageList.value.some((val) => val.id === message.id)) {
-          continue;
-        }
-        newMessageList.push(message);
       }
-      // 新消息追加到开头
+      if (queryParams.no > 1 && refreshMessage.value) {
-      messageList.value = [...newMessageList, ...messageList.value];
+        const newMessageList = [];
-      // pagingRef.value.updateCache(); // 更新缓存
+        for (const message of data) {
-      refreshMessage.value = false; // 更新好后重置状态
+          if (messageList.value.some((val) => val.id === message.id)) {
-      return;
+            continue;
+          }
+          newMessageList.push(message);
+        }
+        // 新消息追加到开头
+        messageList.value = [...newMessageList, ...messageList.value];
+        refreshMessage.value = false; // 更新好后重置状态
+        return;
+      }
+
+      if (queryParams.no > 1) {
+        // 加载更多历史消息，追加到现有列表末尾（因为是倒置的，所以旧消息在底部/列表末尾）
+        if (data.length < queryParams.limit) {
+          hasMore.value = false; // 如果返回的数据少于请求的数量，说明没有更多数据了
+        }
+
+        // 过滤掉已存在的消息
+        const historyMessages = data.filter(msg =>
+          !messageList.value.some(existing => existing.id === msg.id),
+        );
+
+        if (historyMessages.length > 0) {
+          messageList.value = [...messageList.value, ...historyMessages];
+        }
+      } else {
+        // 首次加载
+        messageList.value = data;
+
+        if (data.length < queryParams.limit) {
+          hasMore.value = false;
+        }
+      }
+
+      if (data.slice(-1).length > 0) {
+        // 设置最后一次历史查询的最后一条消息的 createTime
+        queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
+      }
+    } finally {
+      isLoading.value = false;
     }
-    if (data.slice(-1).length > 0) {
+  };
-      // 设置最后一次历史查询的最后一条消息的 createTime
+
-      queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
+  /** 加载更多历史数据 */
-    }
+  const loadMoreHistory = async () => {
-    messageList.value = data;
+    if (isLoading.value || !hasMore.value) return;
-    // pagingRef.value.completeByNoMore(data, false);
+
+    // 增加页码
+    queryParams.no += 1;
+    await getMessageList();
   };
 
   /** 刷新消息列表 */
   const refreshMessageList = async (message = undefined) => {
     if (typeof message !== 'undefined') {
-      // 追加数据
+      // 追加数据到列表开头（因为是倒置的，所以新消息在顶部/列表开头）
-      messageList.value.map(message);
+      messageList.value.unshift(message);
-      // pagingRef.value.addChatRecordData([message], false);
     } else {
       queryParams.createTime = undefined;
       refreshMessage.value = true;
@@ -107,10 +145,13 @@
     }
   };
 
-  /** 滚动到最新消息 */
+  /** 滚动到顶部（倒置后相当于滚动到最新消息） */
-  const onBackToTopClick = (event) => {
+  const scrollToTop = () => {
-    event(false); // 禁用默认操作
+    scroll.value.top = scroll.value.oldTop;
-    // pagingRef.value.scrollToBottom();
+    setTimeout(() => {
+      scroll.value.top = 0;
+    }, 200) // 等待 view 层同步
+    showNewMessageTip.value = false;
   };
 
   /** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
@@ -121,15 +162,23 @@
     }
     showNewMessageTip.value = false;
   };
-  defineExpose({ getMessageList, refreshMessageList });
+
+  defineExpose({ getMessageList, refreshMessageList, scrollToTop });
 
   /** 监听消息列表滚动 */
   const onScroll = (e) => {
     const { scrollTop } = e.detail;
-    console.log('scrollTop', scrollTop);
+    scroll.value.oldTop = scrollTop;
+    // 当滚动位置超过一定值时，显示"新消息"提示
+    if (scrollTop > 100) {
+      showNewMessageTip.value = true;
+    } else {
+      showNewMessageTip.value = false;
+    }
   };
 
   onMounted(() => {
+    queryParams.no = 1; // 确保首次加载是第一页
     getMessageList();
   });
 </script>
@@ -166,4 +215,14 @@
   .message-item {
     margin-bottom: 10px;
   }
+
+  .loading-more {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #999;
+    font-size: 14px;
+  }
 </style>