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

2025-11-14 16:32:51 +08:00 · 2025-11-14 16:32:51 +08:00 · 94c058c96f
commit 94c058c96f
parent 9b988c9585
1 changed files with 107 additions and 14 deletions
--- a/packages/customerService/index/index.vue
+++ b/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"
-      upper-threshold="100" @scrolltolower="loadMoreHistory" @scrolltoupper="loadMoreHistory">
+    <scroll-view class="chat-messages" scroll-y="true"
+      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) {
-          const historyMessages = res.data.msg_record
+        if (res && res.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) {
-      // 当滚动到顶部时加载更多历史消息
-      if (e && e.detail.direction === 'top') {
-        if (!this.isLoadingHistory && this.hasMoreHistory) {
-          this.loadHistoryMessages()
-        }
+    loadMoreHistory() {
+      console.log('滚动到顶部事件触发')
+      // 滚动到顶部时加载更多历史消息
+      console.log('当前条件：isLoadingHistory:', this.isLoadingHistory, 'hasMoreHistory:', this.hasMoreHistory, 'pageNum:', this.pageNum)
+      
+      // 重置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)
    },

@ -514,4 +601,10 @@ export default {

 <style>
@import url("./index.css");
+</style>
+<style scoped>
+:root {
+  --header-height: 80px; /* 头部高度 */
+  --input-height: 80px; /* 输入区域高度 */
+}
 </style>