feat(contact): 增强客服页面功能

- 添加下拉刷新功能并设置背景色
- 调整滚动加载阈值从20改为100
- 修改getMessages返回Promise以支持链式调用
- 在页面显示时立即获取最新消息
- 实现下拉刷新时获取最新消息并停止动画
This commit is contained in:
邹方成 2025-10-31 00:15:09 +08:00
parent 7209e5a815
commit 7ce96a57e5
3 changed files with 25 additions and 7 deletions

View File

@ -56,7 +56,7 @@ Page({
getMessages() {
const userInfo = wx.getStorageSync('user_info');
const that = this;
request('app/messages', 'get', {
return request('app/messages', 'get', {
app_id: that.data.appid,
user_id: userInfo.openid,
page: that.data.page,
@ -74,7 +74,9 @@ Page({
// only auto-scroll if user is at bottom
scrollToId: that.data.isAtBottom ? (sortedList[sortedList.length - 1] ? sortedList[sortedList.length - 1].id : '') : that.data.scrollToId
});
})
return res; // 返回结果以支持链式调用
});
},
// Load older messages (previous pages) and prepend them to the top
@ -476,8 +478,11 @@ Page({
},
onShow() {
// resume polling when page becomes visible
// resume polling when page becomes visible and get latest messages
if (wx.getStorageSync('user_info')) {
// 立即请求最新消息
this.getMessages();
// 然后开始轮询
this.startPolling();
}
},
@ -489,7 +494,19 @@ Page({
// cleanup
this.stopPolling();
},
onPullDownRefresh() { },
onPullDownRefresh() {
// 下拉刷新时获取最新消息
if (wx.getStorageSync('user_info')) {
this.getMessages().then(() => {
// 停止下拉刷新动画
wx.stopPullDownRefresh();
}).catch(() => {
wx.stopPullDownRefresh();
});
} else {
wx.stopPullDownRefresh();
}
},
onReachBottom() { },
onShareAppMessage() { }
});

View File

@ -1,5 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "联系客服"
"navigationBarTitleText": "联系客服",
"enablePullDownRefresh": true,
"backgroundColor": "#fafbfc"
}

View File

@ -6,7 +6,7 @@
<text class="header-title">租号客服</text>
</view> -->
<scroll-view class="messages" scroll-y="true" scroll-into-view="{{scrollToId}}" bindscroll="onScroll" bindscrolltolower="onScrollToLower" lower-threshold="20">
<scroll-view class="messages" scroll-y="true" scroll-into-view="{{scrollToId}}" bindscroll="onScroll" bindscrolltolower="onScrollToLower" lower-threshold="100">
<block wx:for="{{messages}}" wx:key="id">
<!-- 时间分割线 -->
<block wx:if="{{item.showTime}}">