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

<template>
  <view class="container">
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="body" ref="tabTransition" @close="showTabTransition = false" />

    <!-- 品牌头部 -->
    <PageBanner theme="body"
      tagline="主动健康 · 闭环管理"
      quote="测评→报告→方案→执行→追踪" />

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

    <!-- 登录态 -->
    <template v-else>
      <!-- 家庭成员选择条 -->
      <FamilyMemberStrip
        :members="familyMembersVisible"
        :selectedMemberId="selectedMemberId"
        @select="onFamilyMemberSelect"
        @removed="loadFamilyMembersVisible" />

      <!-- 闭环入口网格 -->
      <view class="func-section">
        <view class="func-grid">
          <view class="func-item" @click="goReportList">
            <view class="func-icon-wrap" style="background: rgba(91,155,213,0.15);">
              <text class="func-icon">📊</text>
            </view>
            <text class="func-label">健康报告</text>
          </view>
          <view class="func-item" @click="goUploadReport">
            <view class="func-icon-wrap" style="background: rgba(16,185,129,0.15);">
              <text class="func-icon">📤</text>
            </view>
            <text class="func-label">上传报告</text>
          </view>
          <view class="func-item" @click="goCheckin">
            <view class="func-icon-wrap" style="background: rgba(249,115,22,0.15);">
              <text class="func-icon">✅</text>
            </view>
            <text class="func-label">健康打卡</text>
          </view>
          <view class="func-item" @click="goAssessment">
            <view class="func-icon-wrap" style="background: rgba(99,102,241,0.15);">
              <text class="func-icon">📋</text>
            </view>
            <text class="func-label">申请测评</text>
          </view>
          <view class="func-item" @click="goNutrition">
            <view class="func-icon-wrap" style="background: rgba(245,158,11,0.15);">
              <text class="func-icon">🍽️</text>
            </view>
            <text class="func-label">营养档案</text>
          </view>
          <view class="func-item" @click="goDiet">
            <view class="func-icon-wrap" style="background: rgba(239,68,68,0.15);">
              <text class="func-icon">🥗</text>
            </view>
            <text class="func-label">饮食推荐</text>
          </view>
          <view class="func-item" @click="goExercise">
            <view class="func-icon-wrap" style="background: rgba(34,197,94,0.15);">
              <text class="func-icon">🏃</text>
            </view>
            <text class="func-label">运动</text>
          </view>
          <view class="func-item" @click="goSleep">
            <view class="func-icon-wrap" style="background: rgba(139,92,246,0.15);">
              <text class="func-icon">😴</text>
            </view>
            <text class="func-label">作息</text>
          </view>
          <view class="func-item" @click="goMeditation">
            <view class="func-icon-wrap" style="background: rgba(236,72,153,0.15);">
              <text class="func-icon">🧘</text>
            </view>
            <text class="func-label">冥想</text>
          </view>
          <view class="func-item" @click="goTongue">
            <view class="func-icon-wrap" style="background: rgba(255,140,66,0.15);">
              <text class="func-icon">👅</text>
            </view>
            <text class="func-label">舌诊分析</text>
          </view>
          <view class="func-item" @click="goHealthDimensions">
            <view class="func-icon-wrap" style="background: rgba(6,182,212,0.15);">
              <text class="func-icon">🌏</text>
            </view>
            <text class="func-label">健康维度</text>
          </view>
          <view class="func-item" @click="goBodyDetail">
            <view class="func-icon-wrap" style="background: rgba(249,115,22,0.15);">
              <text class="func-icon">🔬</text>
            </view>
            <text class="func-label">身体能量</text>
          </view>
        </view>
      </view>
    </template>

    <AIFloatingAvatar />
  </view>
</template>

<script>
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
import { getVisibleFamilyMembers } from '../../utils/api.js'

export default {
  components: {
    TabTransition,
    PageBanner,
    LoginGuideCard,
    FamilyMemberStrip,
    AIFloatingAvatar
  },
  data() {
    return {
      showTabTransition: true,
      isLoggedIn: false,
      familyMembersVisible: [],
      selectedMemberId: null
    }
  },
  onLoad() {
    this.isLoggedIn = !!uni.getStorageSync('token')
    if (this.isLoggedIn) {
      this.loadFamilyMembersVisible()
    }
  },
  onShow() {
    this.showTabTransition = true
    this.isLoggedIn = !!uni.getStorageSync('token')
    this._watchPageReady()
  },
  methods: {
    loadFamilyMembersVisible() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        if (res.code === 200 && res.data) {
          self.familyMembersVisible = Array.isArray(res.data) ? res.data : (res.data.list || [])
        }
      }).catch(function() {})
    },
    onFamilyMemberSelect(member) {
      this.selectedMemberId = member.id
    },
    _watchPageReady() {
      var self = this
      this.$nextTick(function() {
        if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
      })
    },
    goReportList() {
      uni.navigateTo({ url: '/pages/health/report-list' })
    },
    goUploadReport() {
      uni.navigateTo({ url: '/pages/health/report-upload' })
    },
    goCheckin() {
      uni.navigateTo({ url: '/pages/health/daily-checkin' })
    },
    goAssessment() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },
    goNutrition() {
      var id = this.selectedMemberId || ''
      uni.navigateTo({ url: '/pages/health/nutrition-profile?memberId=' + id })
    },
    goDiet() {
      uni.navigateTo({ url: '/pages/meal/recommend' })
    },
    goExercise() {
      uni.navigateTo({ url: '/pages/health/exercise-index' })
    },
    goSleep() {
      uni.navigateTo({ url: '/pages/health/sleep-index' })
    },
    goMeditation() {
      uni.navigateTo({ url: '/pages/health/meditation-index' })
    },
    goTongue() {
      uni.navigateTo({ url: '/pages/health/report-upload?reportType=tongue' })
    },
    goHealthDimensions() {
      var id = this.selectedMemberId || ''
      uni.navigateTo({ url: '/pages/body-detail/health-dimensions?memberId=' + id })
    },
    goBodyDetail() {
      var id = this.selectedMemberId || ''
      uni.navigateTo({ url: '/pages/body-detail/health-report?memberId=' + id })
    }
  }
}
</script>

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

.func-section {
  margin: 20rpx 30rpx;
}

.func-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.func-item {
  width: calc(25% - 15rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

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

.func-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.func-icon {
  font-size: 32rpx;
}

.func-label {
  font-size: 22rpx;
  color: #333;
  text-align: center;
}
</style>