<view class="container">
    <view class="header">
        <text class="title">优惠券中心</text>
    </view>
    
    <!-- VIP Banner -->
    <view class="vip-banner">
        <view class="vip-content">
            <view class="vip-title">
                <text class="icon">🎁</text> VIP 会员权益
            </view>
            <view class="vip-desc">每月免费领取 3 张大额优惠券</view>
        </view>
        <view class="vip-btn">立即开通</view>
    </view>

    <!-- Coupon List -->
    <view class="section-title">可领取的优惠券</view>
    <view class="coupon-list">
        <block wx:for="{{coupons}}" wx:key="id">
            <view class="coupon-card {{item.status === 'claimed' ? 'claimed' : ''}}" bindtap="handleClaim" data-id="{{item.id}}">
                <view class="coupon-left">
                    <view class="amount">
                        <text class="num">{{item.amount}}</text>
                        <text class="unit">{{item.unit}}</text>
                    </view>
                    <view class="info">
                        <view class="coupon-name">{{item.title}}</view>
                        <view class="coupon-desc">{{item.desc}}</view>
                    </view>
                </view>
                <view class="coupon-right">
                    <text class="btn-text">{{item.status === 'claimed' ? '已领取' : '领取'}}</text>
                </view>
            </view>
        </block>
    </view>
</view>
