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

<template>
  <view class="container">
    <view v-if="!isLoggedIn">
      <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />
      <LoginGuideCard title="登录后查看全家健康数据" :features="['申请专业测评','查看健康报告和诊断结果','了解家人健康状态']" />
    </view>
    <view 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" width="640" height="520" />
        <view class="chart-empty" v-if="chartIsEmpty">
          <text class="empty-text">{{ currentTabLabel }}数据待采集</text>
          <text class="empty-sub">上传报告或完成测评后显示</text>
        </view>
      </view>

      <FamilyMemberStrip />

      <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)">
            <text class="report-icon">📄</text>
            <view class="report-info">
              <text class="report-name">{{ report.title || '健康报告' }}</text>
              <text class="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" />
    </view>
  </view>
</template>

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

export default {
  components: { PageBanner, LoginGuideCard, FamilyMemberStrip, 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' }
      ],
      quizzes: [
        { code: 'cognitive', label: '认知能力测评', icon: '🧠', score: null },
        { code: 'mental', label: '心理健康测评', icon: '💖', score: null },
        { code: 'relationship', label: '关系质量测评', icon: '🤝', score: null }
      ]
    }
  },
  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:'language' }]
      }
      if (this.currentTab === 'mental') {
        return [{ label:'情绪稳定',key:'emotion'},{ label:'抗压能力',key:'stress'},{ label:'自我认知',key:'self'},{ label:'社交意愿',key:'social'},{ label:'幸福感',key:'happiness' }]
      }
      if (this.currentTab === 'relationship') {
        return [{ label:'亲子关系',key:'parent'},{ label:'夫妻关系',key:'spouse'},{ label:'亲友关系',key:'friend'},{ label:'同事关系',key:'colleague'},{ label:'社区参与',key:'community' }]
      }
      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 === 'body') return [72, 68, 75, 80, 70, 78, 82]
      var dims = this.currentDimensions, scores = []
      for (var i = 0; i < dims.length; i++) scores.push(0)
      return scores
    },
    chartIsEmpty: function() {
      if (this.currentTab === 'body') return this.reports.length === 0
      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) {
      this.loadHealthData()
      this.loadPlanList()
      var stored = uni.getStorageSync('currentChildId') || ''
      if (stored) {
        this.selectedMemberId = stored
        this.selectedMemberName = uni.getStorageSync('currentChildName') || '成员'
      }
    }
  },
  methods: {
    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) {
      uni.navigateTo({ url: '/pages/health/report-list' + (report && report.id ? '?reportId=' + report.id : '') })
    },
    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')
        api.getReportList().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() {})
      } 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: 120rpx; }
.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-icon { font-size: 32rpx; margin-right: 16rpx; }
.report-info { flex: 1; }
.report-name { font-size: 24rpx; color: #333; display: block; margin-bottom: 4rpx; }
.report-status { font-size: 20rpx; color: #999; }
.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; }
</style>