2026
/
wxamp-ymtxUser
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

时间验证，视角切换，聊天框和文字内容修改

master
ZhaoYang 1 month ago
parent
466f978ef7
commit
bc6767691a
3 changed files with 2007 additions and 1362 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1146
      pagesA/pages/expertChat/expertChat.js
  2. 284
      pagesA/pages/expertChat/expertChat.wxml
  3. 1917
      pagesA/pages/expertChat/expertChat.wxss

1146
pagesA/pages/expertChat/expertChat.js
File diff suppressed because it is too large
View File

284
pagesA/pages/expertChat/expertChat.wxml
View File

@ -1,3 +1,4 @@
<!-- pages/consult/consult.wxml -->
<view class="consult-page">
<!-- 头部专家信息 -->
<view class="consult-header">
@ -9,10 +10,12 @@
</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 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>
@ -25,17 +28,16 @@
</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>
<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>
@ -43,128 +45,145 @@
<!-- 消息列表 -->
<block wx:for="{{messageList}}" wx:key="id">
<!-- 时间分隔 -->
<!-- 微信样式时间分隔 -->
<view class="time-divider" wx:if="{{item.showTime}}">
<text>{{formatTime(item.timestamp)}}</text>
<view class="time-line"></view>
<text class="time-text">{{formatTime(item.timestamp)}}</text>
<view class="time-line"></view>
</view>
<!-- 对方消息 -->
<view class="message-item message-left" wx:if="{{item.sender === 'expert'}}">
<view class="message-avatar">
<image src="{{expertInfo.avatar}}"></image>
<image src="{{expertInfo.avatar}}" class="avatar-img"></image>
</view>
<view class="message-content-wrapper">
<!-- 文本消息 -->
<view class="message-bubble message-bubble-left" wx:if="{{item.type === 'text'}}">
<view class="message-bubble bubble-left" wx:if="{{item.type === 'text'}}">
<text class="message-text">{{item.content}}</text>
<view class="message-arrow arrow-left"></view>
</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 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="message-arrow arrow-left"></view>
</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 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="message-arrow arrow-left"></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="message-bubble bubble-left message-audio" wx:elif="{{item.type === 'audio'}}">
<image src="/images/icons/voice_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 class="wave-bar" style="animation-delay: 0s;"></view>
<view class="wave-bar" style="animation-delay: 0.2s;"></view>
<view class="wave-bar" style="animation-delay: 0.4s;"></view>
</view>
<text class="audio-duration">{{item.duration}}''</text>
<text class="audio-duration">{{item.duration || 0}}''</text>
</view>
<view class="message-arrow arrow-left"></view>
</view>
<!-- 文件消息 -->
<view class="message-bubble message-bubble-left message-file" wx:elif="{{item.type === 'file'}}">
<view class="message-bubble 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>
<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>
<button class="file-download-btn" bindtap="downloadFile" data-url="{{item.content}}">下载</button>
<view class="message-arrow arrow-left"></view>
</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'}}">
<view class="message-bubble bubble-right" wx:if="{{item.type === 'text'}}">
<text class="message-text">{{item.content}}</text>
<view class="message-arrow arrow-right"></view>
</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="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">
<view class="progress-fill" style="transform: rotate({{item.progress * 3.6}}deg);"></view>
<text class="progress-text">{{item.progress}}%</text>
</view>
</view>
<view class="message-arrow arrow-right"></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 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">
<view class="progress-fill" style="transform: rotate({{item.progress * 3.6}}deg);"></view>
<text class="progress-text">{{item.progress}}%</text>
</view>
</view>
<view class="message-arrow arrow-right"></view>
</view>
<!-- 语音消息 -->
<view class="message-bubble message-bubble-right message-audio" wx:elif="{{item.type === 'audio'}}">
<view class="message-bubble 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 class="wave-bar" style="animation-delay: 0s;"></view>
<view class="wave-bar" style="animation-delay: 0.2s;"></view>
<view class="wave-bar" style="animation-delay: 0.4s;"></view>
</view>
<text class="audio-duration">{{item.duration}}''</text>
<text class="audio-duration">{{item.duration || 0}}''</text>
</view>
<image src="/images/icons/audio-right.png" class="audio-icon-right"></image>
<image src="/images/icons/voice_right.png" class="audio-icon-right"></image>
<view class="message-arrow arrow-right"></view>
</view>
<!-- 文件消息 -->
<view class="message-bubble message-bubble-right message-file" wx:elif="{{item.type === 'file'}}">
<view class="message-bubble 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>
<image src="/images/icons/file_icon.png" class="file-icon"></image>
</view>
<view class="file-info">
<text class="file-name">{{item.fileName}}</text>
@ -172,63 +191,104 @@
</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 class="message-arrow arrow-right"></view>
</view>
<text class="message-time">{{formatMessageTime(item.timestamp)}}</text>
</view>
<view class="message-avatar">
<image src="{{userInfo.avatar}}"></image>
<image src="{{userInfo.avatar}}" class="avatar-img"></image>
</view>
</view>
</block>
<!-- 加载更多提示 -->
<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">
<!-- 录音面板 -->
<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>
<!-- 语音输入模式 -->
<view class="voice-input-panel" wx:if="{{inputMode === 'voice'}}">
<!-- 切换到文字输入按钮 -->
<button class="voice-input-btn" bindtap="switchInputMode">
<image src="/images/icons/keyboard.png" class="voice-btn-icon"></image>
</button>
<!-- 语音输入按钮 -->
<view class="input-wrapper">
<button
class="voice-record-btn"
bindtouchstart="startVoiceRecord"
bindtouchmove="onVoiceTouchMove"
bindtouchend="endVoiceRecord"
bindtouchcancel="cancelVoiceRecord"
>
<image src="/images/icons/microphone.png" class="mic-icon"></image>
<text class="voice-tip">{{voiceTip}}</text>
</button>
</view>
<!-- 更多按钮 -->
<button class="more-btn" bindtap="showMediaActionSheet">
<image src="/images/icons/plus.png" class="more-icon"></image>
</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>
<!-- 文字输入模式 -->
<view class="text-input-panel" wx:else>
<!-- 切换到语音输入按钮 -->
<button class="voice-input-btn" bindtap="switchInputMode">
<image src="/images/icons/voice.png" class="voice-btn-icon"></image>
</button>
<!-- 输入框 -->
<view class="input-box-wrapper">
<!-- 文字输入框 -->
<view class="input-wrapper">
<input
type="text"
class="chat-input"
placeholder="{{inputPlaceholder}}"
placeholder-class="placeholder"
placeholder-class="input-placeholder"
value="{{inputValue}}"
bindinput="onInput"
bindconfirm="sendTextMessage"
confirm-type="send"
focus="{{inputFocus}}"
adjust-position="{{false}}"
cursor-spacing="20"
bindfocus="onInputFocus"
bindblur="onInputBlur"
/>
<!-- 输入框操作按钮 -->
<view class="input-actions" wx:if="{{inputValue.trim()}}">
<button class="clear-btn" bindtap="clearInput">
<image src="/images/icons/clear.png" class="clear-icon"></image>
</button>
</view>
</view>
<!-- 多媒体按钮 -->
<button class="media-btn" bindtap="showMediaActionSheet">
<image src="/images/icons/add.png" class="media-icon"></image>
<!-- 发送/更多按钮 -->
<button
class="send-btn"
bindtap="sendTextMessage"
wx:if="{{inputValue.trim()}}"
>
<text class="send-text">发送</text>
</button>
<!-- 发送按钮 -->
<button class="send-btn" bindtap="sendTextMessage" wx:if="{{inputValue.trim()}}">
<image src="/images/icons/send.png" class="send-icon"></image>
<button class="more-btn" bindtap="showMediaActionSheet" wx:else>
<image src="/images/icons/plus.png" class="more-icon"></image>
</button>
</view>
</view>
@ -239,58 +299,74 @@
<view class="media-sheet-header">
<text class="sheet-title">发送内容</text>
<button class="close-sheet-btn" bindtap="hideMediaActionSheet">
<image src="/images/icons/close.png"></image>
<image src="/images/icons/close_round.png"></image>
</button>
</view>
<view class="media-options">
<view class="media-options-grid">
<button class="media-option" bindtap="chooseImage">
<view class="option-icon photo-icon">
<view class="option-icon-box 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">
<view class="option-icon-box 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">
<view class="option-icon-box 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 class="option-icon-box audio-icon">
<image src="/images/icons/audio_msg.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 class="option-icon-box file-icon">
<image src="/images/icons/file.png"></image>
</view>
<text class="option-text">文件</text>
</button>
</view>
<view class="sheet-bottom">
<text class="bottom-tip">最多可选择9张照片</text>
</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 class="recording-box {{isCanceling ? 'is-canceling' : ''}}">
<view class="recording-icon">
<image
src="{{isCanceling ? '/images/icons/cancel_recording.png' : '/images/icons/recording.png'}}"
class="recording-mic-icon"
></image>
</view>
<text class="recording-tip">{{recordingTip}}</text>
<text class="recording-time">{{recordingTime}}s</text>
<view class="recording-meter">
<view class="recording-waves">
<view
class="recording-wave"
wx:for="{{[1,2,3,4,5]}}"
wx:key="index"
style="animation-delay: {{index * 0.1}}s;"
></view>
</view>
<text class="recording-time">{{recordingTime}}s</text>
</view>
</view>
</view>
</view>

1917
pagesA/pages/expertChat/expertChat.wxss
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save