Bladeren bron

feat(frontend): 会员页精简 - 合并续费/升级卡片、移除tab价格、个人中心按钮与徽章等高

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
asus 1 maand geleden
bovenliggende
commit
de8fa241cf
2 gewijzigde bestanden met toevoegingen van 9 en 53 verwijderingen
  1. 2 53
      cfc-frontend/pages/membership/upgrade.vue
  2. 7 0
      cfc-frontend/pages/profile-main/profile.vue

+ 2 - 53
cfc-frontend/pages/membership/upgrade.vue

@@ -30,15 +30,13 @@
           :class="selectedLevel === lv.levelCode ? 'level-tab-active' : ''"
           @click="selectLevel(lv.levelCode)">
           <text class="level-tab-name">{{ lv.levelName }}</text>
-          <text class="level-tab-price">¥{{ getLevelYearlyPrice(lv.levelCode) }}/年</text>
         </view>
       </view>
 
-      <!-- 开通/升级卡片(免费用户开通,或已付费用户切换到其他等级时升级) -->
-      <view class="upgrade-card" v-if="isFree || selectedLevel !== currentMemberLevel">
+      <!-- 开通/升级/续费卡片(标题统一为所选等级名) -->
+      <view class="upgrade-card">
         <view class="upgrade-header">
           <text class="upgrade-title">{{ getSelectedLevelName() }}</text>
-          <text class="upgrade-subtitle">{{ selectedLevel }}</text>
         </view>
         <!-- 档位选择 -->
         <view class="period-tabs">
@@ -57,29 +55,6 @@
         <button class="btn-upgrade" @click="goNext">下一步</button>
       </view>
 
-      <!-- 续费卡片(已付费用户保持当前等级) -->
-      <view class="upgrade-card" v-else>
-        <view class="upgrade-header">
-          <text class="upgrade-title">续费会员</text>
-          <text class="upgrade-subtitle">保持权益不中断</text>
-        </view>
-        <!-- 档位选择 -->
-        <view class="period-tabs">
-          <view 
-            class="period-tab" 
-            v-for="p in visiblePeriods" 
-            :key="p.key"
-            :class="selectedPeriod === p.key ? 'period-tab-active' : ''"
-            @click="selectPeriod(p.key)"
-          >
-            <text class="period-tab-label">{{ p.label }}</text>
-            <text class="period-tab-price">¥{{ getPriceForPeriod(p.key) }}</text>
-            <text class="period-original" v-if="showOriginalPrice(p.key)">¥{{ getOriginalPriceForPeriod(p.key) / 100 }}</text>
-          </view>
-        </view>
-        <button class="btn-upgrade btn-renew" @click="goNext">下一步</button>
-      </view>
-
       <!-- 权益对比表 -->
       <view class="compare-section">
         <text class="section-title">权益对比</text>
@@ -151,7 +126,6 @@ export default {
       ],
       selectedPeriod: 'yearly',
       selectedLevel: 'FAMILY',
-      currentMemberLevel: 'FREE',
       joinRules: [],
     }
   },
@@ -224,12 +198,10 @@ export default {
         this.membership = membershipRes.data
         if (this.membership && this.membership.memberLevel && this.membership.memberLevel !== 'FREE') {
           this.isFree = false
-          this.currentMemberLevel = this.membership.memberLevel
           this.currentLevelName = this.membership.levelName || '家庭会员'
           this.selectedLevel = this.membership.memberLevel
         } else {
           this.isFree = true
-          this.currentMemberLevel = 'FREE'
           this.currentLevelName = '免费用户'
           this.selectedLevel = 'FAMILY'
         }
@@ -255,14 +227,6 @@ export default {
       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
     },
@@ -425,12 +389,6 @@ export default {
   color: #1E293B;
   display: block;
 }
-.upgrade-subtitle {
-  font-size: 24rpx;
-  color: #94A3B8;
-  margin-top: 6rpx;
-  display: block;
-}
 .btn-upgrade {
   width: 100%;
   height: 88rpx;
@@ -449,9 +407,6 @@ export default {
 .btn-upgrade:active {
   opacity: 0.9;
 }
-.btn-renew {
-  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
-}
 
 /* ===== 权益对比 ===== */
 .compare-section {
@@ -562,12 +517,6 @@ export default {
   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;
 }

+ 7 - 0
cfc-frontend/pages/profile-main/profile.vue

@@ -731,6 +731,8 @@ export default {
   display: flex;
   align-items: center;
   gap: 6rpx;
+  box-sizing: border-box;
+  height: 44rpx;
 }
 .level-badge::before {
   content: '👑';
@@ -756,11 +758,16 @@ export default {
   border-radius: 22rpx;
   padding: 8rpx 24rpx;
   flex-shrink: 0;
+  box-sizing: border-box;
+  height: 44rpx;
+  display: flex;
+  align-items: center;
 }
 .upgrade-btn-text {
   font-size: 22rpx;
   font-weight: bold;
   color: #fff;
+  line-height: 1;
 }
 .user-card-right {
   display: flex;