num/client/pages/subscribe/index.vue

<template>
  <view class="page">
    <view class="header">
      <text class="header-title">选择会员方案</text>
      <text class="header-desc">解锁数字能量的全部潜力</text>
    </view>

    <template v-if="loading">
      <view class="loading-state"><text class="loading-text">加载中...</text></view>
    </template>

    <template v-else>
      <view v-if="visiblePlans.length === 0" class="already-vip">
        <text class="already-vip__icon">✓</text>
        <text class="already-vip__title">您已是能量师</text>
        <text class="already-vip__desc">解锁了全部功能，可在能量盘页使用 AI 解读</text>
      </view>

      <view v-show="visiblePlans.length > 0" class="plans-section">
        <view
          v-if="visiblePlans.includes('annual')"
          class="plan-card"
          :class="{ selected: selectedPlan === 'annual' }"
          @click="selectedPlan = 'annual'"
        >
          <view class="plan-badge popular">推荐</view>
          <view class="plan-top">
            <text class="plan-name">C端会员</text>
            <view class="plan-price-row">
              <text class="price-symbol">¥</text>
              <text class="price">{{ formatYuan(pricing.annualFee) }}</text>
              <text class="per">/年</text>
            </view>
            <text class="price-daily">每天仅 ¥{{ (pricing.annualFee / 100 / 365).toFixed(2) }}</text>
          </view>
          <view class="plan-features">
            <text class="feature">✦ AI 互动问答 — 无限次</text>
            <text class="feature">✦ 获得推广权限，赚取佣金</text>
            <text class="feature">✦ 一级 40% + 二级 5% 佣金比例</text>
            <text class="feature">✦ VIP 标识</text>
          </view>
        </view>

        <view
          v-if="visiblePlans.includes('practitioner')"
          class="plan-card plan-pro"
          :class="{ selected: selectedPlan === 'practitioner' }"
          @click="selectedPlan = 'practitioner'"
        >
          <view class="plan-badge pro">专业</view>
          <view class="plan-top">
            <text class="plan-name">能量师</text>
            <view class="plan-price-row">
              <text class="price-symbol">¥</text>
              <text class="price">{{ formatYuan(currentPractitionerPrice) }}</text>
              <text class="per">/年</text>
            </view>
            <view v-if="pricing.isSeedPrice" class="seed-badge">
              种子价 · 仅剩 {{ pricing.remainingSeats }}/{{ pricing.seedLimit }} 个名额
            </view>
            <text class="price-daily">每天仅 ¥{{ (currentPractitionerPrice / 100 / 365).toFixed(2) }}</text>
          </view>
          <view class="plan-features">
            <text class="feature">✦ 包含 C 端全部权益</text>
            <text class="feature">✦ 无限能量盘生成</text>
            <text class="feature">✦ AI 五区完整解读，随问随答</text>
            <text class="feature">✦ 全部历史记录永久保存</text>
            <text class="feature">✦ 推广佣金 — 固定 ¥500/人 + 二级 ¥100/人</text>
          </view>
        </view>

        <view class="compare-card">
          <view class="compare-header">
            <text class="col">功能</text>
            <text class="col">普通</text>
            <text class="col c">C端</text>
            <text class="col pro">能量师</text>
          </view>
          <view class="compare-row" v-for="row in compareData" :key="row.label">
            <text class="col">{{ row.label }}</text>
            <text class="col">{{ row.free }}</text>
            <text class="col c">{{ row.c }}</text>
            <text class="col pro">{{ row.pro }}</text>
          </view>
        </view>

        <button class="pay-btn" @click="onPay" :disabled="paying">
          {{ paying ? '处理中...' : payButtonText }}
        </button>
        <text class="note">支付即表示同意《订阅协议》</text>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import { payApi, pricingApi } from '@/utils/api'

const userStore = useUserStore()

const paying = ref(false)
const loading = ref(true)
const selectedPlan = ref('annual')
const pricing = ref({
  seedPrice: 131400,
  standardPrice: 198600,
  annualFee: 13100,
  isSeedPrice: true,
  remainingSeats: 300,
  seedLimit: 300
})

const compareData = [
  { label: '能量盘生成', free: '3次/天', c: '3次/天', pro: '不限' },
  { label: 'AI 解读', free: '3轮/天', c: '无限次', pro: '无限次' },
  { label: '历史记录', free: '7天', c: '永久', pro: '永久' },
  { label: '推广佣金', free: '--', c: '40%+5%', pro: '¥500+¥100/人' },
  { label: '分享导出', free: '1次/天', c: '不限', pro: '不限' },
]

const currentPractitionerPrice = computed(() => {
  return pricing.value.isSeedPrice ? pricing.value.seedPrice : pricing.value.standardPrice
})

const payButtonText = computed(() => {
  if (selectedPlan.value === 'annual') {
    return `立即开通 · C端会员 ¥${formatYuan(pricing.value.annualFee)}/年`
  }
  const price = currentPractitionerPrice.value
  const label = pricing.value.isSeedPrice ? '种子价' : '标准价'
  return `立即开通 · 能量师 ${label} ¥${formatYuan(price)}/年`
})

function formatYuan(cents) {
  if (cents == null) return '0'
  return (cents / 100).toLocaleString()
}

onMounted(async () => {
  try {
    // Ensure user profile is loaded (for vipType check)
    await userStore.fetchProfile()
    const res = await pricingApi.current()
    if (res) pricing.value = res
  } catch (e) {
    // Use defaults if API fails
  }
  loading.value = false
})

// Show plans based on current VIP status
const visiblePlans = computed(() => {
  const vipType = userStore.vipType
  if (!vipType) return ['annual', 'practitioner']
  if (vipType === 'annual') return ['practitioner']
  if (vipType === 'practitioner') return []
  return ['annual', 'practitioner']
})

// Auto-select first visible plan when VIP status changes
watch(visiblePlans, (newPlans) => {
  if (newPlans.length === 0) return
  if (!newPlans.includes(selectedPlan.value)) {
    selectedPlan.value = newPlans[0]
  }
}, { immediate: true })

async function onPay() {
  if (selectedPlan.value === 'annual') {
    uni.navigateTo({ url: '/pages/payment/index?product=annual' })
    return
  }
  // practitioner — go to payment page
  uni.navigateTo({ url: '/pages/payment/index?product=practitioner' })
}
</script>

<style scoped lang="scss">
.page {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(180deg, #0c0a1a 0%, #120d28 60%, #0f0c1e 100%);
}

.header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  display: block;
}
.header-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  display: block;
}

.loading-state {
  padding: 60px 0;
  text-align: center;
}
.loading-text {
  font-size: 14px;
  color: rgba(255,255,255,0.3);
}

/* Plan Cards */
.plan-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px 18px 18px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.plan-card.selected {
  border-color: #fbbf24;
  background: rgba(251,191,36,0.06);
}
.plan-card.plan-pro.selected {
  border-color: #a78bfa;
  background: rgba(167,139,250,0.06);
}

.plan-badge {
  position: absolute;
  top: -1px;
  right: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 0 0 8px 8px;
}
.plan-badge.popular {
  background: #f59e0b;
  color: #fff;
}
.plan-badge.pro {
  background: #7c3aed;
  color: #fff;
}

.plan-top { text-align: center; }
.plan-name {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  display: block;
  margin-bottom: 10px;
}
.plan-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.price-symbol {
  font-size: 20px;
  color: #fbbf24;
  font-weight: 600;
}
.price {
  font-size: 38px;
  font-weight: 700;
  color: #fbbf24;
  margin: 0 2px;
}
.plan-pro .price-symbol,
.plan-pro .price {
  color: #a78bfa;
}
.per {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.price-daily {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}
.seed-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  padding: 2px 12px;
  border-radius: 4px;
}

.plan-features {
  margin-top: 16px;
}
.feature {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.plan-card.selected .feature {
  color: rgba(255,255,255,0.8);
}

/* Compare table */
.compare-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}
.compare-header,
.compare-row {
  display: flex;
  padding: 12px 10px;
  font-size: 12px;
}
.compare-header {
  background: rgba(251,191,36,0.06);
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.compare-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
}
.compare-row:last-child { border-bottom: none; }
.col {
  flex: 1;
  text-align: center;
}
.col:first-child {
  text-align: left;
  flex: 1.3;
  color: rgba(255,255,255,0.7);
}
.col.c { color: #fbbf24; }
.col.pro { color: #a78bfa; }

.pay-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.pay-btn[disabled] { opacity: 0.4; }

.note {
  display: block;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

.already-vip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  margin-top: 20px;
}
.already-vip__icon {
  font-size: 40px;
  margin-bottom: 16px;
  color: #22c55e;
}
.already-vip__title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}
.already-vip__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
</style>