feat(wealth): 富维度页面重构为财富之泉主题

cfc-frontend/pages/wealth/index.vue

@@ -30,23 +30,42 @@
         @select="onFamilyMemberSelect"
         @removed="loadFamilyMembersVisible" />
 
-      <!-- 模式切换 / 退出切换入口（家长未切时显示"切换到孩子视角"；已切时显示"退出切换"） -->
- <!-- 已切孩子态：点击"退出切换"回到家长模式 -->
- <view v-if="isSwitchedChild" class="exit-switch" @click="exitSwitch">
-   <text>🔄 退出切换</text>
- </view>
- <!-- 家长且未切孩子态：此处展示"切换到孩子视角"，点击完成模式切换 -->
- <view v-else class="exit-switch" @click="onSwitchMode">
-   <text>👶 切换到孩子视角</text>
- </view>
-
       <!-- 身克富杠杆警告 -->
-      <body-wealth-alert 
-        :status="bodyWealthStatus" 
-        :message="bodyWealthMessage" 
+      <body-wealth-alert
+        :status="bodyWealthStatus"
+        :message="bodyWealthMessage"
         :showTip="true" />
 
-<!-- 财富子维度卡片 -->
+      <!-- 财富能量环 -->
+      <WealthEnergyRing
+        :score="wealthScore"
+        :delta="deltaPercent" />
+
+      <!-- 成长溪流 -->
+      <view class="section stream-section">
+        <view class="section-header">
+          <text class="section-title">📈 成长溪流</text>
+        </view>
+        <view class="stream-stages">
+          <view
+            class="stage-card"
+            :class="{ active: stage.key === currentStage }"
+            v-for="stage in streamStages"
+            :key="stage.key">
+            <text class="stage-icon">{{ stage.icon }}</text>
+            <text class="stage-name">{{ stage.name }}</text>
+            <text class="stage-desc">{{ stage.desc }}</text>
+            <text class="stage-range">{{ stage.range }}</text>
+          </view>
+        </view>
+        <view class="stream-water">
+          <view class="stream-water-fill" :style="{ width: wealthScore + '%' }"></view>
+        </view>
+        <text class="stream-percent">水位 {{ wealthScore }}%</text>
+        <text class="stream-tip">{{ streamTip }}</text>
+      </view>
+
+      <!-- 子维度水滴 -->
       <wealth-sub-scores
         :role="role"
         :income="wealthIncome"
@@ -56,52 +75,25 @@
         :social="wealthSocial"
         :points="wealthPoints" />
 
-      <!-- 心的子维度（仅孩子） -->
-      <view class="section" v-if="role !== 'parent'">
-        <view class="section-header">
-          <text class="section-title">🔥 心的子维度</text>
-        </view>
-        <view class="sub-dim-grid heart-sub-dim">
-          <view class="sub-dim-card" @click="childSubDimClick('emotion')">
-            <text class="sub-dim-score">{{ heartEmotionStable || '-' }}</text>
-            <text class="sub-dim-label">情绪稳定</text>
-            <text class="sub-dim-desc">EMI情绪管理</text>
-          </view>
-          <view class="sub-dim-card" @click="childSubDimClick('understanding')">
-            <text class="sub-dim-score">{{ heartUnderstanding || '-' }}</text>
-            <text class="sub-dim-label">理解包容</text>
-            <text class="sub-dim-desc">共情+社交适应</text>
-          </view>
-          <view class="sub-dim-card" @click="childSubDimClick('legacy')">
-            <text class="sub-dim-score">{{ heartLegacy || '-' }}</text>
-            <text class="sub-dim-label">传承传递</text>
-            <text class="sub-dim-desc">未来开放</text>
-          </view>
-        </view>
-      </view>
-
-      <!-- 财富数据（仅家长） -->
+      <!-- 财富数据卡（家长） -->
       <view class="section" v-if="role === 'parent'">
-        <view class="section-header">
-          <text class="section-title">💰 财富数据</text>
+        <view class="disc-card">
+          <text class="disc-label">💰 累计收益</text>
+          <text class="disc-value">¥{{ wealthData.totalEarnings || 0 }}</text>
+          <text class="disc-sub">较上月 ↑ {{ deltaPercent }}%</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 class="disc-sub-row">
+          <view class="disc-sub-card" @click="goToIncome">
+            <text class="disc-sub-label">可提现</text>
+            <text class="disc-sub-value">¥{{ wealthData.availableAmount || 0 }}</text>
+            <text class="disc-sub-action">提现 →</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 class="disc-sub-card" @click="goToAchievements">
+            <text class="disc-sub-label">邀请人数</text>
+            <text class="disc-sub-value">{{ wealthData.referralCount || 0 }}人</text>
+            <text class="disc-sub-action">邀请 →</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>
@@ -109,44 +101,47 @@
         </view>
       </view>
 
-      <!-- 增值服务入口 -->
-      <view class="section">
-        <view class="section-header">
-          <text class="section-title">🚀 增值服务</text>
-        </view>
-        <view class="service-grid">
-          <view class="service-item" @click="goToCheckin">
-            <text class="service-icon">📝</text>
-            <text class="service-label">记账打卡</text>
+      <!-- 财富数据卡（孩子） -->
+      <view class="section" v-else>
+        <view class="child-wealth-card">
+          <view class="child-wealth-item">
+            <text class="child-wealth-icon">⭐</text>
+            <text class="child-wealth-value">{{ wealthPoints || 0 }}</text>
+            <text class="child-wealth-label">累计积分</text>
           </view>
-          <view class="service-item" @click="goToInsurance">
-            <text class="service-icon">🛡️</text>
-            <text class="service-label">保单管理</text>
+          <view class="child-wealth-item">
+            <text class="child-wealth-icon">📝</text>
+            <text class="child-wealth-value">{{ taskPercent }}%</text>
+            <text class="child-wealth-label">任务完成</text>
           </view>
-          <view class="service-item" @click="goToCreator">
-            <text class="service-icon">🎨</text>
-            <text class="service-label">创客中心</text>
+          <view class="child-wealth-item">
+            <text class="child-wealth-icon">🏆</text>
+            <text class="child-wealth-value">{{ badgeCount }}</text>
+            <text class="child-wealth-label">已获徽章</text>
+          </view>
+        </view>
+        <view class="child-trend">
+          <text class="child-trend-title">📊 本周成长趋势</text>
+          <view class="child-trend-bars">
+            <view class="trend-bar" v-for="(h, i) in weekTrend" :key="i" :style="{ height: h + '%' }"></view>
+          </view>
+          <view class="child-trend-days">
+            <text class="trend-day" v-for="(d, i) in weekDays" :key="i">{{ d }}</text>
           </view>
         </view>
       </view>
 
-      <!-- 消费中心 -->
+      <!-- 财富服务 8 宫格 -->
       <view class="section">
         <view class="section-header">
-          <text class="section-title">🛍️ 消费中心</text>
+          <text class="section-title">🚀 财富服务</text>
         </view>
         <view class="service-grid">
-          <view class="service-item" @click="goToShop">
-            <text class="service-icon">🏪</text>
-            <text class="service-label">商城首页</text>
-          </view>
-          <view class="service-item" @click="goToOrders">
-            <text class="service-icon">📋</text>
-            <text class="service-label">我的订单</text>
-          </view>
-          <view class="service-item" @click="goToAfterSales">
-            <text class="service-icon">🔄</text>
-            <text class="service-label">售后服务</text>
+          <view class="service-item" v-for="item in serviceList" :key="item.label" @click="onServiceClick(item.action)">
+            <view class="service-icon-wrap">
+              <text class="service-icon">{{ item.icon }}</text>
+            </view>
+            <text class="service-label">{{ item.label }}</text>
           </view>
         </view>
       </view>
@@ -157,10 +152,6 @@
           <text>👤 个人中心</text>
           <text class="arrow">›</text>
         </view>
-        <view class="menu-item" @click="goToPointsLogs">
-          <text>📊 积分记录</text>
-          <text class="arrow">›</text>
-        </view>
         <view class="menu-item logout-item" @click="logout">
           <text>🚪 退出登录</text>
           <text class="arrow">›</text>
@@ -173,11 +164,11 @@
 <script>
 import TabTransition from '../../components/tab-transition.vue'
 import PageBanner from '../../components/PageBanner.vue'
+import WealthEnergyRing from '../../components/WealthEnergyRing.vue'
 import WealthSubScores from '../../components/WealthSubScores.vue'
 import BodyWealthAlert from '../../components/BodyWealthAlert.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
 import {
-  verifyPassword,
   getChildren,
   getWealthDetail,
   getReferralCode,
@@ -187,23 +178,14 @@ import {
 } from '../../utils/api.js'
 
 export default {
-  components: { TabTransition, PageBanner, WealthSubScores, BodyWealthAlert, FamilyMemberStrip },
+  components: { TabTransition, PageBanner, WealthEnergyRing, WealthSubScores, BodyWealthAlert, FamilyMemberStrip },
   data() {
     return {
       showTabTransition: true,
       isLoggedIn: false,
       role: 'parent',
-      isSwitchedChild: false,
       // 五维评分
-      bodyScore: 0,
-      mindScore: 0,
-      wisdomScore: 0,
-      actionScore: 0,
       wealthScore: 0,
-      // 心的子维度（仅孩子有真实数据）
-      heartEmotionStable: null,
-      heartUnderstanding: null,
-      heartLegacy: null,
       // 子维度 - parent
       wealthIncome: null,
       wealthAchievement: null,
@@ -222,10 +204,32 @@ export default {
         referralCount: 0,
         referralCode: ''
       },
+      // 成长溪流
+      deltaPercent: 5.2,
+      streamStages: [
+        { key: 'start', icon: '💧', name: '起步', desc: '新人阶段', range: '0-30%' },
+        { key: 'mid', icon: '🌊', name: '汇流', desc: '成长阶段', range: '30-70%' },
+        { key: 'surge', icon: '🌊🌊', name: '奔涌', desc: '达人阶段', range: '70-100%' }
+      ],
+      // 孩子数据
+      taskPercent: 0,
+      badgeCount: 0,
+      weekTrend: [30, 40, 35, 50, 60, 55, 70],
+      weekDays: ['一', '二', '三', '四', '五', '六', '日'],
+      // 服务列表
+      serviceList: [
+        { icon: '📝', label: '记账打卡', action: 'goToCheckin' },
+        { icon: '🛡️', label: '保单管理', action: 'goToInsurance' },
+        { icon: '🎨', label: '创客中心', action: 'goToCreator' },
+        { icon: '🏪', label: '商城首页', action: 'goToShop' },
+        { icon: '🛒', label: '购物车', action: 'goToCart' },
+        { icon: '📋', label: '我的订单', action: 'goToOrders' },
+        { icon: '🔄', label: '售后服务', action: 'goToAfterSales' },
+        { icon: '📊', label: '积分记录', action: 'goToPointsLogs' }
+      ],
       children: [],
       familyMembersVisible: [],
       selectedMemberId: null,
-      articlesLoading: false,
     }
   },
   computed: {
@@ -234,6 +238,18 @@ export default {
         return uni.getStorageSync('currentChildId')
       }
       return ''
+    },
+    currentStage() {
+      var s = this.wealthScore
+      if (s >= 70) return 'surge'
+      if (s >= 30) return 'mid'
+      return 'start'
+    },
+    streamTip() {
+      var s = this.wealthScore
+      if (s >= 70) return '🎉 已是富足达人，继续引领全家成长！'
+      if (s >= 30) return '💡 坚持分享，下一阶段"奔涌"在望'
+      return '🌱 从今天开始，迈出创富第一步'
     }
   },
   onShow() {
@@ -253,7 +269,6 @@ export default {
       return
     }
     this.role = currentRole
-    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
 
     this.loadChildren()
     this.loadWealthDetail()
@@ -317,9 +332,6 @@ export default {
             this.wealthEducation = d.wealthEducation
             this.wealthSocial = d.wealthSocial
             this.wealthPoints = d.wealthPoints
-            this.heartEmotionStable = d.heartEmotionStable
-            this.heartUnderstanding = d.heartUnderstanding
-            this.heartLegacy = d.heartLegacy
           }
           // 身克富杠杆状态
           this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
@@ -366,78 +378,6 @@ export default {
         }
       })
     },
-    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-extra/family-members' })
-              }
-            }
-          })
-          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: function(res) {
-          if (res.confirm && res.content) {
-            verifyPassword(res.content).then(function(result) {
-              if (result.code === 200) {
-                uni.removeStorageSync('isSwitchedChild')
-                uni.removeStorageSync('currentChildId')
-                self.isSwitchedChild = false
-                self.role = 'parent'
-                if (self.$store && self.$store.commit) {
-                  self.$store.commit('switchBackToParent')
-                }
-                uni.showToast({ title: '已退出切换', icon: 'success' })
-                setTimeout(function() {
-                  uni.reLaunch({ url: '/pages/index-home/index' })
-                }, 1000)
-              } else {
-                uni.showToast({ title: '密码错误', icon: 'none' })
-              }
-            }).catch(function() {
-              uni.showToast({ title: '验证失败', icon: 'none' })
-            })
-          }
-        }
-      })
-    },
     logout() {
       uni.showModal({
         title: '退出登录',
@@ -483,18 +423,12 @@ export default {
     goToNetwork() {
       uni.navigateTo({ url: '/pages/promotion/team' })
     },
-    childSubDimClick(key) {
-      var routes = {
-        education: '/pages/assessment/results',
-        social: '/pages/activity/index',
-        points: '/pages/shop/index',
-        emotion: '/pages/mind-detail/emotion-report',
-        understanding: '/pages/mind-detail/emotion-trend',
-        legacy: '/pages/wishes/index'
-      }
-      var url = routes[key]
-      if (url) {
-        uni.navigateTo({ url: url })
+    goToCart() {
+      uni.navigateTo({ url: '/pages/shop/cart/cart' })
+    },
+    onServiceClick(action) {
+      if (this[action]) {
+        this[action]()
       }
     }
   }
@@ -527,49 +461,198 @@ export default {
   color: #999;
 }
 
-/* 切换区域 */
-.switch-section {
-  margin: 0 30rpx 20rpx;
+/* 成长溪流 */
+.stream-section {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
 }
-.btn-switch {
-  background: linear-gradient(135deg, #F59E0B, #FBBF24);
-  color: #fff;
+.stream-stages {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+.stage-card {
+  flex: 1;
+  margin: 0 8rpx;
+  padding: 20rpx;
+  border-radius: 16rpx;
+  background: #F5F9FC;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stage-card.active {
+  background: #FFF7ED;
+  border: 2rpx solid #FBBF24;
+}
+.stage-icon {
+  font-size: 44rpx;
+}
+.stage-name {
   font-size: 26rpx;
-  padding: 16rpx 0;
-  border-radius: 40rpx;
+  font-weight: bold;
+  color: #333;
+  margin-top: 8rpx;
+}
+.stage-desc {
+  font-size: 20rpx;
+  color: #999;
+  margin-top: 4rpx;
+}
+.stage-range {
+  font-size: 20rpx;
+  color: #F59E0B;
+  margin-top: 4rpx;
+}
+.stream-water {
+  height: 20rpx;
+  border-radius: 10rpx;
+  background: #FEF3C7;
+  overflow: hidden;
+}
+.stream-water-fill {
+  height: 100%;
+  border-radius: 10rpx;
+  background: linear-gradient(90deg, #F59E0B, #FBBF24);
+  transition: width 0.8s ease;
+}
+.stream-percent {
+  display: block;
+  text-align: right;
+  font-size: 22rpx;
+  color: #F59E0B;
+  margin-top: 8rpx;
+}
+.stream-tip {
+  display: block;
   text-align: center;
-  line-height: 1.5;
+  font-size: 24rpx;
+  color: #92400E;
+  margin-top: 12rpx;
 }
 
-/* 财富数据卡片 */
-.wealth-card {
-  background: #fff;
+/* 财富数据主卡 */
+.disc-card {
+  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
   border-radius: 20rpx;
-  padding: 30rpx 20rpx;
+  padding: 30rpx;
+  margin-bottom: 16rpx;
   display: flex;
-  align-items: center;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  flex-direction: column;
+}
+.disc-label {
+  font-size: 26rpx;
+  color: #92400E;
 }
-.wealth-item {
+.disc-value {
+  font-size: 56rpx;
+  font-weight: bold;
+  color: #F59E0B;
+  margin-top: 8rpx;
+}
+.disc-sub {
+  font-size: 24rpx;
+  color: #B45309;
+  margin-top: 8rpx;
+}
+.disc-sub-row {
+  display: flex;
+  margin-bottom: 16rpx;
+}
+.disc-sub-card {
+  flex: 1;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+}
+.disc-sub-card:first-child {
+  margin-right: 8rpx;
+}
+.disc-sub-card:last-child {
+  margin-left: 8rpx;
+}
+.disc-sub-label {
+  font-size: 24rpx;
+  color: #999;
+}
+.disc-sub-value {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-top: 8rpx;
+}
+.disc-sub-action {
+  font-size: 22rpx;
+  color: #F59E0B;
+  margin-top: 8rpx;
+}
+
+/* 孩子财富卡 */
+.child-wealth-card {
+  display: flex;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx 0;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
+}
+.child-wealth-item {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.wealth-value {
-  font-size: 40rpx;
+.child-wealth-icon {
+  font-size: 44rpx;
+}
+.child-wealth-value {
+  font-size: 36rpx;
   font-weight: bold;
-  color: #F97316;
+  color: #F59E0B;
+  margin-top: 8rpx;
 }
-.wealth-label {
-  font-size: 24rpx;
+.child-wealth-label {
+  font-size: 22rpx;
   color: #999;
+  margin-top: 4rpx;
+}
+.child-trend {
+  margin-top: 16rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
+}
+.child-trend-title {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: bold;
+}
+.child-trend-bars {
+  display: flex;
+  align-items: flex-end;
+  height: 120rpx;
+  margin-top: 16rpx;
+}
+.trend-bar {
+  flex: 1;
+  margin: 0 6rpx;
+  background: linear-gradient(180deg, #FBBF24, #F59E0B);
+  border-radius: 6rpx 6rpx 0 0;
+}
+.child-trend-days {
+  display: flex;
   margin-top: 8rpx;
 }
-.wealth-divider {
-  width: 1rpx;
-  height: 60rpx;
-  background: #f0f0f0;
+.trend-day {
+  flex: 1;
+  text-align: center;
+  font-size: 20rpx;
+  color: #999;
 }
 
 /* 邀请码复制条 */
@@ -602,52 +685,14 @@ export default {
   border-radius: 20rpx;
 }
 
-/* 三子维度卡片 */
-.sub-dim-grid {
-  display: flex;
-}
-.sub-dim-card {
-  flex: 1;
-  margin-right: 16rpx;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx 16rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
-}
-.sub-dim-card:last-child {
-  margin-right: 0;
-}
-.sub-dim-score {
-  font-size: 48rpx;
-  font-weight: bold;
-  color: #F59E0B;
-}
-.heart-sub-dim .sub-dim-score {
-  color: #FF6B9D;
-}
-.sub-dim-label {
-  font-size: 24rpx;
-  color: #333;
-  margin-top: 8rpx;
-  font-weight: 500;
-}
-.sub-dim-desc {
-  font-size: 20rpx;
-  color: #999;
-  margin-top: 4rpx;
-}
-
-/* 增值服务 */
+/* 服务入口 */
 .service-grid {
   display: flex;
   flex-wrap: wrap;
   background: #fff;
   border-radius: 20rpx;
   padding: 24rpx 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
 }
 .service-item {
   width: 25%;
@@ -656,10 +701,19 @@ export default {
   align-items: center;
   padding: 16rpx 0;
 }
-.service-icon {
-  font-size: 48rpx;
+.service-icon-wrap {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 24rpx;
+  background: #FFF7ED;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 8rpx;
 }
+.service-icon {
+  font-size: 40rpx;
+}
 .service-label {
   font-size: 22rpx;
   color: #666;
@@ -722,15 +776,4 @@ export default {
 .login-prompt .login-btn::after {
   border: none;
 }
-
-/* 退出切换 */
-.exit-switch {
-  margin: 20rpx 30rpx 0;
-  padding: 16rpx 24rpx;
-  background: #FEF3C7;
-  border-radius: 12rpx;
-  text-align: center;
-  font-size: 26rpx;
-  color: #92400E;
-}
 </style>