Mini-Program/pages/chat-detail/index.wxml

<view class="chat-detail-container">
  <!-- 连接状态显示 -->
  <view wx:if="{{!isMockMode}}" class="connection-status {{connectionStatus}}">
    <text class="status-text">{{connectionMessage}}</text>
    <button wx:if="{{connectionStatus === 'error' || connectionStatus === 'disconnected'}}" 
      class="reconnect-btn" 
      size="mini" 
      bindtap="reconnect">
      重新连接
    </button>
  </view>
  
  <!-- 测试模式切换 -->
  <view class="test-mode-switch">
    <switch wx:if="{{!isMockMode}}" checked="{{!isMockMode}}" bindchange="toggleMockMode" />
    <text wx:if="{{!isMockMode}}" class="mode-label">模拟模式切换</text>
  </view>
  
  <!-- 消息列表区域 - 微信风格 -->
  <scroll-view 
    id="message-list" 
    class="wechat-message-list" 
    scroll-y 
    bindscrolltoupper="loadMoreMessages"
    bindscroll="onScroll"
    scroll-top="{{scrollTop}}"
    scroll-with-animation
  >
    <!-- 消息容器 -->
    <view class="wechat-message-container">
      <!-- 遍历消息列表 -->
      <block wx:for="{{messages}}" wx:key="index">
        <!-- 时间显示 - 条件显示 -->
        <view wx:if="{{item.showTime}}" class="wechat-time-display">
          <text class="wechat-time-text">{{item.time}}</text>
        </view>
        
        <!-- 系统消息（如诈骗提示）-->
        <view wx:if="{{item.type === 'system'}}" class="wechat-system-message">
          <view class="wechat-system-content">
            <view wx:if="{{item.isWarning}}" class="wechat-warning-title">谨防诈骗</view>
            <text class="wechat-system-text">{{item.content}}</text>
          </view>
        </view>

        <!-- 对方消息 -->
        <view wx:elif="{{item.type === 'message' && item.sender === 'other'}}" class="wechat-message-item wechat-other-message" id="msg_{{index}}">
          <view class="wechat-avatar">
            <text class="wechat-avatar-text">{{userName ? userName.charAt(0) : (avatar || '用')}}</text>
          </view>
          <!-- 图片消息直接显示 -->
          <image wx:if="{{item.isImage}}" src="{{item.content}}" class="wechat-message-image wechat-other-image" mode="aspectFit" bindtap="previewImage" data-src="{{item.content}}" />
          <!-- 文本消息仍然显示在气泡中 -->
          <view wx:elif="{{!item.isImage}}" class="wechat-message-wrapper">
            <view class="wechat-message-name">{{userName}}</view>
            <view class="wechat-message-bubble wechat-other-bubble">
              <text class="wechat-message-text">{{item.content}}</text>
            </view>
          </view>
        </view>
        <!-- 我的消息 -->
        <view wx:elif="{{item.type === 'message' && item.sender === 'me'}}" class="wechat-message-item wechat-my-message" id="msg_{{index}}">
          <!-- 图片消息直接显示 -->
          <image wx:if="{{item.isImage}}" src="{{item.content}}" class="wechat-message-image wechat-my-image" mode="aspectFit" bindtap="previewImage" data-src="{{item.content}}" />
          <!-- 文本消息仍然显示在气泡中 -->
          <view wx:elif="{{!item.isImage}}" class="wechat-message-wrapper wechat-my-wrapper">
            <view class="wechat-message-bubble wechat-my-bubble">
              <text class="wechat-message-text wechat-my-text">{{item.content}}</text>
            </view>
          </view>
          <view class="wechat-avatar wechat-my-avatar">
            <text class="wechat-avatar-text">我</text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  
  <!-- 到达最底部按钮 -->
  <view wx:if="{{showScrollToBottomBtn}}" class="scroll-to-bottom-btn" bindtap="scrollToBottom">
    <text class="scroll-btn-text">到达最底部</text>
  </view>

  <!-- 输入区域 - 微信风格 -->
  <view class="wechat-input-area">
    <view class="wechat-input-toolbar">
      <view class="wechat-input-left">
        <view class="wechat-emoji-btn" bindtap="showEmoji">😊</view>
        <view class="wechat-voice-btn" bindtap="toggleVoiceMode">🔊</view>
      </view>
      <view class="wechat-input-wrapper">
        <input 
          class="wechat-message-input" 
          value="{{inputValue}}" 
          bindinput="onInput" 
          placeholder="消息" 
          placeholder-style="color: #999999;"
          adjust-position
          maxlength="500"
        />
      </view>
      <view class="wechat-input-right">
        <view class="wechat-more-btn" bindtap="showMoreOptions">+</view>
        <view class="wechat-send-btn" bindtap="sendMessage" disabled="{{!inputValue.trim()}}">发送</view>
      </view>
    </view>
  </view>
</view>