<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>

  <scroll-view class="content" scroll-y style="padding-top: 194rpx">
    <view class="tab-content">
      <view class="special-offers">
        <view class="offer-card {{item.vipType}}" wx:for="{{products}}" wx:key="id" bindtap="openProductPay" data-id="{{item.id}}" style="{{item.gradient}}">
          <view class="offer-tag" wx:if="{{item.tagText}}" style="{{item.tagStyle}}">{{item.tagText}}</view>
          <view class="offer-body">
            <view class="offer-price-row">
              <text class="offer-symbol">¥</text>
              <text class="offer-price">{{item.price}}</text>
              <text class="offer-oprice" wx:if="{{item.originalPrice}}">¥{{item.originalPrice}}</text>
            </view>
            <text class="offer-title">{{item.title}}</text>
            <text class="offer-sub">{{item.subtitle}}</text>
          </view>
          <view class="offer-btn">立即购买</view>
        </view>
      </view>

      <view class="member-center" wx:if="{{vipPackages.length}}">
        <view class="section-head">
          <view class="section-indicator" />
          <text class="section-title">套餐内容</text>
        </view>

        <view class="vip-list">
          <view class="vip-item" wx:for="{{vipPackages}}" wx:key="id" bindtap="openProductPay" data-id="{{item.id}}" style="{{item.borderStyle}}">
            <view class="vip-tag-corner" wx:if="{{item.isRecommend}}">推荐</view>
            <view class="vip-main">
              <view class="vip-icon-box" style="{{item.iconGradient}}">
                <app-icon name="{{item.icon}}" size="48" color="#ffffff" />
              </view>
              <view class="vip-info">
                <text class="vip-title">{{item.title}}</text>
                <text class="vip-desc">{{item.subtitle}}</text>
              </view>
              <view class="vip-price-col">
                <text class="vip-price" style="{{item.priceColor}}">¥{{item.price}}</text>
                <text class="vip-oprice" wx:if="{{item.originalPrice}}">¥{{item.originalPrice}}</text>
              </view>
            </view>
            
            <view class="vip-benefits" wx:if="{{item.benefits && item.benefits.length}}">
              <view class="benefit-row" wx:for="{{item.benefits}}" wx:key="*this" wx:for-item="benefit">
                <app-icon name="check" size="32" color="{{item.checkColor}}" />
                <text class="benefit-text">{{benefit}}</text>
              </view>
            </view>

            <button class="btn-reset vip-buy-btn" style="{{item.btnGradient}}">立即购买</button>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>

  <!-- Modal -->
  <view wx:if="{{modal.visible}}" class="modal">
    <view class="mask" catchtap="closeModal" />
    <view class="sheet">
      <view class="sheet-head">
        <text class="sheet-title">确认订单</text>
        <text class="sheet-sub">请确认您的购买信息</text>
      </view>

      <view class="sheet-card">
        <view class="sheet-icon-box">
           <app-icon name="crown" size="56" color="#B06AB3" />
        </view>
        <view class="sheet-info">
          <text class="sheet-name">{{modal.title}}</text>
          <text class="sheet-desc">购买开通</text>
        </view>
        <view class="sheet-price-box">
          <text class="sheet-price-val">¥{{modal.price}}</text>
        </view>
      </view>

      <view class="vip-benefits" wx:if="{{modal.benefits && modal.benefits.length}}">
        <view class="benefit-row" wx:for="{{modal.benefits}}" wx:key="*this" wx:for-item="benefit">
          <app-icon name="check" size="32" color="#B06AB3" />
          <text class="benefit-text">{{benefit}}</text>
        </view>
      </view>

      <button class="btn-reset sheet-btn" bindtap="confirmAction">
        立即支付
      </button>
    </view>
  </view>
</view>
