feat: upgrade.vue 支持 FAMILY + PREMIUM 等级切换

等级切换 tabs、动态价格、权益对比四列（免费/家庭/高级）、开通/续费使用 selectedLevel

cfc-frontend/pages/membership/upgrade.vue

@@ -25,11 +25,25 @@
         </view>
       </view>
 
+      <!-- 等级切换 tabs -->
+      <view class="level-tabs" v-if="isFree">
+        <view class="level-tab" :class="selectedLevel === 'FAMILY' ? 'level-tab-active' : ''"
+          @click="selectLevel('FAMILY')">
+          <text class="level-tab-name">家庭会员</text>
+          <text class="level-tab-price">¥{{ getLevelYearlyPrice('FAMILY') }}/年</text>
+        </view>
+        <view class="level-tab" :class="selectedLevel === 'PREMIUM' ? 'level-tab-active' : ''"
+          @click="selectLevel('PREMIUM')">
+          <text class="level-tab-name">高级家庭会员</text>
+          <text class="level-tab-price">¥{{ getLevelYearlyPrice('PREMIUM') }}/年</text>
+        </view>
+      </view>
+
       <!-- 家庭会员开通卡片 -->
       <view class="upgrade-card" v-if="isFree">
         <view class="upgrade-header">
-          <text class="upgrade-title">家庭会员</text>
-          <text class="upgrade-subtitle">FAMILY</text>
+          <text class="upgrade-title">{{ selectedLevel === 'FAMILY' ? '家庭会员' : '高级家庭会员' }}</text>
+          <text class="upgrade-subtitle">{{ selectedLevel === 'FAMILY' ? 'FAMILY' : 'PREMIUM' }}</text>
         </view>
         <!-- 档位选择 -->
         <view class="period-tabs">
@@ -107,11 +121,13 @@
             <text class="compare-cell cell-feature">权益项</text>
             <text class="compare-cell cell-free">免费</text>
             <text class="compare-cell cell-family active">家庭会员</text>
+            <text class="compare-cell cell-premium active">高级会员</text>
           </view>
           <view class="compare-row" v-for="(item, idx) in compareData" :key="idx">
             <text class="compare-cell cell-feature">{{ item.name }}</text>
             <text class="compare-cell cell-free">{{ item.free }}</text>
             <text class="compare-cell cell-family active">{{ item.family }}</text>
+            <text class="compare-cell cell-premium active">{{ item.premium }}</text>
           </view>
         </view>
       </view>
@@ -180,12 +196,12 @@ export default {
       isFree: true,
       currentLevelName: '免费用户',
       compareData: [
-        { name: '商品折扣', free: '普通价格', family: '会员专享价' },
-        { name: '家庭管理', free: '基础功能', family: '全部功能' },
-        { name: '推荐佣金', free: '不可参与', family: '最高15%' },
-        { name: '专属活动', free: '部分参与', family: '全部参与' },
-        { name: '成长报告', free: '月度', family: '每周+深度' },
-        { name: '任务配额', free: '每日5个', family: '不限量' }
+        { name: '商品折扣', free: '普通价格', family: '9折', premium: '8折' },
+        { name: '家庭管理', free: '基础功能', family: '全部功能', premium: '全部功能' },
+        { name: '推荐佣金', free: '不可参与', family: '最高15%', premium: '最高20%' },
+        { name: '专属活动', free: '部分参与', family: '全部参与', premium: '优先参与' },
+        { name: '成长报告', free: '月度', family: '每周+深度', premium: '每日+深度+专家解读' },
+        { name: '任务配额', free: '每日5个', family: '不限量', premium: '不限量+优先审核' }
       ],
       coupons: [],
       selectedCoupon: null,
@@ -196,6 +212,7 @@ export default {
         { key: 'yearly', label: '年度', unit: '/年' }
       ],
       selectedPeriod: 'yearly',
+      selectedLevel: 'FAMILY',
     }
   },
   computed: {
@@ -266,22 +283,34 @@ export default {
       if (!minSpend || minSpend <= 0) return '无门槛'
       return '满' + (minSpend / 100).toFixed(2) + '元可用'
     },
+    selectLevel: function(code) {
+      this.selectedLevel = code
+      this.selectedPeriod = 'yearly'
+    },
+    getLevelYearlyPrice: function(code) {
+      for (var i = 0; i < this.levels.length; i++) {
+        if (this.levels[i].levelCode === code) {
+          return this.levels[i].yearly ? (this.levels[i].yearly / 100).toFixed(0) : '0'
+        }
+      }
+      return '0'
+    },
     selectPeriod: function(key) {
       this.selectedPeriod = key
     },
     getPriceForPeriod: function(periodKey) {
       var plan = null
       for (var i = 0; i < this.levels.length; i++) {
-        if (this.levels[i].levelCode === 'FAMILY') {
+        if (this.levels[i].levelCode === this.selectedLevel) {
           plan = this.levels[i]
           break
         }
       }
-      if (!plan) return '365'
-      if (periodKey === 'monthly') return plan.priceMonthly ? (plan.priceMonthly / 100).toFixed(0) : '39'
-      if (periodKey === 'quarterly') return plan.priceQuarterly ? (plan.priceQuarterly / 100).toFixed(0) : '99'
-      if (periodKey === 'yearly') return plan.priceYearly ? (plan.priceYearly / 100).toFixed(0) : '365'
-      return '365'
+      if (!plan) return '0'
+      if (periodKey === 'monthly') return plan.monthly ? (plan.monthly / 100).toFixed(0) : '0'
+      if (periodKey === 'quarterly') return plan.quarterly ? (plan.quarterly / 100).toFixed(0) : '0'
+      if (periodKey === 'yearly') return plan.yearly ? (plan.yearly / 100).toFixed(0) : '0'
+      return '0'
     },
     getPeriodUnit: function() {
       for (var i = 0; i < this.periods.length; i++) {
@@ -294,9 +323,10 @@ export default {
     handleUpgrade: function() {
       var self = this
       var priceText = '¥' + this.getPriceForPeriod(this.selectedPeriod) + this.getPeriodUnit()
+      var levelName = this.selectedLevel === 'FAMILY' ? '家庭会员' : '高级家庭会员'
       uni.showModal({
         title: '确认开通',
-        content: '确认开通家庭会员（' + priceText + '）？',
+        content: '确认开通' + levelName + '（' + priceText + '）？',
         success: function(res) {
           if (!res.confirm) return
           self.doUpgrade()
@@ -305,7 +335,7 @@ export default {
     },
     doUpgrade: function() {
       var self = this
-      createOrder('FAMILY', 'pay', this.selectedPeriod).then(function(res) {
+      createOrder(self.selectedLevel, 'pay', self.selectedPeriod).then(function(res) {
         uni.showToast({ title: '开通成功', icon: 'success' })
         self.loadData()
       }).catch(function(e) {
@@ -315,9 +345,10 @@ export default {
     handleRenew: function() {
       var self = this
       var priceText = '¥' + this.getPriceForPeriod(this.selectedPeriod) + this.getPeriodUnit()
+      var levelName = this.selectedLevel === 'FAMILY' ? '家庭会员' : '高级家庭会员'
       uni.showModal({
         title: '确认续费',
-        content: '确认续费家庭会员（' + priceText + '）？',
+        content: '确认续费' + levelName + '（' + priceText + '）？',
         success: function(res) {
           if (!res.confirm) return
           self.doRenew()
@@ -326,7 +357,7 @@ export default {
     },
     doRenew: function() {
       var self = this
-      createOrder('FAMILY', 'pay', this.selectedPeriod).then(function(res) {
+      createOrder(self.selectedLevel, 'pay', this.selectedPeriod).then(function(res) {
         uni.showToast({ title: '续费成功', icon: 'success' })
         self.loadData()
       }).catch(function(e) {
@@ -569,6 +600,10 @@ export default {
   color: #F97316;
   font-weight: 600;
 }
+.cell-premium.active {
+  color: #8B5CF6;
+  font-weight: 600;
+}
 .header-row .compare-cell {
   font-size: 24rpx;
   font-weight: 600;
@@ -577,6 +612,44 @@ export default {
 .header-row .cell-family.active {
   color: #F97316;
 }
+.header-row .cell-premium.active {
+  color: #8B5CF6;
+}
+
+/* ===== 等级切换 Tabs ===== */
+.level-tabs {
+  display: flex;
+  margin-bottom: 30rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  border: 2rpx solid #FED7AA;
+}
+.level-tab {
+  flex: 1;
+  padding: 24rpx;
+  text-align: center;
+  background: #FFF7ED;
+  cursor: pointer;
+}
+.level-tab-active {
+  background: #fff;
+  border-bottom: 4rpx solid #F97316;
+}
+.level-tab-name {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1E293B;
+  display: block;
+}
+.level-tab-price {
+  font-size: 22rpx;
+  color: #F97316;
+  margin-top: 6rpx;
+  display: block;
+}
+.level-tab-active .level-tab-name {
+  color: #F97316;
+}
 
 /* ===== 升级记录 ===== */
 .records-section {