<view class="page safe-bottom">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left" bindtap="onBack">
      <image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
      <text class="unified-back-text">返回</text>
    </view>
    <text class="unified-header-title">我的订单</text>
    <view class="unified-header-right"></view>
  </view>

  <view class="tabs-fixed" style="top: {{totalNavHeight}}px">
    <view class="tab-item {{currentTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">全部</view>
    <view class="tab-item {{currentTab === 'pending' ? 'active' : ''}}" bindtap="switchTab" data-tab="pending">待支付</view>
    <view class="tab-item {{currentTab === 'paid' ? 'active' : ''}}" bindtap="switchTab" data-tab="paid">已支付</view>
    <view class="tab-item {{currentTab === 'completed' ? 'active' : ''}}" bindtap="switchTab" data-tab="completed">已完成</view>
  </view>

  <view class="wrap" style="padding-top: {{totalNavHeight + 60}}px; padding-bottom: 40rpx;">
    <view wx:if="{{loading}}" class="loading">加载中...</view>
    <view wx:elif="{{list.length === 0}}" class="empty">暂无数据</view>
    <view wx:else class="order-list">
      <view class="order-card" wx:for="{{list}}" wx:key="id">
        <view class="card-header">
          <text class="order-time">{{item.createdAtText}}</text>
          <text class="order-status {{item.statusClass}}">{{item.status}}</text>
        </view>
        <view class="card-body">
          <view class="body-left">
            <text class="order-title">{{item.title}}</text>
            <text class="order-desc" wx:if="{{item.desc}}">{{item.desc}}</text>
          </view>
          <view class="body-right">
            <text class="order-amount">{{item.amountText}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
