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

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

    <!-- 功能入口 -->
    <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('daily_stats') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">今日身体数据</text>
      </view>
      <view class="stats-card">
        <view class="stat-item">
          <text class="stat-value">{{ dailyStats.steps }}</text>
          <text class="stat-unit">步</text>
          <text class="stat-label">今日步数</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ dailyStats.water }}</text>
          <text class="stat-unit">L</text>
          <text class="stat-label">饮水量</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ dailyStats.sleep }}</text>
          <text class="stat-unit">h</text>
          <text class="stat-label">睡眠时长</text>
        </view>
      </view>
    </view>

    <!-- 健康小贴士 -->
    <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 class="tip-footer">
            <text class="tip-date">{{ item.date }}</text>
            <text class="tip-tag">阅读更多</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 能量一周（登录后可见） -->
    <view class="section" v-if="sectionVisible('energy_week') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">能量一周</text>
      </view>
      <view class="energy-week-bar">
        <view class="week-column" v-for="(day, idx) in energyWeek" :key="idx">
          <view class="bar-fill" :style="{ height: day.percent + '%' }"></view>
          <text class="bar-label">{{ day.label }}</text>
        </view>
      </view>
    </view>

    <!-- 规划师推荐（服务商可见，后台可配置） -->
    <view class="section" v-if="sectionVisible('teacher_tips')">
      <view class="section-header">
        <text class="section-title">👨‍🏫 规划师推荐</text>
      </view>
      <view class="tips-list">
        <view class="tip-card" v-for="item in teacherTips" :key="item.id">
          <text class="tip-title">{{ item.title }}</text>
          <text class="tip-summary">{{ item.summary }}</text>
          <view class="tip-footer">
            <text class="tip-date">{{ item.date }}</text>
            <text class="tip-tag">查看详情</text>
          </view>
        </view>
      </view>
    </view>

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

<script>
import PageBanner from '../../components/PageBanner.vue'
import { getVisibleSections, getEnergyOverview } from '../../utils/api.js'

export default {
  components: { PageBanner },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      currentChildId: null,
      totalEnergy: null,
      totalHealthIndex: null,
      visibleSections: [],
      funcList: [
        { icon: '\u{1F3C3}', label: '运动', needLogin: false, page: '' },
        { icon: '\u{1F957}', label: '饮食', needLogin: false, page: '' },
        { icon: '\u{1F634}', label: '作息', needLogin: false, page: '' },
        { icon: '\u{1F9A0}', label: '菌群', needLogin: false, page: '' },
        { icon: '\u{1F9D8}', label: '冥想', needLogin: false, page: '' }
      ],
      dailyStats: {
        steps: '6,582',
        water: '1.2',
        sleep: '8.5'
      },
      healthTips: [
        { id: 1, title: '儿童每日运动指南', summary: '不同年龄段儿童每天需要多少运动量？科学运动助力健康成长。', date: '2024-01-15' },
        { id: 2, title: '五行饮食搭配法则', summary: '根据五行理论合理搭配膳食，均衡营养从每一餐开始。', date: '2024-01-12' },
        { id: 3, title: '优质睡眠从小养成', summary: '帮助孩子建立规律的作息习惯，提升睡眠质量。', date: '2024-01-10' },
        { id: 4, title: '肠道菌群与免疫力', summary: '了解益生菌对儿童健康的重要作用，从内部提升抵抗力。', date: '2024-01-08' }
      ],
      teacherTips: [
        { id: 1, title: '儿童体态评估与纠正', summary: '专业体态评估方法，及早发现并纠正不良体态。', date: '2024-01-14' },
        { id: 2, title: '感统训练家庭方案', summary: '针对不同年龄段的感觉统合训练建议，在家也能做。', date: '2024-01-11' }
      ],
      energyWeek: [
        { label: '一', percent: 60 },
        { label: '二', percent: 75 },
        { label: '三', percent: 45 },
        { label: '四', percent: 80 },
        { label: '五', percent: 65 },
        { label: '六', percent: 90 },
        { label: '日', percent: 70 }
      ]
    }
  },
  onShow() {
    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.currentChildId = uni.getStorageSync('currentChildId') || null
    }
    this.loadSectionConfig()
    if (this.isLoggedIn) {
      this.loadEnergyData()
    }
  },
  methods: {
    async loadSectionConfig() {
      if (!uni.getStorageSync('token')) {
        this.visibleSections = ['func_entries']
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      try {
        var res = await getVisibleSections({ pageKey: 'body', role: role })
        if (res.code === 200 && res.data) {
          this.visibleSections = res.data.map(function(s) { return s.sectionKey })
        }
      } catch (e) {
        this.visibleSections = ['func_entries']
      }
    },
    async loadEnergyData() {
      var childId = this.currentChildId
      if (!childId) return
      try {
        var res = await getEnergyOverview(childId)
        if (res && res.data) {
          this.visibleSections = res.data.dimensions || []
          this.totalEnergy = res.data.totalEnergy || 0
          this.totalHealthIndex = res.data.totalHealthIndex || 0
        }
      } catch (e) {
        console.log('获取能量概览失败', e)
      }
    },
    sectionVisible(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },
    onFuncClick(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 })
    },
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    }
  }
}
</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 {
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* ===== 今日数据 ===== */
.stats-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-value {
  font-size: 44rpx;
  font-weight: bold;
  color: #5B9BD5;
}
.stat-unit {
  font-size: 22rpx;
  color: #999;
  margin-top: -4rpx;
}
.stat-label {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}
.stat-divider {
  width: 1rpx;
  height: 80rpx;
  background: #f0f0f0;
}

/* ===== 健康小贴士 ===== */
.tips-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.tip-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  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;
  margin-bottom: 16rpx;
}
.tip-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.tip-date {
  font-size: 22rpx;
  color: #bbb;
}
.tip-tag {
  font-size: 22rpx;
  color: #5B9BD5;
  font-weight: 500;
}

/* ===== 能量一周 ===== */
.energy-week-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.week-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60rpx;
}
.bar-fill {
  width: 40rpx;
  background: linear-gradient(180deg, #F97316, #FBBF24);
  border-radius: 20rpx 20rpx 4rpx 4rpx;
  min-height: 8rpx;
}
.bar-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 12rpx;
}

.func-item:active {
  opacity: 0.7;
}

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