<view class="page-container">
  <!-- 我的余额 -->
  <view class="card balance-header">
    <text class="balance-label">当前余额</text>
    <view class="balance-num">¥{{balance.toFixed(2)}}</view>
  </view>

  <!-- Tabs -->
  <view class="tabs">
    <view class="tab {{activeTab==='shop'?'tab-active':''}}" data-tab="shop" bindtap="switchTab">充值套餐</view>
    <view class="tab {{activeTab==='orders'?'tab-active':''}}" data-tab="orders" bindtap="switchTab">充值记录</view>
  </view>

  <!-- 套餐 -->
  <view class="rech-grid" wx:if="{{activeTab==='shop'}}">
    <view class="card rech-item" wx:for="{{plans}}" wx:key="id">
      <view class="rech-amount"><text class="price-symbol">¥</text>{{item.amount}}</view>
      <view class="rech-name">{{item.name}}</view>
      <view class="rech-give" wx:if="{{item.give_amount || item.give_points}}">
        <text wx:if="{{item.give_amount}}">送 ¥{{item.give_amount}}</text>
        <text wx:if="{{item.give_points}}">送 {{item.give_points}} 积分</text>
      </view>
      <button class="btn btn-primary btn-small rech-btn" data-id="{{item.id}}" bindtap="onRecharge" disabled="{{submitting}}">立即充值</button>
    </view>
    <empty-state wx:if="{{!loading && plans.length===0}}" text="暂无充值套餐" />
  </view>

  <!-- 充值记录 -->
  <view class="card" wx:if="{{activeTab==='orders'}}">
    <view class="rech-order" wx:for="{{orders}}" wx:key="id">
      <view class="ro-top">
        <text>{{item.order_no}}</text>
        <text class="ro-status">{{item.status}}</text>
      </view>
      <view class="ro-sub">
        <text>¥{{(item.amount||0).toFixed(2)}}</text>
        <text class="ro-time">{{item.created_at}}</text>
      </view>
    </view>
    <empty-state wx:if="{{!loading && orders.length===0}}" text="暂无充值记录" />
  </view>
</view>
