wxamp-ymtxUser/pagesA/pages/expertChat/expertChat.wxml

<!-- pages/consult/consult.wxml -->
<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">
        <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 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 
    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="time-divider" wx:if="{{item.showTime}}">
        <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}}" class="avatar-img"></image>
        </view>
        
        <view class="message-content-wrapper">
          <!-- 文本消息 -->
          <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="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="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 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" 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 || 0}}''</text>
            </view>
            <view class="message-arrow arrow-left"></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 class="message-arrow arrow-left"></view>
          </view>
        </view>
      </view>

      <!-- 我的消息  -->
      <view class="message-item message-right" wx:else>
        <view class="message-content-wrapper">          
          <!-- 文本消息 -->
          <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="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 class="message-arrow arrow-right"></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 class="message-arrow arrow-right"></view>
          </view>
          
          <!-- 语音消息 -->
          <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" 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 || 0}}''</text>
            </view>
            <image src="/images/icons/voice_right.png" class="audio-icon-right"></image>
            <view class="message-arrow arrow-right"></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 class="message-arrow arrow-right"></view>
          </view>
        </view>
        
        <view class="message-avatar">
          <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-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="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-wrapper">
        <input 
          type="text" 
          class="chat-input" 
          placeholder="{{inputPlaceholder}}"
          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="send-btn" 
        bindtap="sendTextMessage" 
        wx:if="{{inputValue.trim()}}"
      >
        <text class="send-text">发送</text>
      </button>
      
      <button class="more-btn" bindtap="showMediaActionSheet" wx:else>
        <image src="/images/icons/plus.png" class="more-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_round.png"></image>
        </button>
      </view>
      
      <view class="media-options-grid">
        <button class="media-option" bindtap="chooseImage">
          <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-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-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-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-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 {{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>
      <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>