<!-- VIP 会员 + 积分充值页 -->
<view class="vip-page">
  <image wx:if="{{imgUrls.pageBg}}" class="page-bg" src="{{imgUrls.pageBg}}" mode="widthFix" />
  <view class="page-bg-fallback" wx:else></view>

  <view class="page-body">
    <view class="user-row">
      <image class="user-avatar" src="{{avatarUrl}}" mode="aspectFill" binderror="onAvatarError" />
      <view class="user-info">
        <text class="user-name">{{nickname || '打手'}}</text>
        <text class="user-id">会员ID: {{uid || '--'}}</text>
      </view>
      <view class="member-badge">{{memberBadge}}</view>
    </view>

    <swiper
      class="vip-swiper"
      current="{{currentHuiyuanIndex}}"
      circular="{{huiyuanList.length > 1}}"
      previous-margin="40rpx"
      next-margin="40rpx"
      duration="400"
      bindchange="onSwiperChange">
      <swiper-item wx:for="{{huiyuanList}}" wx:key="id">
        <view class="vip-card {{index === currentHuiyuanIndex ? 'vip-card--active' : ''}}" data-index="{{index}}" bindtap="selectHuiyuan">
          <image wx:if="{{item.cardBgUrl}}" class="vip-card-bg-img" src="{{item.cardBgUrl}}" mode="aspectFill" />
          <view class="vip-card-bg" wx:else></view>
          <view class="vip-card-inner">
            <view class="vip-card-left">
              <view class="vip-title-row">
                <text class="vip-name">{{item.mingzi}}</text>
                <view class="vip-status">{{item.isBought ? '已激活' : '未激活'}}</view>
              </view>
              <view class="vip-price-row">
                <text class="vip-currency">¥</text>
                <text class="vip-price">{{item.jiage}}</text>
              </view>
              <text class="vip-validity">有效期 {{item.formal_days || 30}} 天</text>
            </view>
            <view class="vip-card-right">
              <view class="icon-clip icon-clip-vip" wx:if="{{item.cardImageUrl}}">
                <image class="icon-clip-img" src="{{item.cardImageUrl}}" mode="aspectFill" />
              </view>
              <view class="vip-logo-fallback" wx:else>
                <text class="vip-logo-text">VIP</text>
              </view>
            </view>
          </view>
          <view class="vip-shimmer"></view>
        </view>
      </swiper-item>
    </swiper>

    <view class="section-head">
      <view class="section-bar"></view>
      <text class="section-title">{{currentHuiyuan.mingzi || '会员'}}规则</text>
    </view>
    <scroll-view class="rules-scroll" scroll-x enable-flex>
      <view class="rules-row">
        <view wx:for="{{detailRules}}" wx:key="index" class="rule-card">
          <view class="rule-num">{{index + 1}}</view>
          <text class="rule-text">{{item}}</text>
        </view>
      </view>
    </scroll-view>

    <view class="section-head">
      <view class="section-bar"></view>
      <text class="section-title">{{currentHuiyuan.mingzi || '会员'}}专属权益</text>
    </view>
    <view class="benefits-row">
      <view wx:for="{{memberBenefits}}" wx:key="title" class="benefit-card">
        <view wx:if="{{item.iconUrl}}" class="icon-clip icon-clip-benefit">
          <image class="icon-clip-img" src="{{item.iconUrl}}" mode="aspectFill" />
        </view>
        <text class="benefit-title">{{item.title}}</text>
        <text class="benefit-desc">{{item.desc}}</text>
      </view>
    </view>

    <view class="section-head">
      <view class="section-bar"></view>
      <text class="section-title">平台优势</text>
    </view>
    <view class="advantage-grid">
      <view wx:for="{{platformAdvantages}}" wx:key="title" class="advantage-item">
        <view wx:if="{{item.iconUrl}}" class="icon-clip icon-clip-advantage">
          <image class="icon-clip-img" src="{{item.iconUrl}}" mode="aspectFill" />
        </view>
        <text class="advantage-title">{{item.title}}</text>
        <text class="advantage-desc">{{item.desc}}</text>
      </view>
    </view>

    <view id="jifen-section" class="jifen-section">
      <view class="section-head">
        <view class="section-bar"></view>
        <text class="section-title">积分充值</text>
      </view>
      <view class="jifen-card">
        <view class="jifen-left">
          <text class="jifen-label">当前积分</text>
          <text class="jifen-value">{{jifen}}</text>
          <text class="jifen-tip" wx:if="{{jifen < 10}}">积分不足将影响接单与提现</text>
          <text class="jifen-tip jifen-tip--ok" wx:else>积分充足</text>
        </view>
        <view class="jifen-btn {{jifen >= 10 ? 'jifen-btn--disabled' : ''}}" bindtap="onJifenClick" data-disabled="{{jifen >= 10}}">
          {{jifen >= 10 ? '已满' : '补充积分'}}
        </view>
      </view>
    </view>

    <view class="owned-section" wx:if="{{clubmber.length > 0}}">
      <view class="section-head">
        <view class="section-bar"></view>
        <text class="section-title">我的会员</text>
      </view>
      <view wx:for="{{clubmber}}" wx:key="huiyuanid" class="owned-item" data-item="{{item}}" bindtap="showMemberDetail">
        <text class="owned-name">{{item.huiyuanming}}</text>
        <text class="owned-expire">到期 {{formatDaoqiTime(item.daoqi)}}</text>
      </view>
    </view>
  </view>

  <view class="footer-bar">
    <view class="deposit-banner" bindtap="goToDeposit">
      <text class="deposit-banner-text">缴纳履约金，快人一步</text>
      <text class="deposit-banner-link">去缴纳 ></text>
    </view>
    <view class="agree-row" bindtap="toggleAgree">
      <view class="agree-check {{agreed ? 'agree-check--on' : ''}}">{{agreed ? '✓' : ''}}</view>
      <text class="agree-text">已阅读并同意</text>
      <text class="agree-link">《{{currentHuiyuan.mingzi || '会员'}}协议》</text>
    </view>
    <view class="buy-row">
      <view
        wx:if="{{currentHuiyuan.can_buy_trial}}"
        class="buy-btn buy-btn--outline"
        bindtap="onTapTrial"
        data-id="{{currentHuiyuan.id}}"
        data-trial="true">
        体验会员 (￥{{currentHuiyuan.trial_price}})
      </view>
      <view
        class="buy-btn buy-btn--primary {{currentHuiyuan.can_buy_trial ? '' : 'buy-btn--full'}}"
        bindtap="onTapFormal"
        data-id="{{currentHuiyuan.id}}"
        data-trial="false">
        {{currentHuiyuan.isBought ? '续费正式会员' : '升级正式会员'}} (￥{{currentHuiyuan.jiage}})
        <view class="buy-btn-shimmer"></view>
      </view>
    </view>
  </view>
</view>

<!-- 支付方式 -->
<view class="modal-mask" wx:if="{{showPayMethodModal}}" bindtap="hidePayMethodModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">选择支付方式</text>
    <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="wx">
      <text class="pay-method-name">微信支付</text>
      <text class="pay-method-desc">安全快捷</text>
    </view>
    <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="alipay">
      <text class="pay-method-name">支付宝</text>
      <text class="pay-method-desc">扫码支付</text>
    </view>
    <view class="pay-method-item" bindtap="onPayMethodSelect" data-method="balance">
      <text class="pay-method-name">余额抵扣</text>
      <text class="pay-method-desc">使用佣金或分红</text>
    </view>
  </view>
</view>

<view class="modal-mask" wx:if="{{showBalanceModal}}" bindtap="hideBalanceModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">选择抵扣身份</text>
    <view wx:for="{{balanceOptions}}" wx:key="id" class="balance-item" bindtap="onBalanceSelect" data-id="{{item.id}}">
      <text>{{item.jieshao}}</text>
      <text class="balance-need">需¥{{item.xuyao}}</text>
    </view>
  </view>
</view>

<view class="modal-mask" wx:if="{{showConfirmModal}}" bindtap="hideConfirmModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">确认抵扣</text>
    <view class="confirm-row"><text>身份</text><text>{{selectedBalanceInfo.jieshao}}</text></view>
    <view class="confirm-row"><text>金额</text><text>¥{{selectedBalanceInfo.xuyao}}</text></view>
    <view class="modal-actions">
      <view class="modal-btn cancel" bindtap="hideConfirmModal">取消</view>
      <view class="modal-btn confirm" bindtap="confirmBalancePay">确认支付</view>
    </view>
  </view>
</view>

<view class="modal-mask" wx:if="{{showMemberModal}}" bindtap="hideMemberModal">
  <view class="modal-panel" catchtap="stopPropagation">
    <text class="modal-title">会员详情</text>
    <view class="confirm-row"><text>名称</text><text>{{currentMemberDetail.huiyuanming}}</text></view>
    <view class="confirm-row"><text>到期</text><text>{{currentMemberDetail.daoqi}}</text></view>
    <view class="confirm-row"><text>剩余</text><text>{{formatRemainTime(currentMemberDetail.daoqi)}}</text></view>
  </view>
</view>

<view class="loading-mask" wx:if="{{payLoading}}">
  <view class="loading-box">
    <view class="loading-spinner"></view>
    <text>{{loadingText}}</text>
  </view>
</view>

<global-notification id="global-notification" />
<popup-notice id="popupNotice" />
