Procházet zdrojové kódy

feat(wealth): 五行相生相克前端展示

- 5个克制状态条:身克富、行克身、富克心、心克智、智克行
- 心理维度子项卡片(仅儿童用户显示)
- 11个新data字段 + 13个CSS状态变体
- loadWealthDetail读取API新字段
Xiaogang Liao před 2 měsíci
rodič
revize
6b291d547c
1 změnil soubory, kde provedl 245 přidání a 3 odebrání
  1. 245 3
      cfc-frontend/pages/wealth/index.vue

+ 245 - 3
cfc-frontend/pages/wealth/index.vue

@@ -19,7 +19,7 @@
         <text>🔄 退出切换</text>
         <text>🔄 退出切换</text>
       </view>
       </view>
 
 
-      <!-- 身克富状态条 -->
+      <!-- 五行相克状态条(5组) -->
       <view class="section">
       <view class="section">
         <view class="section-header">
         <view class="section-header">
           <text class="section-title">⚖️ 身克富平衡</text>
           <text class="section-title">⚖️ 身克富平衡</text>
@@ -43,7 +43,99 @@
         </view>
         </view>
       </view>
       </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>
+
+      <!-- 财富子维度卡片 -->
       <view class="section">
       <view class="section">
         <view class="section-header">
         <view class="section-header">
           <text class="section-title">💎 财富子维度</text>
           <text class="section-title">💎 财富子维度</text>
@@ -86,6 +178,30 @@
         </view>
         </view>
       </view>
       </view>
 
 
+      <!-- 心的子维度(仅孩子) -->
+      <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">
+            <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">
+            <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">
+            <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">
       <view class="section">
         <view class="section-header">
         <view class="section-header">
@@ -151,11 +267,31 @@ export default {
     return {
     return {
       role: 'parent',
       role: 'parent',
       isSwitchedChild: false,
       isSwitchedChild: false,
-      // 身克富
+      // 五维评分
       bodyScore: 0,
       bodyScore: 0,
+      mindScore: 0,
+      wisdomScore: 0,
+      actionScore: 0,
       wealthScore: 0,
       wealthScore: 0,
+      // 身克富
       bodyWealthStatus: 'normal',
       bodyWealthStatus: 'normal',
       bodyWealthMessage: '',
       bodyWealthMessage: '',
+      // 行克身
+      actionBodyStatus: 'normal',
+      actionBodyMessage: '',
+      // 富克心
+      wealthHeartStatus: 'normal',
+      wealthHeartMessage: '',
+      // 心克智
+      mindWisdomStatus: 'normal',
+      mindWisdomMessage: '',
+      // 智克行
+      wisdomActionStatus: 'normal',
+      wisdomActionMessage: '',
+      // 心的子维度(仅孩子有真实数据)
+      heartEmotionStable: null,
+      heartUnderstanding: null,
+      heartLegacy: null,
       // 子维度 - parent
       // 子维度 - parent
       wealthIncome: null,
       wealthIncome: null,
       wealthAchievement: null,
       wealthAchievement: null,
@@ -214,9 +350,20 @@ export default {
         if (res && res.data) {
         if (res && res.data) {
           var d = res.data
           var d = res.data
           this.bodyScore = d.bodyScore || 0
           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.wealthScore = d.wealthScore || 0
           this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
           this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
           this.bodyWealthMessage = d.bodyWealthMessage || ''
           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') {
           if (memberType === 'parent') {
             this.wealthIncome = d.wealthIncome
             this.wealthIncome = d.wealthIncome
             this.wealthAchievement = d.wealthAchievement
             this.wealthAchievement = d.wealthAchievement
@@ -225,6 +372,9 @@ export default {
             this.wealthEducation = d.wealthEducation
             this.wealthEducation = d.wealthEducation
             this.wealthSocial = d.wealthSocial
             this.wealthSocial = d.wealthSocial
             this.wealthPoints = d.wealthPoints
             this.wealthPoints = d.wealthPoints
+            this.heartEmotionStable = d.heartEmotionStable
+            this.heartUnderstanding = d.heartUnderstanding
+            this.heartLegacy = d.heartLegacy
           }
           }
         }
         }
       } catch (e) {
       } catch (e) {
@@ -363,6 +513,15 @@ export default {
 .bar-fill.wealth-bar {
 .bar-fill.wealth-bar {
   background: linear-gradient(90deg, #F59E0B, #FBBF24);
   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);
+}
 .bar-value {
 .bar-value {
   font-size: 24rpx;
   font-size: 24rpx;
   color: #999;
   color: #999;
@@ -385,6 +544,86 @@ export default {
   color: #991B1B;
   color: #991B1B;
   background: rgba(239,68,68,0.1);
   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;
+}
+.body-wealth-bar.status-paralysis {
+  background: #F3F4F6;
+  border: 1rpx solid #9CA3AF;
+}
+.status-cautious .bw-message {
+  color: #92400E;
+  background: rgba(245,158,11,0.06);
+}
+.status-balanced .bw-message {
+  color: #065F46;
+  background: rgba(16,185,129,0.06);
+}
+.status-eruption .bw-message {
+  color: #991B1B;
+  background: rgba(239,68,68,0.06);
+}
+.status-judgmental .bw-message {
+  color: #92400E;
+  background: rgba(245,158,11,0.06);
+}
+.status-materialized .bw-message {
+  color: #166534;
+  background: rgba(34,197,94,0.06);
+}
+.status-nourished .bw-message {
+  color: #065F46;
+  background: rgba(16,185,129,0.06);
+}
+.status-overprotect .bw-message {
+  color: #9F1239;
+  background: rgba(251,113,133,0.06);
+}
+.status-cold_wise .bw-message {
+  color: #5B21B6;
+  background: rgba(139,92,246,0.06);
+}
+.status-blind .bw-message {
+  color: #5B21B6;
+  background: rgba(124,58,237,0.06);
+}
+.status-paralysis .bw-message {
+  color: #374151;
+  background: rgba(156,163,175,0.06);
+}
 
 
 /* 三子维度卡片 */
 /* 三子维度卡片 */
 .sub-dim-grid {
 .sub-dim-grid {
@@ -409,6 +648,9 @@ export default {
   font-weight: bold;
   font-weight: bold;
   color: #F59E0B;
   color: #F59E0B;
 }
 }
+.heart-sub-dim .sub-dim-score {
+  color: #FF6B9D;
+}
 .sub-dim-label {
 .sub-dim-label {
   font-size: 24rpx;
   font-size: 24rpx;
   color: #333;
   color: #333;