diff --git a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue index 177c3c19..b57dc7cc 100644 --- a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue +++ b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue @@ -85,52 +85,44 @@
@@ -212,8 +204,8 @@ const userType = true //web端固定这个 const loading = ref(false) const messageLoading = ref(false) const loadingMore = ref(false) -// 自动填充加载状态 -const autoFilling = ref(false) +// 自动填充加载状态（已禁用） +// const autoFilling = ref(false) // 分页状态 const PAGE_SIZE = 20 @@ -323,8 +315,8 @@ const loadMessages = async (roomId: string) => { const dataList = result.pageDomain.dataList || [] messages.value = [...dataList].reverse() - // 首次加载后自动填充消息直到出现滚动条 - await autoFillMessages(roomId) + // 首次加载后自动填充消息直到出现滚动条（已禁用） + // await autoFillMessages(roomId) } // 加载完成后滚动到底部 scrollToBottom() @@ -336,9 +328,10 @@ const loadMessages = async (roomId: string) => { } } -// 自动填充消息直到出现滚动条 +// 自动填充消息直到出现滚动条（已禁用） +/* const autoFillMessages = async (roomId: string) => { - autoFilling.value = true + // autoFilling.value = true console.log('[autoFill] 开始检查消息高度, hasMore:', hasMore.value, 'messages:', messages.value.length) // 等待DOM渲染 @@ -412,8 +405,9 @@ const autoFillMessages = async (roomId: string) => { console.log(`[autoFill] 自动填充结束 - 共尝试${attempts}次, 最终消息数: ${messages.value.length}, hasMore: ${hasMore.value}`) - autoFilling.value = false + // autoFilling.value = false } +*/ // 加载更多历史消息（滚动到顶部触发） const loadMoreMessages = async () => { diff --git a/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue b/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue index 004bb597..bc990bad 100644 --- a/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue +++ b/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue @@ -46,12 +46,6 @@ :style="{ top: (headerPaddingTop + 88) + 'px' }" @scrolltoupper="loadMoreMessages" upper-threshold="50"> - - - - 加载中... - - 加载中... @@ -154,8 +148,8 @@ function loadUserInfo() { // 消息列表 const messages = reactive([]) -// 初始加载遮罩（自动填充期间显示，完成后隐藏） -const showLoadingMask = ref(true) +// 加载遮罩（已禁用） +// const showLoadingMask = ref(true) // 所有默认客服 const defaultWorkers = reactive([]) @@ -326,9 +320,8 @@ async function loadMessages() { // 加载完第一页后检查是否需要自动填充 if (currentPage.value === 1) { - await autoFillMessages() // 自动填充结束后会自动滚动到底部 + nextTick(() => scrollToBottom()) } else { - // 非首次加载（如刷新等），直接滚动到底部 nextTick(() => scrollToBottom()) } } @@ -337,102 +330,6 @@ async function loadMessages() { } } -// 自动填充消息直到出现滚动条 -async function autoFillMessages() { - console.log('[autoFill] 开始自动填充, hasMore:', hasMore.value, 'messages:', messages.length) - - // 等待DOM渲染 - await new Promise(resolve => setTimeout(resolve, 500)) - - // 持续加载直到真正出现滚动或没有更多数据 - let attempts = 0 - const maxAttempts = 20 // 最多20次，防止死循环 - - while (hasMore.value && attempts < maxAttempts) { - attempts++ - - try { - // 获取 scroll-view 容器高度 - const query = uni.createSelectorQuery() - const chatAreaHeight: number = await new Promise((resolve) => { - query.select('.chat-area').boundingClientRect().exec((res: any[]) => { - const rect = res[0] - console.log('[autoFill] chat-area rect:', rect) - resolve(rect?.height || 0) - }) - }) - - // 获取消息列表容器高度（.message-list） - const query2 = uni.createSelectorQuery() - const contentHeight: number = await new Promise((resolve) => { - query2.select('.message-list').boundingClientRect().exec((res: any[]) => { - const rect = res[0] - console.log('[autoFill] message-list rect:', rect) - resolve(rect?.height || 0) - }) - }) - - const fillPercent = chatAreaHeight > 0 ? Math.round(contentHeight / chatAreaHeight * 100) : 0 - console.log(`[autoFill] 第${attempts}次检查 - 容器: ${chatAreaHeight}px, 内容: ${contentHeight}px, 填充率: ${fillPercent}%, 消息数: ${messages.length}, hasMore: ${hasMore.value}`) - - // 判断是否已经溢出（内容高度 >= 容器高度） - if (chatAreaHeight > 0 && contentHeight >= chatAreaHeight) { - console.log(`[autoFill] ✓ 内容已溢出（${fillPercent}%），可以滚动！停止加载`) - break - } - - // 内容不足，继续加载下一页 - if (chatAreaHeight > 0) { - console.log('[autoFill] → 内容不足，继续加载历史消息...') - const nextPage = currentPage.value + 1 - const msgRes = await workcaseChatAPI.getChatMessagePage({ - filter: { roomId: roomId.value }, - pageParam: { page: nextPage, pageSize: PAGE_SIZE } - }) - - if (msgRes.success && msgRes.dataList && msgRes.dataList.length > 0) { - const pageInfo = msgRes.pageDomain?.pageParam - const actualTotalPages = pageInfo?.totalPages || 1 - currentPage.value = nextPage - hasMore.value = actualTotalPages > currentPage.value - - // 反转后插入到列表前面 - const reversedList = [...msgRes.dataList].reverse() - messages.unshift(...reversedList) - console.log(`[autoFill] ✓ 加载第${nextPage}页完成, 新增${msgRes.dataList.length}条, 总消息数: ${messages.length}, hasMore: ${hasMore.value}`) - - // 等待DOM更新 - await new Promise(resolve => setTimeout(resolve, 300)) - } else { - console.log('[autoFill] ✗ 没有更多数据了') - hasMore.value = false - break - } - } else { - console.error('[autoFill] ✗ 无法获取容器高度') - break - } - } catch (error) { - console.error('[autoFill] ✗ 检查失败:', error) - break - } - } - - if (attempts >= maxAttempts) { - console.warn('[autoFill] ⚠ 达到最大尝试次数，停止自动填充') - } - - console.log(`[autoFill] 自动填充结束 - 共尝试${attempts}次, 最终消息数: ${messages.length}, hasMore: ${hasMore.value}`) - - // 移除加载遮罩并滚动到底部 - showLoadingMask.value = false - await new Promise(resolve => setTimeout(resolve, 50)) - nextTick(() => { - scrollToBottom() - console.log('[autoFill] 遮罩已移除，已滚动到底部') - }) -} - // 加载更多历史消息（滚动到顶部触发，加载下一页更早的消息） async function loadMoreMessages() { console.log('[loadMoreMessages] 触发, roomId:', roomId.value, 'loadingMore:', loadingMore.value, 'hasMore:', hasMore.value, 'currentPage:', currentPage.value) @@ -455,12 +352,10 @@ async function loadMoreMessages() { if (msgRes.success && msgRes.dataList && msgRes.dataList.length > 0) { const pageInfo = msgRes.pageDomain?.pageParam const actualTotalPages = pageInfo?.totalPages || 1 - console.log('[loadMoreMessages] pageInfo:', pageInfo, 'actualTotalPages:', actualTotalPages) + hasMore.value = actualTotalPages > currentPage.value + console.log('[loadMoreMessages] pageInfo:', pageInfo, 'actualTotalPages:', actualTotalPages, 'hasMore:', hasMore.value) currentPage.value = nextPage - hasMore.value = actualTotalPages > currentPage.value - console.log('[loadMoreMessages] 更新后 currentPage:', currentPage.value, 'hasMore:', hasMore.value) - // 后端降序返回，反转后插入到列表前面 const reversedList = [...msgRes.dataList].reverse() messages.unshift(...reversedList)