ソースを参照

feat(frontend): 会员中心权益对比文案与个人中心会员卡升级入口

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
asus 1 ヶ月 前
コミット
2330831c35

+ 2 - 2
cfc-frontend/pages/membership/index.vue

@@ -79,10 +79,10 @@ export default {
       currentLevelName: '免费用户',
       features: ['折扣购物', '家庭管理', '推荐佣金', '专属活动', '任务特权', '成长报告'],
       compareData: [
-        { name: '商品折扣', free: '普通价格', family: '9折', premium: '8折' },
+        { name: '商品折扣', free: '普通价格', family: '会员折扣', premium: '会员折扣' },
         { name: '家庭管理', free: '基础功能', family: '全部功能', premium: '全部功能+优先响应' },
         { name: '管家服务', free: '—', family: '—', premium: '每周一次' },
-        { name: '推荐佣金', free: '不可参与', family: '最高15%', premium: '最高20%' },
+        { name: '推荐佣金', free: '不可参与', family: '可参与', premium: '可参与' },
         { name: '专属活动', free: '部分参与', family: '全部参与', premium: '优先参与' },
         { name: '成长报告', free: '月度', family: '每周+深度', premium: '每日+深度+专家解读' },
         { name: '任务配额', free: '每日5个', family: '不限量', premium: '不限量+优先审核' }

+ 63 - 17
cfc-frontend/pages/profile-main/profile.vue

@@ -30,11 +30,18 @@
               <text class="role-tag">{{ roleLabel }}</text>
             </view>
             <view class="user-sub" v-if="memberLevel">
-              <text class="level-badge" :class="'level-' + memberLevel">{{ memberLevelText }}</text>
-              <text v-if="membershipDays > 0 && membershipDays <= 30" class="days-left">剩余 {{ membershipDays }} 天</text>
+              <view class="level-badge" :class="'level-' + memberLevel">{{ memberLevelText }}</view>
+              <text v-if="isLifetime" class="days-left">永久有效</text>
+              <text v-else-if="membershipDays > 0 && membershipDays <= 30" class="days-left">剩余 {{ membershipDays }} 天</text>
+              <view v-if="hasUpgradeSpace" class="upgrade-btn" @click="goUpgrade">
+                <text class="upgrade-btn-text">{{ upgradeBtnText }}</text>
+              </view>
             </view>
             <view class="user-sub" v-else>
               <text class="days-left">开通会员解锁更多权益</text>
+              <view class="upgrade-btn" @click="goUpgrade">
+                <text class="upgrade-btn-text">立即开通</text>
+              </view>
             </view>
           </view>
         </view>
@@ -290,16 +297,26 @@ export default {
       return map[this.role] || '用户'
     },
     memberLevelText() {
-      var map = { GOLD: '金卡', PLATINUM: '白金', DIAMOND: '钻石' }
+      var map = { FREE: '免费用户', FAMILY: '家庭会员', PREMIUM: '高级会员', LIFETIME: '终身会员' }
       return map[this.memberLevel] || this.memberLevel || ''
     },
+    isLifetime() {
+      return this.memberLevel === 'LIFETIME'
+    },
+    // 有升级空间:FREE(开通) / FAMILY(升PREMIUM);PREMIUM已是最高可购买等级,LIFETIME永久有效
+    hasUpgradeSpace() {
+      return this.memberLevel === 'FREE' || this.memberLevel === 'FAMILY'
+    },
+    upgradeBtnText() {
+      return this.memberLevel === 'FAMILY' ? '升级' : '立即开通'
+    },
     hasReminders() {
       return this.pendingTasks > 0 || this.activeChallenges > 0 || this.profileProgress < 14
     }
   },
   onShow() {
     if (!this.isLoggedIn) {
-      this.loadAllData()
+      // 未登录:不调用任何需登录接口,仅显示登录引导
       return
     }
     var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
@@ -479,9 +496,12 @@ export default {
     goToReport: function() {
       uni.navigateTo({ url: '/pages/profile/report-management' })
     },
-    goToMembership: function() {
-      uni.navigateTo({ url: '/pages/membership/index' })
-    },
+  goToMembership: function() {
+    uni.navigateTo({ url: '/pages/membership/index' })
+  },
+  goUpgrade: function() {
+    uni.navigateTo({ url: '/pages/membership/upgrade' })
+  },
     goToPromotion: function() {
       uni.navigateTo({ url: '/pages/promotion/index' })
     },
@@ -725,19 +745,45 @@ export default {
   gap: 12rpx;
 }
 .level-badge {
-  font-size: 26rpx;
-  padding: 6rpx 20rpx;
-  border-radius: 20rpx;
+  font-size: 24rpx;
+  padding: 8rpx 22rpx;
+  border-radius: 24rpx;
   font-weight: bold;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
-  border: 2rpx solid rgba(255,255,255,0.3);
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
+  border: 2rpx solid rgba(255,255,255,0.35);
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+}
+.level-badge::before {
+  content: '👑';
+  font-size: 20rpx;
+}
+.level-FREE { background: linear-gradient(135deg, #9CA3AF, #6B7280); color: #fff; }
+.level-FREE::before { content: ''; }
+.level-FAMILY { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
+.level-PREMIUM { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
+.level-LIFETIME {
+  background: linear-gradient(135deg, #EC4899, #DB2777);
+  color: #fff;
+  box-shadow: 0 4rpx 16rpx rgba(236,72,153,0.45);
+  border-color: rgba(255,255,255,0.55);
 }
-.level-GOLD { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
-.level-PLATINUM { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
-.level-DIAMOND { background: linear-gradient(135deg, #EC4899, #DB2777); color: #fff; }
 .days-left {
-  font-size: 24rpx;
-  color: rgba(255,255,255,0.8);
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.85);
+}
+.upgrade-btn {
+  background: rgba(255,255,255,0.22);
+  border: 2rpx solid rgba(255,255,255,0.6);
+  border-radius: 22rpx;
+  padding: 8rpx 24rpx;
+  flex-shrink: 0;
+}
+.upgrade-btn-text {
+  font-size: 22rpx;
+  font-weight: bold;
+  color: #fff;
 }
 .user-card-right {
   display: flex;