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

<!-- 专家端聊天页面 -->
<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>