cfc/cfc-frontend/pages/wealth/index.vue

<template>
  <view class="container">
    <!-- 未登录 -->
    <view v-if="!isLoggedIn" class="login-prompt">
      <view class="prompt-icon">👤</view>
      <text class="prompt-title">登录浠艾福</text>
      <text class="prompt-desc">登录后查看财富能量详情</text>
      <button class="login-btn" @click="goLogin">登录 / 注册</button>
    </view>

    <template v-else>
      <!-- 品牌头部 -->
      <PageBanner theme="wealth"
        tagline="利他创富 · 价值共享"
        quote="富足源于利他与坚持" />

      <!-- 退出切换按钮 -->
      <view class="exit-switch" v-if="isSwitchedChild" @click="exitSwitch">
        <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>
      </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-header">
          <text class="section-title">💎 财富子维度</text>
        </view>
        <!-- 家长版 -->
        <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-desc">累计佣金</text>
          </view>
          <view class="sub-dim-card" @click="goToAchievements">
            <text class="sub-dim-score">{{ wealthAchievement || '-' }}</text>
            <text class="sub-dim-label">个人成就</text>
            <text class="sub-dim-desc">认证成就</text>
          </view>
          <view class="sub-dim-card" @click="goToNetwork">
            <text class="sub-dim-score">{{ wealthNetwork || '-' }}</text>
            <text class="sub-dim-label">资源网络</text>
            <text class="sub-dim-desc">推荐关系</text>
          </view>
        </view>
        <!-- 孩子版 -->
        <view class="sub-dim-grid" v-else>
          <view class="sub-dim-card">
            <text class="sub-dim-score">{{ wealthEducation || '-' }}</text>
            <text class="sub-dim-label">学业成绩</text>
            <text class="sub-dim-desc">测评综合</text>
          </view>
          <view class="sub-dim-card">
            <text class="sub-dim-score">{{ wealthSocial || '-' }}</text>
            <text class="sub-dim-label">社交筹码</text>
            <text class="sub-dim-desc">活动参与</text>
          </view>
          <view class="sub-dim-card">
            <text class="sub-dim-score">{{ wealthPoints || '-' }}</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>
        <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-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>
          <view class="service-item" @click="goToInsurance">
            <text class="service-icon">🛡️</text>
            <text class="service-label">保单管理</text>
          </view>
          <view class="service-item" @click="goToCreator">
            <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>

      <!-- 商品推荐 -->
      <DimensionProductList
        v-if="isLoggedIn"
        dimensionCode="wealth"
        :familyId="activeChildId"
        title="为你推荐" />

      <!-- 底部菜单（精简） -->
      <view class="menu-list">
        <view class="menu-item" v-if="role === 'parent'" @click="goToProfile">
          <text>⚙️ 个人设置</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToPointsLogs">
          <text>📊 积分记录</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToPromotion">
          <text>📣 推广中心</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import { getWealthDetail, verifyPassword, getChildren } from '../../utils/api.js'

export default {
  components: { PageBanner },
  data() {
    return {
      role: 'parent',
      isSwitchedChild: false,
      // 五维评分
      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,
      heartLegacy: null,
      // 子维度 - parent
      wealthIncome: null,
      wealthAchievement: null,
      wealthNetwork: null,
      // 子维度 - child
      wealthEducation: null,
      wealthSocial: null,
      wealthPoints: null,
      children: []
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    }
  },
  onShow() {
    if (!uni.getStorageSync('token')) return
    var currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (currentRole === 'teacher') {
      uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
      return
    }
    this.role = currentRole
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
    this.loadChildren()
    this.loadWealthDetail()
  },
  methods: {
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    async loadChildren() {
      try {
        var res = await getChildren()
        this.children = res.data || []
      } catch (e) {
        console.error('获取孩子列表失败', e)
      }
    },
    async loadWealthDetail() {
      var memberId = null
      var memberType = this.role
      if (this.role === 'child') {
        memberId = uni.getStorageSync('currentChildId')
        if (!memberId && this.children.length > 0) {
          memberId = this.children[0].id
        }
      } else {
        memberId = uni.getStorageSync('userId')
      }
      if (!memberId) return

      try {
        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
            this.wealthNetwork = d.wealthNetwork
          } else {
            this.wealthEducation = d.wealthEducation
            this.wealthSocial = d.wealthSocial
            this.wealthPoints = d.wealthPoints
            this.heartEmotionStable = d.heartEmotionStable
            this.heartUnderstanding = d.heartUnderstanding
            this.heartLegacy = d.heartLegacy
          }
        }
      } catch (e) {
        console.error('获取富维度详情失败', e)
      }
    },
    exitSwitch() {
      if (!this.isSwitchedChild) return
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: async (res) => {
          if (res.confirm && res.content) {
            try {
              var verifyResult = await verifyPassword(res.content)
              if (verifyResult.code === 200) {
                this.$store.commit('switchBackToParent')
                this.isSwitchedChild = false
                this.role = 'parent'
                uni.showToast({ title: '已退出切换', icon: 'success' })
                uni.reLaunch({ url: '/pages/index/index' })
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            } catch (e) {
              uni.showToast({ title: '验证失败', icon: 'none' })
            }
          }
        }
      })
    },
    goToCheckin() {
      uni.navigateTo({ url: '/pages/wealth/checkin' })
    },
    goToInsurance() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToCreator() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToBadges() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToGrowthReport() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToPointsLogs() {
      uni.navigateTo({ url: '/pages/points/points' })
    },
    goToPromotion() {
      uni.navigateTo({ url: '/pages/promotion/index' })
    },
    goToProfile() {
      uni.navigateTo({ url: '/pages/profile/index' })
    },
    goToIncome() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToAchievements() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToNetwork() {
      uni.showToast({ title: '即将上线', icon: 'none' })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* 身克富状态条 */
.body-wealth-bar {
  background: #fff;
  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 {
  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;
}
.bar-track {
  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);
}
.bar-value {
  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;
}
.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 {
  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);
}
.service-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
}
.service-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}
.service-label {
  font-size: 22rpx;
  color: #666;
}

/* 底部菜单 */
.menu-list {
  margin: 30rpx 30rpx 0;
  background: #fff;
  border-radius: 16rpx;
}
.menu-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}
.menu-item:last-child {
  border-bottom: none;
}
.arrow {
  color: #ccc;
  font-size: 32rpx;
}

/* 未登录 */
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 60rpx;
}
.prompt-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
  width: 160rpx;
  height: 160rpx;
  line-height: 160rpx;
  text-align: center;
  background: #f5f5f5;
  border-radius: 50%;
}
.prompt-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.prompt-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-bottom: 40rpx;
}
.login-prompt .login-btn {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  text-align: center;
  border: none;
}
.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>