Update customer service page to connect with personnel table and display real data

pages/chat-detail/index.wxml

@@ -1,14 +1,8 @@
 <view class="chat-page-container">
   <view class="chat-header">
-    <view class="header-back" bindtap="onBack">
-      <text>←</text>
-    </view>
     <view class="header-info">
       <text class="header-name">{{chatTitle}}</text>
     </view>
-    <view class="header-more">
-      <text>⋮</text>
-    </view>
   </view>
   
   <scroll-view

pages/chat-detail/index.wxss

@@ -202,7 +202,7 @@
 }
 
 .message-input {
-  flex: 1;
+  flex: 5;
   background-color: #f5f5f5;
   border-radius: 28rpx;
   padding: 16rpx 24rpx;
@@ -214,17 +214,21 @@
 }
 
 .send-button {
+  flex: 1;
   background-color: #FF6B81;
   color: #fff;
   font-size: 28rpx;
   font-weight: bold;
-  padding: 16rpx 32rpx;
+  padding: 16rpx 24rpx;
   border-radius: 28rpx;
   border: none;
-  min-width: 120rpx;
+  max-width: 160rpx;
   text-align: center;
   line-height: normal;
-  height: auto;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .send-button:hover {

pages/goods-detail/goods-detail.js

@@ -474,7 +474,128 @@ Page({
     }
   },
 
-  // 我想要（预约）
+  // 在线聊天
+  onChat(e) {
+    console.log('在线咨询事件:', e);
+    const { id } = e.currentTarget.dataset;
+    if (!id) return;
+    
+    // 获取商品联系人信息
+    const contactName = this.data.goodsDetail.product_contact;
+    const contactPhone = this.data.goodsDetail.contact_phone;
+    
+    // 检查是否有联系电话
+    if (!contactPhone) {
+      wx.showToast({
+        title: '未找到联系电话',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    // 跳转到聊天界面或打开客服窗口
+    wx.showModal({
+      title: '在线咨询',
+      content: `将为您连接到 ${contactName || '客服人员'}`,
+      showCancel: true,
+      cancelText: '取消',
+      confirmText: '立即咨询',
+      success: (res) => {
+        if (res.confirm) {
+          // 获取当前用户的手机号
+          let userPhone = '';
+          try {
+            // 尝试从不同的存储位置获取手机号
+            const userInfo = wx.getStorageSync('userInfo');
+            if (userInfo && userInfo.phoneNumber) {
+              userPhone = userInfo.phoneNumber;
+            } else {
+              // 尝试从其他可能的存储位置获取
+              const users = wx.getStorageSync('users') || {};
+              const userId = wx.getStorageSync('userId');
+              if (userId && users[userId] && users[userId].phoneNumber) {
+                userPhone = users[userId].phoneNumber;
+              } else {
+                userPhone = wx.getStorageSync('phoneNumber');
+              }
+            }
+            // 如果都获取不到，使用默认登录手机号
+            if (!userPhone) {
+              userPhone = '18482694520';
+            }
+          } catch (e) {
+            console.error('获取用户手机号失败:', e);
+            // 如果获取失败，使用默认登录手机号
+            userPhone = '18482694520';
+          }
+
+          console.log('当前用户手机号:', userPhone);
+          console.log('联系人信息:', { contactName, contactPhone });
+
+          // 验证手机号
+          if (!userPhone) {
+            wx.showToast({
+              title: '请先登录获取手机号',
+              icon: 'none'
+            });
+            return;
+          }
+
+          // 验证联系人手机号
+          if (!contactPhone) {
+            console.error('联系人手机号不存在');
+            wx.showToast({
+              title: '联系人信息不完整，请稍后重试',
+              icon: 'none'
+            });
+            return;
+          }
+
+          console.log('联系人手机号:', contactPhone);
+
+          // 显示加载提示
+          wx.showLoading({
+            title: '正在建立聊天...',
+          });
+
+          // 调用API创建聊天记录，确保用户和联系人之间的聊天记录是双向的
+          API.fixChatRecordsPair(userPhone, contactPhone).then(res => {
+            console.log('聊天建立成功:', JSON.stringify(res, null, 2));
+            // 隐藏加载提示
+            wx.hideLoading();
+            
+            // 使用联系人手机号作为聊天会话ID
+            const chatSessionId = contactPhone;
+            
+            // 跳转到聊天页面，确保正确传递联系人手机号和用户名
+            wx.navigateTo({
+              url: `/pages/chat-detail/index?userId=${chatSessionId}&userName=${encodeURIComponent(contactName || '联系人')}&phone=${contactPhone}&isManager=true`,
+              success: function () {
+                console.log('成功跳转到聊天详情页');
+              },
+              fail: function (error) {
+                console.error('跳转到聊天详情页失败:', error);
+                wx.showToast({
+                  title: '聊天功能开发中',
+                  icon: 'none'
+                });
+              }
+            });
+          }).catch(err => {
+            console.error('建立聊天失败:', err);
+            // 隐藏加载提示
+            wx.hideLoading();
+            wx.showToast({
+              title: '建立聊天失败，请重试',
+              icon: 'none'
+            });
+          });
+        }
+      }
+    });
+  },
+
+  /* 已移除：我想要（预约）功能
   onClickWantInDetail(e) {
     console.log('我想要事件:', e);
     const { id } = e.currentTarget.dataset;
@@ -539,6 +660,7 @@ Page({
         });
       });
   },
+  */
 
   // 返回上一页
   goBack() {

pages/goods-detail/goods-detail.wxml

@@ -135,12 +135,11 @@
       拨打电话
     </button>
     <button 
-      class="want-button bottom-button"
+      class="chat-button bottom-button"
-      bindtap="onClickWantInDetail"
+      bindtap="onChat"
       data-id="{{goodsDetail.id}}"
-      disabled="{{goodsDetail.isReserved}}"
     >
-      {{goodsDetail.isReserved ? '已预约' : '我想要'}}
+      💬 在线咨询
     </button>
   </view>
   <!-- 返回按钮区域（仅在seller页面查看时显示） -->

pages/goods-detail/goods-detail.wxss

@@ -348,6 +348,44 @@
   box-shadow: 0 2px 8px rgba(47, 84, 235, 0.2);
 }
 
+.chat-button {
+  padding: 0 24px;
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  color: #333333;
+  background-color: #e6f7f0;
+  border: 1px solid #52c41a;
+  border-radius: 4px;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
+}
+
+/* 底部按钮区域样式 */
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 16px;
+  background-color: #ffffff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.bottom-button {
+  flex: 1;
+  margin: 0 8px;
+  font-weight: 500;
+}
+
+.bottom-button:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
 .call-button:active {
   background-color: #4066ff;
   border-color: #4066ff;
@@ -395,33 +433,14 @@
   box-shadow: none;
 }
 
-.want-button.bottom-button {
-  background: linear-gradient(135deg, #2f54eb 0%, #1d39c4 100%);
-  color: #ffffff;
-  box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2);
-}
-
 .call-button.bottom-button:active {
   background-color: #f0f4ff;
   transform: scale(0.98);
 }
 
-.want-button.bottom-button:active {
+.chat-button.bottom-button:active {
-  transform: translateY(2px) scale(0.98);
+  background-color: #d6f7e6;
-  box-shadow: 0 2px 6px rgba(47, 84, 235, 0.15);
+  transform: scale(0.98);
-}
-
-.want-button.bottom-button[disabled] {
-  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-  color: #ffffff !important;
-  border: none;
-  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.2);
-  opacity: 1;
-}
-
-.want-button.bottom-button[disabled]:active {
-  transform: none;
-  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
 }
 
 /* 图片预览弹窗 */