wxamp-ymtxUser/pagesA/pages/expertChat/expertChat.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">
        <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>