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.
280 lines
9.8 KiB
280 lines
9.8 KiB
<!-- 专家端聊天页面 -->
|
|
<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>
|