wechatShopUni/pages/order/list.wxml

<!--pages/order/list.wxml-->
<view class="container">
  <!-- 订单状态标签栏 -->
  <view class="tab-bar">
    <view class="tab-item {{currentTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-type="all">
      <text>全部</text>
    </view>
    <view class="tab-item {{currentTab === 'pending' ? 'active' : ''}}" bindtap="switchTab" data-type="pending">
      <text>待结算</text>
    </view>
    <view class="tab-item {{currentTab === 'settled' ? 'active' : ''}}" bindtap="switchTab" data-type="settled">
      <text>已结算</text>
    </view>
    <view class="tab-item {{currentTab === 'invalid' ? 'active' : ''}}" bindtap="switchTab" data-type="invalid">
      <text>无效</text>
    </view>
  </view>

  <!-- 订单列表 -->
  <scroll-view class="order-list" scroll-y="true" bindscrolltolower="loadMore" enhanced="true" show-scrollbar="false">
    <view class="order-item" wx:for="{{orderList}}" wx:key="id">
      <!-- 订单头部 -->
      <view class="order-header">
        <text class="order-time">{{item.createTime}}</text>
        <text class="order-status {{item.status}}">{{item.statusText}}</text>
      </view>
      <!-- 商品信息 -->
      <view class="goods-list">
        <view class="goods-item" bindtap="navigateToGoods" data-id="{{item.goods.id}}">
          <image class="goods-image" src="{{item.goods.image}}" mode="aspectFill" lazy-load></image>
          <view class="goods-info">
            <view class="goods-name">{{item.goods.name}}</view>
            <view class="goods-price-count">
              <text class="goods-price">¥{{item.goods.price}}</text>
              <text class="goods-count">x{{item.goods.count}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 订单底部 -->
      <view class="order-footer">
        <view class="commission-info">
          <text class="label">预估佣金</text>
          <text class="commission">¥{{item.commission}}</text>
          <text class="rate">{{item.commissionRate}}%</text>
        </view>
        <view class="settlement-info" wx:if="{{item.status === 'settled'}}">
          <text class="label">结算时间</text>
          <text>{{item.settlementTime}}</text>
        </view>
        <view class="invalid-reason" wx:if="{{item.status === 'invalid'}}">
          <text class="label">无效原因</text>
          <text>{{item.invalidReason}}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="loading" wx:if="{{loading}}">
      <text>加载中...</text>
    </view>
    <view class="no-more" wx:if="{{!hasMore && orderList.length > 0}}">
      <text>没有更多订单了</text>
    </view>
    <!-- 空状态 -->
    <view class="empty" wx:if="{{!loading && orderList.length === 0}}">
      <image class="empty-icon" src="/static/images/empty-order.png" mode="aspectFit"></image>
      <text>暂无推广订单~\n快去推广商品赚取佣金吧</text>
    </view>
  </scroll-view>
</view>