qt_books/pages/chat/chat.wxml

<!--pages/chat/chat.wxml-->
<view class="container">
  <!-- 消息列表 -->
  <scroll-view 
    class="messages-container" 
    scroll-y="true" 
    scroll-into-view="{{scrollIntoView}}"
    id="messages"
  >
    <view class="messages" wx:if="{{messages.length > 0}}">
      <view 
        class="message-item {{item.role === 'user' ? 'user-message' : 'assistant-message'}}"
        wx:for="{{messages}}"
        wx:key="index"
        id="msg-{{index}}"
      >
        <view class="message-row {{item.role === 'user' ? 'row-right' : 'row-left'}}">
          <view class="avatar {{item.role === 'user' ? 'avatar-user' : 'avatar-assistant'}}">
            <text>{{item.role === 'user' ? '我' : '老'}}</text>
          </view>
          <view class="message-content">
            <text class="message-text">{{item.content}}</text>
          </view>
        </view>
        <view class="message-time {{item.role === 'user' ? 'time-right' : 'time-left'}}">{{formatTime(item.timestamp)}}</view>
      </view>
    </view>
    
    <!-- 加载中 -->
    <view class="loading" wx:if="{{loading}}">
      <text>加载中...</text>
    </view>
    
    <!-- 空状态 -->
    <view class="empty" wx:if="{{!loading && messages.length === 0}}">
      <view class="empty-icon">💬</view>
      <text class="empty-title">老舅AI智能客服</text>
      <text class="empty-tip">开始对话吧~</text>
    </view>
  </scroll-view>

  <!-- 输入区域 -->
  <view class="input-container">
    <input 
      class="input-box" 
      type="text" 
      placeholder="输入消息..." 
      value="{{inputMessage}}"
      bindinput="onInput"
      bindconfirm="sendMessage"
      disabled="{{sending}}"
    />
    <button 
      class="send-btn" 
      bindtap="sendMessage"
      disabled="{{sending || !inputMessage.trim()}}"
    >
      {{sending ? '发送中...' : '发送'}}
    </button>
  </view>
</view>