ZhaoYang
1 month ago
22 changed files with 1871 additions and 46 deletions
-
4app.json
-
BINpages/images/kzt.png
-
16pages/personal/personal.js
-
BINpagesA/images/add.png
-
BINpagesA/images/cuo.png
-
BINpagesA/images/duig.png
-
BINpagesA/images/ps.png
-
BINpagesA/images/zp.png
-
27pagesA/pages/advisory/advisory.js
-
1pagesA/pages/askingSyDetails/askingSyDetails.js
-
534pagesA/pages/expertChat/expertChat.js
-
4pagesA/pages/expertChat/expertChat.json
-
280pagesA/pages/expertChat/expertChat.wxml
-
685pagesA/pages/expertChat/expertChat.wxss
-
127pagesA/pages/serviceEvaluation/serviceEvaluation.js
-
4pagesA/pages/serviceEvaluation/serviceEvaluation.json
-
53pagesA/pages/serviceEvaluation/serviceEvaluation.wxml
-
146pagesA/pages/serviceEvaluation/serviceEvaluation.wxss
-
20pagesB/pages/publishAdd/publishAdd.js
-
2project.private.config.json
-
12utils/api.js
|
After Width: 320 | Height: 320 | Size: 8.5 KiB |
|
After Width: 200 | Height: 200 | Size: 4.4 KiB |
|
After Width: 200 | Height: 200 | Size: 4.6 KiB |
|
After Width: 200 | Height: 200 | Size: 2.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.3 KiB |
|
After Width: 200 | Height: 200 | Size: 2.7 KiB |
@ -0,0 +1,534 @@ |
|||||
|
// 专家端聊天页面 - 纯模拟数据，无真实接口
|
||||
|
Page({ |
||||
|
data: { |
||||
|
// 专家信息
|
||||
|
expertInfo: { |
||||
|
id: 'expert_001', |
||||
|
name: '张医生', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
expertAvatar: '/pages/images/tx.png', |
||||
|
|
||||
|
// 对话信息
|
||||
|
conversation: { |
||||
|
userId: 'user_001', |
||||
|
userName: '李华', |
||||
|
userAvatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
|
||||
|
// 在线状态
|
||||
|
onlineStatus: true, |
||||
|
|
||||
|
// 消息列表
|
||||
|
messageList: [], |
||||
|
scrollTop: 0, |
||||
|
scrollAnimate: true, |
||||
|
|
||||
|
// 输入相关
|
||||
|
inputValue: '', |
||||
|
inputFocus: false, |
||||
|
|
||||
|
// 多媒体面板
|
||||
|
showMediaSheet: false, |
||||
|
|
||||
|
|
||||
|
// 页面状态
|
||||
|
loadingMore: false, |
||||
|
hasMore: true, |
||||
|
page: 1, |
||||
|
|
||||
|
// 模拟数据
|
||||
|
mockMessages: [ |
||||
|
{ |
||||
|
id: 'msg_1', |
||||
|
isMe: false, |
||||
|
type: 'text', |
||||
|
content: '医生您好，我想咨询一下皮肤问题', |
||||
|
timestamp: Date.now() - 3600000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'msg_2', |
||||
|
isMe: true, |
||||
|
type: 'text', |
||||
|
content: '您好，请描述一下您的具体症状', |
||||
|
timestamp: Date.now() - 3500000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'msg_3', |
||||
|
isMe: false, |
||||
|
type: 'text', |
||||
|
content: '脸上起了很多小红点，有点痒', |
||||
|
timestamp: Date.now() - 3400000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'msg_4', |
||||
|
isMe: false, |
||||
|
type: 'image', |
||||
|
content: 'https://picsum.photos/200/200?random=1', |
||||
|
timestamp: Date.now() - 3300000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'msg_5', |
||||
|
isMe: true, |
||||
|
type: 'text', |
||||
|
content: '看起来像是过敏反应，最近有接触什么新的东西吗？', |
||||
|
timestamp: Date.now() - 3200000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
// 定时器
|
||||
|
typingTimer: null, |
||||
|
mockUserTimer: null |
||||
|
}, |
||||
|
|
||||
|
onLoad: function(options) { |
||||
|
console.log('专家端聊天页面加载', options); |
||||
|
|
||||
|
// 获取传递的参数
|
||||
|
if (options.userId) { |
||||
|
this.setData({ |
||||
|
'conversation.userId': options.userId, |
||||
|
'conversation.userName': options.userName || '用户' |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 加载模拟消息
|
||||
|
this.loadMockMessages(); |
||||
|
|
||||
|
// 模拟用户在线状态变化
|
||||
|
this.simulateOnlineStatus(); |
||||
|
|
||||
|
// 模拟用户发送消息
|
||||
|
this.startMockUserTyping(); |
||||
|
}, |
||||
|
|
||||
|
onShow: function() { |
||||
|
// 滚动到底部
|
||||
|
setTimeout(() => { |
||||
|
this.scrollToBottom(false); |
||||
|
}, 200); |
||||
|
}, |
||||
|
|
||||
|
onUnload: function() { |
||||
|
// 清理定时器
|
||||
|
if (this.data.mockUserTimer) { |
||||
|
clearInterval(this.data.mockUserTimer); |
||||
|
} |
||||
|
if (this.data.typingTimer) { |
||||
|
clearTimeout(this.data.typingTimer); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
goBack: function() { |
||||
|
wx.navigateBack({ |
||||
|
delta: 1 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 加载模拟消息
|
||||
|
loadMockMessages: function() { |
||||
|
// 处理消息时间显示
|
||||
|
const messages = this.processMessageTimes(this.data.mockMessages); |
||||
|
|
||||
|
this.setData({ |
||||
|
messageList: messages, |
||||
|
hasMore: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 加载更多消息（模拟）
|
||||
|
loadMoreMessages: function() { |
||||
|
if (this.data.loadingMore || !this.data.hasMore) return; |
||||
|
|
||||
|
this.setData({ loadingMore: true }); |
||||
|
|
||||
|
// 模拟网络延迟
|
||||
|
setTimeout(() => { |
||||
|
// 模拟更早的消息
|
||||
|
const olderMessages = [ |
||||
|
{ |
||||
|
id: 'old_' + Date.now(), |
||||
|
isMe: false, |
||||
|
type: 'text', |
||||
|
content: '之前也出现过类似情况', |
||||
|
timestamp: Date.now() - 86400000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'old_' + (Date.now() + 1), |
||||
|
isMe: true, |
||||
|
type: 'text', |
||||
|
content: '那当时是怎么处理的呢？', |
||||
|
timestamp: Date.now() - 86000000, |
||||
|
status: 'success', |
||||
|
avatar: '/pages/images/tx.png' |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const processedOld = this.processMessageTimes(olderMessages); |
||||
|
const newList = [...processedOld, ...this.data.messageList]; |
||||
|
|
||||
|
this.setData({ |
||||
|
messageList: newList, |
||||
|
loadingMore: false, |
||||
|
hasMore: false // 模拟没有更多了
|
||||
|
}); |
||||
|
|
||||
|
// 调整滚动位置
|
||||
|
setTimeout(() => { |
||||
|
this.setData({ |
||||
|
scrollAnimate: false, |
||||
|
scrollTop: 300 |
||||
|
}, () => { |
||||
|
setTimeout(() => { |
||||
|
this.setData({ scrollAnimate: true }); |
||||
|
}, 100); |
||||
|
}); |
||||
|
}, 50); |
||||
|
}, 800); |
||||
|
}, |
||||
|
|
||||
|
// 模拟用户在线状态变化
|
||||
|
simulateOnlineStatus: function() { |
||||
|
setInterval(() => { |
||||
|
// 随机改变在线状态（模拟）
|
||||
|
const random = Math.random(); |
||||
|
this.setData({ |
||||
|
onlineStatus: random > 0.3 // 70%时间在线
|
||||
|
}); |
||||
|
}, 30000); |
||||
|
}, |
||||
|
|
||||
|
// 模拟用户正在输入并发送消息
|
||||
|
startMockUserTyping: function() { |
||||
|
// 每45-90秒模拟用户发送一条消息
|
||||
|
const timer = setInterval(() => { |
||||
|
// 只有在线时才发送
|
||||
|
if (this.data.onlineStatus) { |
||||
|
this.simulateUserMessage(); |
||||
|
} |
||||
|
}, Math.random() * 45000 + 45000); // 45-90秒
|
||||
|
|
||||
|
this.setData({ mockUserTimer: timer }); |
||||
|
}, |
||||
|
|
||||
|
// 模拟用户发送消息
|
||||
|
simulateUserMessage: function() { |
||||
|
const messages = [ |
||||
|
'好的，我明白了', |
||||
|
'谢谢医生！', |
||||
|
'需要用什么药吗？', |
||||
|
'大概多久能好？', |
||||
|
'有没有什么需要注意的？', |
||||
|
'好的，我试试看', |
||||
|
'明白了，非常感谢！' |
||||
|
]; |
||||
|
|
||||
|
const randomMsg = messages[Math.floor(Math.random() * messages.length)]; |
||||
|
|
||||
|
const newMsg = { |
||||
|
id: 'user_' + Date.now() + Math.random(), |
||||
|
isMe: false, |
||||
|
type: 'text', |
||||
|
content: randomMsg, |
||||
|
timestamp: Date.now(), |
||||
|
status: 'success', |
||||
|
avatar: this.data.conversation.userAvatar || '/pages/images/tx.png' |
||||
|
}; |
||||
|
|
||||
|
this.addMessageToList(newMsg); |
||||
|
|
||||
|
// 震动提示（可选）
|
||||
|
wx.vibrateShort({ type: 'light' }); |
||||
|
}, |
||||
|
|
||||
|
// 发送文本消息
|
||||
|
sendTextMessage: function() { |
||||
|
const content = this.data.inputValue.trim(); |
||||
|
if (!content) return; |
||||
|
|
||||
|
const messageId = 'msg_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9); |
||||
|
|
||||
|
// 创建本地消息
|
||||
|
const newMessage = { |
||||
|
id: messageId, |
||||
|
isMe: true, |
||||
|
type: 'text', |
||||
|
content: content, |
||||
|
timestamp: Date.now(), |
||||
|
status: 'sending', |
||||
|
avatar: this.data.expertAvatar |
||||
|
}; |
||||
|
|
||||
|
// 添加到列表
|
||||
|
this.addMessageToList(newMessage); |
||||
|
|
||||
|
// 清空输入框
|
||||
|
this.setData({ inputValue: '' }); |
||||
|
|
||||
|
// 模拟发送延迟
|
||||
|
setTimeout(() => { |
||||
|
this.updateMessageStatus(messageId, 'success'); |
||||
|
}, 500); |
||||
|
}, |
||||
|
|
||||
|
// 添加消息到列表
|
||||
|
addMessageToList: function(message) { |
||||
|
const { messageList } = this.data; |
||||
|
|
||||
|
// 新消息添加到末尾
|
||||
|
messageList.push(message); |
||||
|
|
||||
|
// 重新处理时间显示
|
||||
|
const processedMessages = this.processMessageTimes(messageList); |
||||
|
|
||||
|
this.setData({ |
||||
|
messageList: processedMessages |
||||
|
}, () => { |
||||
|
this.scrollToBottom(true); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 更新消息状态
|
||||
|
updateMessageStatus: function(messageId, status) { |
||||
|
const { messageList } = this.data; |
||||
|
const index = messageList.findIndex(msg => msg.id === messageId); |
||||
|
|
||||
|
if (index !== -1) { |
||||
|
messageList[index].status = status; |
||||
|
this.setData({ messageList }); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 重试发送
|
||||
|
retrySend: function(e) { |
||||
|
const messageId = e.currentTarget.dataset.id; |
||||
|
const { messageList } = this.data; |
||||
|
const msg = messageList.find(m => m.id === messageId); |
||||
|
|
||||
|
if (msg) { |
||||
|
msg.status = 'sending'; |
||||
|
this.setData({ messageList }); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
msg.status = 'success'; |
||||
|
this.setData({ messageList }); |
||||
|
}, 500); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 处理消息时间显示
|
||||
|
processMessageTimes: function(messages) { |
||||
|
if (!messages || messages.length === 0) return []; |
||||
|
|
||||
|
const timeInterval = 5; // 5分钟间隔显示时间
|
||||
|
|
||||
|
return messages.map((msg, index) => { |
||||
|
const showTime = index === 0 || |
||||
|
(msg.timestamp - messages[index - 1].timestamp) > timeInterval * 60 * 1000; |
||||
|
|
||||
|
return { |
||||
|
...msg, |
||||
|
showTime |
||||
|
}; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 格式化时间
|
||||
|
formatTime: function(timestamp) { |
||||
|
if (!timestamp) return ''; |
||||
|
|
||||
|
const date = new Date(Number(timestamp)); |
||||
|
const hours = date.getHours().toString().padStart(2, '0'); |
||||
|
const minutes = date.getMinutes().toString().padStart(2, '0'); |
||||
|
return `${hours}:${minutes}`; |
||||
|
}, |
||||
|
|
||||
|
// 格式化文件大小
|
||||
|
formatFileSize: function(bytes) { |
||||
|
if (!bytes || bytes === 0) return '0B'; |
||||
|
|
||||
|
const units = ['B', 'KB', 'MB', 'GB']; |
||||
|
let size = bytes; |
||||
|
let unitIndex = 0; |
||||
|
|
||||
|
while (size >= 1024 && unitIndex < units.length - 1) { |
||||
|
size /= 1024; |
||||
|
unitIndex++; |
||||
|
} |
||||
|
|
||||
|
return size.toFixed(1) + units[unitIndex]; |
||||
|
}, |
||||
|
|
||||
|
// 输入处理
|
||||
|
onInput: function(e) { |
||||
|
this.setData({ inputValue: e.detail.value }); |
||||
|
}, |
||||
|
|
||||
|
// 输入框获得焦点
|
||||
|
onInputFocus: function() { |
||||
|
this.setData({ inputFocus: true }, () => { |
||||
|
setTimeout(() => { |
||||
|
this.scrollToBottom(true); |
||||
|
}, 200); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 输入框失去焦点
|
||||
|
onInputBlur: function() { |
||||
|
this.setData({ inputFocus: false }); |
||||
|
}, |
||||
|
|
||||
|
// 清除输入
|
||||
|
clearInput: function() { |
||||
|
this.setData({ |
||||
|
inputValue: '', |
||||
|
inputFocus: true |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 滚动事件
|
||||
|
onScroll: function(e) { |
||||
|
const scrollTop = e.detail.scrollTop; |
||||
|
this.setData({ lastScrollTop: scrollTop }); |
||||
|
|
||||
|
// 滚动到顶部加载更多
|
||||
|
if (scrollTop <= 30 && !this.data.loadingMore && this.data.hasMore) { |
||||
|
this.loadMoreMessages(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 滚动到底部
|
||||
|
scrollToBottom: function(animate = true) { |
||||
|
this.setData({ |
||||
|
scrollAnimate: animate |
||||
|
}, () => { |
||||
|
setTimeout(() => { |
||||
|
this.setData({ scrollTop: 999999 }); |
||||
|
}, 50); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 显示多媒体选择面板
|
||||
|
showMediaActionSheet: function() { |
||||
|
this.setData({ |
||||
|
showMediaSheet: true, |
||||
|
inputFocus: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 隐藏多媒体选择面板
|
||||
|
hideMediaActionSheet: function() { |
||||
|
this.setData({ showMediaSheet: false }); |
||||
|
}, |
||||
|
|
||||
|
// 选择图片（模拟）
|
||||
|
chooseImage: function() { |
||||
|
this.hideMediaActionSheet(); |
||||
|
|
||||
|
// 模拟选择图片
|
||||
|
const mockImages = [ |
||||
|
'https://picsum.photos/200/200?random=2', |
||||
|
'https://picsum.photos/200/200?random=3', |
||||
|
'https://picsum.photos/200/200?random=4' |
||||
|
]; |
||||
|
|
||||
|
const randomImage = mockImages[Math.floor(Math.random() * mockImages.length)]; |
||||
|
|
||||
|
const messageId = 'img_' + Date.now(); |
||||
|
|
||||
|
const newMessage = { |
||||
|
id: messageId, |
||||
|
isMe: true, |
||||
|
type: 'image', |
||||
|
content: randomImage, |
||||
|
timestamp: Date.now(), |
||||
|
status: 'uploading', |
||||
|
progress: 0, |
||||
|
avatar: this.data.expertAvatar |
||||
|
}; |
||||
|
|
||||
|
this.addMessageToList(newMessage); |
||||
|
|
||||
|
// 模拟上传进度
|
||||
|
let progress = 0; |
||||
|
const interval = setInterval(() => { |
||||
|
progress += 20; |
||||
|
|
||||
|
if (progress >= 100) { |
||||
|
clearInterval(interval); |
||||
|
this.updateMessageStatus(messageId, 'success'); |
||||
|
} else { |
||||
|
const msgIndex = this.data.messageList.findIndex(m => m.id === messageId); |
||||
|
if (msgIndex !== -1) { |
||||
|
this.data.messageList[msgIndex].progress = progress; |
||||
|
this.setData({ messageList: this.data.messageList }); |
||||
|
} |
||||
|
} |
||||
|
}, 200); |
||||
|
}, |
||||
|
|
||||
|
// 选择视频（模拟）
|
||||
|
chooseVideo: function() { |
||||
|
this.hideMediaActionSheet(); |
||||
|
|
||||
|
const messageId = 'video_' + Date.now(); |
||||
|
|
||||
|
const newMessage = { |
||||
|
id: messageId, |
||||
|
isMe: true, |
||||
|
type: 'video', |
||||
|
content: 'https://example.com/video.mp4', |
||||
|
thumb: 'https://picsum.photos/200/200?random=5', |
||||
|
timestamp: Date.now(), |
||||
|
status: 'uploading', |
||||
|
progress: 0, |
||||
|
avatar: this.data.expertAvatar |
||||
|
}; |
||||
|
|
||||
|
this.addMessageToList(newMessage); |
||||
|
|
||||
|
// 模拟上传进度
|
||||
|
let progress = 0; |
||||
|
const interval = setInterval(() => { |
||||
|
progress += 25; |
||||
|
|
||||
|
if (progress >= 100) { |
||||
|
clearInterval(interval); |
||||
|
this.updateMessageStatus(messageId, 'success'); |
||||
|
} else { |
||||
|
const msgIndex = this.data.messageList.findIndex(m => m.id === messageId); |
||||
|
if (msgIndex !== -1) { |
||||
|
this.data.messageList[msgIndex].progress = progress; |
||||
|
this.setData({ messageList: this.data.messageList }); |
||||
|
} |
||||
|
} |
||||
|
}, 300); |
||||
|
}, |
||||
|
|
||||
|
// 预览图片
|
||||
|
previewImage: function(e) { |
||||
|
const url = e.currentTarget.dataset.url; |
||||
|
wx.previewImage({ |
||||
|
current: url, |
||||
|
urls: [url] |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 阻止事件冒泡
|
||||
|
stopPropagation: function() {} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"咨询", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,280 @@ |
|||||
|
<!-- 专家端聊天页面 --> |
||||
|
<view class="consult-page"> |
||||
|
<!-- 头部专家信息 --> |
||||
|
<view class="consult-header"> |
||||
|
<view class="header-content"> |
||||
|
<view class="back-btn" bindtap="goBack"> |
||||
|
<image src="/pagesA/images/back.png" class="back-icon"></image> |
||||
|
</view> |
||||
|
<view class="header-center"> |
||||
|
<view class="expert-info"> |
||||
|
<text class="expert-name">{{conversation.userName || '用户'}}</text> |
||||
|
<view class="expert-status"> |
||||
|
<view class="status-dot {{onlineStatus ? 'online' : 'offline'}}"></view> |
||||
|
<text class="status-text">{{onlineStatus ? '在线' : '离线'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 聊天内容区域 --> |
||||
|
<scroll-view |
||||
|
id="chatScroll" |
||||
|
class="chat-container" |
||||
|
scroll-y |
||||
|
scroll-top="{{scrollTop}}" |
||||
|
scroll-with-animation="{{scrollAnimate}}" |
||||
|
enable-back-to-top="true" |
||||
|
show-scrollbar="{{false}}" |
||||
|
bindscroll="onScroll" |
||||
|
> |
||||
|
<!-- 加载更多提示 --> |
||||
|
<view class="load-more-tip" wx:if="{{loadingMore}}"> |
||||
|
<text>加载中...</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 消息列表 --> |
||||
|
<block wx:for="{{messageList}}" wx:key="id"> |
||||
|
<!-- 对方消息（用户） --> |
||||
|
<view class="message-item message-left" wx:if="{{!item.isMe}}"> |
||||
|
<view class="message-avatar"> |
||||
|
<image src="{{item.avatar || '/pages/images/tx.png'}}" class="avatar-img"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="messages-content-wrapper"> |
||||
|
<view class="message-arrow arrow-left"></view> |
||||
|
|
||||
|
<!-- 文本消息 --> |
||||
|
<view class="message-bubble bubble-left" wx:if="{{item.type === 'text'}}"> |
||||
|
<text class="message-text">{{item.content}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 图片消息 --> |
||||
|
<view class="media-bubble" wx:elif="{{item.type === 'image'}}"> |
||||
|
<image |
||||
|
src="{{item.content}}" |
||||
|
class="message-image" |
||||
|
mode="aspectFill" |
||||
|
bindtap="previewImage" |
||||
|
data-url="{{item.content}}" |
||||
|
></image> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 视频消息 --> |
||||
|
<view class="media-bubble" wx:elif="{{item.type === 'video'}}"> |
||||
|
<video |
||||
|
src="{{item.content}}" |
||||
|
class="message-video" |
||||
|
controls |
||||
|
show-center-play-btn |
||||
|
poster="{{item.thumb}}" |
||||
|
></video> |
||||
|
<view class="video-play-overlay"> |
||||
|
<image src="/images/icons/play.png" class="play-icon"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 文件消息 --> |
||||
|
<view class="message-bubble bubble-left message-file" wx:elif="{{item.type === 'file'}}"> |
||||
|
<view class="file-icon-box"> |
||||
|
<image src="/images/icons/file_icon.png" class="file-icon"></image> |
||||
|
</view> |
||||
|
<view class="file-info"> |
||||
|
<text class="file-name">{{item.fileName}}</text> |
||||
|
<text class="file-size">{{formatFileSize(item.fileSize)}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 消息时间（如果显示） --> |
||||
|
<text class="message-time" wx:if="{{item.showTime}}">{{formatTime(item.timestamp)}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 我的消息（专家） --> |
||||
|
<view class="message-item message-right" wx:else> |
||||
|
<view class="message-content-wrapper"> |
||||
|
<view class="message-arrow arrow-right"></view> |
||||
|
|
||||
|
<!-- 文本消息 --> |
||||
|
<view class="message-bubble bubble-right" wx:if="{{item.type === 'text'}}"> |
||||
|
<text class="message-text">{{item.content}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 图片消息 --> |
||||
|
<view class="media-bubble" wx:elif="{{item.type === 'image'}}"> |
||||
|
<image |
||||
|
src="{{item.content}}" |
||||
|
class="message-image" |
||||
|
mode="aspectFill" |
||||
|
bindtap="previewImage" |
||||
|
data-url="{{item.content}}" |
||||
|
></image> |
||||
|
<!-- 上传进度 --> |
||||
|
<view class="upload-progress" wx:if="{{item.status === 'uploading'}}"> |
||||
|
<view class="progress-circle"> |
||||
|
<text class="progress-text">{{item.progress}}%</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 视频消息 --> |
||||
|
<view class="media-bubble" wx:elif="{{item.type === 'video'}}"> |
||||
|
<video |
||||
|
src="{{item.content}}" |
||||
|
class="message-video" |
||||
|
controls |
||||
|
show-center-play-btn |
||||
|
poster="{{item.thumb}}" |
||||
|
></video> |
||||
|
<view class="video-play-overlay"> |
||||
|
<image src="/images/icons/play.png" class="play-icon"></image> |
||||
|
</view> |
||||
|
<view class="upload-progress" wx:if="{{item.status === 'uploading'}}"> |
||||
|
<view class="progress-circle"> |
||||
|
<text class="progress-text">{{item.progress}}%</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 文件消息 --> |
||||
|
<view class="message-bubble bubble-right message-file" wx:elif="{{item.type === 'file'}}"> |
||||
|
<view class="file-icon-box"> |
||||
|
<image src="/images/icons/file_icon.png" class="file-icon"></image> |
||||
|
</view> |
||||
|
<view class="file-info"> |
||||
|
<text class="file-name">{{item.fileName}}</text> |
||||
|
<text class="file-size">{{formatFileSize(item.fileSize)}}</text> |
||||
|
</view> |
||||
|
<view class="upload-progress" wx:if="{{item.status === 'uploading'}}"> |
||||
|
<view class="progress-circle"> |
||||
|
<text class="progress-text">{{item.progress}}%</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 消息状态 --> |
||||
|
<view class="message-status" wx:if="{{item.status === 'sending'}}"> |
||||
|
<text class="status-text">发送中</text> |
||||
|
</view> |
||||
|
<view class="message-status" wx:elif="{{item.status === 'fail'}}"> |
||||
|
<text class="status-text fail">发送失败</text> |
||||
|
<text class="retry-text" bindtap="retrySend" data-id="{{item.id}}">重试</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 消息时间 --> |
||||
|
<text class="message-time" wx:if="{{item.showTime}}">{{formatTime(item.timestamp)}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="message-avatar"> |
||||
|
<image src="{{expertAvatar || '/pages/images/tx.png'}}" class="avatar-img"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<!-- 底部空间 --> |
||||
|
<view class="chat-bottom-space"></view> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<view class="empty-tip" wx:if="{{messageList.length === 0}}"> |
||||
|
<text class="empty-text">暂无聊天记录，开始咨询吧</text> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 输入区域 --> |
||||
|
<view class="input-section" id="inputSection"> |
||||
|
<view class="text-input-panel"> |
||||
|
<!-- 添加按钮 --> |
||||
|
<view class="add-btn" bindtap="showMediaActionSheet"> |
||||
|
<image src="/pagesA/images/add.png" class="add-icon"></image> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 输入框包装器 --> |
||||
|
<view class="input-wrapper"> |
||||
|
<textarea |
||||
|
auto-height |
||||
|
maxlength="500" |
||||
|
class="chat-textarea" |
||||
|
placeholder="请输入消息..." |
||||
|
placeholder-class="input-placeholder" |
||||
|
value="{{inputValue}}" |
||||
|
bindinput="onInput" |
||||
|
confirm-type="send" |
||||
|
focus="{{inputFocus}}" |
||||
|
adjust-position="{{false}}" |
||||
|
cursor-spacing="20" |
||||
|
bindfocus="onInputFocus" |
||||
|
bindblur="onInputBlur" |
||||
|
show-confirm-bar="{{false}}" |
||||
|
disable-default-padding="{{true}}" |
||||
|
></textarea> |
||||
|
|
||||
|
<!-- 清空按钮 --> |
||||
|
<view class="input-actions" wx:if="{{inputValue}}"> |
||||
|
<button class="clear-btn" bindtap="clearInput"> |
||||
|
<image src="/pagesA/images/ch.png" class="clear-icon"></image> |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 发送按钮 --> |
||||
|
<button |
||||
|
class="send-btn" |
||||
|
bindtap="sendTextMessage" |
||||
|
wx:if="{{inputValue}}" |
||||
|
> |
||||
|
<text class="send-text">发送</text> |
||||
|
</button> |
||||
|
|
||||
|
<!-- 占位 --> |
||||
|
<view class="send-placeholder" wx:else></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 多媒体选择面板 --> |
||||
|
<view class="media-action-sheet" wx:if="{{showMediaSheet}}" catchtap="hideMediaActionSheet"> |
||||
|
<view class="media-sheet-content" catchtap="stopPropagation"> |
||||
|
<view class="media-sheet-header"> |
||||
|
<text class="sheet-title">发送内容</text> |
||||
|
<view class="close-sheet-btn" bindtap="hideMediaActionSheet"> |
||||
|
<image src="/pagesA/images/cuo.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="media-options-grid"> |
||||
|
<view class="media-option" bindtap="chooseImage"> |
||||
|
<view class="option-icon-box"> |
||||
|
<image src="/pagesA/images/zp.png"></image> |
||||
|
</view> |
||||
|
<text class="option-text">照片</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="media-option" bindtap="chooseVideo"> |
||||
|
<view class="option-icon-box"> |
||||
|
<image src="/pagesA/images/ps.png"></image> |
||||
|
</view> |
||||
|
<text class="option-text">视频</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="sheet-bottom"> |
||||
|
<text class="bottom-tip">最多可选择9张照片</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 更多菜单 --> |
||||
|
<view class="more-menu" wx:if="{{showMoreMenu}}" catchtap="hideMoreMenu"> |
||||
|
<view class="menu-content"> |
||||
|
<view class="menu-item" bindtap="clearHistory"> |
||||
|
<text>清空聊天记录</text> |
||||
|
</view> |
||||
|
<view class="menu-item" bindtap="reportUser"> |
||||
|
<text>举报用户</text> |
||||
|
</view> |
||||
|
<view class="menu-item" bindtap="blockUser"> |
||||
|
<text>拉黑用户</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,685 @@ |
|||||
|
/* 专家端聊天样式 */ |
||||
|
.consult-page { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background: #f5f5f5; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
/* 头部样式 */ |
||||
|
.consult-header { |
||||
|
background: #ffffff; |
||||
|
border-bottom: 1rpx solid #e5e5e5; |
||||
|
position: relative; |
||||
|
z-index: 1000; |
||||
|
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05); |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.header-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 12rpx 24rpx; |
||||
|
height: 96rpx; |
||||
|
} |
||||
|
|
||||
|
.back-btn, .header-right { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.back-icon, .more-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.header-center { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.expert-info { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.expert-name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #000000; |
||||
|
line-height: 44rpx; |
||||
|
margin-bottom: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.expert-status { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.status-dot { |
||||
|
width: 16rpx; |
||||
|
height: 16rpx; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.status-dot.online { |
||||
|
background: #07c160; |
||||
|
animation: pulse 2s infinite; |
||||
|
} |
||||
|
|
||||
|
.status-dot.offline { |
||||
|
background: #cccccc; |
||||
|
} |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.4); } |
||||
|
70% { box-shadow: 0 0 0 8rpx rgba(7, 193, 96, 0); } |
||||
|
100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0); } |
||||
|
} |
||||
|
|
||||
|
.status-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
/* 聊天容器 */ |
||||
|
.chat-container { |
||||
|
flex: 1; |
||||
|
padding: 20rpx 0; |
||||
|
background: #f5f5f5; |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
height: 0; |
||||
|
} |
||||
|
|
||||
|
/* 消息项 */ |
||||
|
.message-item { |
||||
|
display: flex; |
||||
|
margin-bottom: 24rpx; |
||||
|
padding: 0 30rpx; |
||||
|
opacity: 0; |
||||
|
animation: fadeIn 0.3s ease forwards; |
||||
|
align-items: flex-start; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
from { opacity: 0; transform: translateY(10rpx); } |
||||
|
to { opacity: 1; transform: translateY(0); } |
||||
|
} |
||||
|
|
||||
|
.message-left { justify-content: flex-start; } |
||||
|
.message-right { justify-content: flex-end; } |
||||
|
|
||||
|
/* 头像 */ |
||||
|
.message-avatar { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 8rpx; |
||||
|
overflow: hidden; |
||||
|
flex-shrink: 0; |
||||
|
background: #ffffff; |
||||
|
border: 1rpx solid #f0f0f0; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.message-left .message-avatar { margin-right: 16rpx; } |
||||
|
.message-right .message-avatar { margin-left: 16rpx; } |
||||
|
|
||||
|
.avatar-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
/* 消息内容包装器 */ |
||||
|
.message-content-wrapper { |
||||
|
max-width: 480rpx; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.message-left .message-content-wrapper { align-items: flex-start; } |
||||
|
.message-right .message-content-wrapper { align-items: flex-end; } |
||||
|
|
||||
|
/* 气泡箭头 */ |
||||
|
.message-arrow { |
||||
|
position: absolute; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid; |
||||
|
border-width: 12rpx; |
||||
|
top: 30rpx; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.arrow-left { |
||||
|
left: -24rpx; |
||||
|
border-color: transparent #ffffff transparent transparent; |
||||
|
} |
||||
|
|
||||
|
.arrow-right { |
||||
|
right: -24rpx; |
||||
|
border-color: transparent transparent transparent #95ec69; |
||||
|
} |
||||
|
|
||||
|
/* 消息气泡 */ |
||||
|
.message-bubble { |
||||
|
position: relative; |
||||
|
padding: 16rpx 20rpx; |
||||
|
word-break: break-word; |
||||
|
box-sizing: border-box; |
||||
|
min-height: 60rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.bubble-left { |
||||
|
background: #ffffff; |
||||
|
border-radius: 10rpx; |
||||
|
border-top-left-radius: 4rpx; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.bubble-right { |
||||
|
background: #95ec69; |
||||
|
border-radius: 10rpx; |
||||
|
border-top-right-radius: 4rpx; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(149, 236, 105, 0.2); |
||||
|
} |
||||
|
|
||||
|
/* 文本消息 */ |
||||
|
.message-text { |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.bubble-right .message-text { color: #000000; } |
||||
|
|
||||
|
/* 媒体消息 */ |
||||
|
.media-bubble { |
||||
|
position: relative; |
||||
|
border-radius: 10rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
|
background: #ffffff; |
||||
|
min-height: 60rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.message-left .media-bubble { border-top-left-radius: 4rpx; } |
||||
|
.message-right .media-bubble { border-top-right-radius: 4rpx; } |
||||
|
|
||||
|
.message-image { |
||||
|
width: 280rpx; |
||||
|
height: 280rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.message-video { |
||||
|
width: 280rpx; |
||||
|
height: 280rpx; |
||||
|
background: #000000; |
||||
|
} |
||||
|
|
||||
|
.video-play-overlay { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(0, 0, 0, 0.6); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.play-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-left: 4rpx; |
||||
|
} |
||||
|
|
||||
|
/* 文件消息 */ |
||||
|
.message-file { |
||||
|
min-width: 280rpx; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
min-height: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.file-icon-box { |
||||
|
width: 56rpx; |
||||
|
height: 72rpx; |
||||
|
margin-right: 16rpx; |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.file-icon { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.file-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.file-name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
margin-bottom: 6rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.file-size { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
/* 消息时间 */ |
||||
|
.message-time { |
||||
|
font-size: 22rpx; |
||||
|
color: #999999; |
||||
|
margin-top: 8rpx; |
||||
|
align-self: flex-start; |
||||
|
} |
||||
|
|
||||
|
.message-right .message-time { |
||||
|
align-self: flex-end; |
||||
|
} |
||||
|
|
||||
|
/* 消息状态 */ |
||||
|
.message-status { |
||||
|
font-size: 22rpx; |
||||
|
color: #999999; |
||||
|
margin-top: 4rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.message-status .fail { |
||||
|
color: #ff4d4f; |
||||
|
} |
||||
|
|
||||
|
.retry-text { |
||||
|
color: #1890ff; |
||||
|
text-decoration: underline; |
||||
|
margin-left: 8rpx; |
||||
|
} |
||||
|
|
||||
|
/* 上传进度 */ |
||||
|
.upload-progress { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: inherit; |
||||
|
} |
||||
|
|
||||
|
.progress-circle { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
border: 6rpx solid rgba(255, 255, 255, 0.3); |
||||
|
border-top-color: #ffffff; |
||||
|
animation: spin 1s linear infinite; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
@keyframes spin { |
||||
|
0% { transform: rotate(0deg); } |
||||
|
100% { transform: rotate(360deg); } |
||||
|
} |
||||
|
|
||||
|
.progress-text { |
||||
|
font-size: 20rpx; |
||||
|
color: #ffffff; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
/* 底部留白 */ |
||||
|
.chat-bottom-space { height: 40rpx; } |
||||
|
|
||||
|
/* 加载更多 */ |
||||
|
.load-more-tip { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 30rpx 0; |
||||
|
color: #999999; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-tip { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 100rpx 0; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
/* 输入区域 */ |
||||
|
.input-section { |
||||
|
background: #ffffff; |
||||
|
border-top: 1rpx solid #e5e5e5; |
||||
|
padding: 16rpx 30rpx; |
||||
|
position: relative; |
||||
|
z-index: 100; |
||||
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); |
||||
|
flex-shrink: 0; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.text-input-panel { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16rpx; |
||||
|
min-height: 72rpx; |
||||
|
} |
||||
|
|
||||
|
.add-btn { |
||||
|
width: 72rpx; |
||||
|
height: 72rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.add-icon { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.input-wrapper { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
background: #f5f5f5; |
||||
|
border-radius: 10rpx; |
||||
|
min-height: 72rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 24rpx; |
||||
|
transition: all 0.2s; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.input-wrapper:active { |
||||
|
background: #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.chat-textarea { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
font-size: 30rpx; |
||||
|
color: #333333; |
||||
|
line-height: 1.4; |
||||
|
min-height: 48rpx; |
||||
|
max-height: 160rpx; |
||||
|
padding: 12rpx 0; |
||||
|
margin: 0; |
||||
|
background: transparent; |
||||
|
border: none; |
||||
|
box-sizing: border-box; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.input-placeholder { |
||||
|
color: #999999; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.input-actions { |
||||
|
position: absolute; |
||||
|
right: 16rpx; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
z-index: 2; |
||||
|
flex-shrink: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.clear-btn { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
border: none; |
||||
|
background: transparent; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
line-height: 1; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.clear-btn::after { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.clear-btn:active { |
||||
|
background: rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.clear-icon { |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.send-btn { |
||||
|
background: linear-gradient(135deg, #07c160 0%, #06ae56 100%); |
||||
|
width: 112rpx; |
||||
|
height: 66rpx; |
||||
|
border-radius: 10rpx; |
||||
|
border: none; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.3s ease; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
line-height: 1; |
||||
|
flex-shrink: 0; |
||||
|
box-shadow: 0 4rpx 8rpx rgba(7, 193, 96, 0.2); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.send-btn:active { |
||||
|
background: linear-gradient(135deg, #06ae56 0%, #059c4c 100%); |
||||
|
transform: scale(0.96); |
||||
|
box-shadow: 0 2rpx 4rpx rgba(7, 193, 96, 0.3); |
||||
|
} |
||||
|
|
||||
|
.send-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #ffffff; |
||||
|
font-weight: 600; |
||||
|
letter-spacing: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.send-placeholder { |
||||
|
width: 112rpx; |
||||
|
height: 72rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
/* 多媒体选择面板 */ |
||||
|
.media-action-sheet { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
justify-content: center; |
||||
|
z-index: 2000; |
||||
|
animation: fadeIn 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.media-sheet-content { |
||||
|
width: 100%; |
||||
|
background: #F7F7F7; |
||||
|
border-radius: 40rpx 40rpx 0 0; |
||||
|
padding: 40rpx 30rpx calc(10rpx + env(safe-area-inset-bottom)); |
||||
|
animation: slideUp 0.3s ease; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
@keyframes slideUp { |
||||
|
from { transform: translateY(100%); } |
||||
|
to { transform: translateY(0); } |
||||
|
} |
||||
|
|
||||
|
.media-sheet-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 40rpx; |
||||
|
padding: 0 10rpx 20rpx; |
||||
|
border-bottom: 1px solid #E4E4E4; |
||||
|
} |
||||
|
|
||||
|
.sheet-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.close-sheet-btn image { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.media-options-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, 1fr); |
||||
|
gap: 40rpx 30rpx; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.media-option { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.option-icon-box { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 30rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 16rpx; |
||||
|
transition: transform 0.2s; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.media-option:active .option-icon-box { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
.option-icon-box image { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.option-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.sheet-bottom { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.bottom-tip { |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
/* 更多菜单 */ |
||||
|
.more-menu { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.3); |
||||
|
z-index: 2000; |
||||
|
} |
||||
|
|
||||
|
.menu-content { |
||||
|
position: absolute; |
||||
|
top: 96rpx; |
||||
|
right: 24rpx; |
||||
|
background: #ffffff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 16rpx 0; |
||||
|
min-width: 200rpx; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.menu-item { |
||||
|
padding: 24rpx 32rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.menu-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.menu-item:active { |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
@ -0,0 +1,127 @@ |
|||||
|
import http from '../../../utils/api' |
||||
|
const baseUrl = require('../../../utils/baseUrl') |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
baseUrl: baseUrl, |
||||
|
loadMoreText: '上拉加载更多', |
||||
|
evaluations: [], |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
isLoading: false, |
||||
|
hasMore: true |
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
this.getfeedback(true) |
||||
|
}, |
||||
|
|
||||
|
// 服务评价列表
|
||||
|
getfeedback(isRefresh = false) { |
||||
|
// 防止重复请求
|
||||
|
if (this.data.isLoading) return |
||||
|
|
||||
|
// 如果没有更多数据且不是刷新，直接返回
|
||||
|
if (!this.data.hasMore && !isRefresh) { |
||||
|
this.setData({ |
||||
|
loadMoreText: '—— 没有更多了 ——' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.setData({ isLoading: true }) |
||||
|
|
||||
|
// 如果是刷新，重置为第一页
|
||||
|
if (isRefresh) { |
||||
|
this.setData({ |
||||
|
pageNo: 1, |
||||
|
hasMore: true |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 显示加载提示
|
||||
|
if (this.data.pageNo > 1) { |
||||
|
this.setData({ loadMoreText: '加载中...' }) |
||||
|
} |
||||
|
|
||||
|
http.feedback({ |
||||
|
data: { |
||||
|
type: '服务评价', |
||||
|
pageNo: this.data.pageNo, |
||||
|
pageSize: this.data.pageSize |
||||
|
}, |
||||
|
success: res => { |
||||
|
console.log('评价列表响应:', res) |
||||
|
|
||||
|
if (res && res.rows) { |
||||
|
const list = res.rows || [] |
||||
|
const total = res.total || 0 |
||||
|
|
||||
|
// 判断是否还有更多数据
|
||||
|
const hasMore = this.data.pageNo * this.data.pageSize < total |
||||
|
|
||||
|
this.setData({ |
||||
|
evaluations: isRefresh ? list : this.data.evaluations.concat(list), |
||||
|
total: total, |
||||
|
hasMore: hasMore, |
||||
|
loadMoreText: hasMore ? '上拉加载更多' : '—— 没有更多了 ——', |
||||
|
pageNo: this.data.pageNo + 1 |
||||
|
}) |
||||
|
} else { |
||||
|
// 处理异常情况
|
||||
|
if (isRefresh) { |
||||
|
this.setData({ |
||||
|
evaluations: [], |
||||
|
hasMore: false, |
||||
|
loadMoreText: '—— 没有更多了 ——' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
fail: err => { |
||||
|
console.error('获取评价列表失败:', err) |
||||
|
wx.showToast({ |
||||
|
title: '加载失败', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
|
||||
|
// 加载失败时，恢复加载提示
|
||||
|
this.setData({ |
||||
|
loadMoreText: this.data.hasMore ? '点击重试' : '—— 没有更多了 ——' |
||||
|
}) |
||||
|
}, |
||||
|
complete: () => { |
||||
|
this.setData({ isLoading: false }) |
||||
|
wx.hideNavigationBarLoading() |
||||
|
wx.stopPullDownRefresh() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 下拉刷新
|
||||
|
onPullDownRefresh() { |
||||
|
wx.showNavigationBarLoading() |
||||
|
this.getfeedback(true) |
||||
|
}, |
||||
|
|
||||
|
// 上拉加载更多
|
||||
|
onReachBottom() { |
||||
|
if (this.data.hasMore && !this.data.isLoading) { |
||||
|
this.getfeedback() |
||||
|
} else if (!this.data.hasMore) { |
||||
|
this.setData({ |
||||
|
loadMoreText: '—— 没有更多了 ——' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 重新加载（可用于点击重试）
|
||||
|
retryLoad() { |
||||
|
if (this.data.evaluations.length === 0) { |
||||
|
this.getfeedback(true) |
||||
|
} else if (this.data.hasMore) { |
||||
|
this.getfeedback() |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"服务评价", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
<!-- 纯净评价列表页 - 无tab，只有列表 --> |
||||
|
<view class="page"> |
||||
|
|
||||
|
<!-- 自定义列表 --> |
||||
|
<view class="list-container"> |
||||
|
|
||||
|
<!-- 评价项列表 --> |
||||
|
<block wx:for="{{evaluations}}" wx:key="id" wx:for-index="idx"> |
||||
|
|
||||
|
<!-- 评价卡片 --> |
||||
|
<view class="evaluation-card" > |
||||
|
|
||||
|
<!-- 用户信息行：头像 + 昵称 + 时间 --> |
||||
|
<view class="user-row"> |
||||
|
<!-- 头像区域（支持图片和文字占位） --> |
||||
|
<view class="avatar-wrapper"> |
||||
|
<image class="avatar" src="{{item.avatar?baseUrl+item.avatar:'/pages/images/tx.png'}}" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 用户信息和时间 --> |
||||
|
<view class="user-info"> |
||||
|
<view class="name-row"> |
||||
|
<text class="user-name">{{item.nickName?item.nickName:'用户'+idx}}</text> |
||||
|
<text class="time">{{item.createdAt}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 评价内容 --> |
||||
|
<view class="content-section"> |
||||
|
<rich-text class="content-text" space="emsp" nodes="{{item.content}}"></rich-text> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<!-- 底部装饰线（极简分隔） --> |
||||
|
<view class="card-footer" wx:if="{{idx < evaluations.length - 1}}"> |
||||
|
<view class="divider"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
|
||||
|
<!-- 空状态 --> |
||||
|
<view class="empty-state" wx:if="{{evaluations.length === 0}}"> |
||||
|
<image class="empty-icon" src="/pages/images/kzt.png" mode="aspectFit"></image> |
||||
|
<text class="empty-text">暂无评价</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 加载更多提示 --> |
||||
|
<view class="load-more" wx:if="{{evaluations.length > 0}}"> |
||||
|
<text class="load-more-text">{{loadMoreText}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,146 @@ |
|||||
|
.page { |
||||
|
min-height: 100vh; |
||||
|
background-color: #ffffff; |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; |
||||
|
} |
||||
|
|
||||
|
/* 列表容器 - 直接贴边 */ |
||||
|
.list-container { |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
|
||||
|
/* 评价卡片 - 极简风格 */ |
||||
|
.evaluation-card { |
||||
|
background-color: #ffffff; |
||||
|
padding: 20px 0; |
||||
|
position: relative; |
||||
|
transition: background-color 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.evaluation-card:active { |
||||
|
background-color: #f8f9fc; |
||||
|
} |
||||
|
|
||||
|
/* 用户信息行 */ |
||||
|
.user-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
/* 头像区域 */ |
||||
|
.avatar-wrapper { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 48px; |
||||
|
height: 48px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #f0f2f6; |
||||
|
overflow: hidden; |
||||
|
flex-shrink: 0; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); |
||||
|
} |
||||
|
|
||||
|
.avatar-placeholder { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.avatar-text { |
||||
|
font-size: 20px; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* 用户信息区 */ |
||||
|
.user-info { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.name-row { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.user-name { |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #1e2a3a; |
||||
|
letter-spacing: -0.2px; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 12px; |
||||
|
color: #98a2b3; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 评价内容 */ |
||||
|
.content-section { |
||||
|
margin-bottom: 12px; |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.content-text { |
||||
|
font-size: 15px; |
||||
|
line-height: 1.5; |
||||
|
color: #1e2a3a; |
||||
|
word-break: break-word; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* 卡片底部分隔线 */ |
||||
|
.card-footer { |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.divider { |
||||
|
height: 1px; |
||||
|
background-color: #eef1f4; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 80px 20px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.empty-icon { |
||||
|
width: 140px; |
||||
|
height: 140px; |
||||
|
margin-bottom: 20px; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 15px; |
||||
|
color: #9aa6b8; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
/* 加载更多 */ |
||||
|
.load-more { |
||||
|
text-align: center; |
||||
|
padding: 24px 0 30px; |
||||
|
} |
||||
|
|
||||
|
.load-more-text { |
||||
|
font-size: 12px; |
||||
|
color: #b8c0cc; |
||||
|
font-weight: 400; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue