From 9b6a3c9bceadeedf0858dbf05ea2ebb37b56e2c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Wed, 24 Sep 2025 17:55:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=89=8B=E6=9C=BA=E7=AB=AF?=
 =?UTF-8?q?=E8=A7=A3=E7=A0=81=E6=8A=A5=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                        |  33 +++++-
 package.json                             |   1 +
 packages/customerService/index/index.vue | 137 ++++++++++++-----------
 packages/localLife/detail/index.css      |   1 +
 yarn.lock                                |  10 +-
 5 files changed, 109 insertions(+), 73 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0f73b8e2..9dd5db54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
             "version": "1.0.1",
             "dependencies": {
                 "abort-controller": "^3.0.0",
+                "buffer": "^6.0.3",
                 "mqtt": "^3.0.0",
                 "vue": "^3.5.21"
             }
@@ -220,6 +221,30 @@
                 "readable-stream": "^3.4.0"
             }
         },
+        "node_modules/bl/node_modules/buffer": {
+            "version": "5.7.1",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+            "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "base64-js": "^1.3.1",
+                "ieee754": "^1.1.13"
+            }
+        },
         "node_modules/bl/node_modules/readable-stream": {
             "version": "3.6.2",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -245,9 +270,9 @@
             }
         },
         "node_modules/buffer": {
-            "version": "5.7.1",
-            "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-            "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
             "funding": [
                 {
                     "type": "github",
@@ -265,7 +290,7 @@
             "license": "MIT",
             "dependencies": {
                 "base64-js": "^1.3.1",
-                "ieee754": "^1.1.13"
+                "ieee754": "^1.2.1"
             }
         },
         "node_modules/buffer-from": {
diff --git a/package.json b/package.json
index 8fd2267e..3058b2a0 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     },
     "dependencies": {
         "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
         "mqtt": "^3.0.0",
         "vue": "^3.5.21"
     }
diff --git a/packages/customerService/index/index.vue b/packages/customerService/index/index.vue
index 315ba84a..098faf2c 100644
--- a/packages/customerService/index/index.vue
+++ b/packages/customerService/index/index.vue
@@ -1,4 +1,4 @@
-<template>
+packages/customerService/index/index<template>
   <view class="chat-container">
     <!-- 聊天头部 -->
     <view :style="{ paddingTop: top + 'px', height: localHeight + 'px' }" class="chat-header">
@@ -15,8 +15,8 @@
     <view v-if="connectingStatus" class="connecting-status">{{ connectingStatus }}</view>
 
     <!-- 聊天消息区域 -->
-    <scroll-view :scroll-into-view="scrollToView" class="chat-messages" scroll-y="true"
-                 @scrolltoupper="loadMoreHistory" @scrolltolower="loadMoreHistory" lower-threshold="100" upper-threshold="100">
+    <scroll-view :scroll-into-view="scrollToView" class="chat-messages" scroll-y="true" @scrolltoupper="loadMoreHistory"
+      @scrolltolower="loadMoreHistory" lower-threshold="100" upper-threshold="100">
       <!-- 加载历史消息提示 -->
       <view v-if="isLoadingHistory" class="message-time">加载历史消息...</view>
 
@@ -32,7 +32,7 @@
           'loading': message.isLoading
         }" class="message-item">
           <image :src="message.isSelf ? userAvatar : (chatTarget.employee_image)" class="message-avatar"
-                 mode="aspectFill"></image>
+            mode="aspectFill"></image>
           <view class="message-content">
             {{ message.content }}
           </view>
@@ -44,9 +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" auto-height hold-keyboard="true"
-                  enable-keyboard-accessory-view="true" cursor-spacing="10" maxlength="500"
-                  @focus="onInputFocus" @blur="onInputBlur"></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>
@@ -61,7 +61,7 @@ import { apiArr } from '@/api/customerService'
 import mqttTool from '@/utils/mqtt'
 
 export default {
-  data(){
+  data() {
     return {
       localHeight: '',
       top: '',
@@ -105,14 +105,14 @@ export default {
       scrollToBottomFlag: false
     }
   },
-  onLoad(options){
+  onLoad(options) {
     const meun = menuButtonInfo()
     this.top = meun.top
     this.localHeight = meun.height
     // 获取聊天对象信息
     if (options.item) {
       this.chatTarget = JSON.parse(options.item)
-      this.chatTarget.title = `客服${ this.chatTarget.employee_name }`
+      this.chatTarget.title = `客服${this.chatTarget.employee_name}`
     }
     // 初始化MQTT连接
     this.initChat()
@@ -120,15 +120,15 @@ export default {
     // 初始化用户头像
     this.userAvatar = picUrl + uni.getStorageSync('headPhoto')
   },
-  onShow(){
+  onShow() {
   },
   methods: {
-    async connect(){
+    async connect() {
       this.client = null
       const options = {
         clientId: this.selfClientId
       }
-      
+
       // 添加连接状态回调
       const callbacks = {
         onConnect: () => {
@@ -148,15 +148,16 @@ export default {
           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')
-        let msg = de.decode(message)
-        let jsMsg = JSON.parse(msg)
+        const msgStr = Buffer.from(message).toString('utf8'); // 二进制转UTF-8字符串
+        const msg = JSON.parse(msgStr); // 后续解析逻辑不变
+
+        let jsMsg = msg // 直接使用已解析的对象，无需再次解析
         console.log('收到消息', topic, msg)
         if (jsMsg.send_client === this.selfClientId || jsMsg.receive_client === this.selfClientId) {
           console.log('接收或发送人是我')
@@ -174,7 +175,7 @@ export default {
         }
       })
     },
-    async subscribe(){
+    async subscribe() {
       if (this.isConnected && this.client) {
         this.client.subscribe('contact/message/receive_msg', { qos: 0 }, (err) => {
           if (!err) {
@@ -191,7 +192,7 @@ export default {
       }
     },
     // 初始化聊天
-    async initChat(){
+    async initChat() {
       try {
         // 显示连接状态
         this.connectingStatus = '正在连接客服...'
@@ -212,7 +213,7 @@ export default {
     },
 
     // 获取MQTT连接配置
-    async getMqttConfig(){
+    async getMqttConfig() {
       try {
         // 如果没有已创建的实例或clientId，则通过API获取
         return new Promise((resolve, reject) => {
@@ -244,7 +245,7 @@ export default {
     },
 
     // MQTT断开连接回调
-    onDisconnect(packet){
+    onDisconnect(packet) {
       console.log('MQTT连接断开', packet)
       this.isConnected = false
       this.client = null
@@ -263,39 +264,39 @@ export default {
     },
 
     // 加载历史消息
-    async loadHistoryMessages(){
+    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 => ({
@@ -304,10 +305,10 @@ export default {
             isSelf: msg.send_client === this.mqttConfig.clientId,
             isLoading: false
           })).reverse() // 因为是按时间降序获取的，所以需要反转
-          
+
           // 添加到消息列表开头
           this.messages = [...formattedMessages, ...this.messages]
-          
+
           // 增加页码
           this.pageNum++
         }
@@ -319,14 +320,14 @@ export default {
     },
 
     // 加载更多历史消息
-    loadMoreHistory(){
+    loadMoreHistory() {
       if (!this.isLoadingHistory && this.hasMoreHistory) {
         this.loadHistoryMessages()
       }
     },
 
     // 发送消息
-    sendMessage(){
+    sendMessage() {
       const content = this.inputMessage.trim()
       console.log('发送消息', content)
       if (!content || !this.client || !this.isConnected) return
@@ -344,17 +345,17 @@ export default {
       }
       console.log('发送消息', msgData)
       this.client.publish(
-          'contact/message/send_msg', // 使用指定的发送消息主题
-          JSON.stringify(msgData),
-          { Qos: 0 },
-          (err) => {
-            if (err) {
-              console.error('发送消息失败', err)
-              // 可以在这里添加消息发送失败的处理逻辑
-            } else {
-              console.log('发送消息成功')
-            }
+        'contact/message/send_msg', // 使用指定的发送消息主题
+        JSON.stringify(msgData),
+        { Qos: 0 },
+        (err) => {
+          if (err) {
+            console.error('发送消息失败', err)
+            // 可以在这里添加消息发送失败的处理逻辑
+          } else {
+            console.log('发送消息成功')
           }
+        }
       )
 
       // 清空输入框
@@ -362,10 +363,10 @@ export default {
     },
 
     // 处理输入事件
-    handleInput(){
+    handleInput() {
       this.canSend = this.inputMessage.trim().length > 0
     },
-    
+
     onInputFocus() {
       // 输入框获取焦点时，设置滚动到底部的标记
       this.scrollToBottomFlag = true;
@@ -375,14 +376,14 @@ export default {
         }
       }, 300);
     },
-    
+
     onInputBlur() {
       // 输入框失去焦点时，重置滚动标记
       this.scrollToBottomFlag = false;
     },
 
     // 是否需要显示时间分割线
-    needShowTime(index){
+    needShowTime(index) {
       if (index === 0) return true
 
       const currentMsg = this.messages[index]
@@ -393,28 +394,28 @@ export default {
     },
 
     // 格式化时间
-    formatTime(time){
+    formatTime(time) {
       const date = new Date(time)
       const hours = date.getHours().toString().padStart(2, '0')
       const minutes = date.getMinutes().toString().padStart(2, '0')
 
-      return `${ hours }:${ minutes }`
+      return `${hours}:${minutes}`
     },
 
     // 滚动到底部
-    scrollToBottom(){
+    scrollToBottom() {
       setTimeout(() => {
         this.scrollToView = 'msg-' + (this.messages.length - 1)
       }, 100)
     },
 
     // 返回上一页
-    goBack(){
+    goBack() {
       uni.navigateBack()
     },
 
     // 启动心跳包 - 增强版：添加错误处理和状态检查
-    startKeepalive(){
+    startKeepalive() {
       // 停止之前的定时器
       this.stopKeepalive()
 
@@ -426,20 +427,20 @@ export default {
           }
 
           this.client.publish(
-              'contact/message/keep_time',
-              JSON.stringify(keepaliveData),
-              {},
-              (err) => {
-                if (err) {
-                  console.error('发送心跳包失败', err)
-                  // 心跳包发送失败可能表示连接有问题，可以考虑触发重连
-                  if (!this.isConnected) {
-                    return
-                  }
-                  console.log('心跳包发送失败，尝试检查连接状态')
-                  // 这里可以添加额外的连接检查逻辑
+            'contact/message/keep_time',
+            JSON.stringify(keepaliveData),
+            {},
+            (err) => {
+              if (err) {
+                console.error('发送心跳包失败', err)
+                // 心跳包发送失败可能表示连接有问题，可以考虑触发重连
+                if (!this.isConnected) {
+                  return
                 }
+                console.log('心跳包发送失败，尝试检查连接状态')
+                // 这里可以添加额外的连接检查逻辑
               }
+            }
           )
         } else {
           console.warn('MQTT未连接，停止心跳包')
@@ -449,7 +450,7 @@ export default {
     },
 
     // 停止心跳包
-    stopKeepalive(){
+    stopKeepalive() {
       if (this.keepaliveTimer) {
         clearInterval(this.keepaliveTimer)
         this.keepaliveTimer = null
@@ -457,7 +458,7 @@ export default {
     },
 
     // 跳转到切换客服页面
-    goToChangeService(){
+    goToChangeService() {
       uni.navigateTo({
         url: '/packages/customerService/changeService/index?currentMchId=' + this.chatTarget.mchId
       })
@@ -465,7 +466,7 @@ export default {
   },
 
   // 页面卸载时停止心跳包
-  onUnload(){
+  onUnload() {
     // 断开MQTT连接
     if (this.client) {
       this.client.disconnect()
diff --git a/packages/localLife/detail/index.css b/packages/localLife/detail/index.css
index fad1985c..fe9a270f 100644
--- a/packages/localLife/detail/index.css
+++ b/packages/localLife/detail/index.css
@@ -83,6 +83,7 @@ page {
   justify-content: space-between;
   align-items: center;
   box-shadow: 3rpx -3rpx 15rpx 0rpx rgba(255,27,27,0.05);
+  padding-bottom: 30rpx;
 }
 
 .left {
diff --git a/yarn.lock b/yarn.lock
index 95bd4639..4686b7aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -164,6 +164,14 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 callback-stream@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmjs.org/callback-stream/-/callback-stream-1.1.0.tgz"
@@ -384,7 +392,7 @@ help-me@^1.0.1:
     through2 "^2.0.1"
     xtend "^4.0.0"
 
-ieee754@^1.1.13:
+ieee754@^1.1.13, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==