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

<view class="consult-page">
  <!-- 头部专家信息 -->
  <view class="consult-header">
    <view class="header-content">
      <view class="header-center">
        <view class="expert-info">
          <text class="expert-name">{{conversation.otherUserName}}</text>
          <view class="expert-status">
            <view class="status-dot online"></view>
            <text class="status-text">在线</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="date-divider" wx:if="{{showDateDivider}}">
      <text class="date-text">{{todayDate}}</text>
    </view>


    <!-- 消息列表 -->
    <block wx:for="{{messageList}}" wx:key="index">
      <!-- 对方消息 -->
      <view class="message-item message-left" wx:if="{{!item.isMe}}">
        <view class="message-avatar">
          <image src="{{conversation.otherUserAvatar?baseUrl+conversation.otherUserAvatar:' /pages/images/tx.png'}}" class="avatar-img"></image>
        </view>
        
        <view class="message-content-wrapper">
          <view class="message-arrow arrow-left"></view>
          
          <!-- 文本消息 -->
          <view class="message-bubble bubble-left" wx:if="{{item.contentType === 'text'}}">
            <text class="message-text">{{item.content}}</text>
          </view>
          
          <!-- 图片消息 -->
          <view class="media-bubble" wx:elif="{{item.contentType === '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.contentType === 'video'}}">
            <video 
              src="{{item.content}}" 
              class="message-video" 
              controls 
              show-center-play-btn
              poster="{{item.thumb}}"
              object-fit="contain"
            ></video>
          </view>
          
          <!-- 文件消息 -->
          <view class="message-bubble bubble-left message-file" wx:elif="{{item.contentType === '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>
          
          <!-- 消息状态 - 仅对方消息显示已读状态 -->
          <view class="message-status" wx:if="{{item.status === 'read'}}">
            <text class="status-text">已读</text>
          </view>
        </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.contentType === 'text'}}">
            <text class="message-text">{{item.content}}</text>
          </view>
          
          <!-- 图片消息 -->
          <view class="media-bubble" wx:elif="{{item.contentType === '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.contentType === 'video'}}">
            <video 
              src="{{item.content}}" 
              class="message-video" 
              controls 
              show-center-play-btn
              poster="{{item.thumb}}"
              object-fit="contain"
            ></video>
            <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.contentType === '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>
        
        <view class="message-avatar">
          <image src="{{conversation.userAvatar?baseUrl+conversation.userAvatar:'/pages/images/tx.png'}}" class="avatar-img"></image>
        </view>
      </view>
    </block>
    
    <view class="chat-bottom-space"></view>
    
    <view class="load-more-tip" wx:if="{{loadingMore}}">
      <text>加载中...</text>
    </view>
    
    <view class="empty-tip" wx:if="{{messageList.length === 0 && !loading}}">
      <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>
      
      <view class="sheet-bottom">
        <text class="bottom-tip">最多可选择9张照片</text>
      </view>
    </view>
  </view>
</view>