Просмотр исходного кода

feat: Web MembershipCenter.vue 增加终身会员统计卡片与标签样式

Xiaogang Liao 1 месяц назад
Родитель
Сommit
2df893df65
1 измененных файлов с 12 добавлено и 2 удалено
  1. 12 2
      cfc-web/src/views/admin/MembershipCenter.vue

+ 12 - 2
cfc-web/src/views/admin/MembershipCenter.vue

@@ -26,6 +26,12 @@
           <div class="stat-label">本月新增</div>
         </el-card>
       </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card stat-lifetime">
+          <div class="stat-value">{{ overview.lifetimeCount }}</div>
+          <div class="stat-label">终身会员</div>
+        </el-card>
+      </el-col>
     </el-row>
 
     <!-- 会员等级配置 -->
@@ -162,7 +168,8 @@ export default {
         familyCount: 0,
         providerCount: 0,
         newFamilyThisMonth: 0,
-        totalFamilyMemberships: 0
+        totalFamilyMemberships: 0,
+        lifetimeCount: 0
       },
       // levels
       levelsLoading: false,
@@ -198,10 +205,11 @@ export default {
       if (code === 'FREE') return 'info'
       if (code === 'FAMILY') return 'success'
       if (code === 'PROVIDER') return 'warning'
+      if (code === 'LIFETIME') return 'danger' // 紫红色高亮终身会员
       return 'primary'
     },
     upgradeTypeLabel(type) {
-      const map = { pay: '付费升级', consumption: '消费升级', admin: '管理员操作', trial: '试用激活' }
+      const map = { pay: '付费升级', consumption: '消费升级', admin: '管理员操作', trial: '试用激活', lifetime: '终身会员授予' }
       return map[type] || type || '—'
     },
     upgradeTypeTag(type) {
@@ -209,6 +217,7 @@ export default {
       if (type === 'consumption') return 'primary'
       if (type === 'admin') return 'warning'
       if (type === 'trial') return 'info'
+      if (type === 'lifetime') return 'danger'
       return ''
     },
     parseFeatures(features) {
@@ -297,6 +306,7 @@ export default {
 .stat-family .stat-value { color: #67C23A; }
 .stat-provider .stat-value { color: #E6A23C; }
 .stat-new .stat-value { color: #409EFF; }
+.stat-lifetime .stat-value { color: #F56C6C; }
 .features-content { padding: 10px 0; }
 .features-title { font-weight: bold; margin-bottom: 8px; color: #606266; }
 .features-list { display: flex; flex-wrap: wrap; }