cfc/cfc-frontend/pages/health-main/index.vue

<template>
  <view class="container">
    <block v-if="!isLoggedIn">
      <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />
      <!-- 品牌定位语 -->
      <view class="brand-strap"><text class="brand-strap-text">科学管理全家健康数据</text></view>
      <!-- 痛点卡 -->
      <view class="pain-card">
        <text class="pain-quote">指标正常 ≠ 健康</text>
        <text class="pain-desc">孩子反复生病，你扛了多少次了？</text>
      </view>
      <!-- 功能预览 -->
      <view class="guest-features">
        <view class="feat-card" @click="goPage('/pages/health/report-upload')">
          <text class="feat-icon">📋</text>
          <text class="feat-title">上传健康报告</text>
          <text class="feat-desc">体检/肠道/舌诊 · AI解读</text>
        </view>
        <view class="feat-card" @click="goPage('/pages/body/detail')">
          <text class="feat-icon">🧠</text>
          <text class="feat-title">认知能力测评</text>
          <text class="feat-desc">记忆力·注意力·逻辑推理</text>
        </view>
        <view class="feat-card" @click="goPage('/pages/mind/index')">
          <text class="feat-icon">💖</text>
          <text class="feat-title">心理健康测评</text>
          <text class="feat-desc">情绪稳定·抗压能力</text>
        </view>
        <view class="feat-card" @click="goPlanSummary">
          <text class="feat-icon">📝</text>
          <text class="feat-title">智能健康方案</text>
          <text class="feat-desc">选维度·选成员·定目标</text>
        </view>
        <view class="feat-card" @click="goPage('/pages/health/health-status-form')">
          <text class="feat-icon">📋</text>
          <text class="feat-title">健康档案</text>
          <text class="feat-desc">身高体重·血压血糖·疾病史</text>
        </view>
      </view>
      <!-- 自测入口 -->
      <view class="self-test-card" @click="goSelfTest">
        <view class="self-test-head">
          <text class="self-test-icon">⚡</text>
          <view class="self-test-info">
            <text class="self-test-title">15题五维健康自检</text>
            <text class="self-test-sub">约20秒，了解家人健康概况</text>
          </view>
          <text class="self-test-arrow">›</text>
        </view>
      </view>
      <!-- AI 健康问卷入口 -->
      <view class="ai-q-entry" @click="goAiQuestionnaire">
        <view class="ai-q-head">
          <text class="ai-q-icon">🤖</text>
          <view class="ai-q-info">
            <text class="ai-q-title">AI 健康问卷</text>
            <text class="ai-q-sub">智能问答，生成您的健康画像</text>
          </view>
          <text class="ai-q-arrow">›</text>
        </view>
          <text class="demo-chart-name">🟠 身体七维</text>
          <text class="demo-chart-tag">示例</text>
        </view>
        <RadarChart :dimensions="demoBodyDims" :scores="demoBodyScores" fillColor="#FF8C42" childName="示例" width="560" height="460" />
        <view class="demo-chart-title-row">
          <text class="demo-chart-name">🧠 认知雷达</text>
          <text class="demo-chart-tag">示例</text>
        </view>
        <RadarChart :dimensions="demoCogDims" :scores="demoCogScores" fillColor="#6366F1" childName="示例" width="560" height="460" />
      <!-- 五维健康体系 -->
      <view class="wuxing-section">
        <view class="wuxing-title">身·心·智·行·富 · 看得见的健康闭环</view>
        <view class="wuxing-desc">五行相生相克，从报告和测评里，真正读懂家人的身体</view>
        <view class="wuxing-relations">
          <view class="rel-group">
            <text class="rel-title">相生 → 系统前进</text>
            <view class="rel-chain">
              <text class="rel-item">🌏 身</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">⚡ 智</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">💧 富</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">🌿 行</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">🔥 心</text>
              <text class="rel-arrow">→</text>
              <text class="rel-item">🌏 身</text>
            </view>
            <text class="rel-hint">健康孕育智慧，智慧创造价值，价值滋养关系，关系反哺心灵，心灵守护健康</text>
          </view>
          <view class="rel-group">
            <text class="rel-title">相克 → 系统平衡</text>
            <view class="rel-chain">
              <text class="rel-item">🌏 身</text>
              <text class="rel-op">克</text>
              <text class="rel-item">💧 富</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">⚡ 智</text>
              <text class="rel-op">克</text>
              <text class="rel-item">🌿 行</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">💧 富</text>
              <text class="rel-op">克</text>
              <text class="rel-item">🔥 心</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">🌿 行</text>
              <text class="rel-op">克</text>
              <text class="rel-item">🌏 身</text>
              <text class="rel-dot">·</text>
              <text class="rel-item">🔥 心</text>
              <text class="rel-op">克</text>
              <text class="rel-item">⚡ 智</text>
            </view>
            <text class="rel-hint">莫以健康换金钱，真诚胜过算计，财富服务家庭，关爱有度、大爱留白</text>
          </view>
        </view>
        <view class="wuxing-cards">
          <view class="wc-card wc-body" @click="goPage('/pages/body-detail/index')">
            <text class="wc-icon">🌏</text>
            <view class="wc-info">
              <text class="wc-name">身 · 主动健康</text>
              <text class="wc-text">读懂每一份报告，看见全家体质的变化</text>
            </view>
          </view>
          <view class="wc-card wc-wisdom" @click="goPage('/pages/wisdom-detail/index')">
            <text class="wc-icon">⚡</text>
            <view class="wc-info">
              <text class="wc-name">智 · 赋能未来</text>
              <text class="wc-text">一次测评，看见孩子真实的专注与潜能</text>
            </view>
          </view>
          <view class="wc-card wc-wealth" @click="goPage('/pages/wealth/index')">
            <text class="wc-icon">💧</text>
            <view class="wc-info">
              <text class="wc-name">富 · 利他创富</text>
              <text class="wc-text">看懂健康与财富的关系，明白身体是最大的本钱</text>
            </view>
          </view>
          <view class="wc-card wc-action" @click="goPage('/pages/action-detail/member-action-detail')">
            <text class="wc-icon">🌿</text>
            <view class="wc-info">
              <text class="wc-name">行 · 人际和谐</text>
              <text class="wc-text">看懂关系里的情绪，看见家人真实的需求</text>
            </view>
          </view>
          <view class="wc-card wc-mind" @click="goPage('/pages/mind-detail/index')">
            <text class="wc-icon">🔥</text>
            <view class="wc-info">
              <text class="wc-name">心 · 大爱相随</text>
              <text class="wc-text">读懂情绪的信号，听懂家人没说出口的话</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 登录引导 -->
      <view class="login-guide-section">
        <LoginGuideCard
          title="解锁全家健康数据"
          :items="[
            '查看七维雷达图与健康报告AI解读',
            '完成测评获取个性化健康方案',
            '每日打卡追踪身体/情绪/认知趋势'
          ]" />
      </view>
    </block>
    <block v-else>
      <PageBanner theme="body" tagline="看见·主动健康闭环" quote="采集→看见→行动" />

      <view class="tab-bar">
        <view v-for="tab in tabs" :key="tab.code" class="tab-item" :class="{ active: currentTab === tab.code }" @click="switchTab(tab.code)">
          <text class="tab-icon">{{ tab.icon }}</text>
          <text class="tab-label">{{ tab.label }}</text>
          <view v-if="currentTab === tab.code" class="tab-underline" :style="{ background: tab.color }"></view>
        </view>
      </view>

      <view class="section section-chart">
        <RadarChart :dimensions="currentDimensions" :scores="currentScores" :fillColor="currentColor" :childName="selectedMemberName" :avgScores="currentAvgScores" width="640" height="520" />
        <view class="chart-empty" v-if="chartIsEmpty">
          <text class="empty-text">{{ currentTabLabel }}数据待采集</text>
          <text class="empty-sub">完成测评或上传报告即可解锁{{ currentTabLabel }}数据</text>
        </view>
      </view>

      <view class="section section-dc-header">
        <view class="dc-title-row">
          <text class="dc-icon">🔍</text>
          <text class="dc-title">看见 · 健康数据中心</text>
        </view>
      </view>

      <view class="section section-data-collect">
        <view class="data-card" @click="goPage('/pages/health/report-upload')">
          <view class="data-card-icon" style="background:rgba(249,115,22,0.12)"><text>📋</text></view>
          <view class="data-card-info">
            <text class="data-card-title">上传健康报告</text>
            <text class="data-card-desc">体检/肠道/舌诊报告 · AI智能解读</text>
          </view>
          <text class="data-card-arrow">›</text>
        </view>

        <view class="data-card data-card-assessment">
          <view class="data-card-head">
            <text class="data-card-title">在线测评</text>
            <text class="data-card-subtitle">多维度自测评估</text>
          </view>
          <view v-for="quiz in quizzes" :key="quiz.code" class="quiz-item">
            <view class="quiz-info">
              <text class="quiz-icon">{{ quiz.icon }}</text>
              <text class="quiz-label">{{ quiz.label }}</text>
            </view>
            <view v-if="quiz.score" class="quiz-score">
              <text class="score-value">{{ quiz.score }}</text>
              <text class="score-unit">分</text>
            </view>
            <button v-else class="quiz-btn" @click.stop="goQuiz(quiz.code)">开始</button>
          </view>
        </view>
      </view>

      <view class="section section-data-view">
        <view class="section-header">
          <text class="section-title">最近记录</text>
          <text class="section-more" @click="goPage('/pages/health/report-list')">查看全部 ›</text>
        </view>
        <view v-if="reports.length > 0">
          <view class="report-card" v-for="(report, idx) in reports.slice(0, 3)" :key="idx" @click="goReportDetail(report)">
            <view class="report-type-badge" :class="'badge-' + _reportTypeClass(report.reportType)">{{ _reportTypeLabel(report.reportType) }}</view>
            <view class="report-info">
              <text class="report-name">{{ report.childName || report.personName || '健康报告' }}</text>
              <text class="report-meta">{{ report.reportDate || '' }}{{ report.gutType ? ' · ' + report.gutType : '' }}</text>
            </view>
            <view class="report-score-wrap">
              <text v-if="report.overallScore != null" class="report-score">{{ report.overallScore }}</text>
              <text class="report-status" :class="'status-' + _statusClass(report.status)">{{ report.status === 'resolved' ? '已解析' : '待确认' }}</text>
            </view>
            <text class="report-arrow">›</text>
          </view>
        </view>
        <view v-else class="empty-hint">
          <text class="empty-text">暂无报告和测评结果</text>
          <text class="empty-sub">上传报告或完成测评开启健康之旅</text>
        </view>
      </view>

      <view class="section section-plan">
        <view class="plan-card">
          <view class="plan-head">
            <text class="plan-title">📋 健康方案</text>
            <button class="plan-btn" @click="goPlanSummary">{{ lastPlan ? '查看方案' : '生成新方案' }}</button>
          </view>
          <text v-if="lastPlan" class="plan-goal">{{ lastPlan }}</text>
          <text v-else class="plan-hint">选维度 + 选成员 + 设定目标 → 智能生成</text>
        </view>
      </view>

      <ArticleBookshelf :articles="healthArticles" :isLoggedIn="true" @articleClick="goArticleDetail" @moreArticles="goMoreArticles" />
    </block>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import RadarChart from '../../components/RadarChart.vue'
import ArticleBookshelf from '../../components/ArticleBookshelf.vue'

export default {
  components: { PageBanner, LoginGuideCard, RadarChart, ArticleBookshelf },
  data() {
    return {
      isLoggedIn: false,
      currentTab: 'body',
      selectedMemberName: '',
      selectedMemberId: '',
      reports: [],
      lastPlan: '',
      healthArticles: [],
      tabs: [
        { code: 'body', label: '健康', icon: '🟠', color: '#FF8C42' },
        { code: 'cognitive', label: '认知', icon: '🧠', color: '#6366F1' },
        { code: 'mental', label: '心理', icon: '💖', color: '#FF6B9D' },
        { code: 'relationship', label: '社会性', icon: '🤝', color: '#10B981' },
        { code: 'wealth', label: '财富', icon: '💧', color: '#F59E0B' }
      ],
      quizzes: [
        { code: 'cognitive', label: '认知能力测评', icon: '🧠', score: null },
        { code: 'mental', label: '心理健康测评', icon: '💖', score: null },
        { code: 'relationship', label: '关系质量测评', icon: '🤝', score: null }
      ],
      demoBodyDims: [
        { label: '生长发育', key: 'growth' },
        { label: '睡眠质量', key: 'sleep' },
        { label: '视力健康', key: 'vision' },
        { label: '免疫力', key: 'immunity' },
        { label: '营养均衡', key: 'nutrition' },
        { label: '肠胃健康', key: 'gut' },
        { label: '运动活力', key: 'exercise' }
      ],
      demoCogDims: [
        { label: '记忆力', key: 'memory' },
        { label: '注意力', key: 'attention' },
        { label: '逻辑推理', key: 'logic' },
        { label: '空间想象', key: 'spatial' },
        { label: '语言表达', key: 'language' }
      ],
      demoCogScores: [78, 72, 85, 68, 80],
      // 真实数据缓存
      cognitiveData: null,
      cognitiveFamilyData: [],
      emiData: null,
      emiFamilyData: [],
      relationshipData: [],
      energySandbox: null,
      wealthDetail: null,
      childrenList: [],
      relationshipEmpty: false
    }
  },
  computed: {
    currentTabLabel: function() {
      var tab = this.tabs.filter(function(t) { return t.code === this.currentTab }.bind(this))[0]
      return tab ? tab.label : ''
    },
    currentColor: function() {
      var tab = this.tabs.filter(function(t) { return t.code === this.currentTab }.bind(this))[0]
      return tab ? tab.color : '#FF8C42'
    },
    currentDimensions: function() {
      if (this.currentTab === 'cognitive') {
        return [{ label:'记忆力',key:'memory'},{ label:'注意力',key:'attention'},{ label:'逻辑推理',key:'logic'},{ label:'空间想象',key:'spatial'},{ label:'感知能力',key:'perception'},{ label:'专注力',key:'focus'},{ label:'加工速度',key:'processingSpeed' }]
      }
      if (this.currentTab === 'mental') {
        return [{ label:'开放性',key:'openness'},{ label:'尽责性',key:'conscientiousness'},{ label:'外向性',key:'extraversion'},{ label:'宜人性',key:'agreeableness'},{ label:'神经质',key:'neuroticism'},{ label:'自主性',key:'driveAutonomy'},{ label:'胜任感',key:'driveCompetence'},{ label:'归属感',key:'driveRelatedness'},{ label:'情绪稳定性',key:'emotionStability'},{ label:'自我概念',key:'selfConceptOverall' }]
      }
      if (this.currentTab === 'relationship') {
        return [{ label:'亲子信任',key:'parentTrust'},{ label:'亲子亲密度',key:'parentIntimacy'},{ label:'沟通质量',key:'communication'},{ label:'关系健康度',key:'healthStatus'},{ label:'最近互动',key:'lastInteraction' }]
      }
      if (this.currentTab === 'wealth') {
        var isChild = !!uni.getStorageSync('currentChildId')
        if (isChild) {
          return [{ label:'学业能力',key:'skill'},{ label:'利他贡献',key:'altruism'},{ label:'积分积累',key:'income'},{ label:'财务素养',key:'fx' }]
        }
        return [{ label:'个人能力',key:'skill'},{ label:'利他贡献',key:'altruism'},{ label:'CF值积累',key:'income'},{ label:'财务素养',key:'fx' }]
      }
      return [{ label:'生长发育',key:'growth'},{ label:'睡眠质量',key:'sleep'},{ label:'视力健康',key:'vision'},{ label:'免疫力',key:'immunity'},{ label:'营养均衡',key:'nutrition'},{ label:'肠胃健康',key:'gut'},{ label:'运动活力',key:'exercise' }]
    },
    currentScores: function() {
      if (this.chartIsEmpty) {
        var dims = this.currentDimensions, scores = []
        for (var i = 0; i < dims.length; i++) scores.push(0)
        return scores
      }
      if (this.currentTab === 'cognitive') {
        return [
          this._cognitiveScore('memoryScore'),
          this._cognitiveScore('attentionScore'),
          this._cognitiveScore('logicScore'),
          this._cognitiveScore('spatialScore'),
          this._cognitiveScore('perceptionScore'),
          this._cognitiveScore('focusScore'),
          this._cognitiveScore('processingSpeedScore')
        ]
      }
      if (this.currentTab === 'mental') {
        return [
          this._emiScore('opennessScore'),
          this._emiScore('conscientiousnessScore'),
          this._emiScore('extraversionScore'),
          this._emiScore('agreeablenessScore'),
          this._emiScore('neuroticismScore'),
          this._emiScore('driveAutonomy'),
          this._emiScore('driveCompetence'),
          this._emiScore('driveRelatedness'),
          this._emiScore('emotionStability'),
          this._emiScore('selfConceptOverall')
        ]
      }
      if (this.currentTab === 'relationship') {
        return [
          this._relScore('trustScore'),
          this._relScore('intimacyScore'),
          this._relScore('communicationScore'),
          this._relScore('totalScore'),
          0
        ]
      }
      if (this.currentTab === 'wealth') {
        var d = this.wealthDetail
        if (!d) return [0, 0, 0, 0]
        return [d.wealthSkill || 0, d.wealthAltruism || 0, d.wealthIncome || 0, d.wealthFx || 0]
      }
      // body: fallback to demo
      if (this.reports.length > 0) {
        var latest = this.reports[0]
        if (latest.overallScore) return [72, 68, 75, 80, 70, 78, 82]
      }
      return [72, 68, 75, 80, 70, 78, 82]
    },
    currentAvgScores: function() {
      if (this.chartIsEmpty) return []
      if (this.currentTab === 'cognitive' && this.cognitiveFamilyData.length > 0) {
        var keys = ['memoryScore','attentionScore','logicScore','spatialScore','perceptionScore','focusScore','processingSpeedScore']
        var avgs = []
        for (var k = 0; k < keys.length; k++) {
          var sum = 0
          for (var i = 0; i < this.cognitiveFamilyData.length; i++) {
            var v = this.cognitiveFamilyData[i][keys[k]]
            if (typeof v === 'number' && v > 0) sum += v
          }
          avgs.push(Math.round(sum / this.cognitiveFamilyData.length))
        }
        return avgs
      }
      if (this.currentTab === 'mental' && this.emiFamilyData.length > 0) {
        var keys2 = ['opennessScore','conscientiousnessScore','extraversionScore','agreeablenessScore','neuroticismScore','driveAutonomy','driveCompetence','driveRelatedness','emotionStability','selfConceptOverall']
        var avgs2 = []
        for (var k2 = 0; k2 < keys2.length; k2++) {
          var sum2 = 0
          for (var i2 = 0; i2 < this.emiFamilyData.length; i2++) {
            var v2 = this.emiFamilyData[i2][keys2[k2]]
            if (typeof v2 === 'number' && v2 > 0) sum2 += v2
          }
          avgs2.push(Math.round(sum2 / this.emiFamilyData.length))
        }
        return avgs2
      }
      if (this.currentTab === 'relationship' && this.relationshipData.length > 0) {
        return [this._relScore('trustScore'), this._relScore('intimacyScore'), this._relScore('communicationScore'), this._relScore('totalScore'), 0]
      }
      if (this.currentTab === 'wealth' && this.wealthDetail) {
        var d = this.wealthDetail
        return [d.wealthSkill || 0, d.wealthAltruism || 0, d.wealthIncome || 0, d.wealthFx || 0]
      }
      return []
    },
    chartIsEmpty: function() {
      if (this.currentTab === 'body') return this.reports.length === 0
      if (this.currentTab === 'cognitive') return !this.cognitiveData || !this.cognitiveData.overallScore
      if (this.currentTab === 'mental') return !this.emiData || !this.emiData.overallScore
      if (this.currentTab === 'relationship') return !this.relationshipData || this.relationshipData.length === 0
      if (this.currentTab === 'wealth') return !this.wealthDetail
      var quiz = this.quizzes.filter(function(q) { return q.code === this.currentTab }.bind(this))[0]
      return !(quiz && quiz.score)
    }
  },
  onShow() {
    this.isLoggedIn = !!uni.getStorageSync('token')
    if (this.isLoggedIn) {
      var stored = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || ''
      if (stored) {
        this.selectedMemberId = stored
        this.selectedMemberName = uni.getStorageSync('currentChildName') || '成员'
      }
      this.loadHealthData()
      this.loadPlanList()
    }
  },
  methods: {
    _cognitiveScore: function(key) {
      if (!this.cognitiveData) return 0
      var v = this.cognitiveData[key]
      return (typeof v === 'number' && v > 0) ? v : 0
    },
    _emiScore: function(key) {
      if (!this.emiData) return 0
      var v = this.emiData[key]
      return (typeof v === 'number' && v > 0) ? v : 0
    },
    _relScore: function(key) {
      if (!this.relationshipData || this.relationshipData.length === 0) return 0
      var total = 0, count = 0
      for (var i = 0; i < this.relationshipData.length; i++) {
        var item = this.relationshipData[i]
        if (item[key] != null) { total += Number(item[key]); count++ }
      }
      return count > 0 ? Math.round(total / count) : 0
    },
    _wealthScore: function(key) {
      if (!this.energySandbox) return 0
      var v = this.energySandbox[key]
      return (typeof v === 'number' && v > 0) ? v : 0
    },
    switchTab: function(code) { this.currentTab = code },
    goPage: function(url) { uni.navigateTo({ url: url }) },
    goQuiz: function(code) {
      var url = '/pages/body-detail/dimension-questionnaire?dim=' + code
      if (this.selectedMemberId) url += '&memberId=' + this.selectedMemberId
      uni.navigateTo({ url: url })
    },
    goReportDetail: function(report) {
      if (!report || !report.id) return
      var type = report.reportType || 'gut_flora'
      var url = '/pages/health/report-detail?reportType=' + type + '&reportId=' + report.id
      // 肠道菌群报告：从列表点击直接进入编辑模式，跳过查看过渡页
      if (type === 'gut_flora') {
        url += '&mode=edit'
      }
      uni.navigateTo({ url: url })
    },
    _reportTypeLabel: function(type) {
      var map = { gut_flora: '肠道', physical_exam: '体检', tongue: '舌诊', blood: '血液' }
      return map[type] || '健康报告'
    },
    _reportTypeClass: function(type) {
      var map = { gut_flora: 'gut', physical_exam: 'exam', tongue: 'tongue', blood: 'blood' }
      return map[type] || 'default'
    },
    _statusClass: function(status) {
      return status === 'resolved' ? 'resolved' : 'pending'
    },
    goSelfTest: function() { uni.navigateTo({ url: '/pages/health/survey-questionnaire?dim=all' }) },
    goAiQuestionnaire: function() { uni.navigateTo({ url: '/pages/health/ai-questionnaire' }) },
    goPlanSummary: function() {
      var url = '/pages/health/health-plan-summary'
      if (this.selectedMemberId) url += '?memberId=' + this.selectedMemberId
      uni.navigateTo({ url: url })
    },
    loadHealthData: function() {
      var self = this
      try {
        var api = require('../../utils/api.js')
        var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId') || ''
        // 健康报告（memberId 为空时不调用，避免后端 400）
        if (memberId) {
          api.getReportList(memberId).then(function(res) {
            if (res.code === 200 && res.data) {
              var list = Array.isArray(res.data) ? res.data : (res.data.list || [])
              self.reports = list
            }
          }).catch(function() {})
        }
        // 文章
        api.getFeaturedArticles({ size: 3, dimensionCode: 'body' }).then(function(res) {
          if (res.code === 200 && res.data) {
            var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
            self.healthArticles = list.slice(0, 3) || []
          }
        }).catch(function() {})
        // 认知测评得分
        if (memberId) {
          api.getCognitiveChildScores(memberId).then(function(res) {
            if (res.code === 200) self.cognitiveData = res.data || null
          }).catch(function() {})
          api.getCognitiveFamilyScores().then(function(res) {
            if (res.code === 200 && Array.isArray(res.data)) self.cognitiveFamilyData = res.data
          }).catch(function() {})
        }
        // EMI心理报告
        if (memberId) {
          api.getEmiReport(memberId).then(function(res) {
            if (res.code === 200) self.emiData = res.data || null
          }).catch(function() {})
        }
        // 关系质量评分
        api.getRelationshipScores().then(function(res) {
          if (res.code === 200 && Array.isArray(res.data) && res.data.length > 0) {
            self.relationshipData = res.data
            self.relationshipEmpty = false
          } else {
            self.relationshipEmpty = true
          }
        }).catch(function() { self.relationshipEmpty = true })
        // 财富子维度（富维度四子维度：能力/利他/财务/素养）
        if (memberId) {
          var memberType = uni.getStorageSync('currentChildId') ? 'child' : 'parent'
          api.getWealthDetail(memberId, memberType).then(function(res) {
            if (res.code === 200 && res.data) {
              self.wealthDetail = res.data
            }
          }).catch(function() {})
        }
      } catch (e) { console.error('加载健康数据失败', e) }
    },
    loadPlanList: function() {
      var self = this
      var api = require('../../utils/api.js')
      api.getHealthPlanList({}).then(function(res) {
        if (res && res.code === 200 && res.data) {
          var list = res.data.list || res.data
          if (Array.isArray(list) && list.length > 0) self.lastPlan = list[0].goal || ''
        }
      }).catch(function() {})
    },
    goArticleDetail: function(article) {
      var id = article && article.id || article
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
    },
    goMoreArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index?dimension=body' })
    }
  }
}
</script>

<style scoped>
  .container { background: #F8F8F8; min-height: 100vh; padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); }
.section { margin: 16rpx 24rpx; }
.tab-bar { display: flex; background: #fff; margin: 0 24rpx 16rpx; border-radius: 16rpx; padding: 8rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; position: relative; border-radius: 12rpx; }
.tab-item.active { background: #FFF7ED; }
.tab-icon { font-size: 32rpx; margin-bottom: 4rpx; }
.tab-label { font-size: 26rpx; color: #666; font-weight: 500; }
.tab-item.active .tab-label { color: #333; font-weight: bold; }
.tab-underline { width: 40rpx; height: 4rpx; border-radius: 2rpx; margin-top: 6rpx; }
.section-chart { position: relative; margin: 0 24rpx 16rpx; }
.chart-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; background: rgba(255,255,255,0.85); border-radius: 12rpx; padding: 20rpx 30rpx; }
.chart-empty .empty-text { font-size: 28rpx; color: #333; font-weight: 500; display: block; }
.chart-empty .empty-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
.section-dc-header { margin: 20rpx 24rpx 8rpx; }
.dc-title-row { display: flex; align-items: center; }
.dc-icon { font-size: 32rpx; margin-right: 8rpx; }
.dc-title { font-size: 32rpx; font-weight: bold; color: #333; }
.section-data-collect { margin: 8rpx 24rpx; }
.data-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.data-card-icon { width: 88rpx; height: 88rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; font-size: 40rpx; }
.data-card-info { flex: 1; }
.data-card-title { font-size: 28rpx; font-weight: bold; color: #333; display: block; margin-bottom: 6rpx; }
.data-card-desc { font-size: 22rpx; color: #999; }
.data-card-arrow { font-size: 36rpx; color: #ccc; }
.data-card-assessment { flex-direction: column; align-items: stretch; padding: 24rpx; }
.data-card-head { display: flex; align-items: center; margin-bottom: 16rpx; }
.data-card-subtitle { font-size: 22rpx; color: #999; margin-left: 12rpx; }
.quiz-item { display: flex; align-items: center; padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; }
.quiz-item:first-of-type { border-top: none; }
.quiz-info { display: flex; align-items: center; flex: 1; }
.quiz-icon { font-size: 36rpx; margin-right: 16rpx; }
.quiz-label { font-size: 28rpx; color: #333; }
.quiz-score { display: flex; align-items: baseline; margin-right: 16rpx; }
.score-value { font-size: 36rpx; font-weight: bold; color: #F97316; }
.score-unit { font-size: 22rpx; color: #999; margin-left: 4rpx; }
.quiz-btn { background: #F97316; color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 30rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
.section-data-view { margin: 16rpx 24rpx; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
.section-title { font-size: 28rpx; font-weight: bold; color: #333; }
.section-more { font-size: 24rpx; color: #F97316; }
.report-card { display: flex; align-items: center; background: #fff; border-radius: 16rpx; padding: 16rpx 20rpx; margin-bottom: 10rpx; }
.report-type-badge { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 8rpx; margin-right: 12rpx; flex-shrink: 0; font-weight: 600; }
.report-type-badge.badge-gut { background: rgba(249,115,22,0.12); color: #F97316; }
.report-type-badge.badge-exam { background: rgba(99,102,241,0.12); color: #6366F1; }
.report-type-badge.badge-tongue { background: rgba(16,185,129,0.12); color: #10B981; }
.report-type-badge.badge-blood { background: rgba(239,68,68,0.12); color: #EF4444; }
.report-type-badge.badge-default { background: rgba(107,114,128,0.12); color: #6B7280; }
.report-info { flex: 1; min-width: 0; }
.report-name { font-size: 26rpx; color: #333; font-weight: 600; display: block; margin-bottom: 4rpx; }
.report-meta { font-size: 20rpx; color: #999; display: block; }
.report-score-wrap { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8rpx; flex-shrink: 0; }
.report-score { font-size: 32rpx; font-weight: bold; color: #F97316; line-height: 1; }
.report-status { font-size: 20rpx; margin-top: 4rpx; }
.report-status.status-resolved { color: #10B981; }
.report-status.status-pending { color: #F59E0B; }
.report-arrow { font-size: 28rpx; color: #ccc; }
.empty-hint { text-align: center; padding: 30rpx 0; background: #fff; border-radius: 16rpx; }
.empty-hint .empty-text { font-size: 26rpx; color: #999; display: block; }
.empty-hint .empty-sub { font-size: 22rpx; color: #ccc; display: block; margin-top: 6rpx; }
.section-plan { margin: 8rpx 24rpx 16rpx; }
.plan-card { background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
.plan-title { font-size: 28rpx; font-weight: bold; color: #333; }
.plan-btn { background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 24rpx; border: none; border-radius: 20rpx; padding: 10rpx 28rpx; height: 56rpx; line-height: 36rpx; margin: 0; }
.plan-goal { font-size: 24rpx; color: #666; line-height: 1.5; display: block; }
.plan-hint { font-size: 22rpx; color: #999; display: block; }
/* ===== 游客态样式 ===== */
.brand-strap { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #FFF7ED, rgba(249,115,22,0.08)); border-radius: 16rpx; padding: 20rpx 24rpx; }
.brand-strap-text { font-size: 26rpx; color: #F97316; font-weight: 600; }
.pain-card { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; border-left: 6rpx solid #F97316; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.pain-quote { font-size: 32rpx; font-weight: bold; color: #333; display: block; margin-bottom: 8rpx; }
.pain-desc { font-size: 26rpx; color: #888; display: block; }
.guest-features { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 24rpx 16rpx; }
.feat-card { width: 48.5%; box-sizing: border-box; background: #fff; border-radius: 20rpx; padding: 24rpx 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.feat-icon { font-size: 44rpx; display: block; margin-bottom: 10rpx; }
.feat-title { font-size: 26rpx; font-weight: 600; color: #333; display: block; margin-bottom: 4rpx; }
.feat-desc { font-size: 22rpx; color: #999; display: block; }
.self-test-card { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 20rpx; padding: 24rpx 28rpx; }
.self-test-head { display: flex; align-items: center; }
.self-test-icon { font-size: 40rpx; margin-right: 16rpx; }
.self-test-info { flex: 1; }
.self-test-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
.self-test-sub { font-size: 22rpx; color: rgba(255,255,255,0.8); display: block; margin-top: 4rpx; }
.ai-q-entry { margin: 0 24rpx 16rpx; background: linear-gradient(135deg, #F97316, #F59E0B); border-radius: 20rpx; padding: 24rpx 28rpx; }
.reminder-icon { font-size: 40rpx; margin-right: 16rpx; flex-shrink: 0; }
.reminder-body { flex: 1; min-width: 0; }
.reminder-text { font-size: 26rpx; font-weight: 600; color: #333; display: block; }
.reminder-sub { font-size: 22rpx; color: #999; margin-top: 4rpx; display: block; line-height: 1.4; }
.reminder-arrow { font-size: 28rpx; color: #F97316; flex-shrink: 0; }
.ai-q-head { display: flex; align-items: center; }
.ai-q-icon { font-size: 40rpx; margin-right: 16rpx; }
.ai-q-info { flex: 1; }
.ai-q-title { font-size: 28rpx; font-weight: bold; color: #fff; display: block; }
.ai-q-sub { font-size: 22rpx; color: rgba(255,255,255,0.85); display: block; margin-top: 4rpx; }
.self-test-arrow { font-size: 36rpx; color: rgba(255,255,255,0.7); }
.demo-section { margin: 0 24rpx 16rpx; }
.demo-section-head { margin-bottom: 8rpx; }
.demo-section-title { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
.demo-section-sub { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx; }
.demo-chart-title-row { display: flex; align-items: center; justify-content: space-between; margin: 8rpx 8rpx 0; padding: 0 8rpx; }
.demo-chart-name { font-size: 26rpx; font-weight: 600; color: #333; }
.demo-chart-tag { font-size: 20rpx; color: #F97316; background: rgba(249,115,22,0.1); border-radius: 8rpx; padding: 4rpx 12rpx; }
.login-guide-section { margin: 0 24rpx 24rpx; }

/* ===== 五维闭环体系样式 ===== */
.wuxing-section { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
.wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
.wuxing-diagram { position: relative; height: 320rpx; margin: 0 auto 20rpx; }
.wuxing-relations { margin-top: 8rpx; }
.rel-group { margin-bottom: 16rpx; }
.rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
.rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
.rel-arrow { font-size: 20rpx; color: #F97316; font-weight: bold; }
.rel-dot { font-size: 20rpx; color: #ccc; }
.rel-hint { font-size: 20rpx; color: #999; line-height: 1.5; display: block; }
.wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
.wc-card:active { opacity: 0.85; }
.wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
.wc-body .wc-name { color: #FF8C42; }
.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
.wc-wisdom .wc-name { color: #6366F1; }
.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
.wc-wealth .wc-name { color: #F59E0B; }
.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
.wc-action .wc-name { color: #10B981; }
.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
.wc-mind .wc-name { color: #FF6B9D; }
</style>