MBTI_wang/miniprogram/pages/purchase/index.wxml

<!--pages/purchase/index.wxml - 深度服务（个人/企业 Tab，类目由接口拉取）-->

<!-- 成功弹窗 -->
<view class="success-mask" wx:if="{{successModal.visible}}" bindtap="closeSuccessModal">
  <view class="success-dialog" catchtap="catchTap">
    <view class="success-icon-wrap">
      <view class="success-icon-circle">
        <text class="success-icon-check">✓</text>
      </view>
    </view>
    <text class="success-dialog-title">{{successModal.title}}</text>
    <text class="success-dialog-content">{{successModal.content}}</text>
    <text class="success-dialog-hint">顾问将通过您预留的联系方式与您沟通，请留意来电或短信。</text>
    <view class="success-dialog-btns success-dialog-btns--single">
      <button class="success-btn-close success-btn-close--primary" bindtap="closeSuccessModal">我知道了</button>
    </view>
  </view>
</view>

<view class="container">

  <view wx:if="{{loading}}" class="loading-wrap">
    <text class="loading-text">加载中...</text>
  </view>

  <view wx:elif="{{loadError}}" class="purchase-error-state">
    <view class="purchase-error-ic">⚠️</view>
    <text class="purchase-error-title">加载失败</text>
    <text class="purchase-error-msg">{{loadErrorMsg || '网络异常，请检查后重试'}}</text>
    <view class="purchase-error-btn" bindtap="retryLoad">重新加载</view>
    <text class="purchase-error-hint">若持续失败，请在微信中关闭小程序后再次打开</text>
  </view>

  <block wx:else>
    <view class="deep-hero">
      <text class="deep-hero__eyebrow">UNDERSTAND YOURSELF · 了解自己</text>
      <text class="deep-hero__title">更深入地看见你自己</text>
      <text class="deep-hero__desc">{{deepHeroDesc}}</text>
    </view>

    <view class="tabs-container deep-tabs">
      <view class="tabs-list">
        <view class="tab-item {{activeTab === 'personal' ? 'active' : ''}}" data-tab="personal" bindtap="switchTab">
          <text class="tab-text">个人解读</text>
        </view>
        <view class="tab-item {{activeTab === 'enterprise' ? 'active' : ''}}" data-tab="enterprise" bindtap="switchTab">
          <text class="tab-text">团队与企业</text>
        </view>
      </view>
    </view>

    <!-- 个人版：按类目列表渲染 -->
    <view wx:if="{{activeTab === 'personal'}}">
      <view wx:for="{{personalCategories}}" wx:key="id" class="pricing-card {{index === 0 ? 'featured' : ''}}" style="margin: 24rpx;">
        <view class="card-header">
          <text class="plan-title">{{item.title}}</text>
          <view class="price-section" wx:if="{{item.price !== undefined}}">
            <text class="price-symbol">¥</text>
            <text class="price-amount">{{item.price}}</text>
            <text class="price-unit">{{item.priceUnit || '/次'}}</text>
          </view>
          <text class="plan-subtitle" wx:if="{{item.subtitle}}">{{item.subtitle}}</text>
        </view>
        <view class="features-list" wx:if="{{item.features && item.features.length}}">
          <view class="feature-item" wx:for="{{item.features}}" wx:for-item="f" wx:key="*this">
            <view class="check-icon">✓</view>
            <text class="feature-text">{{f}}</text>
          </view>
        </view>
        <button
          class="purchase-button primary"
          wx:if="{{item.actionType === 'buy' && !hasPhone}}"
          open-type="getPhoneNumber"
          bindgetphonenumber="onGetPhoneNumberForPurchase"
          data-tab="personal"
          data-index="{{index}}"
        >
          <text class="button-text">{{item.purchaseButtonText || '了解自己并付款'}}</text>
        </button>
        <button
          class="purchase-button primary"
          wx:elif="{{item.actionType === 'buy' && hasPhone}}"
          bindtap="handlePurchaseTap"
          data-tab="personal"
          data-index="{{index}}"
        >
          <text class="button-text">{{item.purchaseButtonText || '了解自己并付款'}}</text>
        </button>
      </view>
      <view wx:if="{{!loading && activeTab === 'personal' && personalCategories.length === 0}}" class="empty-tip">
        <text>暂无可用的个人版套餐</text>
      </view>
    </view>

    <!-- 企业版：按类目列表渲染 -->
    <view wx:elif="{{activeTab === 'enterprise'}}">
      <view wx:for="{{enterpriseCategories}}" wx:key="id" class="pricing-card {{index === 1 ? 'featured-blue' : ''}}" style="margin: 24rpx;">
        <view class="card-header-flex">
          <view class="header-left">
            <text class="plan-title-sm">{{item.title}}</text>
            <text class="plan-desc" wx:if="{{item.subtitle}}">{{item.subtitle}}</text>
          </view>
          <view class="header-right" wx:if="{{item.priceDisplay || item.price}}">
            <text class="price-amount-small">{{item.priceDisplay || '¥' + item.price}}</text>
            <text class="price-limit" wx:if="{{item.userLimit}}">{{item.userLimit}}</text>
          </view>
        </view>
        <view class="features-list" wx:if="{{item.features && item.features.length}}">
          <view class="feature-item" wx:for="{{item.features}}" wx:for-item="f" wx:key="*this">
            <view class="check-icon blue">✓</view>
            <text class="feature-text">{{f}}</text>
          </view>
        </view>
        <button
          class="purchase-button secondary"
          wx:if="{{!hasPhone}}"
          open-type="getPhoneNumber"
          bindgetphonenumber="onGetPhoneNumberForPurchase"
          data-tab="enterprise"
          data-index="{{index}}"
        >
          <text class="button-text">{{item.buttonText || '申请咨询并降低30%成本'}}</text>
        </button>
        <button
          class="purchase-button secondary"
          wx:elif="{{hasPhone}}"
          bindtap="handlePurchaseTap"
          data-tab="enterprise"
          data-index="{{index}}"
        >
          <text class="button-text">{{item.buttonText || '申请咨询并降低30%成本'}}</text>
        </button>
      </view>
      <view wx:if="{{!loading && activeTab === 'enterprise' && enterpriseCategories.length === 0}}" class="empty-tip">
        <text>暂无可用的企业版套餐</text>
      </view>
    </view>

    <view class="safety-tips">
      <view class="safety-item">
        <text class="safety-icon">🔒</text>
        <text class="safety-text">全程微信</text>
      </view>
      <view class="safety-item">
        <text class="safety-icon">💼</text>
        <text class="safety-text">顾问联络</text>
      </view>
      <view class="safety-item">
        <text class="safety-icon">🧑‍💼</text>
        <text class="safety-text">降本30%+</text>
      </view>
    </view>
  </block>
</view>