<view class="page-container">
  <!-- 我的积分 -->
  <view class="card points-header">
    <view class="points-num">我的积分：{{myPoints}}</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="ex-grid" wx:if="{{activeTab==='shop'}}">
    <view class="card ex-item" wx:for="{{products}}" wx:key="id" data-id="{{item.id}}" bindtap="openExchange">
      <image class="ex-image" src="{{item.image}}" mode="aspectFill" />
      <view class="ex-info">
        <view class="ex-name text-ellipsis-2">{{item.name}}</view>
        <view class="ex-points"><text class="ex-points-num">{{item.points}}</text> 积分</view>
        <view class="ex-stock" wx:if="{{item.stock <= 0}}">已兑完</view>
        <button class="btn btn-warn btn-small" wx:else>兑换</button>
      </view>
    </view>
    <empty-state wx:if="{{!loading && products.length===0}}" text="暂无积分商品" />
  </view>

  <!-- 兑换记录 -->
  <view class="card" wx:if="{{activeTab==='orders'}}">
    <view class="ex-order" wx:for="{{orders}}" wx:key="id">
      <view class="ex-order-top">
        <text>{{item.product_name}}</text>
        <text class="ex-order-status">{{item.status}}</text>
      </view>
      <view class="ex-order-sub">
        <text>{{item.points}} 积分 × {{item.quantity}}</text>
        <text class="ex-order-time">{{item.created_at}}</text>
      </view>
    </view>
    <empty-state wx:if="{{!loading && orders.length===0}}" text="暂无兑换记录" />
  </view>

  <!-- 兑换弹窗 -->
  <view class="modal-mask" wx:if="{{showExchange}}" bindtap="closeExchange">
    <view class="modal-card" catchtap="noop">
      <view class="modal-title">兑换 {{current.name}}</view>
      <view class="goods-info" wx:if="{{current}}">
        <text class="goods-points">{{current.points}} 积分/件，库存 {{current.stock}}</text>
        <view class="qty-row">
          <text class="qty-btn" bindtap="onQtySub">-</text>
          <text class="qty-num">{{qty}}</text>
          <text class="qty-btn" bindtap="onQtyAdd">+</text>
        </view>
      </view>
      <view class="modal-form">
        <view class="form-label">收货人</view>
        <input class="form-input" data-key="name" bindinput="onRecipient" placeholder="收货人姓名" />
        <view class="form-label">手机号</view>
        <input class="form-input" data-key="phone" type="number" bindinput="onRecipient" placeholder="收货手机号" />
        <view class="form-label">收货地址</view>
        <input class="form-input" data-key="address" bindinput="onRecipient" placeholder="详细地址" />
        <view class="form-label">备注</view>
        <input class="form-input" data-key="remark" bindinput="onRecipient" placeholder="选填" />
      </view>
      <button class="btn btn-primary btn-block" bindtap="submitExchange" disabled="{{submitting}}">确认兑换</button>
    </view>
  </view>
</view>
