完善客服模块功能

packages/customerService/chattingRecords/index.vue

@@ -6,14 +6,15 @@
       <view v-if="isLoading" class="loading">加载中...</view>
       <view v-else-if="recordsList.length === 0" class="empty-records">暂无聊天记录</view>
       <view v-else>
-        <view v-for="record in recordsList" :key="record.mchId" class="record-item" @tap="goToChatPage(record)">
+        <view v-for="record in recordsList" :key="record.id">
-          <image class="record-avatar" :src="record.avatar || '/static/logo.png'" mode="aspectFill"></image>
+          <view class="record-item" @tap="goToChatPage(record)">
-          <view class="record-info">
+            <image class="record-avatar" :src="record.avatar || '/static/logo.png'" mode="aspectFill"></image>
-            <view class="record-title-row">
+            <view class="record-info">
-              <text class="record-title">{{ record.title }}</text>
+              <view class="record-title-row">
-              <text class="record-time">{{ formatTime(record.lastMsgTime) }}</text>
+                <text class="record-title">{{ record.contact_name }}</text>
+                <text class="record-time">{{ record.update_time }}</text>
+              </view>
             </view>
-            <text class="record-last-msg">{{ record.lastMsg || '暂无消息' }}</text>
           </view>
         </view>
       </view>
@@ -61,63 +62,14 @@ export default {
           page_num: this.page_num,
           page_size: this.page_size,
         }).then((res) => {
-          console.log("🚀 ~ loadChattingRecords ~ res:", res)
+          this.recordsList = res.msg_list
         })
-
-        // const response = await this.$http.get(apiArr.csGetMsgList);
-
-        // if (response.success && response.data && response.data.list) {
-        //   this.recordsList = response.data.list.map(item => ({
-        //     mchId: item.mchId,
-        //     title: item.title || `客服${item.mchId}`,
-        //     avatar: item.avatar,
-        //     lastMsg: item.lastMsg,
-        //     lastMsgTime: item.lastMsgTime || Date.now(),
-        //     unreadCount: item.unreadCount || 0
-        //   }));
-        // } else {
-        //   // 使用模拟数据
-        //   this.recordsList = this.getMockRecords();
-        // }
       } catch (error) {
         console.error('加载聊天记录失败', error);
-        // 使用模拟数据
-        this.recordsList = this.getMockRecords();
       } finally {
         this.isLoading = false;
       }
     },
-
-    // 获取模拟数据
-    getMockRecords() {
-      return [
-        {
-          mchId: '1001',
-          title: '客服小明',
-          avatar: '/static/logo.png',
-          lastMsg: '您好，请问有什么可以帮助您的吗？',
-          lastMsgTime: Date.now() - 30 * 60 * 1000,
-          unreadCount: 0
-        },
-        {
-          mchId: '1002',
-          title: '客服小丽',
-          avatar: '/static/logo.png',
-          lastMsg: '您的问题我已经记录，稍后会有专人与您联系。',
-          lastMsgTime: Date.now() - 2 * 60 * 60 * 1000,
-          unreadCount: 1
-        },
-        {
-          mchId: '1003',
-          title: '客服小张',
-          avatar: '/static/logo.png',
-          lastMsg: '感谢您的咨询，还有其他问题吗？',
-          lastMsgTime: Date.now() - 5 * 60 * 60 * 1000,
-          unreadCount: 0
-        }
-      ];
-    },
-
     // 格式化时间
     formatTime(time) {
       const date = new Date(time);
@@ -152,13 +104,29 @@ export default {
 
     // 跳转到聊天页面
     goToChatPage(record) {
-      // 存储当前聊天对象的信息，供聊天页面使用
+      const params = {
-      uni.setStorageSync('currentChatTarget', record);
+        mch_id: record.mch_id,
+      }
 
-      // 跳转到聊天页面
+      request(apiArr.csGetMchContactList, "POST", params).then((res) => {
-      uni.navigateTo({
+        if (res.rows && res.rows.length > 0) {
-        url: '/packages/customerService/index/index?mchId=' + record.mchId
+          res.rows.map(item => {
-      });
+            item.employee_image = picUrl + item.employee_image;
+          })
+          const itemObj = res.rows.find(item => item.employee_mobile === record.two.account)
+
+          // 跳转到聊天页面
+          uni.navigateTo({
+            url: '/packages/customerService/index/index?item=' + JSON.stringify(itemObj)
+          });
+        } else {
+          console.log("没有获取到客服列表数据");
+          uni.showToast({
+            title: '该客服不存在',
+            icon: 'none'
+          })
+        }
+      })
     }
   }
 };

packages/customerService/index/index.css

@@ -1,7 +1,8 @@
 /* 客服聊天页面样式 */
 page {
   background-color: #f6f7fb;
-  overflow-y: hidden;
+  height: 100vh;
+  overflow: hidden;
 }
 
 /* 聊天容器 */
@@ -10,6 +11,11 @@ page {
   flex-direction: column;
   height: 100vh;
   background-color: #f6f7fb;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
 }
 
 /* 聊天头部 */
@@ -22,6 +28,8 @@ page {
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding-bottom: 15rpx;
+  position: relative;
+  z-index: 2;
 }
 
 .back-btn {
@@ -130,6 +138,8 @@ page {
   padding: 10px 15px;
   border-top: 1px solid #eee;
   margin-bottom: 20rpx;
+  position: relative;
+  z-index: 2;
 }
 
 .input-container {

packages/customerService/index/index.vue

@@ -16,7 +16,7 @@
 
     <!-- 聊天消息区域 -->
     <scroll-view :scroll-into-view="scrollToView" class="chat-messages" scroll-y="true"
-                 @scrolltoupper="loadMoreHistory">
+                 @scrolltoupper="loadMoreHistory" @scrolltolower="loadMoreHistory" lower-threshold="100" upper-threshold="100">
       <!-- 加载历史消息提示 -->
       <view v-if="isLoadingHistory" class="message-time">加载历史消息...</view>
 
@@ -31,7 +31,7 @@
           'other': !message.isSelf,
           'loading': message.isLoading
         }" class="message-item">
-          <image :src="message.isSelf ? userAvatar : (chatTarget.avatar || '/static/logo.png')" class="message-avatar"
+          <image :src="message.isSelf ? userAvatar : (chatTarget.employee_image)" class="message-avatar"
                  mode="aspectFill"></image>
           <view class="message-content">
             {{ message.content }}
@@ -44,7 +44,9 @@
     <view class="chat-input-area">
       <view class="input-container">
         <textarea v-model="inputMessage" :adjust-position="true" class="message-input" placeholder="请输入消息..."
-                  @confirm="sendMessage" @input="handleInput"></textarea>
+                  @confirm="sendMessage" @input="handleInput" auto-height hold-keyboard="true"
+                  enable-keyboard-accessory-view="true" cursor-spacing="10" maxlength="500"
+                  @focus="onInputFocus" @blur="onInputBlur"></textarea>
         <button :disabled="!canSend || !client || !isConnected" class="send-btn" @tap="sendMessage">
           发送
         </button>
@@ -54,9 +56,9 @@
 </template>
 
 <script>
-import { menuButtonInfo, request } from '@/utils'
+import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
 import { apiArr } from '@/api/customerService'
-import MqttUtils from '@/utils/mqtt'
+import mqttTool from '@/utils/mqtt'
 
 export default {
   data(){
@@ -71,7 +73,7 @@ export default {
         openId: '' // 接收方的open_id
       },
       // 用户头像
-      userAvatar: '/static/logo.png',
+      userAvatar: '',
       // 消息列表
       messages: [],
       // 输入的消息
@@ -93,7 +95,14 @@ export default {
       client: null,
       mqttConfig: {},
       // 重连失败提示定时器
-      reconnectFailedTimer: null
+      reconnectFailedTimer: null,
+      // 分页参数
+      pageNum: 1,
+      pageSize: 10,
+      // 是否还有更多历史消息
+      hasMoreHistory: true,
+      // 滚动到底部的标记
+      scrollToBottomFlag: false
     }
   },
   onLoad(options){
@@ -108,16 +117,41 @@ export default {
     // 初始化MQTT连接
     this.initChat()
     this.getMqttConfig()
+    // 初始化用户头像
+    this.userAvatar = picUrl + uni.getStorageSync('headPhoto')
   },
   onShow(){
   },
   methods: {
     async connect(){
+      this.client = null
       const options = {
         clientId: this.selfClientId
       }
-      this.client = MqttUtils.connect(options)
+      
+      // 添加连接状态回调
+      const callbacks = {
+        onConnect: () => {
+          console.log('客服连接成功')
+          this.isConnected = true
+          this.connectingStatus = ''
+        },
+        onDisconnect: this.onDisconnect.bind(this),
+        onError: (error) => {
+          console.error('客服连接错误:', error)
+          this.isConnected = false
+          this.connectingStatus = '连接错误，请重试'
+        },
+        onReconnect: () => {
+          console.log('客服正在重连...')
+          this.isConnected = false
+          this.connectingStatus = '连接已断开，正在重连...'
+        }
+      }
+      
+      this.client = mqttTool.connect(options, callbacks)
       this.isConnected = !!this.client
+      
       await this.subscribe()
       this.client.on('message', (topic, message) => {
         let de = new TextDecoder('utf-8')
@@ -142,9 +176,10 @@ export default {
     },
     async subscribe(){
       if (this.isConnected && this.client) {
-        this.client.subscribe('contact/message/receive_msg', { qos: 0 }, function(err){
+        this.client.subscribe('contact/message/receive_msg', { qos: 0 }, (err) => {
           if (!err) {
             console.log('订阅成功', 'contact/message/receive_msg', { qos: 0 })
+            this.connectingStatus = ''
           } else {
             console.log('订阅失败:', err)
             this.connectingStatus = '订阅失败，请重试'
@@ -152,20 +187,25 @@ export default {
         })
       } else {
         console.log('连接失败', this.isConnected, this.client)
+        this.connectingStatus = '连接失败，请重试'
       }
     },
     // 初始化聊天
     async initChat(){
       try {
         // 显示连接状态
-        this.connectingStatus = '连接中...'
+        this.connectingStatus = '正在连接客服...'
         await this.connect()
+        // 连接成功后启动心跳包
+        this.startKeepalive()
+        // 连接成功后立即加载历史消息
+        this.loadHistoryMessages()
       } catch (error) {
         console.error('初始化聊天失败', error)
-        this.connectingStatus = '连接失败，请重试'
+        this.connectingStatus = '连接失败，请检查网络'
 
         // 失败后尝试重新连接
-        setTimeout(() => {
+        this.reconnectFailedTimer = setTimeout(() => {
           this.initChat()
         }, 3000)
       }
@@ -173,7 +213,6 @@ export default {
 
     // 获取MQTT连接配置
     async getMqttConfig(){
-      console.log('🚀 ~ getMqttConfig ~ getMqttConfig:', 11111)
       try {
         // 如果没有已创建的实例或clientId，则通过API获取
         return new Promise((resolve, reject) => {
@@ -204,23 +243,20 @@ export default {
       }
     },
 
-    // MQTT断开连接回调 (为了兼容旧的调用)
+    // MQTT断开连接回调
     onDisconnect(packet){
       console.log('MQTT连接断开', packet)
       this.isConnected = false
+      this.client = null
 
       // 根据断开原因设置不同的连接状态文本
-      if (packet.error) {
+      if (packet && packet.error) {
         // 连接失败的情况
-        this.connectingStatus = '连接失败，请检查网络或服务器'
+        this.connectingStatus = '连接失败，请检查网络'
-      } else
+      } else {
-        if (packet.reconnecting) {
+        // 其他断开连接的情况
-          // 正在重连的情况
+        this.connectingStatus = '连接已断开，正在重连...'
-          this.connectingStatus = '连接已断开，正在重连...'
+      }
-        } else {
-          // 其他断开连接的情况
-          this.connectingStatus = '连接已断开，正在重连...'
-        }
 
       // 停止心跳包
       this.stopKeepalive()
@@ -228,8 +264,53 @@ export default {
 
     // 加载历史消息
     async loadHistoryMessages(){
+      if (!this.hasMoreHistory || this.isLoadingHistory) {
+        return
+      }
+      
       try {
         this.isLoadingHistory = true
+        
+        // 确保已经获取了mqttConfig.bind_id
+        if (!this.mqttConfig.bind_id) {
+          await this.getMqttConfig()
+        }
+        
+        const params = {
+          bind_id: this.mqttConfig.bind_id,
+          order: 'desc', // 按时间降序排列
+          page_num: this.pageNum,
+          page_size: this.pageSize
+        }
+        
+        console.log('请求历史消息参数:', params)
+        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 (historyMessages.length === 0) {
+            this.hasMoreHistory = false
+            return
+          }
+          
+          // 将获取到的历史消息添加到消息列表开头
+          // 这里需要根据消息的发送方判断是否是自己发送的消息
+          const formattedMessages = historyMessages.map(msg => ({
+            content: msg.content,
+            time: new Date(msg.create_time).getTime(),
+            isSelf: msg.send_client === this.mqttConfig.clientId,
+            isLoading: false
+          })).reverse() // 因为是按时间降序获取的，所以需要反转
+          
+          // 添加到消息列表开头
+          this.messages = [...formattedMessages, ...this.messages]
+          
+          // 增加页码
+          this.pageNum++
+        }
       } catch (error) {
         console.error('加载历史消息失败', error)
       } finally {
@@ -239,9 +320,9 @@ export default {
 
     // 加载更多历史消息
     loadMoreHistory(){
-      if (this.isLoadingHistory) {
+      if (!this.isLoadingHistory && this.hasMoreHistory) {
+        this.loadHistoryMessages()
       }
-      // 这里可以实现加载更多历史消息的逻辑
     },
 
     // 发送消息
@@ -285,6 +366,21 @@ export default {
       this.canSend = this.inputMessage.trim().length > 0
     },
     
+    onInputFocus() {
+      // 输入框获取焦点时，设置滚动到底部的标记
+      this.scrollToBottomFlag = true;
+      setTimeout(() => {
+        if (this.scrollToBottomFlag) {
+          this.scrollToBottom();
+        }
+      }, 300);
+    },
+    
+    onInputBlur() {
+      // 输入框失去焦点时，重置滚动标记
+      this.scrollToBottomFlag = false;
+    },
+
     // 是否需要显示时间分割线
     needShowTime(index){
       if (index === 0) return true

packages/shop/groupPurchaseSubmit/index.vue

@@ -233,7 +233,7 @@
                         已支付成功
                     </view>
                     <view class="boxshadow_img">
-                        <view>核销码：{{ verifyCode }}</view>
+                        <view v-if="verifyCode">核销码：{{ verifyCode }}</view>
                         <!-- <image
                             src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
                         </image> -->

packages/user/replenishInfo/index.vue

@@ -109,6 +109,7 @@
 					icon: 'success',
 					mask: true
 				})
+				uni.setStorageSync('headPhoto', this.avatarInfo.picUrl)
 				setTimeout(() => {
 					uni.navigateBack({ delta: 1 })
 				}, 2000)

pages/index/index.vue

@@ -97,7 +97,8 @@
               <image :src="serverLeft" mode="aspectFill" />
             </view>
             <view class="serverList1_right">
-              <view :class="['serverItemRight', `serverItemRight${index + 1}`]" @tap="headerServerClick(item)"
+              <view :class="['serverItemRight', `serverItemRight${index + 1}`]" 
+                @tap="index === 1 ? toAdvertisingView(serverRightList) : headerServerClick(item)"
                 v-for="(item, index) in serverRightList" :key="index">
                 <image :src="item.pic_src" mode="" />
               </view>

pages/login/login.vue

@@ -90,6 +90,7 @@ export default {
 							uni.setStorageSync('userId', res2.user_id);
 							uni.setStorageSync('openId', res2.open_id);
 							uni.setStorageSync('shopId', res2.wshop_id);
+							uni.setStorageSync('headPhoto', res2.img);
 
 							this.isLogin = true;
 							that.getUserInfo();

utils/mqtt.js

@@ -5,7 +5,7 @@ let mqttTool = {
     client: null
 }
 
-mqttTool.connect = function(params){
+mqttTool.connect = function(params, callbacks = {}){
     let options = {
         clientId: params.clientId,
         username: 'dev01',
@@ -20,11 +20,36 @@ mqttTool.connect = function(params){
     client = mqtt.connect('wx://api.hshuishang.com:8084/mqtt', options)
     console.log('WX', client)
     mqttTool.client = client
-    if (mqttTool.client) {
+    
-        console.log('连接成功')
+    // 设置连接状态回调
-    } else {
+    if (callbacks.onConnect) {
-        console.log('连接失败')
+        client.on('connect', callbacks.onConnect)
     }
+    
+    if (callbacks.onDisconnect) {
+        client.on('disconnect', callbacks.onDisconnect)
+    }
+    
+    if (callbacks.onError) {
+        client.on('error', callbacks.onError)
+    }
+    
+    if (callbacks.onReconnect) {
+        client.on('reconnect', callbacks.onReconnect)
+    }
+    
+    client.on('connect', function() {
+        console.log('MQTT连接成功')
+    })
+    
+    client.on('error', function(error) {
+        console.log('MQTT连接错误:', error)
+    })
+    
+    client.on('reconnect', function() {
+        console.log('MQTT正在重连...')
+    })
+    
     return client
 }