Default User
3 months ago
55 changed files with 10371 additions and 607 deletions
|
Before Width: | Height: | Size: 1.2 MiB |
File diff suppressed because it is too large
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "聊天详情", |
||||
|
"navigationBarBackgroundColor": "#ffffff", |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"usingComponents": {}, |
||||
|
"enablePullDownRefresh": false, |
||||
|
"navigationBarBackButtonText": "返回" |
||||
|
} |
||||
@ -0,0 +1,102 @@ |
|||||
|
<view class="chat-detail-container"> |
||||
|
<!-- 连接状态显示 --> |
||||
|
<view wx:if="{{!isMockMode}}" class="connection-status {{connectionStatus}}"> |
||||
|
<text class="status-text">{{connectionMessage}}</text> |
||||
|
<button wx:if="{{connectionStatus === 'error' || connectionStatus === 'disconnected'}}" |
||||
|
class="reconnect-btn" |
||||
|
size="mini" |
||||
|
bindtap="reconnect"> |
||||
|
重新连接 |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 测试模式切换 --> |
||||
|
<view class="test-mode-switch"> |
||||
|
<switch wx:if="{{!isMockMode}}" checked="{{!isMockMode}}" bindchange="toggleMockMode" /> |
||||
|
<text wx:if="{{!isMockMode}}" class="mode-label">模拟模式切换</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 消息列表区域 - 微信风格 --> |
||||
|
<scroll-view |
||||
|
id="message-list" |
||||
|
class="wechat-message-list" |
||||
|
scroll-y |
||||
|
bindscrolltolower="loadMoreMessages" |
||||
|
scroll-into-view="{{scrollToMessage}}" |
||||
|
scroll-with-animation |
||||
|
> |
||||
|
<!-- 消息容器 --> |
||||
|
<view class="wechat-message-container"> |
||||
|
<!-- 遍历消息列表 --> |
||||
|
<block wx:for="{{messages}}" wx:key="index"> |
||||
|
<!-- 时间显示 - 条件显示 --> |
||||
|
<view wx:if="{{item.showTime}}" class="wechat-time-display"> |
||||
|
<text class="wechat-time-text">{{item.time}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 系统消息（如诈骗提示）--> |
||||
|
<view wx:if="{{item.type === 'system'}}" class="wechat-system-message"> |
||||
|
<view class="wechat-system-content"> |
||||
|
<view wx:if="{{item.isWarning}}" class="wechat-warning-title">谨防诈骗</view> |
||||
|
<text class="wechat-system-text">{{item.content}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 对方消息 --> |
||||
|
<view wx:elif="{{item.type === 'message' && item.sender === 'other'}}" class="wechat-message-item wechat-other-message"> |
||||
|
<view class="wechat-avatar"> |
||||
|
<text class="wechat-avatar-text">{{userName ? userName.charAt(0) : (avatar || '用')}}</text> |
||||
|
</view> |
||||
|
<!-- 图片消息直接显示 --> |
||||
|
<image wx:if="{{item.isImage}}" src="{{item.content}}" class="wechat-message-image wechat-other-image" mode="aspectFit" bindtap="previewImage" data-src="{{item.content}}" /> |
||||
|
<!-- 文本消息仍然显示在气泡中 --> |
||||
|
<view wx:elif="{{!item.isImage}}" class="wechat-message-wrapper"> |
||||
|
<view class="wechat-message-name">{{userName}}</view> |
||||
|
<view class="wechat-message-bubble wechat-other-bubble"> |
||||
|
<text class="wechat-message-text">{{item.content}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 我的消息 --> |
||||
|
<view wx:elif="{{item.type === 'message' && item.sender === 'me'}}" class="wechat-message-item wechat-my-message"> |
||||
|
<!-- 图片消息直接显示 --> |
||||
|
<image wx:if="{{item.isImage}}" src="{{item.content}}" class="wechat-message-image wechat-my-image" mode="aspectFit" bindtap="previewImage" data-src="{{item.content}}" /> |
||||
|
<!-- 文本消息仍然显示在气泡中 --> |
||||
|
<view wx:elif="{{!item.isImage}}" class="wechat-message-wrapper wechat-my-wrapper"> |
||||
|
<view class="wechat-message-bubble wechat-my-bubble"> |
||||
|
<text class="wechat-message-text wechat-my-text">{{item.content}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="wechat-avatar wechat-my-avatar"> |
||||
|
<text class="wechat-avatar-text">我</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 输入区域 - 微信风格 --> |
||||
|
<view class="wechat-input-area"> |
||||
|
<view class="wechat-input-toolbar"> |
||||
|
<view class="wechat-input-left"> |
||||
|
<view class="wechat-emoji-btn" bindtap="showEmoji">😊</view> |
||||
|
<view class="wechat-voice-btn" bindtap="toggleVoiceMode">🔊</view> |
||||
|
</view> |
||||
|
<view class="wechat-input-wrapper"> |
||||
|
<input |
||||
|
class="wechat-message-input" |
||||
|
value="{{inputValue}}" |
||||
|
bindinput="onInput" |
||||
|
placeholder="消息" |
||||
|
placeholder-style="color: #999999;" |
||||
|
adjust-position |
||||
|
maxlength="500" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="wechat-input-right"> |
||||
|
<view class="wechat-more-btn" bindtap="showMoreOptions">+</view> |
||||
|
<view class="wechat-send-btn" bindtap="sendMessage" disabled="{{!inputValue.trim()}}">发送</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,468 @@ |
|||||
|
/* 微信聊天界面样式 */ |
||||
|
.chat-detail-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
background-color: #e5e5e5; |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; |
||||
|
} |
||||
|
|
||||
|
/* 连接状态显示样式 */ |
||||
|
.connection-status { |
||||
|
padding: 8rpx 0; |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
position: relative; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
|
||||
|
.connection-status.connecting { |
||||
|
background-color: #FF9800; |
||||
|
} |
||||
|
|
||||
|
.connection-status.connected { |
||||
|
background-color: #4CAF50; |
||||
|
} |
||||
|
|
||||
|
.connection-status.error { |
||||
|
background-color: #F44336; |
||||
|
} |
||||
|
|
||||
|
.connection-status.disconnected { |
||||
|
background-color: #9E9E9E; |
||||
|
} |
||||
|
|
||||
|
.status-text { |
||||
|
display: inline-block; |
||||
|
padding: 0 20rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.reconnect-btn { |
||||
|
display: inline-block; |
||||
|
margin-left: 20rpx; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
line-height: 40rpx; |
||||
|
background-color: rgba(255, 255, 255, 0.3); |
||||
|
color: #fff; |
||||
|
border: 1px solid rgba(255, 255, 255, 0.5); |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.test-mode-switch { |
||||
|
padding: 20rpx; |
||||
|
background-color: #f8f8f8; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-bottom: 1rpx solid #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.mode-label { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/* 消息列表区域 - 微信风格 */ |
||||
|
.wechat-message-list { |
||||
|
flex: 1; |
||||
|
padding: 20rpx 20rpx 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
overflow-y: auto; |
||||
|
background-color: #e5e5e5; |
||||
|
} |
||||
|
|
||||
|
/* 消息容器 */ |
||||
|
.wechat-message-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
/* 时间显示 */ |
||||
|
.wechat-time-display { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.wechat-time-text { |
||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||
|
color: #fff; |
||||
|
font-size: 24rpx; |
||||
|
padding: 6rpx 20rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
/* 系统消息 */ |
||||
|
.wechat-system-message { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 10rpx 0; |
||||
|
} |
||||
|
|
||||
|
.wechat-system-content { |
||||
|
background-color: rgba(255, 255, 255, 0.8); |
||||
|
border-radius: 18rpx; |
||||
|
padding: 16rpx 24rpx; |
||||
|
max-width: 80%; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.wechat-warning-title { |
||||
|
color: #ff0000; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-system-text { |
||||
|
color: #606266; |
||||
|
font-size: 26rpx; |
||||
|
line-height: 36rpx; |
||||
|
} |
||||
|
|
||||
|
/* 商品信息卡片 */ |
||||
|
.wechat-goods-card { |
||||
|
display: flex; |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 18rpx; |
||||
|
padding: 20rpx; |
||||
|
margin: 10rpx 0; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
|
align-self: flex-start; |
||||
|
max-width: 80%; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
background-color: #f0f0f0; |
||||
|
border-radius: 8rpx; |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-content { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #303133; |
||||
|
font-weight: 500; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-desc { |
||||
|
font-size: 26rpx; |
||||
|
color: #606266; |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
line-height: 36rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-price { |
||||
|
font-size: 32rpx; |
||||
|
color: #e64340; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.wechat-goods-type { |
||||
|
font-size: 24rpx; |
||||
|
color: #909399; |
||||
|
background-color: #f0f9ff; |
||||
|
padding: 4rpx 16rpx; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
/* 消息项 */ |
||||
|
.wechat-message-item { |
||||
|
display: flex; |
||||
|
margin: 10rpx 0; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
/* 对方消息 */ |
||||
|
.wechat-other-message { |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
/* 我的消息 */ |
||||
|
.wechat-my-message { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
/* 头像 - 圆形 */ |
||||
|
.wechat-avatar { |
||||
|
width: 76rpx; |
||||
|
height: 76rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #9aa5b1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 0 12rpx; |
||||
|
flex-shrink: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.wechat-my-avatar { |
||||
|
background-color: #d8d8d8; |
||||
|
} |
||||
|
|
||||
|
.wechat-avatar-text { |
||||
|
color: #ffffff; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 消息包装器 */ |
||||
|
.wechat-message-wrapper { |
||||
|
max-width: 75%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
gap: 6rpx; |
||||
|
} |
||||
|
|
||||
|
/* 客服姓名显示 */ |
||||
|
.wechat-message-name { |
||||
|
font-size: 24rpx; |
||||
|
color: #909399; |
||||
|
margin-left: 4rpx; |
||||
|
margin-bottom: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-my-wrapper { |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
/* 消息气泡 - 添加三角形箭头 */ |
||||
|
.wechat-message-bubble { |
||||
|
position: relative; |
||||
|
padding: 14rpx 20rpx; |
||||
|
max-width: 100%; |
||||
|
word-wrap: break-word; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.wechat-other-bubble { |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 18rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-my-bubble { |
||||
|
background-color: #07c160; |
||||
|
border-radius: 18rpx; |
||||
|
} |
||||
|
|
||||
|
/* 对方消息气泡三角形 */ |
||||
|
.wechat-other-bubble::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: -10rpx; |
||||
|
bottom: 18rpx; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 10rpx 10rpx 10rpx 0; |
||||
|
border-color: transparent #ffffff transparent transparent; |
||||
|
} |
||||
|
|
||||
|
/* 我的消息气泡三角形 */ |
||||
|
.wechat-my-bubble::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
right: -10rpx; |
||||
|
bottom: 18rpx; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 10rpx 0 10rpx 10rpx; |
||||
|
border-color: transparent transparent transparent #07c160; |
||||
|
} |
||||
|
|
||||
|
/* 消息文本 */ |
||||
|
.wechat-message-text { |
||||
|
font-size: 32rpx; |
||||
|
line-height: 44rpx; |
||||
|
color: #303133; |
||||
|
} |
||||
|
|
||||
|
.wechat-my-text { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
/* 图片消息样式 - 使用微信插件风格 */ |
||||
|
.wechat-message-image { |
||||
|
width: 280rpx; |
||||
|
height: 280rpx; |
||||
|
max-width: 75%; |
||||
|
max-height: 500rpx; |
||||
|
border-radius: 16rpx; |
||||
|
margin: 8rpx 0; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
/* 对方图片消息样式 - 左侧缩进 */ |
||||
|
.wechat-other-image { |
||||
|
margin-left: 16rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
/* 我的图片消息样式 - 右侧缩进 */ |
||||
|
.wechat-my-image { |
||||
|
margin-right: 16rpx; |
||||
|
align-self: flex-end; |
||||
|
} |
||||
|
|
||||
|
/* 消息项调整，确保图片和文本消息对齐 */ |
||||
|
.wechat-message-item { |
||||
|
align-items: flex-start; |
||||
|
padding: 4rpx 0; |
||||
|
} |
||||
|
|
||||
|
/* 消息时间 */ |
||||
|
.wechat-message-time { |
||||
|
font-size: 22rpx; |
||||
|
color: #909399; |
||||
|
padding: 0 4rpx; |
||||
|
} |
||||
|
|
||||
|
.wechat-my-time { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
/* 输入区域 - 微信风格 */ |
||||
|
.wechat-input-area { |
||||
|
background-color: #f5f5f5; |
||||
|
border-top: 1rpx solid #d8d8d8; |
||||
|
padding: 12rpx 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 输入工具栏 */ |
||||
|
.wechat-input-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
|
/* 底部安全区域适配 */ |
||||
|
@media screen and (min-height: 812px) { |
||||
|
.wechat-input-area { |
||||
|
padding-bottom: calc(12rpx + env(safe-area-inset-bottom, 0rpx)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 左侧按钮 */ |
||||
|
.wechat-input-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10rpx; |
||||
|
} |
||||
|
|
||||
|
/* 右侧按钮 */ |
||||
|
.wechat-input-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10rpx; |
||||
|
} |
||||
|
|
||||
|
/* 表情按钮 */ |
||||
|
.wechat-emoji-btn { |
||||
|
width: 64rpx; |
||||
|
height: 64rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
|
||||
|
/* 语音按钮 */ |
||||
|
.wechat-voice-btn { |
||||
|
width: 64rpx; |
||||
|
height: 64rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
|
||||
|
/* 更多按钮 */ |
||||
|
.wechat-more-btn { |
||||
|
width: 64rpx; |
||||
|
height: 64rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 44rpx; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
/* 发送按钮 */ |
||||
|
.wechat-send-btn { |
||||
|
background-color: #07c160; |
||||
|
color: #ffffff; |
||||
|
font-size: 28rpx; |
||||
|
padding: 0 28rpx; |
||||
|
height: 64rpx; |
||||
|
line-height: 64rpx; |
||||
|
border-radius: 32rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* 发送按钮禁用状态 */ |
||||
|
.wechat-send-btn:disabled { |
||||
|
background-color: #c8c8c8; |
||||
|
color: #ffffff; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
/* 发送按钮点击状态 */ |
||||
|
.wechat-send-btn:active:not(:disabled) { |
||||
|
background-color: #06b354; |
||||
|
} |
||||
|
|
||||
|
/* 输入框包装器 */ |
||||
|
.wechat-input-wrapper { |
||||
|
flex: 1; |
||||
|
background-color: #ffffff; |
||||
|
border: 1rpx solid #d8d8d8; |
||||
|
border-radius: 32rpx; |
||||
|
padding: 0 20rpx; |
||||
|
min-height: 64rpx; |
||||
|
max-height: 180rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
/* 消息输入框 */ |
||||
|
.wechat-message-input { |
||||
|
flex: 1; |
||||
|
font-size: 32rpx; |
||||
|
color: #303133; |
||||
|
min-height: 44rpx; |
||||
|
max-height: 160rpx; |
||||
|
line-height: 44rpx; |
||||
|
padding: 0; |
||||
|
margin: 10rpx 0; |
||||
|
} |
||||
@ -0,0 +1,474 @@ |
|||||
|
// pages/chat/index.js
|
||||
|
import socketManager from '../../utils/websocket.js'; |
||||
|
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
messages: [], // 初始为空数组，后续通过数据获取和WebSocket更新
|
||||
|
activeTab: 'all', |
||||
|
webSocketUrl: '' // WebSocket服务器地址
|
||||
|
}, |
||||
|
|
||||
|
// WebSocket消息处理函数
|
||||
|
handleWebSocketMessage: function(message) { |
||||
|
console.log('聊天列表页面接收到消息:', message); |
||||
|
|
||||
|
// 判断是否为新消息 - 支持'new_message'类型（服务器实际发送的类型）
|
||||
|
if (message.type === 'new_message') { |
||||
|
const newMessage = message.payload; |
||||
|
this.updateMessageList(newMessage); |
||||
|
} else if (message.type === 'chat_message') { |
||||
|
// 保留原有的'chat_message'类型支持，兼容不同的消息格式
|
||||
|
const newMessage = message.data; |
||||
|
this.updateMessageList(newMessage); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 更新消息列表
|
||||
|
updateMessageList: function(newMessage) { |
||||
|
console.log('更新消息列表:', newMessage); |
||||
|
const messages = [...this.data.messages]; |
||||
|
|
||||
|
// 确定消息发送者ID - 处理服务器返回的数据格式
|
||||
|
const senderId = newMessage.senderId; |
||||
|
const existingIndex = messages.findIndex(item => item.id === senderId); |
||||
|
|
||||
|
// 格式化消息时间 - 服务器使用createdAt字段
|
||||
|
const now = new Date(); |
||||
|
const messageDate = new Date(newMessage.createdAt || newMessage.timestamp || Date.now()); |
||||
|
let displayTime = ''; |
||||
|
|
||||
|
if (messageDate.toDateString() === now.toDateString()) { |
||||
|
// 今天的消息只显示时间
|
||||
|
displayTime = messageDate.getHours().toString().padStart(2, '0') + ':' + |
||||
|
messageDate.getMinutes().toString().padStart(2, '0'); |
||||
|
} else if (messageDate.toDateString() === new Date(now.getTime() - 86400000).toDateString()) { |
||||
|
// 昨天的消息
|
||||
|
displayTime = '昨天'; |
||||
|
} else { |
||||
|
// 其他日期显示月日
|
||||
|
displayTime = (messageDate.getMonth() + 1) + '月' + messageDate.getDate() + '日'; |
||||
|
} |
||||
|
|
||||
|
// 获取当前用户ID，确定消息方向
|
||||
|
const app = getApp(); |
||||
|
const currentUserId = app.globalData.userInfo?.userId || wx.getStorageSync('userId') || 'unknown'; |
||||
|
|
||||
|
// 确定显示的用户ID（如果是自己发送的消息，显示接收者ID）
|
||||
|
const displayUserId = senderId === currentUserId ? newMessage.receiverId : senderId; |
||||
|
|
||||
|
if (existingIndex >= 0) { |
||||
|
// 存在该用户的消息，更新内容和时间
|
||||
|
messages[existingIndex] = { |
||||
|
...messages[existingIndex], |
||||
|
content: newMessage.content || '', |
||||
|
time: displayTime, |
||||
|
isRead: false |
||||
|
}; |
||||
|
// 将更新的消息移到列表顶部
|
||||
|
const [updatedMessage] = messages.splice(existingIndex, 1); |
||||
|
messages.unshift(updatedMessage); |
||||
|
} else { |
||||
|
// 新用户消息，添加到列表顶部
|
||||
|
// 这里暂时使用ID作为用户名，实际应用中应该从用户信息中获取
|
||||
|
const displayName = `用户${displayUserId}`; |
||||
|
messages.unshift({ |
||||
|
id: displayUserId, |
||||
|
name: displayName, |
||||
|
avatar: displayName.charAt(0), |
||||
|
content: newMessage.content || '', |
||||
|
time: displayTime, |
||||
|
isRead: false |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 使用setData更新视图
|
||||
|
this.setData({ messages }); |
||||
|
|
||||
|
// 触发消息提示振动（可选）
|
||||
|
wx.vibrateShort(); |
||||
|
|
||||
|
// 更新TabBar未读消息数（如果需要）
|
||||
|
this.updateTabBarBadge(); |
||||
|
}, |
||||
|
|
||||
|
// 更新TabBar未读消息提示 - 使用自定义TabBar兼容方式
|
||||
|
updateTabBarBadge: function() { |
||||
|
console.log('更新TabBar未读提示，当前消息数:', this.data.messages.length); |
||||
|
// 检查是否有未读消息
|
||||
|
const hasUnread = this.data.messages.some(msg => !msg.isRead); |
||||
|
console.log('是否有未读消息:', hasUnread); |
||||
|
|
||||
|
// 对于自定义TabBar，使用全局状态来管理未读标记
|
||||
|
const app = getApp(); |
||||
|
if (app && app.globalData) { |
||||
|
app.globalData.tabBarBadge = { |
||||
|
chat: hasUnread ? ' ' : '' |
||||
|
}; |
||||
|
console.log('已更新全局TabBar未读标记状态:', hasUnread ? '显示' : '隐藏'); |
||||
|
|
||||
|
// 尝试通过getTabBar方法通知自定义TabBar更新
|
||||
|
try { |
||||
|
const tabBar = this.getTabBar(); |
||||
|
if (tabBar) { |
||||
|
tabBar.setData({ |
||||
|
selected: 'buyer', // 假设聊天页是buyer tab
|
||||
|
badge: hasUnread ? ' ' : '' |
||||
|
}); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.log('TabBar更新失败，将在下一次页面显示时自动更新'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 清理所有未读消息状态
|
||||
|
clearAllUnreadStatus: function() { |
||||
|
console.log('清理所有未读消息状态'); |
||||
|
try { |
||||
|
// 1. 更新本地消息列表中的未读状态
|
||||
|
const updatedMessages = this.data.messages.map(msg => ({ |
||||
|
...msg, |
||||
|
isRead: true |
||||
|
})); |
||||
|
|
||||
|
this.setData({ |
||||
|
messages: updatedMessages |
||||
|
}); |
||||
|
|
||||
|
// 2. 对于自定义TabBar，使用全局状态来管理未读标记
|
||||
|
const app = getApp(); |
||||
|
if (app && app.globalData) { |
||||
|
app.globalData.tabBarBadge = { |
||||
|
chat: '' |
||||
|
}; |
||||
|
console.log('已清理全局TabBar未读标记'); |
||||
|
|
||||
|
// 尝试通过getTabBar方法通知自定义TabBar更新
|
||||
|
try { |
||||
|
const tabBar = this.getTabBar(); |
||||
|
if (tabBar) { |
||||
|
tabBar.setData({ |
||||
|
selected: 'buyer', // 假设聊天页是buyer tab
|
||||
|
badge: '' |
||||
|
}); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.log('TabBar更新失败，将在下一次页面显示时自动更新'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 3. 显示成功提示
|
||||
|
wx.showToast({ |
||||
|
title: '已清除所有未读提示', |
||||
|
icon: 'success', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error('清理未读状态失败:', error); |
||||
|
wx.showToast({ |
||||
|
title: '清理失败', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 初始化WebSocket连接
|
||||
|
initWebSocket: function() { |
||||
|
try { |
||||
|
const app = getApp(); |
||||
|
|
||||
|
// 使用正确的WebSocket服务器地址 - 开发环境通常是ws://localhost:3003
|
||||
|
// 动态构建WebSocket URL，基于全局配置或环境
|
||||
|
let wsProtocol = 'ws://'; |
||||
|
let wsHost = app.globalData.webSocketUrl || 'localhost:3003'; |
||||
|
let wsUrl; |
||||
|
|
||||
|
// 如果wsHost已经包含协议，直接使用
|
||||
|
if (wsHost.startsWith('ws://') || wsHost.startsWith('wss://')) { |
||||
|
wsUrl = wsHost; |
||||
|
} else { |
||||
|
// 否则添加协议前缀
|
||||
|
wsUrl = `${wsProtocol}${wsHost}`; |
||||
|
} |
||||
|
|
||||
|
this.setData({ webSocketUrl: wsUrl }); |
||||
|
|
||||
|
console.log('WebSocket连接初始化，使用地址:', wsUrl); |
||||
|
|
||||
|
// 连接WebSocket
|
||||
|
socketManager.connect(wsUrl); |
||||
|
|
||||
|
// 添加消息监听
|
||||
|
socketManager.on('message', this.handleWebSocketMessage.bind(this)); |
||||
|
|
||||
|
// 添加状态监听，以便调试
|
||||
|
socketManager.on('status', (status) => { |
||||
|
console.log('WebSocket状态更新:', status); |
||||
|
}); |
||||
|
|
||||
|
console.log('聊天列表页面WebSocket已初始化'); |
||||
|
} catch (error) { |
||||
|
console.error('初始化WebSocket失败:', error); |
||||
|
wx.showToast({ |
||||
|
title: 'WebSocket初始化失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 清理WebSocket连接
|
||||
|
cleanupWebSocket: function() { |
||||
|
socketManager.off('message', this.handleWebSocketMessage); |
||||
|
}, |
||||
|
|
||||
|
// 加载聊天列表数据
|
||||
|
loadChatList: function() { |
||||
|
wx.showLoading({ title: '加载中' }); |
||||
|
|
||||
|
try { |
||||
|
// 从服务器获取真实的聊天列表数据
|
||||
|
const app = getApp(); |
||||
|
const token = app.globalData.token || wx.getStorageSync('token'); |
||||
|
|
||||
|
// 使用正确的API配置，兼容开发环境
|
||||
|
const baseUrl = app.globalData.baseUrl || 'http://localhost:3003'; |
||||
|
const currentUserId = app.globalData.userInfo?.userId || wx.getStorageSync('userId') || 'unknown'; |
||||
|
console.log('使用API地址:', baseUrl); |
||||
|
console.log('当前用户ID:', currentUserId); |
||||
|
|
||||
|
// 使用正确的API端点 - /api/conversations/user/:userId
|
||||
|
wx.request({ |
||||
|
url: `${baseUrl}/api/conversations/user/${currentUserId}`, |
||||
|
method: 'GET', |
||||
|
header: { |
||||
|
'Authorization': token ? `Bearer ${token}` : '', |
||||
|
'content-type': 'application/json' |
||||
|
}, |
||||
|
success: (res) => { |
||||
|
console.log('获取聊天列表成功:', res.data); |
||||
|
// 处理不同的API响应格式
|
||||
|
let chatData = []; |
||||
|
|
||||
|
if (res.data.code === 0 && res.data.data) { |
||||
|
chatData = res.data.data; |
||||
|
} else if (Array.isArray(res.data)) { |
||||
|
// 如果直接返回数组
|
||||
|
chatData = res.data; |
||||
|
} else if (res.data) { |
||||
|
// 如果返回的是对象但不是标准格式，尝试直接使用
|
||||
|
chatData = [res.data]; |
||||
|
} |
||||
|
|
||||
|
if (chatData.length > 0) { |
||||
|
// 格式化聊天列表数据
|
||||
|
const formattedMessages = chatData.map(item => { |
||||
|
// 格式化时间
|
||||
|
const now = new Date(); |
||||
|
const messageDate = new Date(item.lastMessageTime || item.createdAt || Date.now()); |
||||
|
let displayTime = ''; |
||||
|
|
||||
|
if (messageDate.toDateString() === now.toDateString()) { |
||||
|
// 今天的消息只显示时间
|
||||
|
displayTime = messageDate.getHours().toString().padStart(2, '0') + ':' + |
||||
|
messageDate.getMinutes().toString().padStart(2, '0'); |
||||
|
} else if (messageDate.toDateString() === new Date(now.getTime() - 86400000).toDateString()) { |
||||
|
// 昨天的消息
|
||||
|
displayTime = '昨天'; |
||||
|
} else { |
||||
|
// 其他日期显示月日
|
||||
|
displayTime = (messageDate.getMonth() + 1) + '月' + messageDate.getDate() + '日'; |
||||
|
} |
||||
|
|
||||
|
// 获取当前用户ID，确定显示哪个用户
|
||||
|
const displayUserId = item.userId === currentUserId ? item.managerId : item.userId || item.id; |
||||
|
const displayName = `用户${displayUserId}`; |
||||
|
|
||||
|
return { |
||||
|
id: displayUserId, |
||||
|
name: item.userName || item.name || displayName, |
||||
|
avatar: item.avatar || (item.userName || displayName).charAt(0) || '用', |
||||
|
content: item.lastMessage || item.content || '', |
||||
|
time: displayTime, |
||||
|
isRead: item.isRead || false, |
||||
|
unreadCount: item.unreadCount || 0 |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
this.setData({ messages: formattedMessages }); |
||||
|
} else { |
||||
|
console.log('暂无聊天消息'); |
||||
|
this.setData({ messages: [] }); |
||||
|
} |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('网络请求失败:', err); |
||||
|
wx.showToast({ |
||||
|
title: '网络请求失败，使用本地数据', |
||||
|
icon: 'none', |
||||
|
duration: 3000 |
||||
|
}); |
||||
|
|
||||
|
// 失败时使用模拟数据，确保页面能够正常显示
|
||||
|
this.setData({ |
||||
|
messages: [ |
||||
|
{ |
||||
|
id: '1', |
||||
|
name: '系统消息', |
||||
|
avatar: '系', |
||||
|
content: '欢迎使用聊天功能', |
||||
|
time: '刚刚', |
||||
|
isRead: false |
||||
|
} |
||||
|
] |
||||
|
}); |
||||
|
}, |
||||
|
complete: () => { |
||||
|
wx.hideLoading(); |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error('加载聊天列表异常:', error); |
||||
|
wx.hideLoading(); |
||||
|
wx.showToast({ title: '加载异常', icon: 'none' }); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
onBack: function() { |
||||
|
wx.navigateBack({ |
||||
|
delta: 1 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad(options) { |
||||
|
this.loadChatList(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady() { |
||||
|
// 设置导航栏右侧按钮的点击事件
|
||||
|
wx.showNavigationBarLoading(); |
||||
|
}, |
||||
|
|
||||
|
// 导航栏左侧按钮点击事件
|
||||
|
onNavigationBarButtonTap(e) { |
||||
|
if (e.type === 'left') { |
||||
|
this.onBack(); |
||||
|
} else if (e.type === 'right') { |
||||
|
// 处理管理按钮点击
|
||||
|
wx.showToast({ |
||||
|
title: '管理功能待开发', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow() { |
||||
|
// 页面显示时初始化WebSocket连接
|
||||
|
this.initWebSocket(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide() { |
||||
|
// 页面隐藏时清理WebSocket连接
|
||||
|
this.cleanupWebSocket(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload() { |
||||
|
// 页面卸载时清理WebSocket连接
|
||||
|
this.cleanupWebSocket(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
// 页面分享配置
|
||||
|
return { |
||||
|
title: '聊天列表', |
||||
|
path: '/pages/chat/index' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 跳转到对话详情页面
|
||||
|
navigateToChatDetail: function(e) { |
||||
|
const userId = e.currentTarget.dataset.userId; |
||||
|
const userName = e.currentTarget.dataset.userName; |
||||
|
|
||||
|
// 将该聊天标记为已读
|
||||
|
const messages = [...this.data.messages]; |
||||
|
const messageIndex = messages.findIndex(item => item.id === userId); |
||||
|
|
||||
|
if (messageIndex >= 0) { |
||||
|
messages[messageIndex].isRead = true; |
||||
|
messages[messageIndex].unreadCount = 0; |
||||
|
this.setData({ messages }); |
||||
|
|
||||
|
// 更新TabBar未读消息数
|
||||
|
this.updateTabBarBadge(); |
||||
|
|
||||
|
// 通知服务器已读状态（可选）
|
||||
|
this.markAsRead(userId); |
||||
|
} |
||||
|
|
||||
|
wx.navigateTo({ |
||||
|
url: `/pages/chat-detail/index?userId=${userId}&userName=${encodeURIComponent(userName)}` |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 通知服务器消息已读
|
||||
|
markAsRead: function(userId) { |
||||
|
const app = getApp(); |
||||
|
const token = app.globalData.token || wx.getStorageSync('token'); |
||||
|
|
||||
|
wx.request({ |
||||
|
url: `${app.globalData.baseUrl || 'https://your-server.com'}/api/chat/read`, |
||||
|
method: 'POST', |
||||
|
header: { |
||||
|
'Authorization': `Bearer ${token}`, |
||||
|
'content-type': 'application/json' |
||||
|
}, |
||||
|
data: { |
||||
|
userId: userId |
||||
|
}, |
||||
|
success: (res) => { |
||||
|
console.log('标记消息已读成功:', res.data); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('标记消息已读失败:', err); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "消息", |
||||
|
"navigationBarBackgroundColor": "#ffffff", |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"navigationBarLeftButtonText": "返回", |
||||
|
"navigationBarRightButtonText": "管理", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
<view class="chat-container"> |
||||
|
<!-- 页面顶部导航已在index.json中配置 --> |
||||
|
|
||||
|
<!-- 消息类型切换 --> |
||||
|
<view class="message-tabs"> |
||||
|
<view class="tab-item active">全部</view> |
||||
|
<view class="tab-item">未读</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 清除未读提示 --> |
||||
|
<view class="clear-unread"> |
||||
|
<text class="clear-btn" bindtap="clearAllUnreadStatus">清除未读</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 消息列表 --> |
||||
|
<view class="message-list"> |
||||
|
<!-- 提示消息 --> |
||||
|
<view class="message-tips"> |
||||
|
以下为3天前的消息，提示将弱化 |
||||
|
</view> |
||||
|
|
||||
|
<!-- 动态消息列表 --> |
||||
|
<block wx:if="{{messages.length > 0}}"> |
||||
|
<view wx:for="{{messages}}" wx:key="id" class="message-item" bindtap="navigateToChatDetail" data-user-id="{{item.id}}" data-user-name="{{item.name}}"> |
||||
|
<view class="message-avatar"> |
||||
|
<text class="avatar-icon">{{item.avatar}}</text> |
||||
|
<view wx:if="{{!item.isRead}}" class="unread-dot"></view> |
||||
|
</view> |
||||
|
<view class="message-content"> |
||||
|
<view class="message-header"> |
||||
|
<text class="message-name">{{item.name}}</text> |
||||
|
<text class="message-time">{{item.time}}</text> |
||||
|
</view> |
||||
|
<text class="message-text {{!item.isRead ? 'unread' : ''}}">{{item.content}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
<!-- 空状态提示 --> |
||||
|
<view wx:else class="empty-state"> |
||||
|
<text class="empty-text">暂无消息</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,182 @@ |
|||||
|
.chat-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
|
||||
|
/* 消息类型切换 */ |
||||
|
.message-tabs { |
||||
|
display: flex; |
||||
|
background-color: #ffffff; |
||||
|
border-bottom: 1rpx solid #eeeeee; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
padding: 28rpx 0; |
||||
|
font-size: 32rpx; |
||||
|
color: #666666; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tab-item.active { |
||||
|
color: #07c160; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.tab-item.active::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 40%; |
||||
|
width: 20%; |
||||
|
height: 4rpx; |
||||
|
background-color: #07c160; |
||||
|
} |
||||
|
|
||||
|
/* 清除未读提示 */ |
||||
|
.clear-unread { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
padding: 20rpx 30rpx; |
||||
|
background-color: #ffffff; |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.clear-btn { |
||||
|
font-size: 28rpx; |
||||
|
color: #1677ff; |
||||
|
} |
||||
|
|
||||
|
/* 消息列表 */ |
||||
|
.message-list { |
||||
|
flex: 1; |
||||
|
padding-bottom: 30rpx; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
/* 提示消息 */ |
||||
|
.message-tips { |
||||
|
text-align: center; |
||||
|
padding: 20rpx 0; |
||||
|
margin-bottom: 20rpx; |
||||
|
color: #999999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
/* 消息项 */ |
||||
|
.message-item { |
||||
|
display: flex; |
||||
|
padding: 24rpx 30rpx; |
||||
|
background-color: #ffffff; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
/* 添加底部边框线，模仿微信分隔线 */ |
||||
|
.message-item::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 150rpx; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 1rpx; |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
/* 头像 */ |
||||
|
.message-avatar { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 8rpx; |
||||
|
background-color: #07c160; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 24rpx; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
/* 未读消息红点 */ |
||||
|
.unread-dot { |
||||
|
position: absolute; |
||||
|
top: -6rpx; |
||||
|
right: -6rpx; |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
border-radius: 14rpx; |
||||
|
background-color: #ff3b30; |
||||
|
border: 2rpx solid #ffffff; |
||||
|
} |
||||
|
|
||||
|
.avatar-icon { |
||||
|
font-size: 40rpx; |
||||
|
color: #ffffff; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 消息内容 */ |
||||
|
.message-content { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 6rpx 0; |
||||
|
} |
||||
|
|
||||
|
.message-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.message-name { |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
font-weight: 500; |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.message-time { |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.message-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #999999; |
||||
|
line-height: 40rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* 未读消息文本样式 */ |
||||
|
.message-text.unread { |
||||
|
color: #000000; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 空状态样式 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 100rpx 0; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 32rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
@ -0,0 +1,165 @@ |
|||||
|
// pages/customer-service/detail/index.js
|
||||
|
Page({ |
||||
|
data: { |
||||
|
customerData: null, |
||||
|
customerServices: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
managerId: 'PM001', |
||||
|
managercompany: '鸡蛋贸易有限公司', |
||||
|
managerdepartment: '采购部', |
||||
|
organization: '鸡蛋采购组', |
||||
|
projectName: '高级采购经理', |
||||
|
name: '张三', |
||||
|
alias: '张经理', |
||||
|
phoneNumber: '13800138001', |
||||
|
avatarUrl: '', |
||||
|
score: 999, |
||||
|
isOnline: true, |
||||
|
responsibleArea: '华北区鸡蛋采购', |
||||
|
experience: '1-3年', |
||||
|
serviceCount: 200, |
||||
|
purchaseCount: 15000, |
||||
|
profitIncreaseRate: 15, |
||||
|
profitFarmCount: 120, |
||||
|
skills: ['渠道拓展', '供应商维护', '质量把控', '精准把控市场价格'] |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
managerId: 'PM002', |
||||
|
managercompany: '鸡蛋贸易有限公司', |
||||
|
managerdepartment: '采购部', |
||||
|
organization: '全国采购组', |
||||
|
projectName: '采购经理', |
||||
|
name: '李四', |
||||
|
alias: '李经理', |
||||
|
phoneNumber: '13900139002', |
||||
|
avatarUrl: '', |
||||
|
score: 998, |
||||
|
isOnline: true, |
||||
|
responsibleArea: '全国鸡蛋采购', |
||||
|
experience: '2-3年', |
||||
|
serviceCount: 200, |
||||
|
purchaseCount: 20000, |
||||
|
profitIncreaseRate: 18, |
||||
|
profitFarmCount: 150, |
||||
|
skills: ['精准把控市场价格', '渠道拓展', '供应商维护'] |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
managerId: 'PM003', |
||||
|
managercompany: '鸡蛋贸易有限公司', |
||||
|
managerdepartment: '采购部', |
||||
|
organization: '华东采购组', |
||||
|
projectName: '采购专员', |
||||
|
name: '王五', |
||||
|
alias: '王专员', |
||||
|
phoneNumber: '13700137003', |
||||
|
avatarUrl: '', |
||||
|
score: 997, |
||||
|
isOnline: false, |
||||
|
responsibleArea: '华东区鸡蛋采购', |
||||
|
experience: '1-2年', |
||||
|
serviceCount: 150, |
||||
|
purchaseCount: 12000, |
||||
|
profitIncreaseRate: 12, |
||||
|
profitFarmCount: 80, |
||||
|
skills: ['质量把控', '供应商维护'] |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
managerId: 'PM004', |
||||
|
managercompany: '鸡蛋贸易有限公司', |
||||
|
managerdepartment: '采购部', |
||||
|
organization: '华南采购组', |
||||
|
projectName: '高级采购经理', |
||||
|
name: '赵六', |
||||
|
alias: '赵经理', |
||||
|
phoneNumber: '13600136004', |
||||
|
avatarUrl: '', |
||||
|
score: 996, |
||||
|
isOnline: true, |
||||
|
responsibleArea: '华南区鸡蛋采购', |
||||
|
experience: '3-5年', |
||||
|
serviceCount: 250, |
||||
|
purchaseCount: 25000, |
||||
|
profitIncreaseRate: 20, |
||||
|
profitFarmCount: 180, |
||||
|
skills: ['精准把控市场价格', '渠道拓展', '质量把控', '供应商维护'] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
onLoad: function (options) { |
||||
|
// 获取传递过来的客服ID
|
||||
|
const { id } = options; |
||||
|
// 根据ID查找客服数据
|
||||
|
const customerData = this.data.customerServices.find(item => item.id === parseInt(id)); |
||||
|
|
||||
|
if (customerData) { |
||||
|
this.setData({ |
||||
|
customerData: customerData |
||||
|
}); |
||||
|
// 设置导航栏标题
|
||||
|
wx.setNavigationBarTitle({ |
||||
|
title: `${customerData.alias} - 客服详情`, |
||||
|
}); |
||||
|
} else { |
||||
|
// 如果找不到对应ID的客服，显示错误提示
|
||||
|
wx.showToast({ |
||||
|
title: '未找到客服信息', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onShow() { |
||||
|
// 更新自定义tabBar状态
|
||||
|
if (typeof this.getTabBar === 'function' && this.getTabBar()) { |
||||
|
this.getTabBar().setData({ |
||||
|
selected: -1 // 不选中任何tab
|
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
onBack: function () { |
||||
|
wx.navigateBack(); |
||||
|
}, |
||||
|
|
||||
|
// 在线沟通
|
||||
|
onChat: function () { |
||||
|
const { customerData } = this.data; |
||||
|
if (customerData) { |
||||
|
wx.navigateTo({ |
||||
|
url: `/pages/chat/index?id=${customerData.id}&name=${customerData.alias}&phone=${customerData.phoneNumber}` |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 拨打电话
|
||||
|
onCall: function () { |
||||
|
const { customerData } = this.data; |
||||
|
if (customerData && customerData.phoneNumber) { |
||||
|
wx.makePhoneCall({ |
||||
|
phoneNumber: customerData.phoneNumber, |
||||
|
success: function () { |
||||
|
console.log('拨打电话成功'); |
||||
|
}, |
||||
|
fail: function () { |
||||
|
console.log('拨打电话失败'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 分享功能
|
||||
|
onShareAppMessage: function () { |
||||
|
const { customerData } = this.data; |
||||
|
return { |
||||
|
title: `${customerData?.alias || '优秀客服'} - 鸡蛋贸易平台`, |
||||
|
path: `/pages/customer-service/detail/index?id=${customerData?.id}`, |
||||
|
imageUrl: '' |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "客服详情", |
||||
|
"navigationBarBackgroundColor": "#ffffff", |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"backgroundColor": "#f8f8f8", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
<!-- pages/customer-service/detail/index.wxml --> |
||||
|
<view class="container"> |
||||
|
<!-- 顶部导航栏 --> |
||||
|
<view class="nav-bar"> |
||||
|
<view class="nav-left" bindtap="onBack"> |
||||
|
<text class="back-icon">返回</text> |
||||
|
</view> |
||||
|
<view class="nav-title">客服详情</view> |
||||
|
<view class="nav-right"> |
||||
|
<text class="share-icon">📤</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 客服基本信息 --> |
||||
|
<view class="info-section"> |
||||
|
<view class="header-info"> |
||||
|
<view class="avatar-container"> |
||||
|
<image class="avatar" src="{{customerData.avatarUrl || '/images/default-avatar.png'}}" mode="aspectFill" /> |
||||
|
<view wx:if="{{customerData.isOnline}}" class="online-indicator-large">在线</view> |
||||
|
<view wx:else class="offline-indicator-large">离线</view> |
||||
|
</view> |
||||
|
<view class="header-details"> |
||||
|
<view class="name-score-row"> |
||||
|
<text class="name-large">{{customerData.alias}}</text> |
||||
|
<text class="score-large">{{customerData.score}} 鸡蛋分</text> |
||||
|
</view> |
||||
|
<text class="position">{{customerData.projectName}}</text> |
||||
|
<text class="company-large">{{customerData.managercompany}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 核心信息卡片 --> |
||||
|
<view class="core-info-section"> |
||||
|
<view class="info-card"> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">负责区域</text> |
||||
|
<text class="info-value">{{customerData.responsibleArea}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">联系电话</text> |
||||
|
<text class="info-value phone-number" bindtap="onCall">{{customerData.phoneNumber}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">工作经验</text> |
||||
|
<text class="info-value">服务平台{{customerData.experience}}</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">服务规模</text> |
||||
|
<text class="info-value">服务{{customerData.serviceCount}}家鸡场</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 专业技能标签 --> |
||||
|
<view class="skills-section"> |
||||
|
<view class="section-title">专业技能</view> |
||||
|
<view class="skills-container"> |
||||
|
<view wx:for="{{customerData.skills}}" wx:key="index" class="skill-tag"> |
||||
|
{{item}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 业绩数据 --> |
||||
|
<view class="performance-section"> |
||||
|
<view class="section-title">业绩数据</view> |
||||
|
<view class="performance-cards"> |
||||
|
<view class="performance-card"> |
||||
|
<view class="performance-number">{{customerData.purchaseCount}}</view> |
||||
|
<view class="performance-label">累计采购鸡蛋(件)</view> |
||||
|
</view> |
||||
|
<view class="performance-card"> |
||||
|
<view class="performance-number">{{customerData.profitFarmCount}}</view> |
||||
|
<view class="performance-label">累计服务鸡场(家)</view> |
||||
|
</view> |
||||
|
<view class="performance-card"> |
||||
|
<view class="performance-number profit-rate">{{customerData.profitIncreaseRate}}%</view> |
||||
|
<view class="performance-label">平均盈利增长</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部操作按钮 --> |
||||
|
<view class="bottom-actions"> |
||||
|
<view class="action-button chat-button" bindtap="onChat"> |
||||
|
<text class="button-text">💬 在线沟通</text> |
||||
|
</view> |
||||
|
<view class="action-button call-button" bindtap="onCall"> |
||||
|
<text class="button-text">📞 电话联系</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,317 @@ |
|||||
|
/* pages/customer-service/detail/index.wxss */ |
||||
|
.container { |
||||
|
padding-bottom: 100rpx; |
||||
|
background-color: #f8f8f8; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
/* 顶部导航栏 */ |
||||
|
.nav-bar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 44rpx 30rpx 20rpx; |
||||
|
background-color: #fff; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 1000; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.nav-left { |
||||
|
width: 80rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.back-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
.nav-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.nav-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.share-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 客服基本信息 */ |
||||
|
.info-section { |
||||
|
background-color: #fff; |
||||
|
padding: 120rpx 30rpx 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.header-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.avatar-container { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
margin-right: 30rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 50%; |
||||
|
background-color: #f0f0f0; |
||||
|
border: 4rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.online-indicator-large { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background-color: #52c41a; |
||||
|
color: white; |
||||
|
font-size: 24rpx; |
||||
|
padding: 8rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 4rpx solid white; |
||||
|
} |
||||
|
|
||||
|
.offline-indicator-large { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background-color: #999; |
||||
|
color: white; |
||||
|
font-size: 24rpx; |
||||
|
padding: 8rpx 20rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 4rpx solid white; |
||||
|
} |
||||
|
|
||||
|
.header-details { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.name-score-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.name-large { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.score-large { |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(135deg, #ffb800, #ff7700); |
||||
|
padding: 6rpx 16rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.position { |
||||
|
font-size: 32rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.company-large { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
/* 核心信息卡片 */ |
||||
|
.core-info-section { |
||||
|
padding: 0 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.info-card { |
||||
|
background-color: #fff; |
||||
|
border-radius: 24rpx; |
||||
|
padding: 30rpx; |
||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.info-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 30rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 30rpx; |
||||
|
color: #333; |
||||
|
text-align: right; |
||||
|
flex: 1; |
||||
|
margin-left: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.phone-number { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
|
||||
|
/* 专业技能标签 */ |
||||
|
.skills-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.skills-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
padding-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.skill-tag { |
||||
|
background-color: #f0f9ff; |
||||
|
color: #1890ff; |
||||
|
font-size: 26rpx; |
||||
|
padding: 12rpx 24rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 1rpx solid #bae7ff; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.skill-tag:active { |
||||
|
background-color: #bae7ff; |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 业绩数据 */ |
||||
|
.performance-section { |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 120rpx; |
||||
|
} |
||||
|
|
||||
|
.performance-cards { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.performance-card { |
||||
|
flex: 1; |
||||
|
background-color: #f9f9f9; |
||||
|
padding: 24rpx; |
||||
|
border-radius: 16rpx; |
||||
|
text-align: center; |
||||
|
transition: all 0.2s ease; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.performance-card:active { |
||||
|
transform: translateY(2rpx); |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.performance-number { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.performance-number.profit-rate { |
||||
|
color: #52c41a; |
||||
|
} |
||||
|
|
||||
|
.performance-label { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
/* 底部操作按钮 */ |
||||
|
.bottom-actions { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
display: flex; |
||||
|
background-color: #fff; |
||||
|
padding: 20rpx 30rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.action-button { |
||||
|
flex: 1; |
||||
|
padding: 24rpx; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
transition: all 0.2s ease; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.action-button:active { |
||||
|
transform: scale(0.98); |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
.chat-button:active { |
||||
|
background-color: #096dd9; |
||||
|
} |
||||
|
|
||||
|
.call-button:active { |
||||
|
background-color: #389e0d; |
||||
|
} |
||||
|
|
||||
|
.chat-button { |
||||
|
background-color: #1890ff; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.call-button { |
||||
|
background-color: #52c41a; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.button-text { |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
@ -0,0 +1,362 @@ |
|||||
|
// pages/customer-service/index.js
|
||||
|
Page({ |
||||
|
// 客服数据，将从后端动态获取
|
||||
|
data: { |
||||
|
customerServices: [], |
||||
|
filteredServices: [], |
||||
|
searchKeyword: '', |
||||
|
selectedArea: '全部', |
||||
|
totalCount: 0, |
||||
|
onlineCount: 0 |
||||
|
}, |
||||
|
|
||||
|
// 获取客服列表的方法
|
||||
|
async fetchCustomerServices() { |
||||
|
try { |
||||
|
console.log('开始请求客服列表...'); |
||||
|
// 导入API工具并使用正确的请求方法
|
||||
|
const api = require('../../utils/api'); |
||||
|
|
||||
|
const res = await new Promise((resolve, reject) => { |
||||
|
wx.request({ |
||||
|
url: 'http://localhost:3003/api/managers', |
||||
|
method: 'GET', |
||||
|
timeout: 15000, |
||||
|
header: { |
||||
|
'content-type': 'application/json' |
||||
|
}, |
||||
|
success: resolve, |
||||
|
fail: (error) => { |
||||
|
console.error('网络请求失败:', error); |
||||
|
reject(error); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
console.log('API响应状态码:', res?.statusCode); |
||||
|
console.log('API响应数据:', res?.data ? JSON.stringify(res.data) : 'undefined'); |
||||
|
|
||||
|
// 更宽松的响应检查，确保能处理各种有效的响应格式
|
||||
|
if (res && res.statusCode === 200 && res.data) { |
||||
|
// 无论success字段是否存在，只要有data字段就尝试处理
|
||||
|
const dataSource = res.data.data || res.data; |
||||
|
if (Array.isArray(dataSource)) { |
||||
|
const processedData = dataSource.map(item => ({ |
||||
|
id: item.id || `id_${Date.now()}_${Math.random()}`, // 确保有id
|
||||
|
managerId: item.managerId || '', |
||||
|
managercompany: item.managercompany || '', |
||||
|
managerdepartment: item.managerdepartment || '', |
||||
|
organization: item.organization || '', |
||||
|
projectName: item.projectName || '', |
||||
|
name: item.name || '未知', |
||||
|
alias: item.alias || item.name || '未知', |
||||
|
phoneNumber: item.phoneNumber || '', |
||||
|
avatarUrl: item.avatar || item.avatarUrl || '', // 兼容avatar和avatarUrl
|
||||
|
score: Math.floor(Math.random() * 20) + 980, // 随机生成分数
|
||||
|
isOnline: !!item.online, // 转换为布尔值
|
||||
|
responsibleArea: `${this.getRandomArea()}鸡蛋采购`, |
||||
|
experience: this.getRandomExperience(), |
||||
|
serviceCount: this.getRandomNumber(100, 300), |
||||
|
purchaseCount: this.getRandomNumber(10000, 30000), |
||||
|
profitIncreaseRate: this.getRandomNumber(10, 25), |
||||
|
profitFarmCount: this.getRandomNumber(50, 200), |
||||
|
skills: this.getRandomSkills() |
||||
|
})); |
||||
|
console.log('处理后的数据数量:', processedData.length); |
||||
|
return processedData; |
||||
|
} else { |
||||
|
console.error('响应数据格式错误，不是预期的数组格式:', dataSource); |
||||
|
return []; |
||||
|
} |
||||
|
} else { |
||||
|
console.error('获取客服列表失败，状态码:', res?.statusCode, '响应数据:', res?.data); |
||||
|
return []; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('请求客服列表出错:', error); |
||||
|
// 网络错误时显示提示
|
||||
|
wx.showToast({ |
||||
|
title: '网络请求失败，请检查网络连接', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return []; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 辅助函数：生成随机区域
|
||||
|
getRandomArea() { |
||||
|
const areas = ['华北区', '华东区', '华南区', '全国', '西南区', '西北区', '东北区']; |
||||
|
return areas[Math.floor(Math.random() * areas.length)]; |
||||
|
}, |
||||
|
|
||||
|
// 辅助函数：生成随机工作经验
|
||||
|
getRandomExperience() { |
||||
|
const experiences = ['1-2年', '1-3年', '2-3年', '3-5年', '5年以上']; |
||||
|
return experiences[Math.floor(Math.random() * experiences.length)]; |
||||
|
}, |
||||
|
|
||||
|
// 辅助函数：生成随机数字
|
||||
|
getRandomNumber(min, max) { |
||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
|
}, |
||||
|
|
||||
|
// 辅助函数：生成随机技能
|
||||
|
getRandomSkills() { |
||||
|
const allSkills = ['渠道拓展', '供应商维护', '质量把控', '精准把控市场价格', '谈判技巧', '库存管理']; |
||||
|
const skillCount = Math.floor(Math.random() * 3) + 2; // 2-4个技能
|
||||
|
const selectedSkills = []; |
||||
|
|
||||
|
while (selectedSkills.length < skillCount) { |
||||
|
const skill = allSkills[Math.floor(Math.random() * allSkills.length)]; |
||||
|
if (!selectedSkills.includes(skill)) { |
||||
|
selectedSkills.push(skill); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return selectedSkills; |
||||
|
}, |
||||
|
|
||||
|
// 设置WebSocket监听客服状态变化
|
||||
|
setupWebSocketListener() { |
||||
|
const ws = getApp().globalData.webSocketManager; |
||||
|
const app = getApp(); |
||||
|
const userInfo = app.globalData.userInfo || {}; |
||||
|
const isManager = userInfo.userType === 'manager' || userInfo.type === 'manager'; |
||||
|
|
||||
|
if (ws) { |
||||
|
// 监听客服状态更新消息
|
||||
|
ws.on('customerServiceStatusUpdate', (data) => { |
||||
|
console.log('收到客服状态更新:', data); |
||||
|
// 更新对应客服的在线状态
|
||||
|
const customerServiceList = this.data.customerServices; |
||||
|
const updatedList = customerServiceList.map(item => { |
||||
|
if (item.id === data.id || item.managerId === data.managerId) { |
||||
|
return { ...item, isOnline: data.isOnline }; |
||||
|
} |
||||
|
return item; |
||||
|
}); |
||||
|
|
||||
|
const onlineCount = updatedList.filter(item => item.isOnline).length; |
||||
|
|
||||
|
this.setData({ |
||||
|
customerServices: updatedList, |
||||
|
onlineCount: onlineCount |
||||
|
}); |
||||
|
|
||||
|
// 重新应用筛选
|
||||
|
this.filterServices(); |
||||
|
}); |
||||
|
|
||||
|
// 如果当前用户是客服，立即进行认证
|
||||
|
if (isManager && userInfo.userId) { |
||||
|
console.log('客服用户登录，进行WebSocket认证:', userInfo.userId); |
||||
|
// 使用userId作为managerId进行认证，确保与服务器端onlineManagers中的键匹配
|
||||
|
ws.authenticate(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 定期刷新客服列表（每30秒）
|
||||
|
startPeriodicRefresh() { |
||||
|
this.refreshTimer = setInterval(() => { |
||||
|
console.log('定期刷新客服列表...'); |
||||
|
this.loadCustomerServices(); |
||||
|
}, 30000); |
||||
|
}, |
||||
|
|
||||
|
// 停止定期刷新
|
||||
|
stopPeriodicRefresh() { |
||||
|
if (this.refreshTimer) { |
||||
|
clearInterval(this.refreshTimer); |
||||
|
this.refreshTimer = null; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载客服列表
|
||||
|
async loadCustomerServices() { |
||||
|
console.log('开始加载客服列表...'); |
||||
|
// 确保在开始时调用hideLoading，防止重复调用showLoading
|
||||
|
try { |
||||
|
wx.hideLoading(); |
||||
|
} catch (e) { |
||||
|
console.log('没有正在显示的loading'); |
||||
|
} |
||||
|
|
||||
|
wx.showLoading({ title: '加载中...' }); |
||||
|
try { |
||||
|
const services = await this.fetchCustomerServices(); |
||||
|
console.log('获取到的客服数量:', services.length); |
||||
|
|
||||
|
// 计算在线数量
|
||||
|
const onlineCount = services.filter(item => item.isOnline).length; |
||||
|
console.log('在线客服数量:', onlineCount); |
||||
|
|
||||
|
// 更新数据
|
||||
|
this.setData({ |
||||
|
customerServices: services, |
||||
|
totalCount: services.length, |
||||
|
onlineCount: onlineCount |
||||
|
}); |
||||
|
console.log('数据更新成功'); |
||||
|
|
||||
|
// 应用当前的筛选条件
|
||||
|
this.filterServices(); |
||||
|
console.log('筛选条件应用完成'); |
||||
|
|
||||
|
// 如果没有数据，显示提示（确保在hideLoading后显示）
|
||||
|
if (services.length === 0) { |
||||
|
setTimeout(() => { |
||||
|
wx.showToast({ |
||||
|
title: '暂无客服数据', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
}, 100); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('加载客服列表失败:', error); |
||||
|
// 确保在hideLoading后显示错误提示
|
||||
|
setTimeout(() => { |
||||
|
wx.showToast({ |
||||
|
title: '加载失败，请重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
}, 100); |
||||
|
} finally { |
||||
|
wx.hideLoading(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onLoad: function () { |
||||
|
// 初始化WebSocket连接
|
||||
|
const app = getApp(); |
||||
|
if (!app.globalData.webSocketManager) { |
||||
|
// 如果WebSocket管理器还没初始化，从utils导入
|
||||
|
const WebSocketManager = require('../../utils/websocket').default; |
||||
|
app.globalData.webSocketManager = WebSocketManager; |
||||
|
|
||||
|
// 尝试连接WebSocket
|
||||
|
WebSocketManager.connect('ws://localhost:3003'); |
||||
|
} |
||||
|
|
||||
|
// 设置WebSocket监听
|
||||
|
this.setupWebSocketListener(); |
||||
|
|
||||
|
// 加载客服列表
|
||||
|
this.loadCustomerServices(); |
||||
|
|
||||
|
// 启动定期刷新
|
||||
|
this.startPeriodicRefresh(); |
||||
|
}, |
||||
|
|
||||
|
onShow() { |
||||
|
// 更新自定义tabBar状态
|
||||
|
if (typeof this.getTabBar === 'function' && this.getTabBar()) { |
||||
|
this.getTabBar().setData({ |
||||
|
selected: -1 // 不选中任何tab
|
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 当页面显示时重新加载数据，确保数据最新
|
||||
|
this.loadCustomerServices(); |
||||
|
}, |
||||
|
|
||||
|
onUnload: function() { |
||||
|
// 停止定期刷新
|
||||
|
this.stopPeriodicRefresh(); |
||||
|
|
||||
|
// 清理WebSocket事件监听
|
||||
|
const ws = getApp().globalData.webSocketManager; |
||||
|
if (ws) { |
||||
|
ws.off('customerServiceStatusUpdate'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onSearch: function (e) { |
||||
|
const keyword = e.detail.value; |
||||
|
this.setData({ |
||||
|
searchKeyword: keyword |
||||
|
}); |
||||
|
this.filterServices(); |
||||
|
}, |
||||
|
|
||||
|
onAreaFilter: function () { |
||||
|
// 区域筛选弹窗 - 鸡蛋采购区域
|
||||
|
wx.showActionSheet({ |
||||
|
itemList: ['全部', '华北区', '华东区', '华南区', '全国', '西南区', '西北区', '东北区'], |
||||
|
success: res => { |
||||
|
const areas = ['全部', '华北区', '华东区', '华南区', '全国', '西南区', '西北区', '东北区']; |
||||
|
const selectedArea = areas[res.tapIndex]; |
||||
|
this.setData({ |
||||
|
selectedArea: selectedArea |
||||
|
}); |
||||
|
this.filterServices(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
filterServices: function () { |
||||
|
const { customerServices, searchKeyword, selectedArea } = this.data; |
||||
|
|
||||
|
let filtered = customerServices; |
||||
|
|
||||
|
// 关键词搜索
|
||||
|
if (searchKeyword) { |
||||
|
const keyword = searchKeyword.toLowerCase(); |
||||
|
filtered = filtered.filter(item => { |
||||
|
return item.alias?.toLowerCase().includes(keyword) || |
||||
|
item.name.toLowerCase().includes(keyword) || |
||||
|
item.phoneNumber?.includes(keyword) || |
||||
|
item.managercompany?.toLowerCase().includes(keyword); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 区域筛选
|
||||
|
if (selectedArea && selectedArea !== '全部') { |
||||
|
filtered = filtered.filter(item => { |
||||
|
return item.responsibleArea?.includes(selectedArea); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
filteredServices: filtered |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
onChat: function (e) { |
||||
|
const id = e.currentTarget.dataset.id; |
||||
|
const service = this.data.customerServices.find(item => item.id === id); |
||||
|
// 确保使用managerId作为聊天对象的唯一标识符
|
||||
|
const chatUserId = service?.managerId || id; |
||||
|
wx.navigateTo({ |
||||
|
url: `/pages/chat-detail/index?userId=${chatUserId}&userName=${encodeURIComponent(service?.alias || '')}&phone=${service?.phoneNumber || ''}&isManager=true` |
||||
|
}); |
||||
|
console.log('跳转到聊天页面:', { chatUserId, userName: service?.alias }); |
||||
|
}, |
||||
|
|
||||
|
onCall: function (e) { |
||||
|
const phone = e.currentTarget.dataset.phone; |
||||
|
wx.makePhoneCall({ |
||||
|
phoneNumber: phone, |
||||
|
success: function () { |
||||
|
console.log('拨打电话成功'); |
||||
|
}, |
||||
|
fail: function () { |
||||
|
console.log('拨打电话失败'); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 查看客服详情
|
||||
|
onViewDetail: function (e) { |
||||
|
const id = e.currentTarget.dataset.id; |
||||
|
wx.navigateTo({ |
||||
|
url: `/pages/customer-service/detail?id=${id}` |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
onBack: function () { |
||||
|
wx.navigateBack(); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"navigationBarBackgroundColor": "#f8f8f8", |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
<!-- pages/customer-service/index.wxml --> |
||||
|
<view class="container"> |
||||
|
<!-- 顶部导航栏 --> |
||||
|
<view class="nav-bar"> |
||||
|
<view class="nav-left" bindtap="onBack"> |
||||
|
<text class="back-icon">返回</text> |
||||
|
</view> |
||||
|
<view class="nav-title">客服列表</view> |
||||
|
<view class="nav-right"> |
||||
|
<text class="settings-icon">⚙️</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 搜索区域 --> |
||||
|
<view class="search-container"> |
||||
|
<view class="search-bar"> |
||||
|
<text class="search-icon-small">🔍</text> |
||||
|
<input class="search-input" placeholder="客服人称或手机号" bindinput="onSearch" value="{{searchKeyword}}" /> |
||||
|
</view> |
||||
|
<view class="filter-area"> |
||||
|
<view class="area-picker" bindtap="onAreaFilter"> |
||||
|
<text>区域</text> |
||||
|
<text class="picker-arrow">▼</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 客服列表 --> |
||||
|
<view class="broker-list"> |
||||
|
<block wx:if="{{filteredServices.length > 0}}"> |
||||
|
<view class="broker-item" wx:for="{{filteredServices}}" wx:key="id" bindtap="onViewDetail" data-id="{{item.id}}"> |
||||
|
<view class="broker-info"> |
||||
|
<view class="avatar-container"> |
||||
|
<image class="avatar" src="{{item.avatarUrl || '/images/default-avatar.png'}}" mode="aspectFill" /> |
||||
|
<view wx:if="{{item.isOnline}}" class="online-indicator">在线</view> |
||||
|
<view wx:else class="offline-indicator">离线</view> |
||||
|
</view> |
||||
|
<view class="broker-details"> |
||||
|
<view class="name-row"> |
||||
|
<text class="name">{{item.alias}}</text> |
||||
|
<text class="score-text">{{item.score}} 鸡蛋分</text> |
||||
|
<text wx:if="{{item.isOnline}}" class="online-status">(在线)</text> |
||||
|
</view> |
||||
|
<text class="company">{{item.managercompany || '暂无公司信息'}}</text> |
||||
|
<text class="department">{{item.managerdepartment}} · {{item.projectName}}</text> |
||||
|
<text class="area">负责区域：{{item.responsibleArea}}</text> |
||||
|
<text class="experience">服务平台{{item.experience}} 服务{{item.serviceCount}}家鸡场</text> |
||||
|
<!-- 业绩数据统计 --> |
||||
|
<view class="performance-stats"> |
||||
|
<view class="stat-item"> |
||||
|
<text class="stat-value">{{item.purchaseCount}}</text> |
||||
|
<text class="stat-label">累计采购(件)</text> |
||||
|
</view> |
||||
|
<view class="stat-divider">|</view> |
||||
|
<view class="stat-item"> |
||||
|
<text class="stat-value profit-rate">{{item.profitFarmCount}}</text> |
||||
|
<text class="stat-label">服务盈利鸡场(家)</text> |
||||
|
</view> |
||||
|
<view class="stat-divider">|</view> |
||||
|
<view class="stat-item"> |
||||
|
<text class="stat-value profit-rate">{{item.profitIncreaseRate}}%</text> |
||||
|
<text class="stat-label">平均盈利增长</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 专业技能标签 --> |
||||
|
<view class="skills-preview"> |
||||
|
<view wx:for="{{item.skills}}" wx:key="index" wx:if="{{index < 3}}" class="skill-tag-small"> |
||||
|
{{item}}</view> |
||||
|
<view wx:if="{{item.skills.length > 3}}" class="skill-more"> |
||||
|
+{{item.skills.length - 3}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="action-buttons"> |
||||
|
<view class="button-chat" bindtap="onChat" data-id="{{item.id}}"> |
||||
|
<text class="button-icon">💬</text> |
||||
|
</view> |
||||
|
<view class="button-call" bindtap="onCall" data-phone="{{item.phoneNumber}}"> |
||||
|
<text class="button-icon">📞</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
<view wx:else class="empty-state"> |
||||
|
<text>👤</text> |
||||
|
<text class="empty-text">暂无匹配的经纪人</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,383 @@ |
|||||
|
/* pages/customer-service/index.wxss */ |
||||
|
.container { |
||||
|
padding-bottom: 100rpx; |
||||
|
background-color: #f8f8f8; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
/* 顶部导航栏 */ |
||||
|
.nav-bar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 44rpx 30rpx 20rpx; |
||||
|
background-color: #fff; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 1000; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.nav-left { |
||||
|
width: 80rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.back-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
.nav-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.nav-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.search-icon, .settings-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 搜索区域 */ |
||||
|
.search-container { |
||||
|
background-color: #fff; |
||||
|
padding: 20rpx 30rpx; |
||||
|
border-bottom: 10rpx solid #f8f8f8; |
||||
|
position: fixed; |
||||
|
top: 110rpx; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 999; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.search-bar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #f5f5f5; |
||||
|
border-radius: 40rpx; |
||||
|
padding: 16rpx 24rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.search-bar:focus-within { |
||||
|
background-color: #e6f7ff; |
||||
|
box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.search-icon-small { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
flex: 1; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
background: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.search-input::placeholder { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.filter-area { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.area-picker { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #f5f5f5; |
||||
|
padding: 12rpx 24rpx; |
||||
|
border-radius: 24rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.picker-arrow { |
||||
|
margin-left: 8rpx; |
||||
|
font-size: 20rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
/* 经纪人列表 */ |
||||
|
.broker-list { |
||||
|
background-color: #f8f8f8; |
||||
|
padding: 0 30rpx; |
||||
|
margin-top: 280rpx; /* 为固定导航和搜索区域留出空间 */ |
||||
|
} |
||||
|
|
||||
|
.broker-item { |
||||
|
background-color: #fff; |
||||
|
border-radius: 24rpx; |
||||
|
margin: 20rpx 0; |
||||
|
padding: 28rpx; |
||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.broker-item:active { |
||||
|
transform: translateY(2rpx); |
||||
|
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.03); |
||||
|
background-color: #fafafa; |
||||
|
} |
||||
|
|
||||
|
.broker-info { |
||||
|
display: flex; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.avatar-container { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
margin-right: 24rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 50%; |
||||
|
background-color: #f0f0f0; |
||||
|
border: 2rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.online-indicator { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background-color: #52c41a; |
||||
|
color: white; |
||||
|
font-size: 18rpx; |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid white; |
||||
|
} |
||||
|
|
||||
|
.offline-indicator { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background-color: #999; |
||||
|
color: white; |
||||
|
font-size: 18rpx; |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid white; |
||||
|
} |
||||
|
|
||||
|
.broker-details { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.name-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8rpx; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-right: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.score-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(135deg, #ffb800, #ff7700); |
||||
|
padding: 4rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.online-status { |
||||
|
font-size: 22rpx; |
||||
|
color: #52c41a; |
||||
|
} |
||||
|
|
||||
|
.company { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 6rpx; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.department { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 6rpx; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.area { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
margin-bottom: 6rpx; |
||||
|
line-height: 1.4; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.experience { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
/* 专业技能标签预览 */ |
||||
|
.skills-preview { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 10rpx; |
||||
|
margin-top: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.skill-tag-small { |
||||
|
background-color: #f0f9ff; |
||||
|
color: #1890ff; |
||||
|
font-size: 22rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
border-radius: 16rpx; |
||||
|
border: 1rpx solid #bae7ff; |
||||
|
} |
||||
|
|
||||
|
.skill-more { |
||||
|
background-color: #f5f5f5; |
||||
|
color: #999; |
||||
|
font-size: 22rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
border-radius: 16rpx; |
||||
|
border: 1rpx solid #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
/* 业绩数据统计样式 */ |
||||
|
.performance-stats { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 16rpx; |
||||
|
padding-top: 16rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.stat-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.stat-value { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.stat-value.profit-rate { |
||||
|
color: #52c41a; |
||||
|
} |
||||
|
|
||||
|
.stat-label { |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin-top: 4rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.stat-divider { |
||||
|
color: #e0e0e0; |
||||
|
font-size: 24rpx; |
||||
|
margin: 0 10rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.action-buttons { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 24rpx; |
||||
|
padding-top: 20rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.button-chat, .button-call { |
||||
|
width: 72rpx; |
||||
|
height: 72rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.2s ease; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.button-chat { |
||||
|
background-color: #e6f7f0; |
||||
|
} |
||||
|
|
||||
|
.button-call { |
||||
|
background-color: #e6f0f7; |
||||
|
} |
||||
|
|
||||
|
.button-chat:active { |
||||
|
transform: scale(0.95); |
||||
|
opacity: 0.9; |
||||
|
background-color: #c3e6cb; |
||||
|
} |
||||
|
|
||||
|
.button-call:active { |
||||
|
transform: scale(0.95); |
||||
|
opacity: 0.9; |
||||
|
background-color: #b3d8ff; |
||||
|
} |
||||
|
|
||||
|
.button-icon { |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 100rpx 0; |
||||
|
background-color: #fff; |
||||
|
margin: 20rpx 0; |
||||
|
border-radius: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-state text:first-child { |
||||
|
font-size: 100rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
} |
||||
@ -0,0 +1,326 @@ |
|||||
|
// 消息列表页面
|
||||
|
Page({ |
||||
|
data: { |
||||
|
messageList: [] |
||||
|
}, |
||||
|
|
||||
|
onLoad: function() { |
||||
|
this.loadChatList(); |
||||
|
// 注册全局新消息处理函数
|
||||
|
this.registerGlobalMessageHandler(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 注册全局新消息处理函数 |
||||
|
*/ |
||||
|
registerGlobalMessageHandler: function() { |
||||
|
try { |
||||
|
const app = getApp(); |
||||
|
const that = this; |
||||
|
|
||||
|
// 保存原有的处理函数（如果有）
|
||||
|
this.originalMessageHandler = app.globalData.onNewMessage; |
||||
|
|
||||
|
// 注册新的处理函数
|
||||
|
app.globalData.onNewMessage = function(message) { |
||||
|
console.log('消息列表页面收到新消息:', message); |
||||
|
// 重新加载聊天列表
|
||||
|
that.loadChatList(); |
||||
|
|
||||
|
// 调用原始处理函数（如果有）
|
||||
|
if (that.originalMessageHandler && typeof that.originalMessageHandler === 'function') { |
||||
|
that.originalMessageHandler(message); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
console.log('已注册全局新消息处理函数'); |
||||
|
} catch (e) { |
||||
|
console.error('注册全局新消息处理函数失败:', e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onShow: function() { |
||||
|
// 每次显示页面时刷新聊天列表
|
||||
|
this.loadChatList(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 加载聊天列表 |
||||
|
*/ |
||||
|
loadChatList: function() { |
||||
|
try { |
||||
|
// 获取所有存储的聊天记录键
|
||||
|
const storageInfo = wx.getStorageInfoSync(); |
||||
|
const chatKeys = storageInfo.keys.filter(key => key.startsWith('chat_messages_')); |
||||
|
|
||||
|
const messageList = []; |
||||
|
// 获取当前用户信息
|
||||
|
const app = getApp(); |
||||
|
const userInfo = app.globalData.userInfo || {}; |
||||
|
const isCurrentUserManager = userInfo.userType === 'manager' || userInfo.type === 'manager'; |
||||
|
const currentManagerId = userInfo.managerId || ''; |
||||
|
const currentUserId = wx.getStorageSync('userId') || ''; |
||||
|
|
||||
|
// 临时存储已处理的会话，避免重复
|
||||
|
const processedConversations = new Set(); |
||||
|
|
||||
|
// 遍历每个聊天记录
|
||||
|
chatKeys.forEach(key => { |
||||
|
const chatUserId = key.replace('chat_messages_', ''); |
||||
|
|
||||
|
// 获取消息列表
|
||||
|
const messages = wx.getStorageSync(key); |
||||
|
|
||||
|
// 跳过空消息列表
|
||||
|
if (!messages || messages.length === 0) return; |
||||
|
|
||||
|
// 对于客服，需要特殊处理，确保能看到所有相关消息
|
||||
|
if (isCurrentUserManager) { |
||||
|
// 避免处理自己与自己的聊天
|
||||
|
if (chatUserId === currentManagerId) return; |
||||
|
|
||||
|
// 客服需要看到所有有消息的对话，包括用户发送的消息
|
||||
|
if (!processedConversations.has(chatUserId)) { |
||||
|
// 获取最后一条消息
|
||||
|
const lastMessage = messages[messages.length - 1]; |
||||
|
|
||||
|
messageList.push({ |
||||
|
userId: chatUserId, |
||||
|
userName: this.getUserNameById(chatUserId), |
||||
|
avatar: '', |
||||
|
lastMessage: this.formatMessagePreview(lastMessage), |
||||
|
lastMessageTime: this.formatMessageTime(lastMessage.time), |
||||
|
messageCount: messages.length |
||||
|
}); |
||||
|
|
||||
|
processedConversations.add(chatUserId); |
||||
|
} |
||||
|
} else { |
||||
|
// 普通用户，正常处理
|
||||
|
// 避免处理自己与自己的聊天
|
||||
|
if (chatUserId === currentUserId) return; |
||||
|
|
||||
|
// 获取最后一条消息
|
||||
|
const lastMessage = messages[messages.length - 1]; |
||||
|
|
||||
|
messageList.push({ |
||||
|
userId: chatUserId, |
||||
|
userName: this.getUserNameById(chatUserId), |
||||
|
avatar: '', |
||||
|
lastMessage: this.formatMessagePreview(lastMessage), |
||||
|
lastMessageTime: this.formatMessageTime(lastMessage.time), |
||||
|
messageCount: messages.length |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 按最后消息时间排序（最新的在前）
|
||||
|
messageList.sort((a, b) => { |
||||
|
return new Date(b.lastMessageTime) - new Date(a.lastMessageTime); |
||||
|
}); |
||||
|
|
||||
|
this.setData({ |
||||
|
messageList: messageList |
||||
|
}); |
||||
|
} catch (e) { |
||||
|
console.error('加载聊天列表失败:', e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 根据用户ID获取用户名 |
||||
|
*/ |
||||
|
getUserNameById: function(userId) { |
||||
|
try { |
||||
|
// 参数有效性检查
|
||||
|
if (!userId || typeof userId === 'undefined') { |
||||
|
return '未知用户'; |
||||
|
} |
||||
|
|
||||
|
// 确保userId是字符串类型
|
||||
|
const safeUserId = String(userId); |
||||
|
|
||||
|
// 尝试从全局客服列表中获取用户名
|
||||
|
const app = getApp(); |
||||
|
|
||||
|
// 尝试从本地缓存的客服列表中查找
|
||||
|
const cachedCustomerServices = wx.getStorageSync('cached_customer_services') || []; |
||||
|
const service = cachedCustomerServices.find(item => |
||||
|
item.id === safeUserId || item.managerId === safeUserId || |
||||
|
String(item.id) === safeUserId || String(item.managerId) === safeUserId |
||||
|
); |
||||
|
|
||||
|
if (service) { |
||||
|
return service.alias || service.name || '客服'; |
||||
|
} |
||||
|
|
||||
|
// 固定用户名映射
|
||||
|
const userMap = { |
||||
|
'user1': '客服专员', |
||||
|
'user2': '商家客服', |
||||
|
'user_1': '张三', |
||||
|
'user_2': '李四', |
||||
|
'user_3': '王五', |
||||
|
'user_4': '赵六', |
||||
|
'user_5': '钱七', |
||||
|
'customer_service_1': '客服小王', |
||||
|
'customer_service_2': '客服小李', |
||||
|
'customer_service_3': '客服小张' |
||||
|
}; |
||||
|
|
||||
|
if (userMap[safeUserId]) { |
||||
|
return userMap[safeUserId]; |
||||
|
} |
||||
|
|
||||
|
// 对于manager_开头的ID，显示为客服
|
||||
|
if (safeUserId.startsWith('manager_') || safeUserId.includes('manager')) { |
||||
|
return '客服-' + (safeUserId.length >= 4 ? safeUserId.slice(-4) : safeUserId); |
||||
|
} |
||||
|
|
||||
|
// 如果都没有找到，返回默认名称，避免出现undefined
|
||||
|
if (safeUserId.length >= 4) { |
||||
|
return '用户' + safeUserId.slice(-4); |
||||
|
} else { |
||||
|
return '用户' + safeUserId; |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.error('获取用户名失败:', e); |
||||
|
return '未知用户'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 格式化消息预览 |
||||
|
*/ |
||||
|
formatMessagePreview: function(message) { |
||||
|
if (message.type === 'system') { |
||||
|
return '[系统消息] ' + message.content; |
||||
|
} else { |
||||
|
const senderPrefix = message.sender === 'me' ? '我: ' : ''; |
||||
|
// 限制预览长度
|
||||
|
let preview = senderPrefix + message.content; |
||||
|
if (preview.length > 30) { |
||||
|
preview = preview.substring(0, 30) + '...'; |
||||
|
} |
||||
|
return preview; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 格式化消息时间 |
||||
|
*/ |
||||
|
formatMessageTime: function(timeStr) { |
||||
|
if (!timeStr) return ''; |
||||
|
|
||||
|
// 假设时间格式为 "9-21 10:50" 或类似格式
|
||||
|
const now = new Date(); |
||||
|
let dateStr = timeStr; |
||||
|
|
||||
|
// 如果没有包含年份，添加当前年份
|
||||
|
if (!timeStr.includes('-') || timeStr.split('-').length < 3) { |
||||
|
const currentYear = now.getFullYear(); |
||||
|
dateStr = timeStr.includes(' ') ? |
||||
|
`${currentYear}-${timeStr.split(' ')[0]} ${timeStr.split(' ')[1]}` : |
||||
|
`${currentYear}-${timeStr}`; |
||||
|
} |
||||
|
|
||||
|
const messageDate = new Date(dateStr); |
||||
|
const diffTime = Math.abs(now - messageDate); |
||||
|
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); |
||||
|
|
||||
|
if (diffDays === 0) { |
||||
|
// 今天的消息只显示时间
|
||||
|
return timeStr.split(' ')[1] || timeStr; |
||||
|
} else if (diffDays === 1) { |
||||
|
// 昨天的消息
|
||||
|
return '昨天'; |
||||
|
} else if (diffDays < 7) { |
||||
|
// 一周内的消息显示星期
|
||||
|
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; |
||||
|
return weekdays[messageDate.getDay()]; |
||||
|
} else { |
||||
|
// 超过一周的消息显示日期
|
||||
|
return timeStr.split(' ')[0] || timeStr; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 跳转到聊天详情页 |
||||
|
*/ |
||||
|
goToChat: function(e) { |
||||
|
const userId = e.currentTarget.dataset.userId; |
||||
|
// 查找对应的用户信息
|
||||
|
const userInfo = this.data.messageList.find(item => item.userId === userId); |
||||
|
|
||||
|
wx.navigateTo({ |
||||
|
url: `/pages/chat-detail/index?userId=${userId}&userName=${encodeURIComponent(userInfo?.userName || '')}` |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function() { |
||||
|
this.loadChatList(); |
||||
|
// 停止下拉刷新
|
||||
|
wx.stopPullDownRefresh(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 处理清除聊天记录 |
||||
|
*/ |
||||
|
onUnload: function() { |
||||
|
// 页面卸载时的清理工作
|
||||
|
// 恢复原始的全局消息处理函数
|
||||
|
try { |
||||
|
const app = getApp(); |
||||
|
if (this.originalMessageHandler) { |
||||
|
app.globalData.onNewMessage = this.originalMessageHandler; |
||||
|
} else { |
||||
|
// 如果没有原始处理函数，则清除当前的
|
||||
|
delete app.globalData.onNewMessage; |
||||
|
} |
||||
|
console.log('已清理全局新消息处理函数'); |
||||
|
} catch (e) { |
||||
|
console.error('清理全局新消息处理函数失败:', e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleClearChat: function(e) { |
||||
|
const userId = e.currentTarget.dataset.userId; |
||||
|
|
||||
|
wx.showModal({ |
||||
|
title: '确认清空', |
||||
|
content: '确定要清空与该用户的所有聊天记录吗？此操作不可恢复。', |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
this.clearChatHistory(userId); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 清空指定用户的聊天记录 |
||||
|
*/ |
||||
|
clearChatHistory: function(userId) { |
||||
|
try { |
||||
|
wx.removeStorageSync(`chat_messages_${userId}`); |
||||
|
console.log('已清空用户', userId, '的聊天记录'); |
||||
|
|
||||
|
// 刷新消息列表
|
||||
|
this.loadChatList(); |
||||
|
|
||||
|
wx.showToast({ |
||||
|
title: '聊天记录已清空', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} catch (e) { |
||||
|
console.error('清空聊天记录失败:', e); |
||||
|
wx.showToast({ |
||||
|
title: '清空失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "消息列表", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<view class="message-list-container"> |
||||
|
<view class="page-header"> |
||||
|
<text class="page-title">消息列表</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="message-list"> |
||||
|
<!-- 消息列表项 --> |
||||
|
<block wx:for="{{messageList}}" wx:key="userId"> |
||||
|
<view class="message-item" bindtap="goToChat" data-user-id="{{item.userId}}"> |
||||
|
<view class="avatar"> |
||||
|
<image src="{{item.avatar || '/images/logo.svg'}}" mode="aspectFit"></image> |
||||
|
</view> |
||||
|
<view class="message-content"> |
||||
|
<view class="message-header"> |
||||
|
<text class="user-name">{{item.userName}}</text> |
||||
|
<text class="message-time">{{item.lastMessageTime}}</text> |
||||
|
</view> |
||||
|
<view class="message-preview">{{item.lastMessage || '暂无消息'}}</view> |
||||
|
</view> |
||||
|
<view class="message-actions"> |
||||
|
<button size="mini" type="warn" bindtap="handleClearChat" data-user-id="{{item.userId}}" catchtap="true">清空</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<view wx:if="{{messageList.length === 0}}" class="empty-state"> |
||||
|
<text>暂无聊天记录</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,101 @@ |
|||||
|
.message-list-container { |
||||
|
height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.page-header { |
||||
|
padding: 20rpx 30rpx; |
||||
|
background-color: #fff; |
||||
|
border-bottom: 1rpx solid #eee; |
||||
|
} |
||||
|
|
||||
|
.page-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.message-list { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.message-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 30rpx; |
||||
|
background-color: #fff; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
transition: background-color 0.2s; |
||||
|
} |
||||
|
|
||||
|
.message-item:active { |
||||
|
background-color: #f8f8f8; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
margin-right: 20rpx; |
||||
|
background-color: #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.avatar image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.message-content { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.message-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.user-name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.message-time { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.message-preview { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.message-actions { |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.message-actions button { |
||||
|
font-size: 24rpx; |
||||
|
padding: 0 20rpx; |
||||
|
min-width: 80rpx; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.empty-state { |
||||
|
padding: 100rpx 0; |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
@ -0,0 +1,382 @@ |
|||||
|
// 客服功能综合测试页面
|
||||
|
|
||||
|
const socketManager = require('../../utils/websocket'); |
||||
|
const API = require('../../utils/api'); |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
// 测试状态
|
||||
|
testResults: [], |
||||
|
currentTest: '', |
||||
|
isTesting: false, |
||||
|
|
||||
|
// 用户信息
|
||||
|
userInfo: null, |
||||
|
userType: 'unknown', |
||||
|
isAuthenticated: false, |
||||
|
|
||||
|
// WebSocket状态
|
||||
|
wsConnected: false, |
||||
|
wsAuthenticated: false, |
||||
|
|
||||
|
// 测试消息
|
||||
|
testMessage: '测试消息', |
||||
|
receivedMessage: null, |
||||
|
|
||||
|
// 测试模式
|
||||
|
testMode: 'customer', // customer 或 customer_service
|
||||
|
|
||||
|
// 模拟客服ID
|
||||
|
mockServiceId: 'test_service_001' |
||||
|
}, |
||||
|
|
||||
|
onLoad: function() { |
||||
|
console.log('测试页面加载'); |
||||
|
this.setData({ |
||||
|
userInfo: getApp().globalData.userInfo, |
||||
|
userType: getApp().globalData.userType |
||||
|
}); |
||||
|
|
||||
|
// 设置WebSocket事件监听
|
||||
|
this.setupWebSocketListeners(); |
||||
|
}, |
||||
|
|
||||
|
// 设置WebSocket事件监听
|
||||
|
setupWebSocketListeners: function() { |
||||
|
// 连接状态监听
|
||||
|
socketManager.on('status', (status) => { |
||||
|
console.log('WebSocket状态:', status); |
||||
|
this.setData({ |
||||
|
wsConnected: status.type === 'connected' |
||||
|
}); |
||||
|
this.addTestResult(`WebSocket状态: ${status.type} - ${status.message || ''}`); |
||||
|
}); |
||||
|
|
||||
|
// 认证状态监听
|
||||
|
socketManager.on('authenticated', (data) => { |
||||
|
console.log('WebSocket认证成功:', data); |
||||
|
this.setData({ |
||||
|
wsAuthenticated: true, |
||||
|
isAuthenticated: true |
||||
|
}); |
||||
|
this.addTestResult(`WebSocket认证成功，用户类型: ${data.userType || 'unknown'}`); |
||||
|
}); |
||||
|
|
||||
|
// 消息接收监听
|
||||
|
socketManager.on('message', (message) => { |
||||
|
console.log('收到WebSocket消息:', message); |
||||
|
this.setData({ |
||||
|
receivedMessage: message |
||||
|
}); |
||||
|
this.addTestResult(`收到消息: ${JSON.stringify(message).substring(0, 100)}...`); |
||||
|
}); |
||||
|
|
||||
|
// 错误监听
|
||||
|
socketManager.on('error', (error) => { |
||||
|
console.error('WebSocket错误:', error); |
||||
|
this.addTestResult(`错误: ${error.message || JSON.stringify(error)}`, true); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 开始综合测试
|
||||
|
startTest: function() { |
||||
|
if (this.data.isTesting) { |
||||
|
wx.showToast({ title: '测试正在进行中', icon: 'none' }); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
isTesting: true, |
||||
|
testResults: [], |
||||
|
currentTest: '' |
||||
|
}); |
||||
|
|
||||
|
this.addTestResult('===== 开始综合测试 ====='); |
||||
|
|
||||
|
// 按顺序执行测试用例
|
||||
|
setTimeout(() => { |
||||
|
this.testUserTypeDetection(); |
||||
|
}, 500); |
||||
|
}, |
||||
|
|
||||
|
// 测试1: 用户类型检测
|
||||
|
testUserTypeDetection: function() { |
||||
|
this.setData({ currentTest: '用户类型检测' }); |
||||
|
this.addTestResult('测试1: 验证用户类型检测功能'); |
||||
|
|
||||
|
const app = getApp(); |
||||
|
const userType = app.globalData.userType || 'unknown'; |
||||
|
const storedType = wx.getStorageSync('userType') || 'unknown'; |
||||
|
|
||||
|
this.addTestResult(`全局用户类型: ${userType}`); |
||||
|
this.addTestResult(`本地存储用户类型: ${storedType}`); |
||||
|
|
||||
|
if (userType === storedType && userType !== 'unknown') { |
||||
|
this.addTestResult('✓ 用户类型检测通过'); |
||||
|
} else { |
||||
|
this.addTestResult('✗ 用户类型检测失败', true); |
||||
|
} |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.testWebSocketConnection(); |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 测试2: WebSocket连接和认证
|
||||
|
testWebSocketConnection: function() { |
||||
|
this.setData({ currentTest: 'WebSocket连接' }); |
||||
|
this.addTestResult('测试2: 验证WebSocket连接和认证功能'); |
||||
|
|
||||
|
// 检查是否已连接
|
||||
|
if (socketManager.getConnectionStatus()) { |
||||
|
this.addTestResult('✓ WebSocket已连接'); |
||||
|
setTimeout(() => { |
||||
|
this.testAuthentication(); |
||||
|
}, 500); |
||||
|
} else { |
||||
|
this.addTestResult('尝试建立WebSocket连接...'); |
||||
|
// 构建连接URL
|
||||
|
const app = getApp(); |
||||
|
const userType = app.globalData.userType || 'customer'; |
||||
|
const userId = wx.getStorageSync('userId') || `test_${Date.now()}`; |
||||
|
|
||||
|
const wsUrl = `ws://localhost:3003?userId=${userId}&userType=${userType}`; |
||||
|
this.addTestResult(`连接URL: ${wsUrl}`); |
||||
|
|
||||
|
socketManager.connect(wsUrl); |
||||
|
|
||||
|
// 等待连接建立
|
||||
|
setTimeout(() => { |
||||
|
if (this.data.wsConnected) { |
||||
|
this.addTestResult('✓ WebSocket连接成功'); |
||||
|
this.testAuthentication(); |
||||
|
} else { |
||||
|
this.addTestResult('✗ WebSocket连接失败', true); |
||||
|
this.completeTest(); |
||||
|
} |
||||
|
}, 3000); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 测试3: 认证功能
|
||||
|
testAuthentication: function() { |
||||
|
this.setData({ currentTest: '认证功能' }); |
||||
|
this.addTestResult('测试3: 验证WebSocket认证功能'); |
||||
|
|
||||
|
if (this.data.wsAuthenticated) { |
||||
|
this.addTestResult('✓ WebSocket认证成功'); |
||||
|
setTimeout(() => { |
||||
|
this.testMessageSending(); |
||||
|
}, 500); |
||||
|
} else { |
||||
|
this.addTestResult('尝试手动认证...'); |
||||
|
const app = getApp(); |
||||
|
const userType = app.globalData.userType || this.data.testMode; |
||||
|
const userId = wx.getStorageSync('userId') || `test_${Date.now()}`; |
||||
|
|
||||
|
socketManager.authenticate(userType, userId); |
||||
|
|
||||
|
// 等待认证结果
|
||||
|
setTimeout(() => { |
||||
|
if (this.data.wsAuthenticated) { |
||||
|
this.addTestResult('✓ 手动认证成功'); |
||||
|
this.testMessageSending(); |
||||
|
} else { |
||||
|
this.addTestResult('✗ 认证失败', true); |
||||
|
this.completeTest(); |
||||
|
} |
||||
|
}, 2000); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 测试4: 消息发送功能
|
||||
|
testMessageSending: function() { |
||||
|
this.setData({ currentTest: '消息发送' }); |
||||
|
this.addTestResult('测试4: 验证消息发送功能'); |
||||
|
|
||||
|
const app = getApp(); |
||||
|
const userType = app.globalData.userType || this.data.testMode; |
||||
|
const targetId = userType === 'customer_service' ? |
||||
|
`test_customer_${Date.now()}` : |
||||
|
this.data.mockServiceId; |
||||
|
|
||||
|
this.addTestResult(`当前用户类型: ${userType}, 目标ID: ${targetId}`); |
||||
|
|
||||
|
const testMessage = { |
||||
|
type: 'chat_message', |
||||
|
direction: userType === 'customer_service' ? 'service_to_customer' : 'customer_to_service', |
||||
|
data: { |
||||
|
receiverId: targetId, |
||||
|
senderId: wx.getStorageSync('userId') || `test_${Date.now()}`, |
||||
|
senderType: userType, |
||||
|
content: this.data.testMessage || '测试消息_' + Date.now(), |
||||
|
contentType: 1, |
||||
|
timestamp: Date.now() |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const sent = socketManager.send(testMessage); |
||||
|
if (sent) { |
||||
|
this.addTestResult('✓ 消息发送成功'); |
||||
|
// 等待接收消息（如果有回复）
|
||||
|
setTimeout(() => { |
||||
|
this.testBidirectionalCommunication(); |
||||
|
}, 3000); |
||||
|
} else { |
||||
|
this.addTestResult('✗ 消息发送失败', true); |
||||
|
this.completeTest(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 测试5: 双向通信功能
|
||||
|
testBidirectionalCommunication: function() { |
||||
|
this.setData({ currentTest: '双向通信' }); |
||||
|
this.addTestResult('测试5: 验证双向通信功能'); |
||||
|
|
||||
|
if (this.data.receivedMessage) { |
||||
|
this.addTestResult('✓ 收到响应消息'); |
||||
|
this.addTestResult(`消息内容: ${JSON.stringify(this.data.receivedMessage).substring(0, 150)}...`); |
||||
|
} else { |
||||
|
this.addTestResult('⚠ 未收到响应消息（可能是正常的，取决于服务器配置）'); |
||||
|
} |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.testUserTypeSwitching(); |
||||
|
}, 1000); |
||||
|
}, |
||||
|
|
||||
|
// 测试6: 用户类型切换
|
||||
|
testUserTypeSwitching: function() { |
||||
|
this.setData({ currentTest: '用户类型切换' }); |
||||
|
this.addTestResult('测试6: 验证用户类型切换功能'); |
||||
|
|
||||
|
try { |
||||
|
// 模拟切换用户类型
|
||||
|
const app = getApp(); |
||||
|
const originalType = app.globalData.userType; |
||||
|
const newType = originalType === 'customer' ? 'customer_service' : 'customer'; |
||||
|
|
||||
|
app.globalData.userType = newType; |
||||
|
wx.setStorageSync('userType', newType); |
||||
|
|
||||
|
this.addTestResult(`✓ 用户类型切换成功: ${originalType} → ${newType}`); |
||||
|
this.addTestResult(`新的全局用户类型: ${app.globalData.userType}`); |
||||
|
this.addTestResult(`新的存储用户类型: ${wx.getStorageSync('userType')}`); |
||||
|
|
||||
|
// 恢复原始类型
|
||||
|
setTimeout(() => { |
||||
|
app.globalData.userType = originalType; |
||||
|
wx.setStorageSync('userType', originalType); |
||||
|
this.addTestResult(`恢复原始用户类型: ${originalType}`); |
||||
|
this.completeTest(); |
||||
|
}, 1000); |
||||
|
} catch (error) { |
||||
|
this.addTestResult(`✗ 用户类型切换失败: ${error.message}`, true); |
||||
|
this.completeTest(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 完成测试
|
||||
|
completeTest: function() { |
||||
|
this.addTestResult('===== 测试完成 ====='); |
||||
|
|
||||
|
// 统计测试结果
|
||||
|
const results = this.data.testResults; |
||||
|
const successCount = results.filter(r => r.includes('✓')).length; |
||||
|
const failCount = results.filter(r => r.includes('✗')).length; |
||||
|
const warnCount = results.filter(r => r.includes('⚠')).length; |
||||
|
|
||||
|
this.addTestResult(`测试统计: 成功=${successCount}, 失败=${failCount}, 警告=${warnCount}`); |
||||
|
|
||||
|
if (failCount === 0) { |
||||
|
this.addTestResult('🎉 所有测试通过!'); |
||||
|
} else { |
||||
|
this.addTestResult('❌ 测试中有失败项，请检查', true); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
isTesting: false, |
||||
|
currentTest: '测试完成' |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 添加测试结果
|
||||
|
addTestResult: function(message, isError = false) { |
||||
|
const timestamp = new Date().toLocaleTimeString(); |
||||
|
const resultItem = { |
||||
|
id: Date.now(), |
||||
|
time: timestamp, |
||||
|
message: message, |
||||
|
isError: isError |
||||
|
}; |
||||
|
|
||||
|
this.setData({ |
||||
|
testResults: [...this.data.testResults, resultItem] |
||||
|
}); |
||||
|
|
||||
|
console.log(`[${timestamp}] ${message}`); |
||||
|
}, |
||||
|
|
||||
|
// 切换测试模式
|
||||
|
switchTestMode: function() { |
||||
|
const newMode = this.data.testMode === 'customer' ? 'customer_service' : 'customer'; |
||||
|
this.setData({ testMode: newMode }); |
||||
|
wx.showToast({ title: `已切换到${newMode === 'customer' ? '客户' : '客服'}模式` }); |
||||
|
}, |
||||
|
|
||||
|
// 输入测试消息
|
||||
|
onInputChange: function(e) { |
||||
|
this.setData({ testMessage: e.detail.value }); |
||||
|
}, |
||||
|
|
||||
|
// 清理WebSocket连接
|
||||
|
cleanup: function() { |
||||
|
try { |
||||
|
socketManager.close(); |
||||
|
this.addTestResult('WebSocket连接已关闭'); |
||||
|
} catch (error) { |
||||
|
this.addTestResult(`关闭连接失败: ${error.message}`, true); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 手动发送消息
|
||||
|
sendTestMessage: function() { |
||||
|
if (!this.data.testMessage.trim()) { |
||||
|
wx.showToast({ title: '请输入测试消息', icon: 'none' }); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const app = getApp(); |
||||
|
const userType = app.globalData.userType || this.data.testMode; |
||||
|
const targetId = userType === 'customer_service' ? |
||||
|
`test_customer_${Date.now()}` : |
||||
|
this.data.mockServiceId; |
||||
|
|
||||
|
const message = { |
||||
|
type: 'chat_message', |
||||
|
direction: userType === 'customer_service' ? 'service_to_customer' : 'customer_to_service', |
||||
|
data: { |
||||
|
receiverId: targetId, |
||||
|
senderId: wx.getStorageSync('userId') || `test_${Date.now()}`, |
||||
|
senderType: userType, |
||||
|
content: this.data.testMessage.trim(), |
||||
|
contentType: 1, |
||||
|
timestamp: Date.now() |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const sent = socketManager.send(message); |
||||
|
if (sent) { |
||||
|
wx.showToast({ title: '消息已发送' }); |
||||
|
this.addTestResult(`手动发送消息: ${this.data.testMessage}`); |
||||
|
} else { |
||||
|
wx.showToast({ title: '发送失败', icon: 'none' }); |
||||
|
this.addTestResult(`手动发送失败`, true); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onUnload: function() { |
||||
|
// 清理监听器和连接
|
||||
|
this.cleanup(); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,97 @@ |
|||||
|
<view class="test-container"> |
||||
|
<view class="header"> |
||||
|
<text class="title">客服功能综合测试</text> |
||||
|
<text class="subtitle">验证客服认证、身份判断和双向沟通功能</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="test-status"> |
||||
|
<view class="status-item {{isTesting ? 'testing' : ''}}"> |
||||
|
<text class="status-label">当前测试:</text> |
||||
|
<text class="status-value">{{currentTest || '未开始'}}</text> |
||||
|
</view> |
||||
|
<view class="status-item"> |
||||
|
<text class="status-label">用户类型:</text> |
||||
|
<text class="status-value">{{userType}}</text> |
||||
|
</view> |
||||
|
<view class="status-item {{wsConnected ? 'connected' : ''}}"> |
||||
|
<text class="status-label">WebSocket:</text> |
||||
|
<text class="status-value">{{wsConnected ? '已连接' : '未连接'}}</text> |
||||
|
</view> |
||||
|
<view class="status-item {{wsAuthenticated ? 'authenticated' : ''}}"> |
||||
|
<text class="status-label">认证状态:</text> |
||||
|
<text class="status-value">{{wsAuthenticated ? '已认证' : '未认证'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="test-controls"> |
||||
|
<view class="control-item"> |
||||
|
<text class="control-label">测试模式:</text> |
||||
|
<view class="control-buttons"> |
||||
|
<button type="{{testMode === 'customer' ? 'primary' : 'default'}}" bind:tap="switchTestMode"> |
||||
|
{{testMode === 'customer' ? '客户模式 ✓' : '客户模式'}} |
||||
|
</button> |
||||
|
<button type="{{testMode === 'customer_service' ? 'primary' : 'default'}}" bind:tap="switchTestMode"> |
||||
|
{{testMode === 'customer_service' ? '客服模式 ✓' : '客服模式'}} |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="control-item"> |
||||
|
<text class="control-label">测试消息:</text> |
||||
|
<input |
||||
|
class="message-input" |
||||
|
placeholder="请输入测试消息" |
||||
|
value="{{testMessage}}" |
||||
|
bindinput="onInputChange" |
||||
|
/> |
||||
|
<button type="primary" bind:tap="sendTestMessage">发送测试消息</button> |
||||
|
</view> |
||||
|
|
||||
|
<view class="action-buttons"> |
||||
|
<button |
||||
|
class="start-button" |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
bind:tap="startTest" |
||||
|
disabled="{{isTesting}}" |
||||
|
> |
||||
|
{{isTesting ? '测试进行中...' : '开始综合测试'}} |
||||
|
</button> |
||||
|
<button |
||||
|
class="cleanup-button" |
||||
|
type="warn" |
||||
|
size="mini" |
||||
|
bind:tap="cleanup" |
||||
|
> |
||||
|
清理连接 |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="test-results"> |
||||
|
<text class="results-title">测试结果:</text> |
||||
|
<scroll-view class="results-list" scroll-y> |
||||
|
<view |
||||
|
wx:for="{{testResults}}" |
||||
|
wx:key="id" |
||||
|
class="result-item {{item.isError ? 'error' : ''}}" |
||||
|
> |
||||
|
<text class="result-time">{{item.time}}</text> |
||||
|
<text class="result-message">{{item.message}}</text> |
||||
|
</view> |
||||
|
<view class="empty-result" wx:if="{{testResults.length === 0}}"> |
||||
|
暂无测试结果，点击开始综合测试 |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="test-tips"> |
||||
|
<text class="tips-title">测试提示:</text> |
||||
|
<view class="tips-content"> |
||||
|
<text>1. 测试前请确保已完成登录</text> |
||||
|
<text>2. WebSocket服务需要正常运行</text> |
||||
|
<text>3. 测试将验证用户类型检测、WebSocket连接、认证和消息发送功能</text> |
||||
|
<text>4. 双向通信测试依赖于服务器配置，可能不会收到响应消息</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,249 @@ |
|||||
|
.test-container { |
||||
|
padding: 20rpx; |
||||
|
background-color: #f8f8f8; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
text-align: center; |
||||
|
margin-bottom: 30rpx; |
||||
|
padding: 20rpx 0; |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.test-status { |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.status-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 15rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.status-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.status-label { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.status-value { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.status-item.testing .status-value { |
||||
|
color: #07c160; |
||||
|
animation: pulse 1s infinite; |
||||
|
} |
||||
|
|
||||
|
.status-item.connected .status-value { |
||||
|
color: #07c160; |
||||
|
} |
||||
|
|
||||
|
.status-item.authenticated .status-value { |
||||
|
color: #1989fa; |
||||
|
} |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
50% { |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.test-controls { |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.control-item { |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.control-item:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.control-label { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
margin-bottom: 15rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.control-buttons { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.control-buttons button { |
||||
|
flex: 1; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.message-input { |
||||
|
border: 1rpx solid #ddd; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 15rpx; |
||||
|
background-color: #f9f9f9; |
||||
|
} |
||||
|
|
||||
|
.action-buttons { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.action-buttons button { |
||||
|
flex: 1; |
||||
|
margin: 0 10rpx; |
||||
|
} |
||||
|
|
||||
|
.start-button { |
||||
|
background-color: #07c160; |
||||
|
} |
||||
|
|
||||
|
.cleanup-button { |
||||
|
background-color: #ee0a24; |
||||
|
} |
||||
|
|
||||
|
.test-results { |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.results-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
display: block; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.results-list { |
||||
|
height: 400rpx; |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.result-item { |
||||
|
padding: 15rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
background-color: #fff; |
||||
|
border-radius: 6rpx; |
||||
|
border-left: 4rpx solid #1989fa; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.result-item.error { |
||||
|
border-left-color: #ee0a24; |
||||
|
background-color: #fff1f0; |
||||
|
} |
||||
|
|
||||
|
.result-time { |
||||
|
color: #999; |
||||
|
font-size: 20rpx; |
||||
|
display: block; |
||||
|
margin-bottom: 5rpx; |
||||
|
} |
||||
|
|
||||
|
.result-message { |
||||
|
color: #333; |
||||
|
word-break: break-all; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.empty-result { |
||||
|
text-align: center; |
||||
|
color: #999; |
||||
|
padding: 60rpx 0; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.test-tips { |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.tips-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
display: block; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.tips-content { |
||||
|
background-color: #f0f9ff; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.tips-content text { |
||||
|
display: block; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.tips-content text:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/* 适配不同屏幕尺寸 */ |
||||
|
@media screen and (min-width: 768px) { |
||||
|
.test-container { |
||||
|
max-width: 900rpx; |
||||
|
margin: 0 auto; |
||||
|
padding: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.results-list { |
||||
|
height: 600rpx; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,125 @@ |
|||||
|
// 查询userlogin数据库中的personnel表，获取所有采购员数据
|
||||
|
require('dotenv').config({ path: 'd:\\xt\\mian_ly\\server-example\\.env' }); |
||||
|
const mysql = require('mysql2/promise'); |
||||
|
|
||||
|
// 查询personnel表中的采购员数据
|
||||
|
async function queryPersonnelData() { |
||||
|
let connection = null; |
||||
|
try { |
||||
|
console.log('连接到userlogin数据库...'); |
||||
|
connection = await mysql.createConnection({ |
||||
|
host: '1.95.162.61', // 直接使用正确的主机地址
|
||||
|
user: process.env.DB_USER || 'root', |
||||
|
password: process.env.DB_PASSWORD || 'schl@2025', // 直接使用默认密码
|
||||
|
database: 'userlogin', |
||||
|
port: process.env.DB_PORT || 3306, |
||||
|
timezone: '+08:00' // 设置时区为UTC+8
|
||||
|
}); |
||||
|
console.log('数据库连接成功\n'); |
||||
|
|
||||
|
// 首先查询personnel表结构
|
||||
|
console.log('=== personnel表结构 ==='); |
||||
|
const [columns] = await connection.execute( |
||||
|
'SHOW COLUMNS FROM personnel' |
||||
|
); |
||||
|
console.log('字段列表:', columns.map(col => col.Field).join(', ')); |
||||
|
console.log(); |
||||
|
|
||||
|
// 查询projectName为采购员的数据
|
||||
|
console.log('=== 所有采购员数据 ==='); |
||||
|
const [personnelData] = await connection.execute( |
||||
|
'SELECT * FROM personnel WHERE projectName = ?', |
||||
|
['采购员'] |
||||
|
); |
||||
|
|
||||
|
console.log(`找到 ${personnelData.length} 名采购员记录`); |
||||
|
console.log('\n采购员数据详情:'); |
||||
|
|
||||
|
// 格式化输出数据
|
||||
|
personnelData.forEach((person, index) => { |
||||
|
console.log(`\n${index + 1}. 采购员信息:`); |
||||
|
console.log(` - ID: ${person.id || 'N/A'}`); |
||||
|
console.log(` - 用户ID: ${person.userId || 'N/A'}`); |
||||
|
console.log(` - 姓名: ${person.name || 'N/A'}`); |
||||
|
console.log(` - 别名: ${person.alias || 'N/A'}`); |
||||
|
console.log(` - 电话号码: ${person.phoneNumber || 'N/A'}`); |
||||
|
console.log(` - 公司: ${person.managercompany || 'N/A'}`); |
||||
|
console.log(` - 部门: ${person.managerdepartment || 'N/A'}`); |
||||
|
console.log(` - 角色: ${person.role || 'N/A'}`); |
||||
|
}); |
||||
|
|
||||
|
// 输出JSON格式，便于复制使用
|
||||
|
console.log('\n=== JSON格式数据 (用于客服页面) ==='); |
||||
|
const customerServiceData = personnelData.map((person, index) => ({ |
||||
|
id: index + 1, |
||||
|
managerId: person.userId || `PM${String(index + 1).padStart(3, '0')}`, |
||||
|
managercompany: person.managercompany || '未知公司', |
||||
|
managerdepartment: person.managerdepartment || '采购部', |
||||
|
organization: person.organization || '采购组', |
||||
|
projectName: person.role || '采购员', |
||||
|
name: person.name || '未知', |
||||
|
alias: person.alias || person.name || '未知', |
||||
|
phoneNumber: person.phoneNumber || '', |
||||
|
avatarUrl: '', |
||||
|
score: 990 + (index % 10), |
||||
|
isOnline: index % 4 !== 0, // 75%的在线率
|
||||
|
responsibleArea: `${getRandomArea()}鸡蛋采购`, |
||||
|
experience: getRandomExperience(), |
||||
|
serviceCount: getRandomNumber(100, 300), |
||||
|
purchaseCount: getRandomNumber(10000, 30000), |
||||
|
profitIncreaseRate: getRandomNumber(10, 25), |
||||
|
profitFarmCount: getRandomNumber(50, 200), |
||||
|
skills: getRandomSkills() |
||||
|
})); |
||||
|
|
||||
|
console.log(JSON.stringify(customerServiceData, null, 2)); |
||||
|
|
||||
|
return customerServiceData; |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('查询过程中发生错误:', error); |
||||
|
console.error('错误详情:', error.stack); |
||||
|
return null; |
||||
|
} finally { |
||||
|
if (connection) { |
||||
|
await connection.end(); |
||||
|
console.log('\n数据库连接已关闭'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 辅助函数：生成随机区域
|
||||
|
function getRandomArea() { |
||||
|
const areas = ['华北区', '华东区', '华南区', '全国', '西南区', '西北区', '东北区']; |
||||
|
return areas[Math.floor(Math.random() * areas.length)]; |
||||
|
} |
||||
|
|
||||
|
// 辅助函数：生成随机工作经验
|
||||
|
function getRandomExperience() { |
||||
|
const experiences = ['1-2年', '1-3年', '2-3年', '3-5年', '5年以上']; |
||||
|
return experiences[Math.floor(Math.random() * experiences.length)]; |
||||
|
} |
||||
|
|
||||
|
// 辅助函数：生成随机数字
|
||||
|
function getRandomNumber(min, max) { |
||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
|
} |
||||
|
|
||||
|
// 辅助函数：生成随机技能
|
||||
|
function getRandomSkills() { |
||||
|
const allSkills = ['渠道拓展', '供应商维护', '质量把控', '精准把控市场价格', '谈判技巧', '库存管理']; |
||||
|
const skillCount = Math.floor(Math.random() * 3) + 2; // 2-4个技能
|
||||
|
const selectedSkills = []; |
||||
|
|
||||
|
while (selectedSkills.length < skillCount) { |
||||
|
const skill = allSkills[Math.floor(Math.random() * allSkills.length)]; |
||||
|
if (!selectedSkills.includes(skill)) { |
||||
|
selectedSkills.push(skill); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return selectedSkills; |
||||
|
} |
||||
|
|
||||
|
// 运行查询
|
||||
|
queryPersonnelData(); |
||||
@ -0,0 +1,79 @@ |
|||||
|
// 测试修复后的/api/managers接口
|
||||
|
const http = require('http'); |
||||
|
|
||||
|
console.log('开始测试/api/managers接口...'); |
||||
|
|
||||
|
const options = { |
||||
|
hostname: 'localhost', |
||||
|
port: 3003, |
||||
|
path: '/api/managers', |
||||
|
method: 'GET', |
||||
|
headers: { |
||||
|
'Content-Type': 'application/json' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const req = http.request(options, (res) => { |
||||
|
let data = ''; |
||||
|
|
||||
|
res.on('data', (chunk) => { |
||||
|
data += chunk; |
||||
|
}); |
||||
|
|
||||
|
res.on('end', () => { |
||||
|
console.log(`状态码: ${res.statusCode}`); |
||||
|
|
||||
|
try { |
||||
|
const responseData = JSON.parse(data); |
||||
|
console.log('响应数据:', JSON.stringify(responseData, null, 2)); |
||||
|
|
||||
|
// 验证响应格式
|
||||
|
if (res.statusCode === 200) { |
||||
|
if (responseData.success === true || responseData.code === 200) { |
||||
|
console.log('✅ API接口返回成功状态'); |
||||
|
|
||||
|
// 检查数据字段
|
||||
|
const dataArray = responseData.data || responseData; |
||||
|
if (Array.isArray(dataArray)) { |
||||
|
console.log(`✅ 获取到 ${dataArray.length} 条客服数据`); |
||||
|
|
||||
|
// 检查数据结构
|
||||
|
if (dataArray.length > 0) { |
||||
|
const firstItem = dataArray[0]; |
||||
|
console.log('第一条数据结构:', Object.keys(firstItem)); |
||||
|
|
||||
|
// 检查必要字段
|
||||
|
const requiredFields = ['id', 'managerId', 'name', 'phoneNumber']; |
||||
|
const missingFields = requiredFields.filter(field => !(field in firstItem)); |
||||
|
|
||||
|
if (missingFields.length === 0) { |
||||
|
console.log('✅ 所有必要字段都存在'); |
||||
|
} else { |
||||
|
console.warn('⚠️ 缺少必要字段:', missingFields); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
console.log('🎉 测试通过！API接口正常工作'); |
||||
|
} else { |
||||
|
console.error('❌ 响应数据不是预期的数组格式'); |
||||
|
} |
||||
|
} else { |
||||
|
console.error('❌ API返回非成功状态:', responseData); |
||||
|
} |
||||
|
} else { |
||||
|
console.error(`❌ 请求失败，状态码: ${res.statusCode}`); |
||||
|
} |
||||
|
} catch (parseError) { |
||||
|
console.error('❌ JSON解析错误:', parseError.message); |
||||
|
console.error('原始响应数据:', data); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
req.on('error', (e) => { |
||||
|
console.error('❌ 请求错误:', e.message); |
||||
|
}); |
||||
|
|
||||
|
req.end(); |
||||
|
|
||||
|
console.log('测试脚本已启动，请等待测试结果...'); |
||||
@ -0,0 +1,138 @@ |
|||||
|
// 简化版聊天功能测试
|
||||
|
|
||||
|
// 服务器配置
|
||||
|
const SERVER_URL = 'ws://localhost:3003'; |
||||
|
|
||||
|
// 测试数据
|
||||
|
const managerData = { |
||||
|
userId: 'manager_001', |
||||
|
type: 'manager', |
||||
|
name: '客服小刘' |
||||
|
}; |
||||
|
|
||||
|
const userData = { |
||||
|
userId: 'user_001', |
||||
|
type: 'user', |
||||
|
name: '测试用户' |
||||
|
}; |
||||
|
|
||||
|
// 测试结果跟踪
|
||||
|
const testResults = { |
||||
|
managerConnection: false, |
||||
|
managerAuth: false, |
||||
|
userConnection: false, |
||||
|
userAuth: false, |
||||
|
messageExchange: false, |
||||
|
onlineStatusDetection: false, |
||||
|
messageCenterFunctionality: false |
||||
|
}; |
||||
|
|
||||
|
function runSimpleChatTest() { |
||||
|
console.log('=== 开始简化版聊天功能测试 ==='); |
||||
|
|
||||
|
// 模拟客服连接
|
||||
|
try { |
||||
|
const WebSocket = require('ws'); |
||||
|
const managerSocket = new WebSocket(SERVER_URL); |
||||
|
|
||||
|
managerSocket.on('open', () => { |
||||
|
console.log('[✅] 客服连接已建立'); |
||||
|
testResults.managerConnection = true; |
||||
|
|
||||
|
// 发送客服认证
|
||||
|
const authMessage = { |
||||
|
type: 'auth', |
||||
|
data: { |
||||
|
userId: managerData.userId, |
||||
|
type: managerData.type, |
||||
|
name: managerData.name |
||||
|
} |
||||
|
}; |
||||
|
console.log('发送客服认证:', authMessage); |
||||
|
managerSocket.send(JSON.stringify(authMessage)); |
||||
|
}); |
||||
|
|
||||
|
managerSocket.on('message', (data) => { |
||||
|
console.log('[客服收到消息]:', data.toString()); |
||||
|
const message = JSON.parse(data); |
||||
|
|
||||
|
// 检查认证结果
|
||||
|
if (message.type === 'auth_success' || message.action === 'auth_response') { |
||||
|
console.log('[✅] 客服认证成功'); |
||||
|
testResults.managerAuth = true; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
managerSocket.on('error', (error) => { |
||||
|
console.error('[❌] 客服连接错误:', error.message); |
||||
|
}); |
||||
|
|
||||
|
managerSocket.on('close', () => { |
||||
|
console.log('[🔌] 客服连接已关闭'); |
||||
|
}); |
||||
|
|
||||
|
// 延迟创建用户连接
|
||||
|
setTimeout(() => { |
||||
|
const userSocket = new WebSocket(SERVER_URL); |
||||
|
|
||||
|
userSocket.on('open', () => { |
||||
|
console.log('[✅] 用户连接已建立'); |
||||
|
testResults.userConnection = true; |
||||
|
|
||||
|
// 发送用户认证
|
||||
|
const userAuth = { |
||||
|
type: 'auth', |
||||
|
data: { |
||||
|
userId: userData.userId, |
||||
|
type: userData.type, |
||||
|
name: userData.name |
||||
|
} |
||||
|
}; |
||||
|
console.log('发送用户认证:', userAuth); |
||||
|
userSocket.send(JSON.stringify(userAuth)); |
||||
|
}); |
||||
|
|
||||
|
userSocket.on('message', (data) => { |
||||
|
console.log('[用户收到消息]:', data.toString()); |
||||
|
}); |
||||
|
|
||||
|
// 5秒后发送测试消息
|
||||
|
setTimeout(() => { |
||||
|
if (userSocket.readyState === WebSocket.OPEN) { |
||||
|
const testMessage = { |
||||
|
type: 'chat', |
||||
|
from: userData.userId, |
||||
|
to: managerData.userId, |
||||
|
content: '你好，这是一条测试消息', |
||||
|
timestamp: Date.now() |
||||
|
}; |
||||
|
console.log('用户发送测试消息:', testMessage); |
||||
|
userSocket.send(JSON.stringify(testMessage)); |
||||
|
} |
||||
|
}, 5000); |
||||
|
|
||||
|
}, 3000); |
||||
|
|
||||
|
// 15秒后显示测试结果
|
||||
|
setTimeout(() => { |
||||
|
console.log('\n=== 测试结果 ==='); |
||||
|
console.log('客服连接:', testResults.managerConnection ? '✅ 成功' : '❌ 失败'); |
||||
|
console.log('客服认证:', testResults.managerAuth ? '✅ 成功' : '❌ 失败'); |
||||
|
console.log('用户连接:', testResults.userConnection ? '✅ 成功' : '❌ 失败'); |
||||
|
console.log('\n测试完成！'); |
||||
|
|
||||
|
// 关闭连接
|
||||
|
managerSocket.close(); |
||||
|
process.exit(0); |
||||
|
|
||||
|
}, 15000); |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('测试运行失败:', error.message); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 运行测试
|
||||
|
if (require.main === module) { |
||||
|
runSimpleChatTest(); |
||||
|
} |
||||
@ -0,0 +1,333 @@ |
|||||
|
// 客服功能测试脚本
|
||||
|
// 用于验证客服认证、身份判断和双向沟通功能
|
||||
|
|
||||
|
console.log('===== 开始客服功能测试 ====='); |
||||
|
|
||||
|
// 模拟用户信息和环境
|
||||
|
const mockUserInfo = { |
||||
|
customerUser: { |
||||
|
id: 'test_customer_001', |
||||
|
userType: null, |
||||
|
type: null, |
||||
|
isService: false, |
||||
|
isManager: false |
||||
|
}, |
||||
|
serviceUser: { |
||||
|
id: 'test_service_001', |
||||
|
userType: 'customer_service', |
||||
|
type: 'service', |
||||
|
isService: true, |
||||
|
isManager: false |
||||
|
}, |
||||
|
managerUser: { |
||||
|
id: 'test_manager_001', |
||||
|
userType: 'customer_service', |
||||
|
type: 'manager', |
||||
|
isService: false, |
||||
|
isManager: true |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 测试1: 用户类型判断逻辑
|
||||
|
console.log('\n测试1: 用户类型判断逻辑'); |
||||
|
testUserTypeDetection(); |
||||
|
|
||||
|
// 测试2: WebSocket消息格式
|
||||
|
console.log('\n测试2: WebSocket消息格式'); |
||||
|
testWebSocketMessageFormat(); |
||||
|
|
||||
|
// 测试3: 消息处理逻辑
|
||||
|
console.log('\n测试3: 消息处理逻辑'); |
||||
|
testMessageProcessing(); |
||||
|
|
||||
|
// 测试4: 双向通信模式
|
||||
|
console.log('\n测试4: 双向通信模式'); |
||||
|
testBidirectionalCommunication(); |
||||
|
|
||||
|
console.log('\n===== 测试完成 ====='); |
||||
|
|
||||
|
// 测试用户类型判断逻辑
|
||||
|
function testUserTypeDetection() { |
||||
|
console.log('- 测试用户类型判断函数'); |
||||
|
|
||||
|
// 模拟用户类型判断函数
|
||||
|
function detectUserType(userInfo) { |
||||
|
if (!userInfo) return 'customer'; |
||||
|
|
||||
|
if (userInfo.userType === 'customer_service' || |
||||
|
userInfo.type === 'service' || |
||||
|
userInfo.type === 'manager' || |
||||
|
userInfo.isService || |
||||
|
userInfo.isManager) { |
||||
|
return 'customer_service'; |
||||
|
} |
||||
|
|
||||
|
return 'customer'; |
||||
|
} |
||||
|
|
||||
|
// 测试各种用户类型
|
||||
|
const testCases = [ |
||||
|
{ input: mockUserInfo.customerUser, expected: 'customer', desc: '普通用户' }, |
||||
|
{ input: mockUserInfo.serviceUser, expected: 'customer_service', desc: '客服用户' }, |
||||
|
{ input: mockUserInfo.managerUser, expected: 'customer_service', desc: '管理员用户' }, |
||||
|
{ input: null, expected: 'customer', desc: '空用户信息' }, |
||||
|
{ input: {}, expected: 'customer', desc: '空对象' } |
||||
|
]; |
||||
|
|
||||
|
let passed = 0; |
||||
|
let failed = 0; |
||||
|
|
||||
|
testCases.forEach((testCase, index) => { |
||||
|
const result = detectUserType(testCase.input); |
||||
|
const isPass = result === testCase.expected; |
||||
|
|
||||
|
if (isPass) { |
||||
|
passed++; |
||||
|
console.log(` ✓ 测试${index + 1} (${testCase.desc}): 期望 ${testCase.expected}, 结果 ${result}`); |
||||
|
} else { |
||||
|
failed++; |
||||
|
console.log(` ✗ 测试${index + 1} (${testCase.desc}): 期望 ${testCase.expected}, 结果 ${result}`); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
console.log(` 结果: 通过 ${passed}, 失败 ${failed}`); |
||||
|
} |
||||
|
|
||||
|
// 测试WebSocket消息格式
|
||||
|
function testWebSocketMessageFormat() { |
||||
|
console.log('- 测试WebSocket消息格式'); |
||||
|
|
||||
|
// 模拟创建消息函数
|
||||
|
function createWebSocketMessage(senderId, receiverId, content, senderType) { |
||||
|
return { |
||||
|
type: 'chat_message', |
||||
|
direction: senderType === 'customer_service' ? 'service_to_customer' : 'customer_to_service', |
||||
|
data: { |
||||
|
receiverId: receiverId, |
||||
|
senderId: senderId, |
||||
|
senderType: senderType, |
||||
|
content: content, |
||||
|
contentType: 1, |
||||
|
timestamp: Date.now() |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 测试客服发送消息
|
||||
|
const serviceMsg = createWebSocketMessage( |
||||
|
mockUserInfo.serviceUser.id, |
||||
|
mockUserInfo.customerUser.id, |
||||
|
'您好，有什么可以帮助您的吗？', |
||||
|
'customer_service' |
||||
|
); |
||||
|
|
||||
|
// 测试客户发送消息
|
||||
|
const customerMsg = createWebSocketMessage( |
||||
|
mockUserInfo.customerUser.id, |
||||
|
mockUserInfo.serviceUser.id, |
||||
|
'我想咨询一下产品信息', |
||||
|
'customer' |
||||
|
); |
||||
|
|
||||
|
console.log(' 客服消息格式:'); |
||||
|
console.log(` - type: ${serviceMsg.type}`); |
||||
|
console.log(` - direction: ${serviceMsg.direction}`); |
||||
|
console.log(` - senderId: ${serviceMsg.data.senderId}`); |
||||
|
console.log(` - receiverId: ${serviceMsg.data.receiverId}`); |
||||
|
console.log(` - senderType: ${serviceMsg.data.senderType}`); |
||||
|
|
||||
|
console.log(' 客户消息格式:'); |
||||
|
console.log(` - type: ${customerMsg.type}`); |
||||
|
console.log(` - direction: ${customerMsg.direction}`); |
||||
|
console.log(` - senderId: ${customerMsg.data.senderId}`); |
||||
|
console.log(` - receiverId: ${customerMsg.data.receiverId}`); |
||||
|
console.log(` - senderType: ${customerMsg.data.senderType}`); |
||||
|
|
||||
|
// 验证必要字段
|
||||
|
const requiredFields = ['type', 'direction', 'data']; |
||||
|
const requiredDataFields = ['receiverId', 'senderId', 'senderType', 'content', 'contentType', 'timestamp']; |
||||
|
|
||||
|
let hasAllRequiredFields = true; |
||||
|
|
||||
|
requiredFields.forEach(field => { |
||||
|
if (!(field in serviceMsg)) { |
||||
|
console.log(` ✗ 消息缺少必要字段: ${field}`); |
||||
|
hasAllRequiredFields = false; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
requiredDataFields.forEach(field => { |
||||
|
if (!(field in serviceMsg.data)) { |
||||
|
console.log(` ✗ 消息data缺少必要字段: ${field}`); |
||||
|
hasAllRequiredFields = false; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (hasAllRequiredFields) { |
||||
|
console.log(' ✓ 消息格式验证通过'); |
||||
|
} else { |
||||
|
console.log(' ✗ 消息格式验证失败'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 测试消息处理逻辑
|
||||
|
function testMessageProcessing() { |
||||
|
console.log('- 测试消息处理逻辑'); |
||||
|
|
||||
|
// 模拟处理接收到的消息
|
||||
|
function processChatMessage(message, currentUserId, currentUserType) { |
||||
|
if (!message || !message.data) { |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
// 判断消息方向
|
||||
|
const isFromMe = message.data.senderId === currentUserId; |
||||
|
const isFromService = message.data.senderType === 'customer_service'; |
||||
|
const isFromCustomer = message.data.senderType === 'customer'; |
||||
|
|
||||
|
// 构建本地消息对象
|
||||
|
const localMessage = { |
||||
|
id: message.id || Date.now().toString(), |
||||
|
content: message.data.content || '', |
||||
|
contentType: message.data.contentType || 1, |
||||
|
timestamp: message.data.timestamp || Date.now(), |
||||
|
isFromMe: isFromMe, |
||||
|
senderType: message.data.senderType || 'unknown', |
||||
|
serverData: message, |
||||
|
status: 'received' |
||||
|
}; |
||||
|
|
||||
|
return localMessage; |
||||
|
} |
||||
|
|
||||
|
// 测试消息
|
||||
|
const testMessage = { |
||||
|
id: 'msg_001', |
||||
|
type: 'chat_message', |
||||
|
direction: 'customer_to_service', |
||||
|
data: { |
||||
|
receiverId: mockUserInfo.serviceUser.id, |
||||
|
senderId: mockUserInfo.customerUser.id, |
||||
|
senderType: 'customer', |
||||
|
content: '测试消息', |
||||
|
contentType: 1, |
||||
|
timestamp: Date.now() |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 从客服视角处理
|
||||
|
const serviceProcessed = processChatMessage( |
||||
|
testMessage, |
||||
|
mockUserInfo.serviceUser.id, |
||||
|
'customer_service' |
||||
|
); |
||||
|
|
||||
|
// 从客户视角处理
|
||||
|
const customerProcessed = processChatMessage( |
||||
|
testMessage, |
||||
|
mockUserInfo.customerUser.id, |
||||
|
'customer' |
||||
|
); |
||||
|
|
||||
|
console.log(' 客服视角处理结果:'); |
||||
|
console.log(` - 是否来自自己: ${serviceProcessed.isFromMe}`); |
||||
|
console.log(` - 发送方类型: ${serviceProcessed.senderType}`); |
||||
|
console.log(` - 内容: ${serviceProcessed.content}`); |
||||
|
|
||||
|
console.log(' 客户视角处理结果:'); |
||||
|
console.log(` - 是否来自自己: ${customerProcessed.isFromMe}`); |
||||
|
console.log(` - 发送方类型: ${customerProcessed.senderType}`); |
||||
|
console.log(` - 内容: ${customerProcessed.content}`); |
||||
|
|
||||
|
// 验证处理逻辑
|
||||
|
const isServiceLogicCorrect = !serviceProcessed.isFromMe && serviceProcessed.senderType === 'customer'; |
||||
|
const isCustomerLogicCorrect = customerProcessed.isFromMe && customerProcessed.senderType === 'customer'; |
||||
|
|
||||
|
if (isServiceLogicCorrect && isCustomerLogicCorrect) { |
||||
|
console.log(' ✓ 消息处理逻辑验证通过'); |
||||
|
} else { |
||||
|
console.log(' ✗ 消息处理逻辑验证失败'); |
||||
|
if (!isServiceLogicCorrect) console.log(' - 客服视角处理错误'); |
||||
|
if (!isCustomerLogicCorrect) console.log(' - 客户视角处理错误'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 测试双向通信模式
|
||||
|
function testBidirectionalCommunication() { |
||||
|
console.log('- 测试双向通信模式'); |
||||
|
|
||||
|
// 模拟对话流程
|
||||
|
const conversation = [ |
||||
|
{ |
||||
|
sender: 'customer', |
||||
|
content: '您好，我想咨询一下产品价格', |
||||
|
expectedDirection: 'customer_to_service' |
||||
|
}, |
||||
|
{ |
||||
|
sender: 'service', |
||||
|
content: '您好，请问您想了解哪种产品的价格呢？', |
||||
|
expectedDirection: 'service_to_customer' |
||||
|
}, |
||||
|
{ |
||||
|
sender: 'customer', |
||||
|
content: '就是你们的主打产品', |
||||
|
expectedDirection: 'customer_to_service' |
||||
|
}, |
||||
|
{ |
||||
|
sender: 'service', |
||||
|
content: '我们的主打产品价格是¥199，现在有优惠活动', |
||||
|
expectedDirection: 'service_to_customer' |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
let conversationLog = []; |
||||
|
|
||||
|
conversation.forEach((msg, index) => { |
||||
|
const isFromService = msg.sender === 'service'; |
||||
|
const senderId = isFromService ? mockUserInfo.serviceUser.id : mockUserInfo.customerUser.id; |
||||
|
const receiverId = isFromService ? mockUserInfo.customerUser.id : mockUserInfo.serviceUser.id; |
||||
|
const senderType = isFromService ? 'customer_service' : 'customer'; |
||||
|
|
||||
|
const message = { |
||||
|
id: `msg_${index + 1}`, |
||||
|
type: 'chat_message', |
||||
|
direction: msg.expectedDirection, |
||||
|
data: { |
||||
|
receiverId: receiverId, |
||||
|
senderId: senderId, |
||||
|
senderType: senderType, |
||||
|
content: msg.content, |
||||
|
contentType: 1, |
||||
|
timestamp: Date.now() + index |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
conversationLog.push({ |
||||
|
role: isFromService ? '客服' : '客户', |
||||
|
content: msg.content, |
||||
|
direction: msg.expectedDirection |
||||
|
}); |
||||
|
|
||||
|
// 验证消息方向
|
||||
|
if (message.direction !== msg.expectedDirection) { |
||||
|
console.log(` ✗ 消息${index + 1}方向错误: 期望${msg.expectedDirection}, 实际${message.direction}`); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 打印对话流程
|
||||
|
console.log(' 双向对话流程:'); |
||||
|
conversationLog.forEach((msg, index) => { |
||||
|
console.log(` ${index + 1}. [${msg.role}] ${msg.content} (${msg.direction})`); |
||||
|
}); |
||||
|
|
||||
|
console.log(' ✓ 双向通信模式验证完成'); |
||||
|
} |
||||
|
|
||||
|
// 导出测试结果
|
||||
|
module.exports = { |
||||
|
mockUserInfo, |
||||
|
testUserTypeDetection, |
||||
|
testWebSocketMessageFormat, |
||||
|
testMessageProcessing, |
||||
|
testBidirectionalCommunication |
||||
|
}; |
||||
@ -0,0 +1,96 @@ |
|||||
|
// 测试聊天功能连接的脚本
|
||||
|
const WebSocket = require('ws'); |
||||
|
|
||||
|
// 假设服务器WebSocket地址
|
||||
|
const SERVER_URL = 'ws://localhost:3000'; // 根据实际服务器地址调整
|
||||
|
|
||||
|
// 模拟用户和客服的连接
|
||||
|
function testUserToManagerCommunication() { |
||||
|
console.log('开始测试用户和客服之间的消息传递...'); |
||||
|
|
||||
|
// 模拟客服连接
|
||||
|
const managerSocket = new WebSocket(SERVER_URL); |
||||
|
|
||||
|
managerSocket.on('open', () => { |
||||
|
console.log('客服连接已建立'); |
||||
|
|
||||
|
// 客服认证
|
||||
|
managerSocket.send(JSON.stringify({ |
||||
|
type: 'auth', |
||||
|
data: { |
||||
|
userId: 'manager_1', |
||||
|
type: 'manager', |
||||
|
name: '测试客服' |
||||
|
} |
||||
|
})); |
||||
|
}); |
||||
|
|
||||
|
managerSocket.on('message', (data) => { |
||||
|
try { |
||||
|
const message = JSON.parse(data.toString()); |
||||
|
console.log('客服收到消息:', message); |
||||
|
} catch (e) { |
||||
|
console.error('客服解析消息失败:', e); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
managerSocket.on('error', (error) => { |
||||
|
console.error('客服连接错误:', error); |
||||
|
}); |
||||
|
|
||||
|
// 延迟2秒后创建用户连接
|
||||
|
setTimeout(() => { |
||||
|
const userSocket = new WebSocket(SERVER_URL); |
||||
|
|
||||
|
userSocket.on('open', () => { |
||||
|
console.log('用户连接已建立'); |
||||
|
|
||||
|
// 用户认证
|
||||
|
userSocket.send(JSON.stringify({ |
||||
|
type: 'auth', |
||||
|
data: { |
||||
|
userId: 'user_1', |
||||
|
type: 'user', |
||||
|
name: '测试用户' |
||||
|
} |
||||
|
})); |
||||
|
|
||||
|
// 再延迟1秒后发送消息
|
||||
|
setTimeout(() => { |
||||
|
console.log('用户发送测试消息...'); |
||||
|
userSocket.send(JSON.stringify({ |
||||
|
type: 'chat_message', |
||||
|
data: { |
||||
|
managerId: 'manager_1', |
||||
|
content: '这是一条测试消息', |
||||
|
contentType: 1, // 文本消息
|
||||
|
timestamp: Date.now() |
||||
|
} |
||||
|
})); |
||||
|
}, 1000); |
||||
|
}); |
||||
|
|
||||
|
userSocket.on('message', (data) => { |
||||
|
try { |
||||
|
const message = JSON.parse(data.toString()); |
||||
|
console.log('用户收到消息:', message); |
||||
|
} catch (e) { |
||||
|
console.error('用户解析消息失败:', e); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
userSocket.on('error', (error) => { |
||||
|
console.error('用户连接错误:', error); |
||||
|
}); |
||||
|
|
||||
|
// 清理连接
|
||||
|
setTimeout(() => { |
||||
|
console.log('测试完成，关闭连接'); |
||||
|
userSocket.close(); |
||||
|
managerSocket.close(); |
||||
|
}, 10000); |
||||
|
}, 2000); |
||||
|
} |
||||
|
|
||||
|
// 运行测试
|
||||
|
testUserToManagerCommunication(); |
||||
File diff suppressed because it is too large
@ -0,0 +1,75 @@ |
|||||
|
// 更新products表结构，添加联系人相关字段
|
||||
|
const mysql = require('mysql2/promise'); |
||||
|
|
||||
|
async function updateProductTable() { |
||||
|
let connection; |
||||
|
try { |
||||
|
// 连接数据库 - 使用正确的密码
|
||||
|
connection = await mysql.createConnection({ |
||||
|
host: '1.95.162.61', |
||||
|
port: 3306, |
||||
|
user: 'root', |
||||
|
password: 'schl@2025', // 从.env文件中获取的密码
|
||||
|
database: 'wechat_app' |
||||
|
}); |
||||
|
console.log('✅ 数据库连接成功'); |
||||
|
|
||||
|
// 检查product_contact字段是否存在
|
||||
|
const [rows] = await connection.query( |
||||
|
"SELECT column_name FROM information_schema.columns WHERE table_schema = 'wechat_app' AND table_name = 'products' AND column_name = 'product_contact'" |
||||
|
); |
||||
|
|
||||
|
if (rows.length === 0) { |
||||
|
// 添加product_contact字段
|
||||
|
await connection.query("ALTER TABLE products ADD COLUMN product_contact VARCHAR(100) DEFAULT ''"); |
||||
|
console.log('✅ 已添加product_contact字段'); |
||||
|
} else { |
||||
|
console.log('ℹ️ product_contact字段已存在'); |
||||
|
} |
||||
|
|
||||
|
// 检查contact_phone字段是否存在
|
||||
|
const [phoneRows] = await connection.query( |
||||
|
"SELECT column_name FROM information_schema.columns WHERE table_schema = 'wechat_app' AND table_name = 'products' AND column_name = 'contact_phone'" |
||||
|
); |
||||
|
|
||||
|
if (phoneRows.length === 0) { |
||||
|
// 添加contact_phone字段
|
||||
|
await connection.query("ALTER TABLE products ADD COLUMN contact_phone VARCHAR(20) DEFAULT ''"); |
||||
|
console.log('✅ 已添加contact_phone字段'); |
||||
|
} else { |
||||
|
console.log('ℹ️ contact_phone字段已存在'); |
||||
|
} |
||||
|
|
||||
|
// 查询所有已发布商品的数量
|
||||
|
const [productRows] = await connection.query( |
||||
|
"SELECT COUNT(*) as count FROM products WHERE status = 'published'" |
||||
|
); |
||||
|
console.log(`📊 已发布商品数量: ${productRows[0].count}`); |
||||
|
|
||||
|
// 查询需要更新联系人信息的商品数量
|
||||
|
const [pendingRows] = await connection.query( |
||||
|
"SELECT COUNT(*) as count FROM products WHERE status = 'published' AND (product_contact = '' OR product_contact IS NULL OR contact_phone = '' OR contact_phone IS NULL)" |
||||
|
); |
||||
|
console.log(`⚠️ 需要更新联系人信息的商品数量: ${pendingRows[0].count}`); |
||||
|
|
||||
|
// 显示一些商品数据作为示例
|
||||
|
const [sampleProducts] = await connection.query( |
||||
|
"SELECT productId, productName, product_contact, contact_phone FROM products WHERE status = 'published' LIMIT 5" |
||||
|
); |
||||
|
console.log('\n📋 示例商品数据:'); |
||||
|
sampleProducts.forEach(product => { |
||||
|
console.log(`- ${product.productName}: 联系人=${product.product_contact || '空'}, 电话=${product.contact_phone || '空'}`); |
||||
|
}); |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('❌ 操作失败:', error.message); |
||||
|
} finally { |
||||
|
if (connection) { |
||||
|
await connection.end(); |
||||
|
console.log('\n✅ 数据库连接已关闭'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 执行更新
|
||||
|
updateProductTable(); |
||||
@ -0,0 +1,492 @@ |
|||||
|
// utils/websocket.js
|
||||
|
// WebSocket连接管理器
|
||||
|
|
||||
|
class WebSocketManager { |
||||
|
constructor() { |
||||
|
this.socket = null; |
||||
|
this.url = ''; |
||||
|
this.isConnected = false; |
||||
|
this.isAuthenticated = false; // 新增：认证状态标记
|
||||
|
this.reconnectAttempts = 0; |
||||
|
this.maxReconnectAttempts = 5; |
||||
|
this.reconnectInterval = 3000; // 3秒后重连
|
||||
|
this.heartbeatInterval = null; |
||||
|
this.heartbeatTime = 30000; // 30秒心跳
|
||||
|
this.messageQueue = []; // 未发送的消息队列
|
||||
|
this.listeners = {}; // 事件监听器
|
||||
|
this.lastHeartbeatTime = 0; // 最后一次心跳响应时间
|
||||
|
this.isManualDisconnect = false; // 是否手动断开连接
|
||||
|
|
||||
|
// 清理可能导致端口错误的存储配置
|
||||
|
this._cleanupStorage(); |
||||
|
} |
||||
|
|
||||
|
// 清理可能导致端口错误的存储配置
|
||||
|
_cleanupStorage() { |
||||
|
try { |
||||
|
// 尝试在小程序环境中清理存储
|
||||
|
if (typeof wx !== 'undefined' && wx.removeStorageSync) { |
||||
|
wx.removeStorageSync('__TEST_MODE__'); |
||||
|
wx.removeStorageSync('__TEST_SERVER_IP__'); |
||||
|
wx.removeStorageSync('__DEVICE_TYPE__'); |
||||
|
console.log('WebSocket: 已清理可能导致端口错误的本地存储配置'); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.warn('WebSocket: 清理存储时出错:', e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 初始化WebSocket连接 |
||||
|
* @param {string} url - WebSocket服务器地址 |
||||
|
* @param {object} options - 配置选项 |
||||
|
*/ |
||||
|
connect(url, options = {}) { |
||||
|
if (this.socket && this.isConnected) { |
||||
|
console.log('WebSocket已经连接'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.url = url; |
||||
|
this.maxReconnectAttempts = options.maxReconnectAttempts || this.maxReconnectAttempts; |
||||
|
this.reconnectInterval = options.reconnectInterval || this.reconnectInterval; |
||||
|
this.heartbeatTime = options.heartbeatTime || this.heartbeatTime; |
||||
|
this.isManualDisconnect = false; // 重置手动断开标志
|
||||
|
|
||||
|
try { |
||||
|
console.log('尝试连接WebSocket:', url); |
||||
|
this._trigger('status', { type: 'connecting', message: '正在连接服务器...' }); |
||||
|
|
||||
|
this.socket = wx.connectSocket({ |
||||
|
url: url, |
||||
|
success: () => { |
||||
|
console.log('WebSocket连接请求已发送'); |
||||
|
}, |
||||
|
fail: (error) => { |
||||
|
console.error('WebSocket连接请求失败:', error); |
||||
|
this._trigger('error', error); |
||||
|
this._trigger('status', { type: 'error', message: '连接服务器失败' }); |
||||
|
this._reconnect(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this._setupEventHandlers(); |
||||
|
} catch (error) { |
||||
|
console.error('WebSocket初始化失败:', error); |
||||
|
this._trigger('error', error); |
||||
|
this._trigger('status', { type: 'error', message: '连接异常' }); |
||||
|
this._reconnect(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 设置WebSocket事件处理器 |
||||
|
*/ |
||||
|
_setupEventHandlers() { |
||||
|
if (!this.socket) return; |
||||
|
|
||||
|
// 连接成功
|
||||
|
this.socket.onOpen(() => { |
||||
|
console.log('WebSocket连接已打开'); |
||||
|
this.isConnected = true; |
||||
|
this.isAuthenticated = false; // 重置认证状态
|
||||
|
this.reconnectAttempts = 0; |
||||
|
this.lastHeartbeatTime = Date.now(); // 记录最后心跳时间
|
||||
|
this._trigger('open'); |
||||
|
this._trigger('status', { type: 'connected', message: '连接成功' }); |
||||
|
|
||||
|
// 连接成功后立即进行认证
|
||||
|
this.authenticate(); |
||||
|
|
||||
|
this._startHeartbeat(); |
||||
|
}); |
||||
|
|
||||
|
// 接收消息
|
||||
|
this.socket.onMessage((res) => { |
||||
|
try { |
||||
|
let data = JSON.parse(res.data); |
||||
|
// 处理心跳响应
|
||||
|
if (data.type === 'pong') { |
||||
|
this.lastHeartbeatTime = Date.now(); // 更新心跳时间
|
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 处理认证响应
|
||||
|
if (data.type === 'auth_response') { |
||||
|
if (data.success) { |
||||
|
console.log('WebSocket认证成功'); |
||||
|
this.isAuthenticated = true; |
||||
|
// 触发认证成功事件，并传递用户类型信息
|
||||
|
this._trigger('authenticated', { userType: data.userType || 'customer' }); |
||||
|
// 认证成功后发送队列中的消息
|
||||
|
this._flushMessageQueue(); |
||||
|
} else { |
||||
|
console.error('WebSocket认证失败:', data.message); |
||||
|
this.isAuthenticated = false; |
||||
|
this._trigger('authFailed', { message: data.message, userType: data.userType || 'unknown' }); |
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 处理客服状态更新消息
|
||||
|
if (data.type === 'customerServiceStatusUpdate') { |
||||
|
console.log('处理客服状态更新:', data); |
||||
|
this._trigger('customerServiceStatusUpdate', data); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
console.log('接收到消息:', data); |
||||
|
this._trigger('message', data); |
||||
|
} catch (error) { |
||||
|
console.error('消息解析失败:', error); |
||||
|
this._trigger('error', error); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 连接关闭
|
||||
|
this.socket.onClose((res) => { |
||||
|
console.log('WebSocket连接已关闭:', res); |
||||
|
this.isConnected = false; |
||||
|
this._stopHeartbeat(); |
||||
|
this._trigger('close', res); |
||||
|
this._trigger('status', { type: 'disconnected', message: '连接已关闭' }); |
||||
|
// 尝试重连
|
||||
|
if (res.code !== 1000 && !this.isManualDisconnect) { // 非正常关闭且不是手动断开
|
||||
|
this._reconnect(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 连接错误
|
||||
|
this.socket.onError((error) => { |
||||
|
console.error('WebSocket错误:', error); |
||||
|
this._trigger('error', error); |
||||
|
this._trigger('status', { type: 'error', message: '连接发生错误' }); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 发送认证消息 |
||||
|
* @param {string} userType - 用户类型，如'user'或'customerService' |
||||
|
* @param {string} userId - 用户ID |
||||
|
*/ |
||||
|
authenticate(userType = null, userId = null) { |
||||
|
try { |
||||
|
// 获取登录用户信息或token
|
||||
|
const app = getApp(); |
||||
|
const globalUserInfo = app.globalData.userInfo || {}; |
||||
|
|
||||
|
// 如果传入了参数，优先使用传入的参数
|
||||
|
const finalUserType = userType || globalUserInfo.userType || globalUserInfo.type || 'customer'; |
||||
|
const finalUserId = userId || globalUserInfo.userId || wx.getStorageSync('userId') || `temp_${Date.now()}`; |
||||
|
|
||||
|
console.log('发送WebSocket认证消息:', { userId: finalUserId, userType: finalUserType }); |
||||
|
|
||||
|
// 构建认证消息
|
||||
|
const authMessage = { |
||||
|
type: 'auth', |
||||
|
timestamp: Date.now(), |
||||
|
data: { |
||||
|
userId: finalUserId, |
||||
|
userType: finalUserType, |
||||
|
// 可以根据实际需求添加更多认证信息
|
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 直接发送认证消息，不经过常规消息队列
|
||||
|
if (this.isConnected && this.socket) { |
||||
|
this.socket.send({ |
||||
|
data: JSON.stringify(authMessage), |
||||
|
success: () => { |
||||
|
console.log('认证消息发送成功'); |
||||
|
}, |
||||
|
fail: (error) => { |
||||
|
console.error('认证消息发送失败:', error); |
||||
|
// 认证失败后尝试重新认证
|
||||
|
setTimeout(() => { |
||||
|
this.authenticate(userType, userId); |
||||
|
}, 2000); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('发送认证消息异常:', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 发送消息 |
||||
|
* @param {object} data - 要发送的数据 |
||||
|
* @returns {boolean} 消息是否已成功放入发送队列（不保证实际发送成功） |
||||
|
*/ |
||||
|
send(data) { |
||||
|
// 验证消息格式
|
||||
|
if (!data || typeof data !== 'object') { |
||||
|
console.error('WebSocket发送消息失败: 消息格式不正确'); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// 为消息添加时间戳
|
||||
|
if (!data.timestamp) { |
||||
|
data.timestamp = Date.now(); |
||||
|
} |
||||
|
|
||||
|
// 如果是认证消息或连接未建立，直接处理
|
||||
|
if (data.type === 'auth' || data.type === 'ping') { |
||||
|
// 认证消息和心跳消息不需要等待认证
|
||||
|
if (this.isConnected && this.socket) { |
||||
|
try { |
||||
|
this.socket.send({ |
||||
|
data: JSON.stringify(data), |
||||
|
success: () => { |
||||
|
console.log('特殊消息发送成功:', data); |
||||
|
this._trigger('sendSuccess', data); |
||||
|
}, |
||||
|
fail: (error) => { |
||||
|
console.error('特殊消息发送失败:', error); |
||||
|
this._trigger('sendError', error); |
||||
|
} |
||||
|
}); |
||||
|
return true; |
||||
|
} catch (error) { |
||||
|
console.error('发送特殊消息异常:', error); |
||||
|
this._trigger('error', error); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
} else if (this.isConnected && this.socket) { |
||||
|
// 非特殊消息需要检查认证状态
|
||||
|
if (!this.isAuthenticated) { |
||||
|
console.log('WebSocket未认证，消息已加入队列等待认证'); |
||||
|
this.messageQueue.push(data); |
||||
|
// 如果未认证，尝试重新认证
|
||||
|
if (!this.isAuthenticated) { |
||||
|
this.authenticate(); |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
this.socket.send({ |
||||
|
data: JSON.stringify(data), |
||||
|
success: () => { |
||||
|
console.log('消息发送成功:', data); |
||||
|
this._trigger('sendSuccess', data); |
||||
|
}, |
||||
|
fail: (error) => { |
||||
|
console.error('消息发送失败:', error); |
||||
|
// 将失败的消息加入队列
|
||||
|
this.messageQueue.push(data); |
||||
|
this._trigger('sendError', error); |
||||
|
} |
||||
|
}); |
||||
|
return true; |
||||
|
} catch (error) { |
||||
|
console.error('发送消息异常:', error); |
||||
|
this.messageQueue.push(data); |
||||
|
this._trigger('error', error); |
||||
|
return false; |
||||
|
} |
||||
|
} else { |
||||
|
// 连接未建立，加入消息队列
|
||||
|
console.log('WebSocket未连接，消息已加入队列'); |
||||
|
this.messageQueue.push(data); |
||||
|
// 尝试重连
|
||||
|
if (!this.isConnected) { |
||||
|
this._reconnect(); |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 关闭WebSocket连接 |
||||
|
*/ |
||||
|
close() { |
||||
|
if (this.socket) { |
||||
|
this._stopHeartbeat(); |
||||
|
this.isManualDisconnect = true; // 标记为手动断开
|
||||
|
this.socket.close(); |
||||
|
this.socket = null; |
||||
|
this.isConnected = false; |
||||
|
this.isAuthenticated = false; // 重置认证状态
|
||||
|
console.log('WebSocket已主动关闭'); |
||||
|
this._trigger('status', { type: 'disconnected', message: '连接已断开' }); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 开始心跳检测 |
||||
|
*/ |
||||
|
_startHeartbeat() { |
||||
|
this._stopHeartbeat(); |
||||
|
this.heartbeatInterval = setInterval(() => { |
||||
|
// 检查是否超过3倍心跳间隔未收到心跳响应
|
||||
|
if (Date.now() - this.lastHeartbeatTime > this.heartbeatTime * 3) { |
||||
|
console.warn('WebSocket心跳超时，可能已断开连接'); |
||||
|
this._stopHeartbeat(); |
||||
|
this._reconnect(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (this.isConnected) { |
||||
|
this.send({ type: 'ping', timestamp: Date.now() }); |
||||
|
console.log('发送心跳包'); |
||||
|
} |
||||
|
}, this.heartbeatTime); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 停止心跳检测 |
||||
|
*/ |
||||
|
_stopHeartbeat() { |
||||
|
if (this.heartbeatInterval) { |
||||
|
clearInterval(this.heartbeatInterval); |
||||
|
this.heartbeatInterval = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 尝试重新连接 |
||||
|
*/ |
||||
|
_reconnect() { |
||||
|
if (this.reconnectAttempts >= this.maxReconnectAttempts) { |
||||
|
console.error('WebSocket重连次数已达上限，停止重连'); |
||||
|
this._trigger('reconnectFailed'); |
||||
|
this._trigger('status', { |
||||
|
type: 'error', |
||||
|
isWarning: true, |
||||
|
message: `已达到最大重连次数(${this.maxReconnectAttempts}次)` |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.reconnectAttempts++; |
||||
|
// 增加重连时间间隔（指数退避）
|
||||
|
const currentInterval = this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts - 1); |
||||
|
|
||||
|
console.log(`WebSocket第${this.reconnectAttempts}次重连... 间隔: ${currentInterval}ms`); |
||||
|
this._trigger('reconnecting', this.reconnectAttempts); |
||||
|
this._trigger('status', { |
||||
|
type: 'reconnecting', |
||||
|
message: `正在重连(${this.reconnectAttempts}/${this.maxReconnectAttempts})` |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.connect(this.url); |
||||
|
}, currentInterval); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 发送队列中的消息 |
||||
|
*/ |
||||
|
_flushMessageQueue() { |
||||
|
if (this.messageQueue.length > 0) { |
||||
|
console.log('发送队列中的消息，队列长度:', this.messageQueue.length); |
||||
|
|
||||
|
// 循环发送队列中的消息，使用小延迟避免消息发送过快
|
||||
|
const sendMessage = () => { |
||||
|
if (this.messageQueue.length === 0 || !this.isConnected) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const messageData = this.messageQueue.shift(); |
||||
|
const message = JSON.stringify(messageData); |
||||
|
|
||||
|
this.socket.send({ |
||||
|
data: message, |
||||
|
success: () => { |
||||
|
console.log('队列消息发送成功:', messageData); |
||||
|
// 继续发送下一条消息，添加小延迟
|
||||
|
setTimeout(sendMessage, 50); |
||||
|
}, |
||||
|
fail: (error) => { |
||||
|
console.error('队列消息发送失败:', error); |
||||
|
// 发送失败，重新加入队列
|
||||
|
this.messageQueue.unshift(messageData); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 开始发送队列中的第一条消息
|
||||
|
sendMessage(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 触发事件 |
||||
|
* @param {string} event - 事件名称 |
||||
|
* @param {*} data - 事件数据 |
||||
|
*/ |
||||
|
_trigger(event, data = null) { |
||||
|
if (this.listeners[event]) { |
||||
|
this.listeners[event].forEach(callback => { |
||||
|
try { |
||||
|
callback(data); |
||||
|
} catch (error) { |
||||
|
console.error(`事件处理错误 [${event}]:`, error); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 监听事件 |
||||
|
* @param {string} event - 事件名称 |
||||
|
* @param {Function} callback - 回调函数 |
||||
|
*/ |
||||
|
on(event, callback) { |
||||
|
if (!this.listeners[event]) { |
||||
|
this.listeners[event] = []; |
||||
|
} |
||||
|
this.listeners[event].push(callback); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 移除事件监听 |
||||
|
* @param {string} event - 事件名称 |
||||
|
* @param {Function} callback - 回调函数，不传则移除所有该事件的监听器 |
||||
|
*/ |
||||
|
off(event, callback) { |
||||
|
if (!this.listeners[event]) return; |
||||
|
|
||||
|
if (callback) { |
||||
|
this.listeners[event] = this.listeners[event].filter(cb => cb !== callback); |
||||
|
} else { |
||||
|
this.listeners[event] = []; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取连接状态 |
||||
|
* @returns {boolean} 是否连接 |
||||
|
*/ |
||||
|
getConnectionStatus() { |
||||
|
return this.isConnected; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取认证状态 |
||||
|
* @returns {boolean} 是否已认证 |
||||
|
*/ |
||||
|
getAuthStatus() { |
||||
|
return this.isAuthenticated; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取重连次数 |
||||
|
* @returns {number} 重连次数 |
||||
|
*/ |
||||
|
getReconnectAttempts() { |
||||
|
return this.reconnectAttempts; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 清空消息队列 |
||||
|
*/ |
||||
|
clearMessageQueue() { |
||||
|
this.messageQueue = []; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 导出单例
|
||||
|
export default new WebSocketManager(); |
||||
Loading…
Reference in new issue