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

<template>
  <view class="body-container">
    <!-- 品牌头部 -->
    <PageBanner theme="body"
      tagline="科学管理全家健康"
      quote="身体健康是幸福的基础" />

    <!-- 家庭成员切换条 -->
    <FamilyMemberStrip
      v-if="isLoggedIn && familyMembersVisible.length > 0"
      :members="familyMembersVisible"
      :selectedMemberId="selectedMemberId"
      :selectedMemberType="selectedMemberType"
      @select="onMemberSelect" />

    <!-- 游客专属区块 -->
    <template v-if="!isLoggedIn">
      <LoginGuideCard
        title="登录后查看全家健康数据"
        :items="[
          '查看全家身体能量数据和健康报告',
          '记录每日健康打卡，获取身体能量',
          '查看专属健康商品和活动价格'
        ]" />
      <HealthTips dimension="body" />
    </template>

    <!-- 登录后：五维能量条 -->
    <FamilyEnergyBar
      v-if="isLoggedIn"
      dimensionCode="body"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />

    <!-- 登录后：用户快捷入口 -->
    <UserQuickEntry
      v-if="isLoggedIn"
      :userName="userName"
      roleName="家长"
      :currentChildName="activeChildName"
      :children="children"
      @childChanged="onChildChanged"
      @scrollTo="scrollToSection" />

    <!-- 功能入口 -->
    <view class="func-section" v-if="sectionVisible('func_entries')">
      <view class="func-grid">
        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
          <view class="func-icon-wrap">
            <text class="func-icon">{{ item.icon }}</text>
          </view>
          <text class="func-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 健康报告摘要（登录后可见） -->
    <view class="section" v-if="sectionVisible('health_report') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">健康报告</text>
        <text class="section-more" @click="goToHealthReport">查看详情 ›</text>
      </view>
      <view class="report-card" v-if="latestReport">
        <view class="report-type-tag">{{ reportTypeLabel }}</view>
        <view class="report-score-row">
          <view class="score-circle">
            <text class="score-value">{{ latestReport.overallScore || '--' }}</text>
            <text class="score-label">综合评分</text>
          </view>
          <view class="report-meta">
            <view class="meta-item" v-if="latestReport.gutHealthScore">
              <text class="meta-label">肠道健康</text>
              <text class="meta-value">{{ latestReport.gutHealthScore }}</text>
            </view>
            <view class="meta-item" v-if="latestReport.nutritionScore">
              <text class="meta-label">营养状况</text>
              <text class="meta-value">{{ latestReport.nutritionScore }}</text>
            </view>
            <view class="meta-item" v-if="latestReport.gutAge">
              <text class="meta-label">肠道年龄</text>
              <text class="meta-value">{{ latestReport.gutAge }}</text>
            </view>
          </view>
        </view>
        <text class="report-date">报告日期：{{ formatDate(latestReport.reportDate) }}</text>
      </view>
      <view class="report-empty" v-else>
        <text class="empty-tip">暂无健康报告</text>
        <text class="empty-sub">规划师录入后将自动显示</text>
      </view>
    </view>

    <!-- 维度任务 -->
    <DimensionTasks
      v-if="isLoggedIn"
      dimensionCode="body"
      :tasks="dimensionTasks"
      @taskClick="onTaskClick"
      @moreTasks="goTasks" />

    <!-- 维度活动 -->
    <DimensionActivities
      v-if="isLoggedIn"
      dimensionCode="body"
      :activities="dimensionActivities"
      @activityClick="goActivityDetail"
      @moreActivities="goMoreActivities" />

    <!-- 维度商品 -->
    <DimensionProducts
      v-if="isLoggedIn"
      dimensionCode="body"
      :products="dimensionProducts"
      @productClick="goProductDetail"
      @moreProducts="goMoreProducts" />

    <!-- 健康小贴士 -->
    <view class="section" v-if="sectionVisible('health_tips')">
      <view class="section-header">
        <text class="section-title">健康小贴士</text>
      </view>
      <view class="tips-list">
        <view class="tip-card" v-for="item in healthTips" :key="item.id">
          <text class="tip-title">{{ item.title }}</text>
          <text class="tip-summary">{{ item.summary }}</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作按钮 -->
    <view class="section quick-actions" v-if="isLoggedIn">
      <view class="action-btn" @click="goToHealthReport">
        <text class="action-icon">📋</text>
        <text class="action-text">报告详情</text>
      </view>
      <view class="action-btn" @click="goToCheckin">
        <text class="action-icon">🏃</text>
        <text class="action-text">健康打卡</text>
      </view>
    </view>

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

<script>
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import HealthTips from '../../components/HealthTips.vue'
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import UserQuickEntry from '../../components/UserQuickEntry.vue'
import DimensionTasks from '../../components/DimensionTasks.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import { getVisibleSections, getEnergyOverview, getChildren, getTodayTasksByCategory, getActivityList, getProductsByDomain, getFamilyEnergySandbox, getVisibleFamilyMembers } from '../../utils/api.js'

const BASE_URL = 'http://localhost:8080'

const healthRequest = function(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: BASE_URL + url,
      method: 'POST',
      data: data,
      header: {
        'Content-Type': 'application/json',
        'Authorization': token ? 'Bearer ' + token : ''
      },
      success: function(res) {
        if (res.data.code === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  })
}

export default {
  components: { PageBanner, LoginGuideCard, HealthTips, FamilyEnergyBar, UserQuickEntry, DimensionTasks, DimensionActivities, DimensionProducts, FamilyMemberStrip },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      activeChildId: null,
      activeChildName: '',
      userName: '',
      children: [],
      familyMembersVisible: [],
      selectedMemberId: 0,
      selectedMemberType: 'all',
      sandboxData: null,
      dualDimension: null,
      visibleSections: [],
      latestReport: null,
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
      funcList: [
        { icon: '\u{1F3C3}', label: '运动', needLogin: true, page: '' },
        { icon: '\u{1F957}', label: '饮食', needLogin: true, page: '' },
        { icon: '\u{1F634}', label: '作息', needLogin: true, page: '' },
        { icon: '\u{1F9A0}', label: '菌群', needLogin: true, page: '' },
        { icon: '\u{1F9D8}', label: '冥想', needLogin: true, page: '' }
      ],
      healthTips: [
        { id: 1, title: '儿童每日运动指南', summary: '不同年龄段儿童每天需要多少运动量？科学运动助力健康成长。' },
        { id: 2, title: '五行饮食搭配法则', summary: '根据五行理论合理搭配膳食，均衡营养从每一餐开始。' },
        { id: 3, title: '优质睡眠从小养成', summary: '帮助孩子建立规律的作息习惯，提升睡眠质量。' },
        { id: 4, title: '肠道菌群与免疫力', summary: '了解益生菌对儿童健康的重要作用，从内部提升抵抗力。' }
      ]
    }
  },
  computed: {
    reportTypeLabel: function() {
      if (!this.latestReport) return ''
      return this.latestReport.reportType === 'gut_flora' ? '肠道检测报告' : '体检报告'
    }
  },
  onShow() {
    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
    }
    this.loadSectionConfig()
    if (this.isLoggedIn) {
      this.loadChildren()
      this.loadFamilyMembersVisible()
    }
  },
  methods: {
    loadSectionConfig: function() {
      var baseSections = ['func_entries']
      if (!uni.getStorageSync('token')) {
        this.visibleSections = baseSections
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      var self = this
      getVisibleSections({ pageKey: 'body', role: role }).then(function(res) {
        if (res.code === 200 && res.data) {
          var keys = res.data.map(function(s) { return s.sectionKey })
          var merged = baseSections.slice()
          keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
          self.visibleSections = merged
        }
      }).catch(function(e) {
        self.visibleSections = ['func_entries']
      })
    },
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          self.children = res.data
          var savedChildId = uni.getStorageSync('currentChildId')
          var found = false
          for (var i = 0; i < self.children.length; i++) {
            if (self.children[i].childId === savedChildId) {
              self.activeChildId = savedChildId
              self.activeChildName = self.children[i].name || self.children[i].nickname || '孩子'
              found = true
              break
            }
          }
          if (!found && self.children.length > 0) {
            self.activeChildId = self.children[0].childId
            self.activeChildName = self.children[0].name || self.children[0].nickname || '孩子'
            uni.setStorageSync('currentChildId', self.activeChildId)
          }
          if (self.activeChildId) {
            self.loadDashboardData()
          }
        }
      }).catch(function(e) {
        console.log('获取孩子列表失败', e)
      })
    },
    loadDashboardData: function() {
      if (!this.activeChildId) return
      this.loadHealthReport()
      this.loadEnergyData()
      this.loadDimensionTasks()
      this.loadDimensionActivities()
      this.loadDimensionProducts()
      this.loadSandboxData()
    },
    loadSandboxData: function() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data
        }
      }).catch(function(e) {
        console.log('获取沙盘数据失败', e)
      })
    },
    loadHealthReport: function() {
      var self = this
      healthRequest('/api/health/report/latest', { childId: this.activeChildId }).then(function(res) {
        if (res.data) {
          self.latestReport = res.data
        }
      }).catch(function(e) {
        console.log('获取健康报告失败', e)
      })
    },
    loadEnergyData: function() {
      var self = this
      getEnergyOverview(this.activeChildId).then(function(res) {
        if (res && res.data) {
          var dims = res.data.dimensions
          if (dims && dims.length > 0) {
            for (var i = 0; i < dims.length; i++) {
              if (dims[i].code === 'body') {
                self.dualDimension = dims[i]
                break
              }
            }
          }
        }
      }).catch(function(e) {
        console.log('获取能量概览失败', e)
      })
    },
    loadDimensionTasks: function() {
      var self = this
      if (!this.activeChildId) return
      getTodayTasksByCategory(this.activeChildId, 'body').then(function(res) {
        if (res && res.data) {
          self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
        }
      }).catch(function() { self.dimensionTasks = [] })
    },
    loadDimensionActivities: function() {
      var self = this
      getActivityList({ dimensionCode: 'body', page: 1, size: 3 }).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionActivities = list.slice(0, 3)
        }
      }).catch(function() { self.dimensionActivities = [] })
    },
    loadDimensionProducts: function() {
      var self = this
      getProductsByDomain('body', 1, 4).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionProducts = list.slice(0, 4)
        }
      }).catch(function() { self.dimensionProducts = [] })
    },
    onChildChanged: function(child) {
      this.activeChildId = child.childId
      this.activeChildName = child.name || child.nickname || '孩子'
      this.loadDashboardData()
    },
    loadFamilyMembersVisible: function() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        self.familyMembersVisible = res.data || []
      }).catch(function(e) {
        console.log('获取可见家庭成员失败', e)
        self.familyMembersVisible = []
      })
    },
    onMemberSelect: function(member) {
      if (member.memberType === 'all') {
        this.selectedMemberId = 0
        this.selectedMemberType = 'all'
      } else {
        this.selectedMemberId = member.id
        this.selectedMemberType = member.memberType
      }
      // TODO: 根据选中成员重新加载对应维度数据
    },
    scrollToSection: function(section) {
      uni.pageScrollTo({ selector: '#' + section, duration: 300 })
    },
    onTaskClick: function(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goActivityDetail: function(act) {
      if (act && act.id) uni.navigateTo({ url: '/pages/discover/index?type=activity&id=' + act.id })
    },
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/discover/index?type=activity&dimension=body' })
    },
    goProductDetail: function(prod) {
      if (prod && prod.id) uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + prod.id })
    },
    goMoreProducts: function() {
      uni.navigateTo({ url: '/pages/discover/index?type=product&domain=body' })
    },
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    sectionVisible: function(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },
    onFuncClick: function(item) {
      if (item.needLogin && !this.isLoggedIn) {
        uni.showModal({
          title: '提示',
          content: '请先登录后使用此功能',
          success: function(res) {
            if (res.confirm) uni.navigateTo({ url: '/pages/login/login' })
          }
        })
        return
      }
      if (item.page) uni.navigateTo({ url: item.page })
    },
    goToHealthReport: function() {
      if (!this.activeChildId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      uni.navigateTo({ url: '/pages/body/health-report?childId=' + this.activeChildId })
    },
    goToCheckin: function() {
      if (!this.activeChildId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      uni.navigateTo({ url: '/pages/body/checkin?childId=' + this.activeChildId })
    },
    formatDate: function(dateStr) {
      if (!dateStr) return '--'
      try {
        var d = new Date(dateStr)
        var y = d.getFullYear()
        var m = ('' + (d.getMonth() + 1)).padStart(2, '0')
        var day = ('' + d.getDate()).padStart(2, '0')
        return y + '-' + m + '-' + day
      } catch (e) {
        return dateStr
      }
    }
  }
}
</script>

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

/* ===== 功能入口 ===== */
.func-section {
  margin: 20rpx 30rpx;
}
.func-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.func-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #D6EAF8, #EBF2FA);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.func-icon {
  font-size: 40rpx;
}
.func-label {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #5B9BD5;
}

/* ===== 健康报告 ===== */
.report-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.report-type-tag {
  display: inline-block;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-bottom: 16rpx;
}
.report-score-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.score-circle {
  width: 140rpx;
  height: 140rpx;
  border-radius: 70rpx;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}
.score-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #1565C0;
}
.score-label {
  font-size: 20rpx;
  color: #64B5F6;
}
.report-meta {
  flex: 1;
}
.meta-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}
.meta-label {
  font-size: 24rpx;
  color: #666;
  width: 140rpx;
}
.meta-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}
.report-date {
  font-size: 22rpx;
  color: #bbb;
  margin-top: 16rpx;
}
.report-empty {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.empty-tip {
  font-size: 28rpx;
  color: #999;
  display: block;
}
.empty-sub {
  font-size: 24rpx;
  color: #ccc;
  display: block;
  margin-top: 8rpx;
}

/* ===== 健康小贴士 ===== */
.tips-list {
  display: flex;
  flex-direction: column;
}
.tip-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.tip-summary {
  font-size: 24rpx;
  color: #888;
  line-height: 1.5;
  display: block;
}

/* ===== 快捷操作 ===== */
.quick-actions {
  display: flex;
  flex-direction: row;
  margin-top: 30rpx;
}
.action-btn {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.action-btn:last-child {
  margin-right: 0;
}
.action-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}
.action-text {
  font-size: 26rpx;
  color: #666;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 120rpx;
}

.func-item:active, .action-btn:active {
  opacity: 0.7;
}
</style>