You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
12 KiB
296 lines
12 KiB
<view class="consult-page">
|
|
<!-- 头部专家信息 -->
|
|
<view class="consult-header">
|
|
<view class="header-content">
|
|
<view class="header-left">
|
|
<button class="back-btn" bindtap="goBack">
|
|
<image src="/images/icons/back.png" class="back-icon"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<view class="header-center">
|
|
<text class="expert-name">{{expertInfo.name}}</text>
|
|
<view class="expert-status">
|
|
<view class="status-dot {{expertInfo.online ? 'online' : 'offline'}}"></view>
|
|
<text class="status-text">{{expertInfo.online ? '在线' : '离线'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="header-right">
|
|
<button class="header-action-btn" bindtap="makePhoneCall">
|
|
<image src="/images/icons/phone.png" class="header-action-icon"></image>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 聊天内容区域 -->
|
|
<scroll-view class="chat-container" scroll-y scroll-into-view="{{scrollToView}}" scroll-with-animation="true">
|
|
<!-- 首次咨询欢迎语 -->
|
|
<view class="system-welcome" wx:if="{{isFirstLoad}}">
|
|
<view class="welcome-avatar">
|
|
<image src="{{expertInfo.avatar}}"></image>
|
|
</view>
|
|
<text class="welcome-name">{{expertInfo.name}}</text>
|
|
<text class="welcome-title">{{expertInfo.title}} · {{expertInfo.expertise}}</text>
|
|
<text class="welcome-tip">您好，我是{{expertInfo.name}}，很高兴为您服务！</text>
|
|
</view>
|
|
|
|
<!-- 日期分隔线 -->
|
|
<view class="date-divider" wx:if="{{showDateDivider}}">
|
|
<text class="date-text">{{todayDate}}</text>
|
|
</view>
|
|
|
|
<!-- 消息列表 -->
|
|
<block wx:for="{{messageList}}" wx:key="id">
|
|
<!-- 时间分隔 -->
|
|
<view class="time-divider" wx:if="{{item.showTime}}">
|
|
<text>{{formatTime(item.timestamp)}}</text>
|
|
</view>
|
|
|
|
<!-- 对方消息 -->
|
|
<view class="message-item message-left" wx:if="{{item.sender === 'expert'}}">
|
|
<view class="message-avatar">
|
|
<image src="{{expertInfo.avatar}}"></image>
|
|
</view>
|
|
|
|
<view class="message-content-wrapper">
|
|
<!-- 文本消息 -->
|
|
<view class="message-bubble message-bubble-left" wx:if="{{item.type === 'text'}}">
|
|
<text class="message-text">{{item.content}}</text>
|
|
</view>
|
|
|
|
<!-- 图片消息 -->
|
|
<view class="message-bubble message-bubble-left" wx:elif="{{item.type === 'image'}}">
|
|
<image src="{{item.content}}" class="message-image" mode="widthFix" bindtap="previewImage" data-url="{{item.content}}"></image>
|
|
</view>
|
|
|
|
<!-- 视频消息 -->
|
|
<view class="message-bubble message-bubble-left" wx:elif="{{item.type === 'video'}}">
|
|
<video src="{{item.content}}" class="message-video" controls poster="{{item.thumb}}"></video>
|
|
<view class="video-play-btn">
|
|
<image src="/images/icons/play.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 语音消息 -->
|
|
<view class="message-bubble message-bubble-left message-audio" wx:elif="{{item.type === 'audio'}}">
|
|
<image src="/images/icons/audio-left.png" class="audio-icon-left"></image>
|
|
<view class="audio-content">
|
|
<view class="audio-wave">
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
</view>
|
|
<text class="audio-duration">{{item.duration}}''</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 文件消息 -->
|
|
<view class="message-bubble message-bubble-left message-file" wx:elif="{{item.type === 'file'}}">
|
|
<view class="file-icon-box">
|
|
<image src="/images/icons/file.png" class="file-icon"></image>
|
|
<text class="file-extension">{{item.extension}}</text>
|
|
</view>
|
|
<view class="file-info">
|
|
<text class="file-name">{{item.fileName}}</text>
|
|
<text class="file-size">{{formatFileSize(item.fileSize)}}</text>
|
|
</view>
|
|
<button class="file-download-btn" bindtap="downloadFile" data-url="{{item.content}}">下载</button>
|
|
</view>
|
|
|
|
<text class="message-time">{{formatMessageTime(item.timestamp)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的消息 -->
|
|
<view class="message-item message-right" wx:else>
|
|
<view class="message-content-wrapper">
|
|
<!-- 消息状态 -->
|
|
<view class="message-status">
|
|
<image wx:if="{{item.status === 'sending'}}" src="/images/icons/sending.png" class="status-icon"></image>
|
|
<image wx:if="{{item.status === 'success'}}" src="/images/icons/success.png" class="status-icon"></image>
|
|
<image wx:if="{{item.status === 'error'}}" src="/images/icons/error.png" class="status-icon"></image>
|
|
</view>
|
|
|
|
<!-- 文本消息 -->
|
|
<view class="message-bubble message-bubble-right" wx:if="{{item.type === 'text'}}">
|
|
<text class="message-text">{{item.content}}</text>
|
|
</view>
|
|
|
|
<!-- 图片消息 -->
|
|
<view class="message-bubble message-bubble-right" wx:elif="{{item.type === 'image'}}">
|
|
<image src="{{item.content}}" class="message-image" mode="widthFix" bindtap="previewImage" data-url="{{item.content}}"></image>
|
|
<view class="upload-progress" wx:if="{{item.status === 'uploading'}}">
|
|
<view class="progress-circle">
|
|
<view class="progress-fill" style="transform: rotate({{item.progress * 3.6}}deg);"></view>
|
|
<text class="progress-text">{{item.progress}}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视频消息 -->
|
|
<view class="message-bubble message-bubble-right" wx:elif="{{item.type === 'video'}}">
|
|
<video src="{{item.content}}" class="message-video" controls poster="{{item.thumb}}"></video>
|
|
<view class="video-play-btn">
|
|
<image src="/images/icons/play.png"></image>
|
|
</view>
|
|
<view class="upload-progress" wx:if="{{item.status === 'uploading'}}">
|
|
<view class="progress-circle">
|
|
<view class="progress-fill" style="transform: rotate({{item.progress * 3.6}}deg);"></view>
|
|
<text class="progress-text">{{item.progress}}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 语音消息 -->
|
|
<view class="message-bubble message-bubble-right message-audio" wx:elif="{{item.type === 'audio'}}">
|
|
<view class="audio-content">
|
|
<view class="audio-wave">
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
<view class="wave-bar"></view>
|
|
</view>
|
|
<text class="audio-duration">{{item.duration}}''</text>
|
|
</view>
|
|
<image src="/images/icons/audio-right.png" class="audio-icon-right"></image>
|
|
</view>
|
|
|
|
<!-- 文件消息 -->
|
|
<view class="message-bubble message-bubble-right message-file" wx:elif="{{item.type === 'file'}}">
|
|
<view class="file-icon-box">
|
|
<image src="/images/icons/file.png" class="file-icon"></image>
|
|
<text class="file-extension">{{item.extension}}</text>
|
|
</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">
|
|
<view class="progress-fill" style="transform: rotate({{item.progress * 3.6}}deg);"></view>
|
|
<text class="progress-text">{{item.progress}}%</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="message-time">{{formatMessageTime(item.timestamp)}}</text>
|
|
</view>
|
|
|
|
<view class="message-avatar">
|
|
<image src="{{userInfo.avatar}}"></image>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
|
|
<!-- 输入区域 -->
|
|
<view class="input-section">
|
|
<!-- 录音面板 -->
|
|
<view class="voice-panel" wx:if="{{inputMode === 'voice'}}">
|
|
<button class="voice-record-btn" bindtouchstart="startVoiceRecord" bindtouchend="endVoiceRecord">
|
|
<image src="/images/icons/mic.png" class="mic-icon"></image>
|
|
<text class="voice-tip">按住说话</text>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 正常输入面板 -->
|
|
<view class="input-panel" wx:else>
|
|
<!-- 语音/键盘切换按钮 -->
|
|
<button class="input-mode-btn" bindtap="switchInputMode">
|
|
<image src="{{inputMode === 'keyboard' ? '/images/icons/voice.png' : '/images/icons/keyboard.png'}}" class="mode-icon"></image>
|
|
</button>
|
|
|
|
<!-- 输入框 -->
|
|
<view class="input-box-wrapper">
|
|
<input
|
|
type="text"
|
|
class="chat-input"
|
|
placeholder="{{inputPlaceholder}}"
|
|
placeholder-class="placeholder"
|
|
value="{{inputValue}}"
|
|
bindinput="onInput"
|
|
bindconfirm="sendTextMessage"
|
|
confirm-type="send"
|
|
focus="{{inputFocus}}"
|
|
adjust-position="{{false}}"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 多媒体按钮 -->
|
|
<button class="media-btn" bindtap="showMediaActionSheet">
|
|
<image src="/images/icons/add.png" class="media-icon"></image>
|
|
</button>
|
|
|
|
<!-- 发送按钮 -->
|
|
<button class="send-btn" bindtap="sendTextMessage" wx:if="{{inputValue.trim()}}">
|
|
<image src="/images/icons/send.png" class="send-icon"></image>
|
|
</button>
|
|
</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>
|
|
<button class="close-sheet-btn" bindtap="hideMediaActionSheet">
|
|
<image src="/images/icons/close.png"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<view class="media-options">
|
|
<button class="media-option" bindtap="chooseImage">
|
|
<view class="option-icon photo-icon">
|
|
<image src="/images/icons/photo.png"></image>
|
|
</view>
|
|
<text class="option-text">照片</text>
|
|
</button>
|
|
|
|
<button class="media-option" bindtap="takePhoto">
|
|
<view class="option-icon camera-icon">
|
|
<image src="/images/icons/camera.png"></image>
|
|
</view>
|
|
<text class="option-text">拍摄</text>
|
|
</button>
|
|
|
|
<button class="media-option" bindtap="chooseVideo">
|
|
<view class="option-icon video-icon">
|
|
<image src="/images/icons/video.png"></image>
|
|
</view>
|
|
<text class="option-text">视频</text>
|
|
</button>
|
|
|
|
<button class="media-option" bindtap="recordAudio">
|
|
<view class="option-icon audio-icon">
|
|
<image src="/images/icons/voice.png"></image>
|
|
</view>
|
|
<text class="option-text">语音</text>
|
|
</button>
|
|
|
|
<button class="media-option" bindtap="chooseFile">
|
|
<view class="option-icon file-icon">
|
|
<image src="/images/icons/file2.png"></image>
|
|
</view>
|
|
<text class="option-text">文件</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 录音提示 -->
|
|
<view class="recording-modal" wx:if="{{isRecording}}">
|
|
<view class="recording-box">
|
|
<view class="recording-wave-box">
|
|
<view class="recording-wave"></view>
|
|
<image src="/images/icons/mic2.png" class="recording-mic-icon"></image>
|
|
</view>
|
|
<text class="recording-tip">{{recordingTip}}</text>
|
|
<text class="recording-time">{{recordingTime}}s</text>
|
|
</view>
|
|
</view>
|
|
</view>
|