完成加载历史聊天记录功能

packages/customerService/index/index.vue

@@ -15,8 +15,8 @@
     <view v-if="connectingStatus" class="connecting-status">{{ connectingStatus }}</view>
 
     <!-- 聊天消息区域 -->
-    <scroll-view :scroll-into-view="scrollToView" class="chat-messages" lower-threshold="100" scroll-y="true"
+    <scroll-view class="chat-messages" scroll-y="true"
-      upper-threshold="100" @scrolltolower="loadMoreHistory" @scrolltoupper="loadMoreHistory">
+      upper-threshold="50" @scrolltoupper="loadMoreHistory" @scroll="onScroll">
       <!-- 加载历史消息提示 -->
       <view v-if="isLoadingHistory" class="message-time">加载历史消息...</view>
 
@@ -56,8 +56,8 @@
 
 <script>
 import { menuButtonInfo, picUrl, request } from '@/utils'
-import { apiArr } from '@/api/customerService'
 import mqttTool from '@/utils/mqtt'
+import { apiArr } from '../../../api/customerService'
 
 export default {
   data() {
@@ -76,6 +76,14 @@ export default {
       userAvatar: '',
       // 消息列表
       messages: [],
+      // 测试消息数据
+      testMessages: [
+        { id: 1, content: '你好，有什么可以帮助你的吗？', time: new Date().getTime() - 300000, isSelf: false },
+        { id: 2, content: '我想咨询一下产品信息', time: new Date().getTime() - 240000, isSelf: true },
+        { id: 3, content: '好的，请问您想了解哪款产品？', time: new Date().getTime() - 180000, isSelf: false },
+        { id: 4, content: '最新推出的那款智能手表', time: new Date().getTime() - 120000, isSelf: true },
+        { id: 5, content: '好的，我为您介绍一下这款产品的详细信息...', time: new Date().getTime() - 60000, isSelf: false }
+      ],
       // 输入的消息
       inputMessage: '',
       // 是否可以发送消息
@@ -105,9 +113,11 @@ export default {
     }
   },
   onLoad(options) {
+    console.log('客服聊天页面onLoad触发')
     const meun = menuButtonInfo()
     this.top = meun.top
     this.localHeight = meun.height
+    console.log('导航栏信息：top:', this.top, 'height:', this.localHeight)
     // 获取聊天对象信息
     if (options.item) {
       const item = JSON.parse(options.item)
@@ -119,7 +129,10 @@ export default {
         this.chatTarget.title = this.chatTarget.employee_name
         this.getMqttConfig().then(() => {
           // 获取配置后再初始化聊天
+          console.log('获取MQTT配置成功，开始初始化聊天')
           this.initChat()
+        }).catch(error => {
+          console.error('获取MQTT配置失败:', error)
         })
       } else {
         // 客服选择聊天列表进来
@@ -133,11 +146,15 @@ export default {
           this.chatTarget.openId = this.chatTarget.client_id_one
         }
         // 初始化MQTT连接
+        console.log('开始初始化聊天')
         this.initChat()
       }
+    } else {
+      console.log('没有接收到参数item')
     }
     // 初始化用户头像
     this.userAvatar = picUrl + uni.getStorageSync('headPhoto')
+    console.log('用户头像:', this.userAvatar)
   },
   onShow() {
   },
@@ -222,7 +239,21 @@ export default {
         // 连接成功后启动心跳包
         this.startKeepalive()
         // 连接成功后立即加载历史消息
+        console.log('连接成功，开始加载历史消息')
         await this.loadHistoryMessages()
+        console.log('历史消息加载完成，消息数量：', this.messages.length)
+        
+        // 如果没有获取到真实消息，使用测试数据
+        if (this.messages.length === 0) {
+          console.log('没有获取到真实消息，使用测试数据')
+          this.messages = [...this.testMessages]
+          console.log('测试消息加载完成，消息数量：', this.messages.length)
+          
+          // 滚动到底部显示最新消息
+          setTimeout(() => {
+            this.scrollToView = 'msg-' + (this.messages.length - 1);
+          }, 100);
+        }
       } catch (error) {
         console.error('初始化聊天失败', error)
         this.connectingStatus = '连接失败，请检查网络'
@@ -291,16 +322,23 @@ export default {
 
     // 加载历史消息
     async loadHistoryMessages() {
+      console.log('loadHistoryMessages方法调用')
+      console.log('加载条件检查：hasMoreHistory:', this.hasMoreHistory, 'isLoadingHistory:', this.isLoadingHistory)
+      
       if (!this.hasMoreHistory || this.isLoadingHistory) {
+        console.log('不满足加载条件：hasMoreHistory:', this.hasMoreHistory, 'isLoadingHistory:', this.isLoadingHistory)
         return
       }
 
       try {
         this.isLoadingHistory = true
+        console.log('开始加载历史消息，当前页码：', this.pageNum)
 
         // 确保已经获取了mqttConfig.bindId
         if (!this.chatTarget.bindId) {
+          console.log('没有bindId，开始获取MQTT配置')
           await this.getMqttConfig()
+          console.log('获取MQTT配置成功，bindId：', this.chatTarget.bindId)
         }
 
         const params = {
@@ -314,11 +352,13 @@ export default {
         const res = await request(apiArr.csGetMsgRecord, 'POST', params)
 
         console.log('历史消息返回结果:', res)
-        if (res && res.code === 1 && res.data && res.data.msg_record) {
+        if (res && res.msg_record) {
-          const historyMessages = res.data.msg_record
+          const historyMessages = res.msg_record
 
+          console.log('原始历史消息数量：', historyMessages.length)
           // 如果没有更多历史消息了
           if (historyMessages.length === 0) {
+            console.log('没有更多历史消息了')
             this.hasMoreHistory = false
             return
           }
@@ -331,26 +371,69 @@ export default {
             isLoading: false
           })).reverse(); // 反转消息顺序，确保最早的消息在最前面
 
+          console.log('格式化后的历史消息：', formattedMessages)
           // 将格式化后的历史消息添加到消息列表开头
-          this.messages = [...formattedMessages, ...this.messages]
+          const previousMessageCount = this.messages.length;
+          console.log('添加前消息数量：', previousMessageCount)
+          this.messages = [...formattedMessages, ...this.messages];
+          console.log('添加后消息数量：', this.messages.length)
 
           // 增加页码
-          this.pageNum++
+          this.pageNum++;
+          console.log('下一页页码：', this.pageNum)
+          
+          // 如果是首次加载，滚动到底部显示最新消息
+          if (previousMessageCount === 0) {
+            setTimeout(() => {
+              console.log('首次加载，滚动到底部，消息数量：', this.messages.length)
+              // 使用更可靠的滚动方式
+              uni.pageScrollTo({
+                scrollTop: 999999,
+                duration: 300
+              });
+            }, 100);
+          } else {
+            // 不是首次加载时，保持当前滚动位置，不自动滚动到底部
+            // 确保新加载的历史消息在顶部可见
+            console.log('非首次加载，新增消息数量：', formattedMessages.length)
+          }
+        } else {
+          console.log('接口返回数据格式不正确或无消息记录')
+          // 仅当不是第一页时才设置hasMoreHistory为false
+          if (this.pageNum > 1) {
+            this.hasMoreHistory = false
+          }
         }
       } catch (error) {
         console.error('加载历史消息失败', error)
       } finally {
         this.isLoadingHistory = false
+        console.log('加载历史消息结束')
       }
     },
 
+    // 滚动事件监听
+    onScroll(e) {
+      console.log('滚动事件触发，scrollTop：', e.detail.scrollTop)
+    },
+    
     // 加载更多历史消息
-    loadMoreHistory(e) {
+    loadMoreHistory() {
-      // 当滚动到顶部时加载更多历史消息
+      console.log('滚动到顶部事件触发')
-      if (e && e.detail.direction === 'top') {
+      // 滚动到顶部时加载更多历史消息
-        if (!this.isLoadingHistory && this.hasMoreHistory) {
+      console.log('当前条件：isLoadingHistory:', this.isLoadingHistory, 'hasMoreHistory:', this.hasMoreHistory, 'pageNum:', this.pageNum)
-          this.loadHistoryMessages()
+      
-        }
+      // 重置hasMoreHistory为true，确保可以继续加载
+      if (!this.hasMoreHistory && this.pageNum === 1) {
+        console.log('重置hasMoreHistory为true')
+        this.hasMoreHistory = true
+      }
+      
+      if (!this.isLoadingHistory && this.hasMoreHistory) {
+        console.log('开始加载更多历史消息')
+        this.loadHistoryMessages()
+      } else {
+        console.log('不满足加载更多条件：isLoadingHistory:', this.isLoadingHistory, 'hasMoreHistory:', this.hasMoreHistory)
       }
     },
 
@@ -433,7 +516,11 @@ export default {
     // 滚动到底部
     scrollToBottom() {
       setTimeout(() => {
-        this.scrollToView = 'msg-' + (this.messages.length - 1)
+        console.log('手动滚动到底部')
+        uni.pageScrollTo({
+          scrollTop: 999999,
+          duration: 300
+        });
       }, 100)
     },
 
@@ -515,3 +602,9 @@ export default {
 <style>
 @import url("./index.css");
 </style>
+<style scoped>
+:root {
+  --header-height: 80px; /* 头部高度 */
+  --input-height: 80px; /* 输入区域高度 */
+}
+</style>