<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 + 80}}px; padding-bottom: 40rpx;">
    <view class="card">
      <view class="list">
        <view wx:if="{{loading}}" class="loading">加载中...</view>
        <view wx:elif="{{list.length === 0}}" class="empty">暂无数据</view>
        <view wx:else>
          <view class="row" wx:for="{{list}}" wx:key="id">
            <view class="row-left">
              <text class="row-title">{{item.remark || item.transactionType}}</text>
              <text class="row-sub">{{item.createdAtText}}</text>
            </view>
            <view class="row-right">
              <text class="row-amount">{{item.amountText}}</text>
              <text class="row-status {{item.statusClass}}">{{item.status}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

