修改pageSize
This commit is contained in:
@@ -85,52 +85,44 @@
|
|||||||
<!-- 主聊天区域 -->
|
<!-- 主聊天区域 -->
|
||||||
<main class="chat-main" :class="{ 'sidebar-open': isSidebarOpen }">
|
<main class="chat-main" :class="{ 'sidebar-open': isSidebarOpen }">
|
||||||
<template v-if="currentRoomId">
|
<template v-if="currentRoomId">
|
||||||
<div class="chat-room-wrapper">
|
<ChatRoom
|
||||||
<!-- 自动填充加载遮罩 -->
|
ref="chatRoomRef"
|
||||||
<div v-if="autoFilling" class="auto-fill-mask">
|
:messages="messages"
|
||||||
<div class="loading-spinner"></div>
|
:current-user-id="loginDomain.user.userId"
|
||||||
<div class="loading-text">正在加载历史消息...</div>
|
:room-name="currentRoom?.roomName"
|
||||||
</div>
|
:meeting-url="currentMeetingUrl"
|
||||||
|
:show-meeting="showMeetingIframe"
|
||||||
<ChatRoom
|
:file-download-url="FILE_DOWNLOAD_URL"
|
||||||
ref="chatRoomRef"
|
:has-more="hasMore"
|
||||||
:messages="messages"
|
:loading-more="loadingMore"
|
||||||
:current-user-id="loginDomain.user.userId"
|
@send-message="handleSendMessage"
|
||||||
:room-name="currentRoom?.roomName"
|
@start-meeting="startMeeting"
|
||||||
:meeting-url="currentMeetingUrl"
|
@download-file="downloadFile"
|
||||||
:show-meeting="showMeetingIframe"
|
@load-more="loadMoreMessages"
|
||||||
:file-download-url="FILE_DOWNLOAD_URL"
|
>
|
||||||
:has-more="hasMore"
|
<template #header>
|
||||||
:loading-more="loadingMore"
|
<div class="chat-room-header">
|
||||||
@send-message="handleSendMessage"
|
<div class="header-left">
|
||||||
@start-meeting="startMeeting"
|
<div class="room-avatar-small">
|
||||||
@download-file="downloadFile"
|
{{ currentRoom?.guestName?.substring(0, 1) }}
|
||||||
@load-more="loadMoreMessages"
|
</div>
|
||||||
>
|
<div class="room-title-group">
|
||||||
<template #header>
|
<div class="room-name-text">{{ currentRoom?.roomName }}</div>
|
||||||
<div class="chat-room-header">
|
<div class="room-subtitle">
|
||||||
<div class="header-left">
|
工单 #{{ currentRoom?.workcaseId }} · {{ currentRoom?.guestName }}
|
||||||
<div class="room-avatar-small">
|
|
||||||
{{ currentRoom?.guestName?.substring(0, 1) }}
|
|
||||||
</div>
|
|
||||||
<div class="room-title-group">
|
|
||||||
<div class="room-name-text">{{ currentRoom?.roomName }}</div>
|
|
||||||
<div class="room-subtitle">
|
|
||||||
工单 #{{ currentRoom?.workcaseId }} · {{ currentRoom?.guestName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template #action-area>
|
<template #action-area>
|
||||||
<ElButton type="primary" @click="handleWorkcaseAction">
|
<ElButton type="primary" @click="handleWorkcaseAction">
|
||||||
<FileText :size="16" />
|
<FileText :size="16" />
|
||||||
{{ currentWorkcaseId ? '查看工单' : '创建工单' }}
|
{{ currentWorkcaseId ? '查看工单' : '创建工单' }}
|
||||||
</ElButton>
|
</ElButton>
|
||||||
</template>
|
</template>
|
||||||
</ChatRoom>
|
</ChatRoom>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 空状态 -->
|
<!-- 空状态 -->
|
||||||
@@ -212,8 +204,8 @@ const userType = true //web端固定这个
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const messageLoading = ref(false)
|
const messageLoading = ref(false)
|
||||||
const loadingMore = ref(false)
|
const loadingMore = ref(false)
|
||||||
// 自动填充加载状态
|
// 自动填充加载状态（已禁用）
|
||||||
const autoFilling = ref(false)
|
// const autoFilling = ref(false)
|
||||||
|
|
||||||
// 分页状态
|
// 分页状态
|
||||||
const PAGE_SIZE = 20
|
const PAGE_SIZE = 20
|
||||||
@@ -323,8 +315,8 @@ const loadMessages = async (roomId: string) => {
|
|||||||
const dataList = result.pageDomain.dataList || []
|
const dataList = result.pageDomain.dataList || []
|
||||||
messages.value = [...dataList].reverse()
|
messages.value = [...dataList].reverse()
|
||||||
|
|
||||||
// 首次加载后自动填充消息直到出现滚动条
|
// 首次加载后自动填充消息直到出现滚动条（已禁用）
|
||||||
await autoFillMessages(roomId)
|
// await autoFillMessages(roomId)
|
||||||
}
|
}
|
||||||
// 加载完成后滚动到底部
|
// 加载完成后滚动到底部
|
||||||
scrollToBottom()
|
scrollToBottom()
|
||||||
@@ -336,9 +328,10 @@ const loadMessages = async (roomId: string) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 自动填充消息直到出现滚动条
|
// 自动填充消息直到出现滚动条（已禁用）
|
||||||
|
/*
|
||||||
const autoFillMessages = async (roomId: string) => {
|
const autoFillMessages = async (roomId: string) => {
|
||||||
autoFilling.value = true
|
// autoFilling.value = true
|
||||||
console.log('[autoFill] 开始检查消息高度, hasMore:', hasMore.value, 'messages:', messages.value.length)
|
console.log('[autoFill] 开始检查消息高度, hasMore:', hasMore.value, 'messages:', messages.value.length)
|
||||||
|
|
||||||
// 等待DOM渲染
|
// 等待DOM渲染
|
||||||
@@ -412,8 +405,9 @@ const autoFillMessages = async (roomId: string) => {
|
|||||||
|
|
||||||
console.log(`[autoFill] 自动填充结束 - 共尝试${attempts}次, 最终消息数: ${messages.value.length}, hasMore: ${hasMore.value}`)
|
console.log(`[autoFill] 自动填充结束 - 共尝试${attempts}次, 最终消息数: ${messages.value.length}, hasMore: ${hasMore.value}`)
|
||||||
|
|
||||||
autoFilling.value = false
|
// autoFilling.value = false
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
// 加载更多历史消息（滚动到顶部触发）
|
// 加载更多历史消息（滚动到顶部触发）
|
||||||
const loadMoreMessages = async () => {
|
const loadMoreMessages = async () => {
|
||||||
|
|||||||
@@ -46,12 +46,6 @@
|
|||||||
:style="{ top: (headerPaddingTop + 88) + 'px' }"
|
:style="{ top: (headerPaddingTop + 88) + 'px' }"
|
||||||
@scrolltoupper="loadMoreMessages"
|
@scrolltoupper="loadMoreMessages"
|
||||||
upper-threshold="50">
|
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">
|
<view v-if="loadingMore" class="loading-more">
|
||||||
<text class="loading-more-text">加载中...</text>
|
<text class="loading-more-text">加载中...</text>
|
||||||
@@ -154,8 +148,8 @@ function loadUserInfo() {
|
|||||||
|
|
||||||
// 消息列表
|
// 消息列表
|
||||||
const messages = reactive<ChatRoomMessageVO[]>([])
|
const messages = reactive<ChatRoomMessageVO[]>([])
|
||||||
// 初始加载遮罩（自动填充期间显示，完成后隐藏）
|
// 加载遮罩（已禁用）
|
||||||
const showLoadingMask = ref<boolean>(true)
|
// const showLoadingMask = ref<boolean>(true)
|
||||||
|
|
||||||
// 所有默认客服
|
// 所有默认客服
|
||||||
const defaultWorkers = reactive<CustomerVO[]>([])
|
const defaultWorkers = reactive<CustomerVO[]>([])
|
||||||
@@ -326,9 +320,8 @@ async function loadMessages() {
|
|||||||
|
|
||||||
// 加载完第一页后检查是否需要自动填充
|
// 加载完第一页后检查是否需要自动填充
|
||||||
if (currentPage.value === 1) {
|
if (currentPage.value === 1) {
|
||||||
await autoFillMessages() // 自动填充结束后会自动滚动到底部
|
nextTick(() => scrollToBottom())
|
||||||
} else {
|
} else {
|
||||||
// 非首次加载（如刷新等），直接滚动到底部
|
|
||||||
nextTick(() => scrollToBottom())
|
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() {
|
async function loadMoreMessages() {
|
||||||
console.log('[loadMoreMessages] 触发, roomId:', roomId.value, 'loadingMore:', loadingMore.value, 'hasMore:', hasMore.value, 'currentPage:', currentPage.value)
|
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) {
|
if (msgRes.success && msgRes.dataList && msgRes.dataList.length > 0) {
|
||||||
const pageInfo = msgRes.pageDomain?.pageParam
|
const pageInfo = msgRes.pageDomain?.pageParam
|
||||||
const actualTotalPages = pageInfo?.totalPages || 1
|
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
|
currentPage.value = nextPage
|
||||||
hasMore.value = actualTotalPages > currentPage.value
|
|
||||||
console.log('[loadMoreMessages] 更新后 currentPage:', currentPage.value, 'hasMore:', hasMore.value)
|
|
||||||
|
|
||||||
// 后端降序返回，反转后插入到列表前面
|
// 后端降序返回，反转后插入到列表前面
|
||||||
const reversedList = [...msgRes.dataList].reverse()
|
const reversedList = [...msgRes.dataList].reverse()
|
||||||
messages.unshift(...reversedList)
|
messages.unshift(...reversedList)
|
||||||
|
|||||||
Reference in New Issue
Block a user