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>
    <!-- C端 ¥131 方案 -->
    <view
      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>

    <!-- B端 ¥1,314 方案 -->
    <view
      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>

    <!-- Compare table -->
    <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>

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

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

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 {
    const res = await pricingApi.current()
    if (res) pricing.value = res
  } catch (e) {
    // Use defaults if API fails
  }
  loading.value = false
})

async function onPay() {
  paying.value = true
  try {
    const totalFee = selectedPlan.value === 'annual' ? pricing.value.annualFee : currentPractitionerPrice.value
    const productType = selectedPlan.value
    await payApi.create({ totalFee, payType: 'wxpay', productType })
    uni.showToast({ title: '开通成功！', icon: 'success' })
    setTimeout(() => uni.navigateBack(), 1500)
  } catch (e) {
    uni.showToast({ title: '支付失败，请重试', icon: 'none' })
  }
  paying.value = false
}
</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);
}
</style>