num/client/pages/payment/index.vue

<template>
  <view class="page-payment">
    <view class="header">
      <text class="header-title">{{ pageTitle }}</text>
      <text class="header-desc">{{ pageDesc }}</text>
    </view>

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

    <template v-else-if="product === 'annual'">
      <!-- C端年费 ¥131 -->
      <view class="plan-card selected">
        <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>

      <button class="pay-btn" @click="onPay" :disabled="paying">
        {{ paying ? '处理中...' : `立即开通 · C端会员 ¥${formatYuan(pricing.annualFee)}/年` }}
      </button>
    </template>

    <template v-else-if="product === 'practitioner'">
      <!-- 能量师 种子价/标准价 -->
      <view class="plan-card plan-pro selected">
        <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(currentPrice) }}</text>
            <text class="per">/年</text>
          </view>
          <view v-if="pricing.isSeedPrice" class="seed-badge">
            种子价 · 仅剩 {{ pricing.remainingSeats }}/{{ pricing.seedLimit }} 个名额
          </view>
          <text v-else class="standard-label">标准定价</text>
          <text class="price-daily">每天仅 ¥{{ (currentPrice / 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>

      <button class="pay-btn pro-btn" @click="onPay" :disabled="paying">
        {{ paying ? '处理中...' : `立即开通 · 能量师 ${priceLabel} ¥${formatYuan(currentPrice)}/年` }}
      </button>
    </template>

    <text class="note">支付即表示同意《订阅协议》</text>
  </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 product = ref('annual')
const pricing = ref({
  seedPrice: 131400,
  standardPrice: 198600,
  annualFee: 13100,
  isSeedPrice: true,
  remainingSeats: 300,
  seedLimit: 300
})

const pageTitle = computed(() => {
  return product.value === 'annual' ? 'C端会员' : '能量师专业版'
})
const pageDesc = computed(() => {
  return product.value === 'annual' ? '解锁无限AI解读，获取推广佣金' : '获取完整命盘分析、AI解读与分销推广权限'
})

const currentPrice = computed(() => {
  if (product.value === 'annual') return pricing.value.annualFee
  return pricing.value.isSeedPrice ? pricing.value.seedPrice : pricing.value.standardPrice
})
const priceLabel = computed(() => {
  return pricing.value.isSeedPrice ? '种子价' : '标准价'
})

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

onMounted(async () => {
  // Read product param from URL
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const params = page?.options || {}
  product.value = params.product || 'annual'

  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 = currentPrice.value
    const productType = product.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-payment {
  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;
}
.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;
}
.standard-label {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}

.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);
}

.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.pro-btn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.pay-btn[disabled] { opacity: 0.4; }

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