chore：进入客服页面不乱跳了
This commit is contained in:
@@ -5,8 +5,8 @@
|
||||
class="chat-messages"
|
||||
scroll-y
|
||||
:scroll-top="scrollTop"
|
||||
@scrolltoupper="loadMoreHistory"
|
||||
:scroll-with-animation="true">
|
||||
@scroll="onScroll"
|
||||
:scroll-with-animation="false">
|
||||
|
||||
<!-- 加载更多历史消息 -->
|
||||
<view class="load-more" v-if="hasMoreHistory">
|
||||
@@ -16,7 +16,7 @@
|
||||
<!-- 消息列表 -->
|
||||
<view
|
||||
v-for="(message, index) in messages"
|
||||
:key="message.id + '-' + index"
|
||||
:key="`msg-${message.id || message.timestamp}-${index}`"
|
||||
class="message-item"
|
||||
:class="[message.role, { 'first-message': index === 0 }]">
|
||||
|
||||
@@ -437,7 +437,11 @@ export default {
|
||||
isAIServiceAvailable: true,
|
||||
aiServiceError: null,
|
||||
isLoadingHistory: false, // 新增：标记历史加载状态
|
||||
shouldScrollToBottom: false
|
||||
shouldScrollToBottom: false,
|
||||
scrollTimer: null,
|
||||
lastScrollTop: 0,
|
||||
historyOffset: 0,
|
||||
isFetchingHistory: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
@@ -449,9 +453,16 @@ export default {
|
||||
} else {
|
||||
this.currentConversationId = aiService.getConversationId();
|
||||
}
|
||||
this.loadChatHistoryIfExist();
|
||||
|
||||
|
||||
// 加载初始历史后，同步historyOffset
|
||||
this.loadChatHistoryIfExist().then(() => {
|
||||
// 初始历史条数作为偏移量
|
||||
this.historyOffset = this.messages.length;
|
||||
});
|
||||
// 移除：this.historyOffset = 0;（避免覆盖初始历史的偏移量）
|
||||
},
|
||||
// 新增：组件销毁时清除防抖定时器
|
||||
beforeDestroy() {
|
||||
if (this.scrollTimer) clearTimeout(this.scrollTimer);
|
||||
},
|
||||
created() {
|
||||
this.messages = [...this.initialMessages]
|
||||
@@ -505,7 +516,18 @@ export default {
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
onScroll(e) {
|
||||
const currentScrollTop = e.detail.scrollTop;
|
||||
this.lastScrollTop = currentScrollTop;
|
||||
// 防抖处理：50ms内只执行一次，避免频繁触发
|
||||
if (this.scrollTimer) clearTimeout(this.scrollTimer);
|
||||
this.scrollTimer = setTimeout(() => {
|
||||
// 滚动到顶部附近（<20px）、不在加载中、显示加载更多时，触发加载
|
||||
if (currentScrollTop < 20 && !this.isLoadingHistory && this.showLoadMore) {
|
||||
this.loadMoreHistory();
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
// 初始化用户头像（支持缓存持久化）
|
||||
initUserAvatarData() {
|
||||
// 1. 优先读取本地缓存的头像
|
||||
@@ -932,61 +954,69 @@ export default {
|
||||
this.currentConversationId = this.getConversationIdFromLocal();
|
||||
aiService.setConversationId(this.currentConversationId);
|
||||
}
|
||||
// 防止重复加载
|
||||
if (!this.showLoadMore || !this.currentConversationId || this.isLoadingHistory) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoadingHistory = true
|
||||
this.loadingText = '加载历史消息中...'
|
||||
this.hasMoreHistory = true
|
||||
this.isFetchingHistory = true;
|
||||
this.isLoadingHistory = true;
|
||||
this.loadingText = '加载历史消息中...';
|
||||
this.hasMoreHistory = true;
|
||||
|
||||
try {
|
||||
// 关键修改：用独立的historyOffset作为偏移量，不再依赖messages.length
|
||||
const response = await aiService.getConversationHistory({
|
||||
conversation_id: this.currentConversationId,
|
||||
limit: 20,
|
||||
offset: this.messages.length
|
||||
})
|
||||
offset: this.historyOffset // 改用独立偏移量
|
||||
});
|
||||
|
||||
if (response.success && Array.isArray(response.messages)) {
|
||||
if (response.success && Array.isArray(response.messages) && response.messages.length > 0) {
|
||||
const historyMessages = response.messages.map(msg => ({
|
||||
id: msg.id,
|
||||
id: msg.id || `history-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
||||
role: msg.role === 'user' ? 'user' : 'ai',
|
||||
type: 'text',
|
||||
content: msg.content,
|
||||
timestamp: msg.create_time * 1000
|
||||
}))
|
||||
}));
|
||||
|
||||
if (historyMessages.length > 0) {
|
||||
this.messages = [...historyMessages, ...this.messages]
|
||||
// 1. 记录新增消息数量
|
||||
const newMsgCount = historyMessages.length;
|
||||
// 2. 添加到消息列表开头
|
||||
this.messages = [...historyMessages, ...this.messages];
|
||||
// 3. 更新历史偏移量（累加，不是覆盖）
|
||||
this.historyOffset += newMsgCount;
|
||||
|
||||
// 👇 注意：这里加了 async
|
||||
this.$nextTick(async () => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
query.select('.chat-messages').boundingClientRect()
|
||||
query.select('.chat-messages').scrollOffset()
|
||||
|
||||
const res = await new Promise((resolve) => {
|
||||
query.exec(resolve)
|
||||
})
|
||||
|
||||
const currentScrollTop = res[1]?.scrollTop || 0
|
||||
const avgMessageHeight = 80
|
||||
const addedHeight = historyMessages.length * avgMessageHeight
|
||||
|
||||
this.scrollTop = currentScrollTop - addedHeight
|
||||
})
|
||||
// 4. 等待DOM渲染后，精准计算滚动位置
|
||||
await this.$nextTick();
|
||||
// 获取新增消息的实际DOM高度
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
const heightPromises = [];
|
||||
for (let i = 0; i < newMsgCount; i++) {
|
||||
heightPromises.push(new Promise(resolve => {
|
||||
query.select(`.message-item:nth-child(${i + 1})`).boundingClientRect(rect => {
|
||||
resolve(rect ? rect.height + 32 : 0); // 加上消息间距（32rpx）
|
||||
}).exec();
|
||||
}));
|
||||
}
|
||||
// 计算总高度
|
||||
const heights = await Promise.all(heightPromises);
|
||||
const totalNewHeight = heights.reduce((sum, h) => sum + h, 0);
|
||||
// 5. 设置scrollTop，保持滚动条在顶部附近
|
||||
this.scrollTop = totalNewHeight;
|
||||
} else {
|
||||
this.showLoadMore = false
|
||||
// 无更多历史
|
||||
this.showLoadMore = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载历史失败:', error)
|
||||
uni.showToast({ title: '加载历史失败', icon: 'none' })
|
||||
this.showLoadMore = false
|
||||
console.error('加载历史失败:', error);
|
||||
uni.showToast({ title: '加载历史失败', icon: 'none' });
|
||||
this.showLoadMore = false;
|
||||
} finally {
|
||||
this.isLoadingHistory = false
|
||||
this.hasMoreHistory = false
|
||||
this.loadingText = '加载更多历史消息'
|
||||
this.isLoadingHistory = false;
|
||||
this.isFetchingHistory = false;
|
||||
this.hasMoreHistory = false;
|
||||
this.loadingText = '加载更多历史消息';
|
||||
}
|
||||
},
|
||||
// 显示更多工具
|
||||
|
||||
Reference in New Issue
Block a user