wechatShopUni/pages/distribution/order.wxml

<!--pages/distribution/order.wxml-->
<view class="container">
  <!-- 状态切换标签 -->
  <view class="tabs">
    <view class="tab {{currentTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">全部</view>
    <view class="tab {{currentTab === 'pending' ? 'active' : ''}}" bindtap="switchTab" data-tab="pending">待付款</view>
    <view class="tab {{currentTab === 'paid' ? 'active' : ''}}" bindtap="switchTab" data-tab="paid">已付款</view>
    <view class="tab {{currentTab === 'completed' ? 'active' : ''}}" bindtap="switchTab" data-tab="completed">已完成</view>
  </view>

  <!-- 订单列表 -->
  <scroll-view scroll-y="true" class="order-list" bindscrolltolower="loadMore">
    <view class="order-item" wx:for="{{orders}}" wx:key="id">
      <view class="order-header">
        <text class="order-time">{{item.createTime}}</text>
        <text class="order-status {{item.status === 'completed' ? 'completed' : ''}}">{{item.statusText}}</text>
      </view>
      
      <view class="goods-info">
        <image class="goods-image" src="{{item.goodsImage}}" mode="aspectFill"></image>
        <view class="goods-detail">
          <view class="goods-name text-overflow">{{item.goodsName}}</view>
          <view class="goods-price">
            <text class="price">¥{{item.price}}</text>
            <text class="quantity">x{{item.quantity}}</text>
          </view>
        </view>
      </view>

      <view class="order-footer">
        <view class="commission-info">
          <text class="label">预计佣金</text>
          <text class="amount">¥{{item.commission}}</text>
        </view>
        <view class="total-info">
          <text class="label">订单金额</text>
          <text class="amount">¥{{item.totalAmount}}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="loading" wx:if="{{loading}}">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 无数据提示 -->
    <view class="empty" wx:if="{{orders.length === 0}}">
      <image class="empty-icon" src="/static/images/empty-order.png" mode="aspectFit"></image>
      <text class="empty-text">暂无订单数据</text>
    </view>
  </scroll-view>
</view>