|
|
@@ -1,383 +0,0 @@
|
|
|
-<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" v-for="level in levels" :key="level.levelCode"
|
|
|
- :class="{'active': level.recommended}">
|
|
|
- <view class="plan-badge" v-if="level.recommended">推荐</view>
|
|
|
- <view class="plan-badge premium" v-else-if="level.levelCode === 'PREMIUM'">至尊</view>
|
|
|
- <view class="plan-header">
|
|
|
- <text class="plan-name">{{ level.levelName }}</text>
|
|
|
- <text class="plan-tag">{{ level.levelCode === 'FAMILY' ? '年付会员' : '年付/月付' }}</text>
|
|
|
- </view>
|
|
|
- <view class="plan-price">
|
|
|
- <text class="price-amount">{{ formatPrice(level.yearly) }}</text>
|
|
|
- <text class="price-unit">/年</text>
|
|
|
- </view>
|
|
|
- <view class="plan-features" v-if="level.levelDesc">
|
|
|
- <view class="feature-row" v-for="(feat, idx) in parseFeatures(level.levelDesc)" :key="idx">
|
|
|
- <text class="feature-icon">✓</text>
|
|
|
- <text class="feature-text">{{ feat }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <button class="btn-action" :class="level.recommended ? 'btn-primary' : 'btn-premium'"
|
|
|
- @click="purchasePlan(level.levelCode)">
|
|
|
- {{ level.levelCode === 'FAMILY' ? '立即开通' : '立即订阅' }}
|
|
|
- </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 { getMembershipPlans } from '../../utils/api.js'
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- levels: [],
|
|
|
- l0Features: [
|
|
|
- '每日 3 次 AI 问答',
|
|
|
- '基础健康百科',
|
|
|
- '社区内容浏览'
|
|
|
- ],
|
|
|
- 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: '家庭会员适合谁？', a: '适合有 1-2 个孩子的家庭，追求性价比，希望获得 AI 健康顾问 + 认证管家服务' },
|
|
|
- { q: '高级家庭会员与家庭会员的区别？', a: '高级会员享资深管家 (1:30 配比)、深度 AI 分析、专家会诊、更高折扣和返利加成' },
|
|
|
- { q: '可以取消吗？', a: '可以，取消后当前月结束后降级为免费用户，健康档案保留 30 天' },
|
|
|
- { q: '消费返利如何计算？', a: '被推荐人消费 P 点总和 × 推广人等级返利率，高级会员额外 +5% 加成' }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.loadPlans()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- loadPlans() {
|
|
|
- var self = this
|
|
|
- getMembershipPlans().then(function(res) {
|
|
|
- if (res.code === 200 && Array.isArray(res.data)) {
|
|
|
- self.levels = res.data
|
|
|
- }
|
|
|
- }).catch(function(e) {
|
|
|
- console.error('获取方案失败', e)
|
|
|
- })
|
|
|
- },
|
|
|
- formatPrice(cents) {
|
|
|
- if (!cents && cents !== 0) return '¥0'
|
|
|
- return '¥' + (cents / 100).toLocaleString()
|
|
|
- },
|
|
|
- parseFeatures(features) {
|
|
|
- if (!features) return []
|
|
|
- if (Array.isArray(features)) return features
|
|
|
- try { return JSON.parse(features) } catch (e) { return [] }
|
|
|
- },
|
|
|
- purchasePlan(levelCode) {
|
|
|
- uni.navigateTo({ url: '/pages/membership/upgrade?level=' + levelCode })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</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>
|
