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

feat: 富维度页面添加TabTransition动画 + 用户卡片重构

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
openhands 2 месяцев назад
Родитель
Сommit
02d6e2bc32
1 измененных файлов с 297 добавлено и 307 удалено
  1. 297 307
      cfc-frontend/pages/wealth/index.vue

+ 297 - 307
cfc-frontend/pages/wealth/index.vue

@@ -1,5 +1,8 @@
 <template>
   <view class="container">
+    <!-- TabTransition overlay -->
+    <tab-transition v-if="showTabTransition" dimCode="wealth" />
+
     <!-- 未登录 -->
     <view v-if="!isLoggedIn" class="login-prompt">
       <view class="prompt-icon">👤</view>
@@ -19,120 +22,19 @@
         <text>🔄 退出切换</text>
       </view>
 
-      <!-- 五行相克状态条(5组) -->
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">⚖️ 身克富平衡</text>
-        </view>
-        <view class="body-wealth-bar" :class="'status-' + bodyWealthStatus">
-          <view class="bar-row">
-            <text class="bar-label">身体底盘</text>
-            <view class="bar-track">
-              <view class="bar-fill body-bar" :style="'width:' + bodyScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ bodyScore }}分</text>
-          </view>
-          <view class="bar-row">
-            <text class="bar-label">财力素养</text>
-            <view class="bar-track">
-              <view class="bar-fill wealth-bar" :style="'width:' + wealthScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ wealthScore }}分</text>
-          </view>
-          <view v-if="bodyWealthMessage" class="bw-message">{{ bodyWealthMessage }}</view>
+      <!-- 用户卡片 -->
+      <view class="user-card" @click="goToProfile">
+        <view class="avatar">👤</view>
+        <view class="user-info">
+          <text class="nickname">{{ nickname || '未设置昵称' }}</text>
+          <text class="role">{{ role === 'parent' ? '家长模式' : (role === 'child' ? '孩子模式' : '成长规划师模式') }}</text>
         </view>
+        <text class="card-arrow">›</text>
       </view>
 
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">⚡ 行克身调节</text>
-        </view>
-        <view class="body-wealth-bar" :class="'status-' + actionBodyStatus">
-          <view class="bar-row">
-            <text class="bar-label">行动能量</text>
-            <view class="bar-track">
-              <view class="bar-fill action-bar" :style="'width:' + actionScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ actionScore }}分</text>
-          </view>
-          <view class="bar-row">
-            <text class="bar-label">身体底盘</text>
-            <view class="bar-track">
-              <view class="bar-fill body-bar" :style="'width:' + bodyScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ bodyScore }}分</text>
-          </view>
-          <view v-if="actionBodyMessage" class="bw-message">{{ actionBodyMessage }}</view>
-        </view>
-      </view>
-
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">💧 富克心平衡</text>
-        </view>
-        <view class="body-wealth-bar" :class="'status-' + wealthHeartStatus">
-          <view class="bar-row">
-            <text class="bar-label">财富能量</text>
-            <view class="bar-track">
-              <view class="bar-fill wealth-bar" :style="'width:' + wealthScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ wealthScore }}分</text>
-          </view>
-          <view class="bar-row">
-            <text class="bar-label">心动能量</text>
-            <view class="bar-track">
-              <view class="bar-fill mind-bar" :style="'width:' + mindScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ mindScore }}分</text>
-          </view>
-          <view v-if="wealthHeartMessage" class="bw-message">{{ wealthHeartMessage }}</view>
-        </view>
-      </view>
-
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">🔥 心克智沉淀</text>
-        </view>
-        <view class="body-wealth-bar" :class="'status-' + mindWisdomStatus">
-          <view class="bar-row">
-            <text class="bar-label">心动能量</text>
-            <view class="bar-track">
-              <view class="bar-fill mind-bar" :style="'width:' + mindScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ mindScore }}分</text>
-          </view>
-          <view class="bar-row">
-            <text class="bar-label">智慧能量</text>
-            <view class="bar-track">
-              <view class="bar-fill wisdom-bar" :style="'width:' + wisdomScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ wisdomScore }}分</text>
-          </view>
-          <view v-if="mindWisdomMessage" class="bw-message">{{ mindWisdomMessage }}</view>
-        </view>
-      </view>
-
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">⚔️ 智克行滤镜</text>
-        </view>
-        <view class="body-wealth-bar" :class="'status-' + wisdomActionStatus">
-          <view class="bar-row">
-            <text class="bar-label">智慧能量</text>
-            <view class="bar-track">
-              <view class="bar-fill wisdom-bar" :style="'width:' + wisdomScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ wisdomScore }}分</text>
-          </view>
-          <view class="bar-row">
-            <text class="bar-label">行动能量</text>
-            <view class="bar-track">
-              <view class="bar-fill action-bar" :style="'width:' + actionScore + '%'"></view>
-            </view>
-            <text class="bar-value">{{ actionScore }}分</text>
-          </view>
-          <view v-if="wisdomActionMessage" class="bw-message">{{ wisdomActionMessage }}</view>
-        </view>
+      <!-- 切换按钮(家长模式 + 未切换状态) -->
+      <view class="switch-section" v-if="role === 'parent' && !isSwitchedChild">
+        <button class="btn-switch" @click="onSwitchMode">切换到孩子视角</button>
       </view>
 
       <!-- 财富子维度卡片 -->
@@ -144,7 +46,7 @@
         <view class="sub-dim-grid" v-if="role === 'parent'">
           <view class="sub-dim-card" @click="goToIncome">
             <text class="sub-dim-score">{{ wealthIncome || '-' }}</text>
-            <text class="sub-dim-label">金钱/收入</text>
+            <text class="sub-dim-label">金钱收入</text>
             <text class="sub-dim-desc">累计佣金</text>
           </view>
           <view class="sub-dim-card" @click="goToAchievements">
@@ -202,6 +104,35 @@
         </view>
       </view>
 
+      <!-- 财富数据(仅家长) -->
+      <view class="section" v-if="role === 'parent'">
+        <view class="section-header">
+          <text class="section-title">💰 财富数据</text>
+        </view>
+        <view class="wealth-card">
+          <view class="wealth-item">
+            <text class="wealth-value">{{ wealthData.totalEarnings || 0 }}</text>
+            <text class="wealth-label">累计收益</text>
+          </view>
+          <view class="wealth-divider"></view>
+          <view class="wealth-item">
+            <text class="wealth-value">{{ wealthData.availableAmount || 0 }}</text>
+            <text class="wealth-label">可提现</text>
+          </view>
+          <view class="wealth-divider"></view>
+          <view class="wealth-item">
+            <text class="wealth-value">{{ wealthData.referralCount || 0 }}</text>
+            <text class="wealth-label">邀请人数</text>
+          </view>
+        </view>
+        <!-- 邀请码复制 -->
+        <view class="referral-code-bar" v-if="wealthData.referralCode" @click="copyReferralCode">
+          <text class="referral-code-label">我的邀请码</text>
+          <text class="referral-code-value">{{ wealthData.referralCode }}</text>
+          <text class="referral-code-copy">复制</text>
+        </view>
+      </view>
+
       <!-- 增值服务入口 -->
       <view class="section">
         <view class="section-header">
@@ -220,14 +151,6 @@
             <text class="service-icon">🎨</text>
             <text class="service-label">创客中心</text>
           </view>
-          <view class="service-item" @click="goToBadges">
-            <text class="service-icon">🏅</text>
-            <text class="service-label">成就系统</text>
-          </view>
-          <view class="service-item" @click="goToGrowthReport">
-            <text class="service-icon">📈</text>
-            <text class="service-label">成长报告</text>
-          </view>
         </view>
       </view>
 
@@ -238,10 +161,10 @@
         :familyId="activeChildId"
         title="为你推荐" />
 
-      <!-- 底部菜单(精简) -->
+      <!-- 底部菜单 -->
       <view class="menu-list">
-        <view class="menu-item" v-if="role === 'parent'" @click="goToProfile">
-          <text>⚙️ 个人设置</text>
+        <view class="menu-item" @click="goToProfile">
+          <text>👤 个人中心</text>
           <text class="arrow">›</text>
         </view>
         <view class="menu-item" @click="goToPointsLogs">
@@ -252,42 +175,42 @@
           <text>📣 推广中心</text>
           <text class="arrow">›</text>
         </view>
+        <view class="menu-item logout-item" @click="logout">
+          <text>🚪 退出登录</text>
+          <text class="arrow">›</text>
+        </view>
       </view>
     </template>
   </view>
 </template>
 
 <script>
+import TabTransition from '../../components/tab-transition.vue'
 import PageBanner from '../../components/PageBanner.vue'
-import { getWealthDetail, getChildren, switchBackVerify } from '../../utils/api.js'
+import DimensionProductList from '../../components/DimensionProductList.vue'
+import {
+  verifyPassword,
+  getChildren,
+  getWealthDetail,
+  getReferralCode,
+  getReferralSummary,
+  getCommissionSummary
+} from '../../utils/api.js'
 
 export default {
-  components: { PageBanner },
+  components: { TabTransition, PageBanner, DimensionProductList },
   data() {
     return {
+      showTabTransition: true,
       role: 'parent',
       isSwitchedChild: false,
+      nickname: '',
       // 五维评分
       bodyScore: 0,
       mindScore: 0,
       wisdomScore: 0,
       actionScore: 0,
       wealthScore: 0,
-      // 身克富
-      bodyWealthStatus: 'normal',
-      bodyWealthMessage: '',
-      // 行克身
-      actionBodyStatus: 'normal',
-      actionBodyMessage: '',
-      // 富克心
-      wealthHeartStatus: 'normal',
-      wealthHeartMessage: '',
-      // 心克智
-      mindWisdomStatus: 'normal',
-      mindWisdomMessage: '',
-      // 智克行
-      wisdomActionStatus: 'normal',
-      wisdomActionMessage: '',
       // 心的子维度(仅孩子有真实数据)
       heartEmotionStable: null,
       heartUnderstanding: null,
@@ -300,16 +223,35 @@ export default {
       wealthEducation: null,
       wealthSocial: null,
       wealthPoints: null,
+      // 财富数据
+      wealthData: {
+        totalEarnings: 0,
+        availableAmount: 0,
+        referralCount: 0,
+        referralCode: ''
+      },
       children: []
     }
   },
   computed: {
     isLoggedIn() {
       return !!uni.getStorageSync('token')
+    },
+    activeChildId() {
+      if (this.role === 'child') {
+        return uni.getStorageSync('currentChildId')
+      }
+      return ''
     }
   },
   onShow() {
-    if (!uni.getStorageSync('token')) return
+    this.showTabTransition = true
+
+    if (!uni.getStorageSync('token')) {
+      this._watchPageReady()
+      return
+    }
+
     var currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
     if (currentRole === 'teacher') {
       uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
@@ -317,13 +259,28 @@ export default {
     }
     this.role = currentRole
     this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
+
+    var userInfo = uni.getStorageSync('userInfo')
+    this.nickname = (userInfo && userInfo.nickname) || ''
+
     this.loadChildren()
     this.loadWealthDetail()
+    this.loadWealthData()
+    this._watchPageReady()
   },
   methods: {
     goLogin() {
       uni.navigateTo({ url: '/pages/login/login' })
     },
+    _watchPageReady() {
+      var self = this
+      this.$nextTick(function() {
+        self.showTabTransition = false
+      })
+      setTimeout(function() {
+        self.showTabTransition = false
+      }, 2000)
+    },
     async loadChildren() {
       try {
         var res = await getChildren()
@@ -349,21 +306,7 @@ export default {
         var res = await getWealthDetail(memberId, memberType)
         if (res && res.data) {
           var d = res.data
-          this.bodyScore = d.bodyScore || 0
-          this.mindScore = d.mindScore || 0
-          this.wisdomScore = d.wisdomScore || 0
-          this.actionScore = d.actionScore || 0
           this.wealthScore = d.wealthScore || 0
-          this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
-          this.bodyWealthMessage = d.bodyWealthMessage || ''
-          this.actionBodyStatus = d.actionBodyStatus || 'normal'
-          this.actionBodyMessage = d.actionBodyMessage || ''
-          this.wealthHeartStatus = d.wealthHeartStatus || 'normal'
-          this.wealthHeartMessage = d.wealthHeartMessage || ''
-          this.mindWisdomStatus = d.mindWisdomStatus || 'normal'
-          this.mindWisdomMessage = d.mindWisdomMessage || ''
-          this.wisdomActionStatus = d.wisdomActionStatus || 'normal'
-          this.wisdomActionMessage = d.wisdomActionMessage || ''
           if (memberType === 'parent') {
             this.wealthIncome = d.wealthIncome
             this.wealthAchievement = d.wealthAchievement
@@ -381,23 +324,100 @@ export default {
         console.error('获取富维度详情失败', e)
       }
     },
+    async loadWealthData() {
+      if (this.role !== 'parent') return
+      try {
+        var codeRes = await getReferralCode()
+        if (codeRes && codeRes.code === 200 && codeRes.data) {
+          this.wealthData.referralCode = codeRes.data.code || codeRes.data || ''
+        }
+      } catch (e) {
+        console.error('获取邀请码失败', e)
+      }
+      try {
+        var summaryRes = await getReferralSummary()
+        if (summaryRes && summaryRes.code === 200 && summaryRes.data) {
+          this.wealthData.referralCount = summaryRes.data.totalCount || summaryRes.data.count || 0
+        }
+      } catch (e) {
+        console.error('获取邀请统计失败', e)
+      }
+      try {
+        var commissionRes = await getCommissionSummary()
+        if (commissionRes && commissionRes.code === 200 && commissionRes.data) {
+          this.wealthData.totalEarnings = commissionRes.data.totalEarnings || 0
+          this.wealthData.availableAmount = commissionRes.data.availableAmount || 0
+        }
+      } catch (e) {
+        console.error('获取佣金统计失败', e)
+      }
+    },
+    copyReferralCode() {
+      if (!this.wealthData.referralCode) return
+      uni.setClipboardData({
+        data: this.wealthData.referralCode,
+        success: function() {
+          uni.showToast({ title: '邀请码已复制', icon: 'success' })
+        }
+      })
+    },
+    onSwitchMode() {
+      if (this.role === 'child') {
+        this.exitSwitch()
+        return
+      }
+      // parent → switch to child
+      if (this.children.length === 0) {
+        this.loadChildren()
+        if (this.children.length === 0) {
+          uni.showModal({
+            title: '提示',
+            content: '您还没有添加孩子,是否现在去添加?',
+            success: function(res) {
+              if (res.confirm) {
+                uni.navigateTo({ url: '/pages/profile/create-child' })
+              }
+            }
+          })
+          return
+        }
+      }
+      if (this.children.length === 1) {
+        this.$store.commit('switchToChild', this.children[0].id)
+        this.role = 'child'
+        this.isSwitchedChild = true
+        uni.showToast({ title: '已切换为孩子模式', icon: 'success' })
+        return
+      }
+      var self = this
+      uni.showActionSheet({
+        itemList: this.children.map(function(c) { return c.nickname }),
+        success: function(res) {
+          var selectedChild = self.children[res.tapIndex]
+          self.$store.commit('switchToChild', selectedChild.id)
+          self.role = 'child'
+          self.isSwitchedChild = true
+          uni.showToast({ title: '已切换为' + selectedChild.nickname + '模式', icon: 'success' })
+        }
+      })
+    },
     exitSwitch() {
       if (!this.isSwitchedChild) return
+      var self = this
       uni.showModal({
         title: '退出切换',
         content: '请输入家长密码以确认退出',
         editable: true,
-        success: async (res) => {
+        success: function(res) {
           if (res.confirm && res.content) {
-            try {
-              var verifyResult = await switchBackVerify(res.content)
-              if (verifyResult && verifyResult.code === 200 && verifyResult.data === true) {
+            verifyPassword(res.content).then(function(result) {
+              if (result.code === 200) {
                 uni.removeStorageSync('isSwitchedChild')
                 uni.removeStorageSync('currentChildId')
-                this.isSwitchedChild = false
-                this.role = 'parent'
-                if (this.$store && this.$store.commit) {
-                  this.$store.commit('switchBackToParent')
+                self.isSwitchedChild = false
+                self.role = 'parent'
+                if (self.$store && self.$store.commit) {
+                  self.$store.commit('switchBackToParent')
                 }
                 uni.showToast({ title: '已退出切换', icon: 'success' })
                 setTimeout(function() {
@@ -406,13 +426,28 @@ export default {
               } else {
                 uni.showToast({ title: '密码错误', icon: 'none' })
               }
-            } catch (e) {
+            }).catch(function() {
               uni.showToast({ title: '验证失败', icon: 'none' })
-            }
+            })
+          }
+        }
+      })
+    },
+    logout() {
+      uni.showModal({
+        title: '退出登录',
+        content: '确定要退出登录吗?',
+        success: function(res) {
+          if (res.confirm) {
+            uni.clearStorageSync()
+            uni.reLaunch({ url: '/pages/login/login' })
           }
         }
       })
     },
+    goToProfile() {
+      uni.navigateTo({ url: '/pages/profile/profile' })
+    },
     goToCheckin() {
       uni.navigateTo({ url: '/pages/wealth-sub/checkin' })
     },
@@ -422,21 +457,12 @@ export default {
     goToCreator() {
       uni.navigateTo({ url: '/pages/promotion/index' })
     },
-    goToBadges() {
-      uni.navigateTo({ url: '/pages/rewards/badge' })
-    },
-    goToGrowthReport() {
-      uni.navigateTo({ url: '/pages/growth/index' })
-    },
     goToPointsLogs() {
       uni.navigateTo({ url: '/pages/points/points' })
     },
     goToPromotion() {
       uni.navigateTo({ url: '/pages/promotion/index' })
     },
-    goToProfile() {
-      uni.navigateTo({ url: '/pages/profile/index' })
-    },
     goToIncome() {
       uni.navigateTo({ url: '/pages/promotion/commission' })
     },
@@ -485,164 +511,125 @@ export default {
   font-weight: bold;
   color: #333;
 }
+.section-more {
+  font-size: 24rpx;
+  color: #999;
+}
 
-/* 身克富状态条 */
-.body-wealth-bar {
+/* 用户卡片 */
+.user-card {
+  display: flex;
+  align-items: center;
   background: #fff;
+  margin: 0 30rpx 20rpx;
   border-radius: 20rpx;
   padding: 30rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
-.body-wealth-bar.status-overdraw {
-  background: #FFFBEB;
-  border: 1rpx solid #F59E0B;
-}
-.body-wealth-bar.status-penalty {
-  background: #FEF2F2;
-  border: 1rpx solid #EF4444;
-}
-.bar-row {
+.avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #F59E0B, #FBBF24);
   display: flex;
   align-items: center;
-  margin-bottom: 16rpx;
-}
-.bar-row:last-of-type {
-  margin-bottom: 0;
-}
-.bar-label {
-  font-size: 26rpx;
-  color: #666;
-  width: 140rpx;
+  justify-content: center;
+  font-size: 48rpx;
+  margin-right: 24rpx;
+  flex-shrink: 0;
 }
-.bar-track {
+.user-info {
   flex: 1;
-  height: 16rpx;
-  background: #f0f0f0;
-  border-radius: 8rpx;
-  overflow: hidden;
-  margin: 0 16rpx;
-}
-.bar-fill {
-  height: 100%;
-  border-radius: 8rpx;
-  transition: width 0.3s;
-}
-.bar-fill.body-bar {
-  background: linear-gradient(90deg, #FF8C42, #F97316);
-}
-.bar-fill.wealth-bar {
-  background: linear-gradient(90deg, #F59E0B, #FBBF24);
-}
-.bar-fill.action-bar {
-  background: linear-gradient(90deg, #10B981, #34D399);
 }
-.bar-fill.mind-bar {
-  background: linear-gradient(90deg, #FF6B9D, #FF8FAE);
-}
-.bar-fill.wisdom-bar {
-  background: linear-gradient(90deg, #6366F1, #818CF8);
+.nickname {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
 }
-.bar-value {
+.role {
   font-size: 24rpx;
   color: #999;
-  width: 80rpx;
-  text-align: right;
-}
-.bw-message {
-  margin-top: 16rpx;
-  font-size: 24rpx;
-  color: #666;
-  padding: 12rpx 16rpx;
-  background: rgba(0,0,0,0.03);
-  border-radius: 8rpx;
-}
-.status-overdraw .bw-message {
-  color: #92400E;
-  background: rgba(245,158,11,0.1);
-}
-.status-penalty .bw-message {
-  color: #991B1B;
-  background: rgba(239,68,68,0.1);
-}
-.body-wealth-bar.status-cautious {
-  background: #FFFBEB;
-  border: 1rpx solid #F59E0B;
-}
-.body-wealth-bar.status-balanced {
-  background: #ECFDF5;
-  border: 1rpx solid #10B981;
-}
-.body-wealth-bar.status-eruption {
-  background: #FEF2F2;
-  border: 1rpx solid #EF4444;
-}
-.body-wealth-bar.status-judgmental {
-  background: #FFFBEB;
-  border: 1rpx solid #F59E0B;
-}
-.body-wealth-bar.status-materialized {
-  background: #F0FDF4;
-  border: 1rpx solid #22C55E;
 }
-.body-wealth-bar.status-nourished {
-  background: #ECFDF5;
-  border: 1rpx solid #10B981;
-}
-.body-wealth-bar.status-overprotect {
-  background: #FFF1F2;
-  border: 1rpx solid #FB7185;
-}
-.body-wealth-bar.status-cold_wise {
-  background: #F5F3FF;
-  border: 1rpx solid #8B5CF6;
-}
-.body-wealth-bar.status-blind {
-  background: #F5F3FF;
-  border: 1rpx solid #7C3AED;
+.card-arrow {
+  color: #ccc;
+  font-size: 40rpx;
+  margin-left: 16rpx;
 }
-.body-wealth-bar.status-paralysis {
-  background: #F3F4F6;
-  border: 1rpx solid #9CA3AF;
+
+/* 切换区域 */
+.switch-section {
+  margin: 0 30rpx 20rpx;
 }
-.status-cautious .bw-message {
-  color: #92400E;
-  background: rgba(245,158,11,0.06);
+.btn-switch {
+  background: linear-gradient(135deg, #F59E0B, #FBBF24);
+  color: #fff;
+  font-size: 26rpx;
+  padding: 16rpx 0;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 1.5;
 }
-.status-balanced .bw-message {
-  color: #065F46;
-  background: rgba(16,185,129,0.06);
+
+/* 财富数据卡片 */
+.wealth-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx 20rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
-.status-eruption .bw-message {
-  color: #991B1B;
-  background: rgba(239,68,68,0.06);
+.wealth-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.status-judgmental .bw-message {
-  color: #92400E;
-  background: rgba(245,158,11,0.06);
+.wealth-value {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #F97316;
 }
-.status-materialized .bw-message {
-  color: #166534;
-  background: rgba(34,197,94,0.06);
+.wealth-label {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
 }
-.status-nourished .bw-message {
-  color: #065F46;
-  background: rgba(16,185,129,0.06);
+.wealth-divider {
+  width: 1rpx;
+  height: 60rpx;
+  background: #f0f0f0;
 }
-.status-overprotect .bw-message {
-  color: #9F1239;
-  background: rgba(251,113,133,0.06);
+
+/* 邀请码复制条 */
+.referral-code-bar {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  margin-top: 16rpx;
+  border-radius: 16rpx;
+  padding: 24rpx 30rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
-.status-cold_wise .bw-message {
-  color: #5B21B6;
-  background: rgba(139,92,246,0.06);
+.referral-code-label {
+  font-size: 26rpx;
+  color: #666;
+  margin-right: 16rpx;
 }
-.status-blind .bw-message {
-  color: #5B21B6;
-  background: rgba(124,58,237,0.06);
+.referral-code-value {
+  flex: 1;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #F59E0B;
+  letter-spacing: 2rpx;
 }
-.status-paralysis .bw-message {
-  color: #374151;
-  background: rgba(156,163,175,0.06);
+.referral-code-copy {
+  font-size: 24rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #F59E0B, #FBBF24);
+  padding: 8rpx 24rpx;
+  border-radius: 20rpx;
 }
 
 /* 三子维度卡片 */
@@ -693,7 +680,7 @@ export default {
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
 .service-item {
-  width: 20%;
+  width: 33.33%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -728,6 +715,9 @@ export default {
   color: #ccc;
   font-size: 32rpx;
 }
+.logout-item {
+  color: #EF4444;
+}
 
 /* 未登录 */
 .login-prompt {