Mini-Program/pages/order/index.wxml

<view class="order-page">
  <!-- 订单状态标签栏 -->
  <view class="order-tabs">
    <view class="tab-item {{activeTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">全部</view>
    <view class="tab-item {{activeTab === 'unpaid' ? 'active' : ''}}" bindtap="switchTab" data-tab="unpaid">待付款</view>
    <view class="tab-item {{activeTab === 'completed' ? 'active' : ''}}" bindtap="switchTab" data-tab="completed">已完成</view>
  </view>

  <!-- 时间筛选组件 -->
  <view class="date-filter">
    <view class="date-filter-row">
      <view class="date-picker">
        <view class="date-label">开始日期:</view>
        <picker mode="date" value="{{dateRange.start}}" bindchange="bindStartDateChange">
          <view class="picker">
            {{dateRange.start || '请选择'}}
          </view>
        </picker>
      </view>
      <view class="date-picker">
        <view class="date-label">结束日期:</view>
        <picker mode="date" value="{{dateRange.end}}" bindchange="bindEndDateChange">
          <view class="picker">
            {{dateRange.end || '请选择'}}
          </view>
        </picker>
      </view>
    </view>
    <view class="filter-actions">
      <button class="reset-btn" bindtap="resetDateFilter">重置</button>
      <button class="apply-btn" bindtap="applyDateFilter">应用筛选</button>
    </view>
  </view>

  <!-- 统计信息 -->
  <view class="statistics-card">
    <view class="statistics-header">
      <text class="statistics-title">订单统计</text>
    </view>
    <view class="statistics-body">
      <view class="stat-item">
        <view class="stat-label">总订单数</view>
        <view class="stat-value">{{statistics.totalOrders}}</view>
      </view>
      <view class="stat-item">
        <view class="stat-label">总件数</view>
        <view class="stat-value">{{statistics.totalPieces}}</view>
      </view>
      <view class="stat-item">
        <view class="stat-label">总斤数</view>
        <view class="stat-value">{{statistics.totalWeight}}</view>
      </view>
      <view class="stat-item">
        <view class="stat-label">已消费</view>
        <view class="stat-value paid">¥{{statistics.paidAmount}}</view>
      </view>
    </view>
  </view>

  <!-- 订单列表 -->
  <view class="order-list">
    <!-- 加载中 -->
    <view wx:if="{{loading}}" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 错误提示 -->
    <view wx:elif="{{error}}" class="error">
      <text>{{error}}</text>
    </view>

    <!-- 无订单提示 -->
    <view wx:elif="{{orders.length === 0}}" class="no-orders">
      <view class="no-orders-icon">📦</view>
      <view class="no-orders-title">空空如也~</view>
      <view class="no-orders-subtitle">您还没有任何订单，快去选购吧</view>
      <button class="go-shopping-btn" bindtap="goToHome">去首页购物</button>
    </view>

    <!-- 订单列表 -->
    <view wx:else class="orders">
      <view wx:for="{{orders}}" wx:key="dataid" class="order-card" bindtap="viewOrderDetail" data-order-id="{{item.dataid}}">
        <!-- 订单头部 -->
        <view class="order-header">
          <view class="order-no">订单号: {{item.sales_no}}</view>
          <view class="order-date">{{item.order_date}}</view>
        </view>
        
        <!-- 订单主体 -->
        <view class="order-body">
          <view class="customer-info">
            <view class="customer-company">{{item.customer_company}}</view>
            <view class="contact-person">{{item.contact_person}} {{item.phone}}</view>
          </view>
          <view class="order-summary">
            <view class="total-amount">总金额: ¥{{item.total_amount}}</view>
            <view class="total-pieces">总件数: {{item.total_pieces}}</view>
            <view class="total-weight">总斤数: {{item.total_weight}}</view>
          </view>
        </view>
        
        <!-- 订单底部 -->
        <view class="order-footer">
          <view class="status-container">
            <view class="payment-status">{{item.payment_status}}</view>
            <view class="order-status">{{item.order_status}}</view>
          </view>
          <view class="arrow-icon">→</view>
        </view>
      </view>
      
      <!-- 分页加载状态 -->
      <view class="load-more">
        <view wx:if="{{loadingMore}}" class="loading-more">
          <text>加载中...</text>
        </view>
        <view wx:elif="{{!hasMore && orders.length > 0}}" class="no-more">
          <text>没有更多数据了</text>
        </view>
      </view>
    </view>
  </view>
</view>