wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改pageSize

Browse Source
This commit is contained in:
wangys
2025-12-24 16:42:19 +08:00
parent b437a3c675
commit 1d04bb75f9
2 changed files with 48 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue
View File

@@ -85,13 +85,6 @@
<!-- 主聊天区域 -->
<main class="chat-main" :class="{ 'sidebar-open': isSidebarOpen }">
<template v-if="currentRoomId">
<div class="chat-room-wrapper">
<!-- 自动填充加载遮罩 -->
<div v-if="autoFilling" class="auto-fill-mask">
<div class="loading-spinner"></div>
<div class="loading-text">正在加载历史消息...</div>
</div>
<ChatRoom
ref="chatRoomRef"
:messages="messages"
@@ -130,7 +123,6 @@
</ElButton>
</template>
</ChatRoom>
</div>
</template>
<!-- 空状态 -->
@@ -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 () => {

115
urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue
View File

@@ -46,12 +46,6 @@
:style="{ top: (headerPaddingTop + 88) + 'px' }"
@scrolltoupper="loadMoreMessages"
upper-threshold="50">
<!-- 加载遮罩层 -->
<view v-if="showLoadingMask" class="loading-mask">
<view class="loading-content">
<text class="loading-text">加载中...</text>
</view>
</view>
<!-- 加载更多提示 -->
<view v-if="loadingMore" class="loading-more">
<text class="loading-more-text">加载中...</text>
@@ -154,8 +148,8 @@ function loadUserInfo() {
// 消息列表
const messages = reactive<ChatRoomMessageVO[]>([])
// 初始加载遮罩（自动填充期间显示，完成后隐藏）
const showLoadingMask = ref<boolean>(true)
// 加载遮罩（已禁用）
// const showLoadingMask = ref<boolean>(true)
// 所有默认客服
const defaultWorkers = reactive<CustomerVO[]>([])
@@ -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)