cfc/cfc-frontend/pages/membership/plans.vue

<template>
  <scroll-view class="container" scroll-y>
    <view class="plans-header">
      <text class="header-title">一生一世家庭会员</text>
      <text class="header-subtitle">全家人的健康守护</text>
    </view>

    <view class="plans-list">
      <view class="plan-card plan-l0">
        <view class="plan-header">
          <text class="plan-name">注册会员</text>
          <text class="plan-tag">免费</text>
        </view>
        <view class="plan-price">
          <text class="price-amount">¥0</text>
          <text class="price-unit">/永久</text>
        </view>
        <view class="plan-features">
          <view class="feature-row" v-for="(feat, idx) in l0Features" :key="idx">
            <text class="feature-icon">✓</text>
            <text class="feature-text">{{ feat }}</text>
          </view>
        </view>
        <button class="btn-action" disabled>当前等级</button>
      </view>

      <view class="plan-card plan-l1 active">
        <view class="plan-badge">推荐</view>
        <view class="plan-header">
          <text class="plan-name">❤️ 一生一世</text>
          <text class="plan-tag">年付会员</text>
        </view>
        <view class="plan-price">
          <text class="price-amount">¥1,314</text>
          <text class="price-unit">/年</text>
        </view>
        <view class="plan-features">
          <view class="feature-row" v-for="(feat, idx) in l1Features" :key="idx">
            <text class="feature-icon">✓</text>
            <text class="feature-text">{{ feat }}</text>
          </view>
        </view>
        <button class="btn-action btn-primary" @click="purchasePlan('L1')">立即开通</button>
      </view>

      <view class="plan-card plan-l2">
        <view class="plan-badge premium">至尊</view>
        <view class="plan-header">
          <text class="plan-name">💎 久久一生</text>
          <text class="plan-tag">连续包月</text>
        </view>
        <view class="plan-price">
          <text class="price-amount">¥1,314</text>
          <text class="price-unit">/月</text>
        </view>
        <view class="plan-features">
          <view class="feature-row" v-for="(feat, idx) in l2Features" :key="idx">
            <text class="feature-icon">✓</text>
            <text class="feature-text">{{ feat }}</text>
          </view>
        </view>
        <button class="btn-action btn-premium" @click="purchasePlan('L2')">立即订阅</button>
      </view>
    </view>

    <view class="benefits-section">
      <text class="section-title">会员权益详解</text>
      <view class="benefits-grid">
        <view class="benefit-item" v-for="(item, idx) in benefits" :key="idx">
          <view class="benefit-icon" :style="'background:' + item.bg">
            <text class="benefit-emoji">{{ item.icon }}</text>
          </view>
          <text class="benefit-name">{{ item.name }}</text>
          <text class="benefit-desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <view class="faq-section">
      <text class="section-title">常见问题</text>
      <view class="faq-item" v-for="(faq, idx) in faqs" :key="idx">
        <text class="faq-question">{{ faq.q }}</text>
        <text class="faq-answer">{{ faq.a }}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { getSubscriptionPlans, createSubscriptionOrder } from '../../utils/api.js'

export default {
  data() {
    return {
      plans: [],
      currentPlan: 'L0',
      l0Features: [
        '每日 3 次 AI 问答',
        '基础健康百科',
        '社区内容浏览'
      ],
      l1Features: [
        '7×24 小时 AI 健康顾问',
        '报告智能解读',
        '家庭成员上限 10 人',
        '商品 8-9 折优惠',
        '月度健康计划',
        '认证管家服务',
        '推荐佣金 R0-R4',
        '消费返利 P×20%-40%'
      ],
      l2Features: [
        'L1 全部权益',
        '深度 AI 分析 + 多模态',
        '家庭成员上限 15 人',
        '商品 6-8 折优惠',
        '双周健康计划',
        '资深管家 (1:30)',
        '专家团会诊每年 4 次',
        '消费返利 +5% 加成'
      ],
      benefits: [
        { icon: '🤖', name: 'AI 健康顾问', desc: '7×24 小时智能问答', bg: '#DBEAFE' },
        { icon: '👨‍👩‍👧‍👦', name: '家庭覆盖', desc: '一次付费全家守护', bg: '#D1FAE5' },
        { icon: '👨‍🏫', name: '专属管家', desc: '认证专业人员服务', bg: '#FEF3C7' },
        { icon: '🛒', name: '商品折扣', desc: '会员专享优惠价', bg: '#FCE7F3' },
        { icon: '💰', name: '消费返利', desc: 'P 点制终身返利', bg: '#FFEDD5' },
        { icon: '📈', name: '推广佣金', desc: 'R0-R4 阶梯奖励', bg: '#E0E7FF' }
      ],
      faqs: [
        { q: 'L1 一生一世适合谁？', a: '适合有 1-2 个孩子的家庭，追求性价比，希望获得 AI 健康顾问 + 认证管家服务' },
        { q: 'L2 久久一生与 L1 的区别？', a: 'L2 享资深管家 (1:30 配比)、深度 AI 分析、专家会诊、更高折扣和返利加成' },
        { q: 'L2 可以取消吗？', a: '可以，取消后当前月结束后降级为 L0，健康档案保留 30 天' },
        { q: '消费返利如何计算？', a: '被推荐人消费 P 点总和 × 推广人等级返利率，L2 会员额外 +5% 加成' }
      ]
    }
  },
  onLoad() {
    this.loadPlans()
  },
  methods: {
    async loadPlans() {
      try {
        const res = await getSubscriptionPlans()
        if (res.data) {
          this.plans = res.data
        }
      } catch (e) {
        console.error('获取订阅方案失败', e)
      }
    },
    purchasePlan(level) {
      var self = this
      uni.showModal({
        title: '确认购买',
        content: '确认购买' + (level === 'L1' ? '一生一世年付会员' : '久久一生连续包月') + '？',
        success: function(res) {
          if (res.confirm) {
            self.doPurchase(level)
          }
        }
      })
    },
    doPurchase(level) {
      var self = this
      var data = { level: level }
      createSubscriptionOrder(data).then(function(res) {
        if (res.data && res.data.paymentUrl) {
          uni.requestPayment({
            provider: 'wxpay',
            orderInfo: res.data.paymentUrl,
            success: function(payRes) {
              uni.showToast({ title: '支付成功', icon: 'success' })
            },
            fail: function(payErr) {
              if (payErr.errMsg && payErr.errMsg.indexOf('cancel') !== -1) {
                uni.showToast({ title: '已取消支付', icon: 'none' })
              } else {
                uni.showToast({ title: '支付失败', icon: 'none' })
              }
            }
          })
        } else if (res.data && res.data.testMode) {
          uni.showToast({ title: '购买成功（测试模式）', icon: 'success' })
        } else {
          uni.showToast({ title: '购买成功', icon: 'success' })
        }
      }).catch(function(e) {
        uni.showToast({ title: e.message || '购买失败', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #FEF3C7 100%);
}

.plans-header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}
.header-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #1E293B;
  display: block;
}
.header-subtitle {
  font-size: 28rpx;
  color: #64748B;
  margin-top: 12rpx;
  display: block;
}

.plans-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.plan-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  position: relative;
  border: 2rpx solid #FED7AA;
  box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.08);
}

.plan-card.active {
  border-color: #F97316;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  transform: scale(1.02);
}

.plan-badge {
  position: absolute;
  top: -16rpx;
  right: 40rpx;
  background: #F97316;
  color: #fff;
  padding: 8rpx 24rpx;
  border-radius: 9999rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.plan-badge.premium {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.plan-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
}

.plan-tag {
  font-size: 22rpx;
  color: #64748B;
  background: #F1F5F9;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
}

.plan-price {
  text-align: center;
  margin: 24rpx 0;
}

.price-amount {
  font-size: 56rpx;
  font-weight: bold;
  color: #F97316;
}

.price-unit {
  font-size: 24rpx;
  color: #94A3B8;
  margin-left: 8rpx;
}

.plan-features {
  margin: 24rpx 0;
}

.feature-row {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
}

.feature-icon {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  font-size: 20rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.feature-text {
  font-size: 26rpx;
  color: #334155;
  flex: 1;
}

.btn-action {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #E5E7EB;
  color: #9CA3AF;
  font-size: 28rpx;
  border-radius: 40rpx;
  border: none;
  margin-top: 20rpx;
}

.btn-action:disabled {
  opacity: 0.6;
}

.btn-primary {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
  font-weight: 600;
}

.btn-premium {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  color: #fff;
  font-weight: 600;
}

.btn-action::after {
  border: none;
}

.benefits-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
  display: block;
  margin-bottom: 24rpx;
}

.benefits-grid {
  display: flex;
  flex-wrap: wrap;
}

.benefit-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 16rpx;
  box-sizing: border-box;
}

.benefit-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.benefit-emoji {
  font-size: 40rpx;
}

.benefit-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8rpx;
}

.benefit-desc {
  font-size: 22rpx;
  color: #94A3B8;
  text-align: center;
}

.faq-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.08);
}

.faq-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F1F5F9;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  font-size: 26rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 8rpx;
}

.faq-answer {
  font-size: 24rpx;
  color: #64748B;
  line-height: 1.6;
  display: block;
}
</style>