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.
246 lines
8.6 KiB
246 lines
8.6 KiB
<view class="consult-page">
|
|
<!-- 头部专家信息 -->
|
|
<view class="consult-header">
|
|
<view class="header-content">
|
|
<view class="header-center">
|
|
<view class="expert-info">
|
|
<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>
|
|
</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="date-divider" wx:if="{{showDateDivider}}">
|
|
<text class="date-text">{{todayDate}}</text>
|
|
</view>
|
|
|
|
<!-- 消息列表 -->
|
|
<block wx:for="{{messageList}}" wx:key="id">
|
|
<!-- 对方消息 -->
|
|
<view class="message-item message-left" wx:if="{{item.sender === 'expert'}}">
|
|
<view class="message-avatar">
|
|
<image src="/pagesA/images/1.png" class="avatar-img"></image>
|
|
</view>
|
|
|
|
<view class="message-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>
|
|
</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>
|
|
|
|
<view class="message-avatar">
|
|
<image src="/pagesA/images/2.png" class="avatar-img"></image>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<view class="chat-bottom-space"></view>
|
|
|
|
<view class="load-more-tip" wx:if="{{loadingMore}}">
|
|
<text>加载中...</text>
|
|
</view>
|
|
|
|
<view class="empty-tip" wx:if="{{messageList.length === 0 && !loading}}">
|
|
<image src="/images/icons/empty_chat.png" class="empty-icon"></image>
|
|
<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="/images/icons/clear.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 class="media-option" bindtap="chooseFile">
|
|
<view class="option-icon-box">
|
|
<image src="/pagesA/images/wj.png"></image>
|
|
</view>
|
|
<text class="option-text">文件</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sheet-bottom">
|
|
<text class="bottom-tip">最多可选择9张照片</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|