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

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" :style="{ background: navGradient }">
      <view class="nav-back" @click="goBack">
        <text class="nav-back-icon">&#x2190;</text>
      </view>
      <text class="nav-title">{{ pageTitle }}</text>
      <view class="nav-right" @click="showMemberPicker = true">
        <text class="nav-current-member">{{ currentMemberName }}</text>
        <text class="nav-arrow">▼</text>
      </view>
    </view>

    <!-- 加载中 -->
    <view class="loading-wrap" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 未登录 -->
    <template v-else-if="!isLoggedIn">
      <view class="empty-state">
        <text class="empty-icon">🌟</text>
        <text class="empty-title">登录后查看五维能量</text>
        <text class="empty-desc">了解您和家人的身·智·富·行·心能量状态</text>
        <button class="login-btn" @click="goLogin">去登录</button>
      </view>
    </template>

    <!-- 已登录 -->
    <template v-else-if="!loading && sandboxData">
      <!-- ===== 能量总览卡 ===== -->
      <view class="overview-card">
        <view class="overview-header">
          <view class="overview-avatar" :style="{ background: avatarGradient }">
            <text class="avatar-text">{{ avatarChar }}</text>
          </view>
          <view class="overview-info">
            <text class="overview-name">{{ currentMemberName }}</text>
            <text class="overview-role">{{ currentRoleLabel }}</text>
          </view>
          <view class="overview-score">
            <text class="score-value">{{ overallScore || '--' }}</text>
            <text class="score-label">综合能量</text>
          </view>
        </view>

        <!-- 五维能量条 -->
        <view class="dims-row">
          <view class="dim-bar" v-for="dim in dimList" :key="dim.code" @click="goDimension(dim.code)">
            <view class="dim-icon-wrap" :style="{ background: dim.color }">
              <text class="dim-icon">{{ dim.icon }}</text>
            </view>
            <view class="dim-bar-track">
              <view class="dim-bar-fill" :style="{ width: getDimScore(dim.code) + '%', background: dim.color }"></view>
            </view>
            <text class="dim-bar-score">{{ getDimScore(dim.code) }}</text>
            <text class="dim-bar-label">{{ dim.label }}</text>
          </view>
        </view>
      </view>

      <!-- ===== 五维雷达图 ===== -->
      <view class="section radar-section">
        <view class="section-header">
          <text class="section-title">五维雷达</text>
          <text class="section-hint" v-if="currentView === 'family'">全家平均</text>
          <text class="section-hint" v-else>{{ currentMemberName }}个人</text>
        </view>
        <RadarChart
          v-if="radarDims.length >= 3"
          :dimensions="radarDims"
          :scores="radarScores"
          :avg-scores="[]"
          fillColor="rgba(102,126,234,0.2)"
          strokeColor="#667eea"
          gridColor="rgba(102,126,234,0.15)"
          labelColor="#888"
          :width="580"
          :height="580"
          @dimensionClick="goDimension" />
        <view class="empty-radar" v-else>
          <text>暂无足够数据生成雷达图</text>
        </view>
      </view>

      <!-- ===== 家庭成员对比 ===== -->
      <view class="section compare-section" v-if="currentView !== 'self' && familyMembers.length > 1">
        <view class="section-header">
          <text class="section-title">家庭成员能量对比</text>
        </view>
        <view class="compare-list">
          <view
            class="compare-item"
            v-for="m in familyMembers"
            :key="m.memberId"
            :class="{ active: selectedMemberId === m.memberId }"
            @click="selectMember(m)">
            <view class="compare-avatar" :style="{ background: memberColor(m) }">
              <text class="compare-avatar-text">{{ m.name ? m.name.charAt(0) : '?' }}</text>
            </view>
            <view class="compare-info">
              <text class="compare-name">{{ m.name || '成员' }}</text>
              <text class="compare-role">{{ m.familyRole || m.memberType || '' }}</text>
            </view>
            <view class="compare-score">
              <text class="compare-score-value" :style="{ color: memberColor(m) }">{{ m.overallScore || '--' }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- ===== 快速入口 ===== -->
      <view class="section quick-section">
        <view class="section-header">
          <text class="section-title">能量详情</text>
        </view>
        <view class="quick-grid">
          <view
            class="quick-item"
            v-for="dim in dimList"
            :key="dim.code"
            @click="goDimension(dim.code)">
            <view class="quick-icon-wrap" :style="{ background: dim.color + '22' }">
              <text class="quick-icon">{{ dim.icon }}</text>
            </view>
            <text class="quick-label">{{ dim.label }}</text>
            <text class="quick-score">{{ getDimScore(dim.code) }}</text>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-spacer"></view>
    </template>

    <!-- 成员选择弹窗 -->
    <view class="modal-mask" v-if="showMemberPicker" @click="showMemberPicker = false">
      <view class="member-picker" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择查看对象</text>
          <text class="picker-close" @click="showMemberPicker = false">×</text>
        </view>
        <view class="picker-item" :class="{ active: currentView === 'family' }" @click="switchView('family')">
          <text class="picker-icon">🏠</text>
          <text class="picker-label">全家总览</text>
          <text class="picker-desc">家庭整体能量状态</text>
        </view>
        <view
          class="picker-item"
          v-for="m in familyMembers"
          :key="m.memberId"
          :class="{ active: selectedMemberId === m.memberId }"
          @click="selectMember(m); showMemberPicker = false">
          <view class="picker-avatar" :style="{ background: memberColor(m) }">
            <text class="picker-avatar-text">{{ m.name ? m.name.charAt(0) : '?' }}</text>
          </view>
          <text class="picker-label">{{ m.name || '成员' }}</text>
          <text class="picker-desc">{{ m.familyRole || m.memberType || '' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import RadarChart from '../../components/RadarChart.vue'
import { getFamilyEnergySandbox, getFamilyMemberList } from '../../utils/api.js'

var DIM_CONFIG = [
  { code: 'body',    label: '身', icon: '💪', color: '#10B981', gradient: 'linear-gradient(135deg,#10B981,#34D399)' },
  { code: 'mind',    label: '心', icon: '❤️', color: '#8B5CF6', gradient: 'linear-gradient(135deg,#8B5CF6,#A78BFA)' },
  { code: 'wisdom',  label: '智', icon: '🧠', color: '#F59E0B', gradient: 'linear-gradient(135deg,#F59E0B,#FBBF24)' },
  { code: 'action',  label: '行', icon: '⚡', color: '#F97316', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },
  { code: 'wealth',  label: '富', icon: '💎', color: '#3B82F6', gradient: 'linear-gradient(135deg,#3B82F6,#60A5FA)' }
]

export default {
  components: { RadarChart },
  data() {
    return {
      loading: true,
      isLoggedIn: false,
      sandboxData: null,
      familyMembers: [],
      selectedMemberId: null,
      currentView: 'self', // self | family
      showMemberPicker: false
    }
  },
  computed: {
    dimList() { return DIM_CONFIG },
    currentMember() {
      if (this.currentView === 'family') return null
      return this.familyMembers.find(m => m.memberId === this.selectedMemberId) || null
    },
    currentMemberName() {
      if (this.currentView === 'family') return '全家'
      if (!this.currentMember) return '我'
      return this.currentMember.name || '成员'
    },
    currentRoleLabel() {
      if (this.currentView === 'family') return '家庭整体'
      if (!this.currentMember) return ''
      return this.currentMember.familyRole || this.currentMember.memberType || ''
    },
    overallScore() {
      if (this.currentView === 'family') {
        return this.sandboxData && this.sandboxData.overallScore
      }
      if (this.currentMember) {
        return this.currentMember.overallScore
      }
      return null
    },
    avatarChar() {
      if (this.currentView === 'family') return '🏠'
      if (this.currentMember) return (this.currentMember.name || '?').charAt(0)
      return '👤'
    },
    avatarGradient() {
      if (this.currentView === 'family') return 'linear-gradient(135deg,#667eea,#764ba2)'
      if (this.currentMember) return this.memberColor(this.currentMember)
      return 'linear-gradient(135deg,#8B5CF6,#A78BFA)'
    },
    navTitle() { return this.currentMemberName + ' · 五维能量' },
    navGradient() {
      if (this.currentView === 'family') return 'linear-gradient(135deg,#667eea,#764ba2)'
      if (this.currentMember) {
        var dim = DIM_CONFIG[0]
        return dim.gradient
      }
      return 'linear-gradient(135deg,#667eea,#764ba2)'
    },
    pageTitle() { return this.navTitle },
    radarDims() {
      return DIM_CONFIG.map(d => d.label)
    },
    radarScores() {
      if (this.currentView === 'family') {
        var d = this.sandboxData
        return DIM_CONFIG.map(dim => d ? (d[dim.code + 'Score'] || 0) : 0)
      }
      if (this.currentMember) {
        return DIM_CONFIG.map(dim => this.currentMember[dim.code + 'Score'] || 0)
      }
      return [0, 0, 0, 0, 0]
    }
  },
  onLoad() {
    this.checkLogin()
    this.loadData()
  },
  onShow() {
    if (this.isLoggedIn) this.loadData()
  },
  methods: {
    checkLogin() {
      this.isLoggedIn = !!uni.getStorageSync('token')
    },
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    goBack() {
      uni.navigateBack({ fail: function() { uni.switchTab({ url: '/pages/index-home/index' }) } })
    },
    memberColor(member) {
      if (!member) return 'linear-gradient(135deg,#8B5CF6,#A78BFA)'
      var types = { parent: '#F59E0B', child: '#10B981', teacher: '#3B82F6' }
      var t = member.memberType || 'parent'
      var colors = {
        parent: 'linear-gradient(135deg,#F59E0B,#FBBF24)',
        child:  'linear-gradient(135deg,#10B981,#34D399)',
        teacher:'linear-gradient(135deg,#3B82F6,#60A5FA)'
      }
      return colors[t] || colors.parent
    },
    getDimScore(code) {
      if (this.currentView === 'family') {
        return this.sandboxData ? (this.sandboxData[code + 'Score'] || 0) : 0
      }
      if (this.currentMember) {
        return this.currentMember[code + 'Score'] || 0
      }
      return 0
    },
    async loadData() {
      this.loading = true
      try {
        var res = await getFamilyEnergySandbox()
        if (res && res.code === 200 && res.data) {
          this.sandboxData = res.data
          // 如果是新格式，提取 familyData
          if (res.data.familyData) {
            this.sandboxData = res.data.familyData
          }
        }
        // 加载家庭成员
        var memRes = await getFamilyMemberList({ visibleOnly: true })
        if (memRes && memRes.code === 200 && memRes.data) {
          this.familyMembers = memRes.data
          // 默认选中第一个非自己（如果有）
          if (this.familyMembers.length > 0 && !this.selectedMemberId) {
            this.selectedMemberId = this.familyMembers[0].memberId
          }
        }
      } catch (e) {
        console.error('加载能量数据失败', e)
      } finally {
        this.loading = false
      }
    },
    switchView(view) {
      this.currentView = view
      if (view === 'family') {
        this.selectedMemberId = null
      }
      this.showMemberPicker = false
    },
    selectMember(member) {
      this.selectedMemberId = member.memberId
      this.currentView = 'self'
      this.showMemberPicker = false
    },
    goDimension(code) {
      var url = ''
      switch (code) {
        case 'body':    url = '/pages/body-detail/index'
        case 'mind':    url = '/pages/mind-detail/index'
        case 'wisdom':  url = '/pages/wisdom-detail/index'
        case 'action':  url = '/pages/action-detail/index'
        case 'wealth':  url = '/pages/wealth/index'
        default:        return
      }
      if (this.currentView !== 'family' && this.selectedMemberId) {
        url += '?memberId=' + this.selectedMemberId
      }
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #0F1B2D 0%, #1A2744 100%);
  padding-bottom: 40rpx;
}
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  padding-top: 40rpx;
}
.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 30rpx;
}
.nav-back-icon {
  font-size: 32rpx;
  color: #fff;
}
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  margin-right: 80rpx;
}
.nav-right {
  position: absolute;
  right: 30rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: rgba(255,255,255,0.1);
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}
.nav-current-member {
  font-size: 24rpx;
  color: #fff;
}
.nav-arrow {
  font-size: 20rpx;
  color: rgba(255,255,255,0.6);
}
.loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200rpx;
}
.loading-text {
  font-size: 28rpx;
  color: rgba(255,255,255,0.5);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 40rpx;
}
.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
.empty-title { font-size: 32rpx; color: #fff; font-weight: 600; margin-bottom: 12rpx; }
.empty-desc { font-size: 24rpx; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 40rpx; }
.login-btn {
  width: 280rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}
/* ===== 总览卡 ===== */
.overview-card {
  margin: 20rpx 30rpx;
  padding: 30rpx;
  background: rgba(255,255,255,0.06);
  border-radius: 24rpx;
  border: 1rpx solid rgba(255,255,255,0.1);
}
.overview-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}
.overview-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.avatar-text { font-size: 36rpx; }
.overview-info { flex: 1; }
.overview-name { font-size: 32rpx; font-weight: 600; color: #fff; display: block; }
.overview-role { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
.overview-score { text-align: right; }
.score-value { font-size: 48rpx; font-weight: 700; color: #667eea; display: block; line-height: 1; }
.score-label { font-size: 20rpx; color: rgba(255,255,255,0.4); }
/* ===== 五维能量条 ===== */
.dims-row {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.dim-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.dim-icon-wrap {
  width: 52rpx;
  height: 52rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dim-icon { font-size: 26rpx; }
.dim-bar-track {
  flex: 1;
  height: 20rpx;
  background: rgba(255,255,255,0.08);
  border-radius: 10rpx;
  overflow: hidden;
}
.dim-bar-fill {
  height: 100%;
  border-radius: 10rpx;
  transition: width 0.5s ease;
}
.dim-bar-score {
  width: 50rpx;
  text-align: right;
  font-size: 26rpx;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.dim-bar-label {
  width: 40rpx;
  font-size: 22rpx;
  color: rgba(255,255,255,0.5);
  text-align: center;
  flex-shrink: 0;
}
/* ===== 雷达图 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}
.section-hint {
  font-size: 22rpx;
  color: rgba(255,255,255,0.4);
}
.radar-section { }
.empty-radar {
  text-align: center;
  padding: 80rpx;
  color: rgba(255,255,255,0.3);
  font-size: 26rpx;
}
/* ===== 成员对比 ===== */
.compare-section { }
.compare-list {
  background: rgba(255,255,255,0.06);
  border-radius: 20rpx;
  overflow: hidden;
  border: 1rpx solid rgba(255,255,255,0.08);
}
.compare-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.compare-item:last-child { border-bottom: none; }
.compare-item.active { background: rgba(102,126,234,0.15); }
.compare-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.compare-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
.compare-info { flex: 1; }
.compare-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
.compare-role { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
.compare-score { text-align: right; }
.compare-score-value { font-size: 36rpx; font-weight: 700; }
/* ===== 快速入口 ===== */
.quick-section { }
.quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  background: rgba(255,255,255,0.06);
  border-radius: 20rpx;
  padding: 20rpx;
  border: 1rpx solid rgba(255,255,255,0.08);
}
.quick-item {
  width: calc(20% - 14rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  background: rgba(255,255,255,0.04);
  border-radius: 16rpx;
}
.quick-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}
.quick-icon { font-size: 36rpx; }
.quick-label { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-bottom: 6rpx; }
.quick-score { font-size: 28rpx; font-weight: 600; color: #fff; }
/* ===== 成员选择弹窗 ===== */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}
.member-picker {
  width: 100%;
  background: #1A2744;
  border-radius: 32rpx 32rpx 0 0;
  padding: 20rpx 30rpx 60rpx;
  max-height: 70vh;
  overflow-y: auto;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.picker-title { font-size: 30rpx; font-weight: 600; color: #fff; }
.picker-close { font-size: 40rpx; color: rgba(255,255,255,0.4); line-height: 1; }
.picker-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid rgba(255,255,255,0.06);
}
.picker-item:last-child { border-bottom: none; }
.picker-item.active { background: rgba(102,126,234,0.1); margin: 0 -30rpx; padding-left: 30rpx; padding-right: 30rpx; border-radius: 16rpx; }
.picker-icon { font-size: 36rpx; margin-right: 20rpx; }
.picker-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.picker-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
.picker-label { font-size: 28rpx; color: #fff; font-weight: 500; flex: 1; }
.picker-desc { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
.bottom-spacer { height: 40rpx; }
</style>