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

<view class="chat-page-container">
  <view class="chat-header">
    <view class="header-info">
      <text class="header-name">{{chatTitle}}</text>
    </view>
  </view>
  
  <scroll-view
    id="chatScrollView"
    scroll-y
    scroll-top="{{scrollTop}}"
    scroll-with-animation="{{scrollWithAnimation}}"
    class="chat-content"
    bindscroll="onScroll"
  >
    <view class="chat-messages">
      <block wx:if="{{loading && messages.length === 0}}">
        <view class="loading">加载中...</view>
      </block>
      <block wx:elif="{{messages.length === 0}}">
        <view class="empty-messages">暂无聊天记录</view>
      </block>
      <block wx:else>
        <!-- 动态渲染聊天消息 -->
        <view wx:for="{{messages}}" wx:key="id" class="message-item {{item.sender}} {{item.isNew ? 'new' : ''}}">
          <!-- 对方消息 -->
          <view wx:if="{{item.sender === 'other'}}" class="avatar">
            <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
          </view>
          <view class="message-bubble">
            <!-- 商品卡片消息 -->
            <view wx:if="{{item.goodsData}}" class="goods-message-card">
              <goods-card 
                id="{{item.goodsData.id}}"
                name="{{item.goodsData.name}}"
                image-url="{{item.goodsData.imageUrl}}"
                price="{{item.goodsData.price}}"
                region="{{item.goodsData.region}}"
                display-specification="{{item.goodsData.displaySpecification}}"
                display-yolk="{{item.goodsData.displayYolk}}"
                source-type="{{item.goodsData.sourceType}}"
                total-stock="{{item.goodsData.totalStock}}"
                supply-status="{{item.goodsData.supplyStatus}}"
                status="{{item.goodsData.status}}"
              ></goods-card>
            </view>
            <!-- 普通文本消息 -->
            <text wx:else class="message-content">{{item.content}}</text>
            <text class="message-time">{{item.time}}</text>
          </view>
          <!-- 自己的消息 -->
          <view wx:if="{{item.sender === 'me'}}" class="avatar">
            <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  
  <!-- 新消息提示按钮 -->
  <view wx:if="{{hasNewMessages}}" class="new-message-tip" bindtap="scrollToBottom">
    <text>有{{newMessageCount}}条新消息，点击查看</text>
  </view>
  
  <view class="chat-input-area">
    <input class="message-input" placeholder="请输入消息" bindinput="onInputChange" value="{{inputValue}}"></input>
    <button class="send-button" bindtap="sendMessage">发送</button>
  </view>
</view>