hms/apps/miniprogram-uniapp/src/pages/index/index.vue

<template>
  <scroll-view scroll-y class="home-scroll" @scrolltolower="onLoadMore">
    <view :class="['home-page', elderClass]">
      <!-- 已登录模式 -->
      <template v-if="authStore.user">
        <!-- 用户问候 -->
        <view class="greeting-section">
          <text class="greeting-text">{{ greeting }}，{{ authStore.user.display_name || authStore.user.username }}</text>
          <text class="greeting-date">{{ today }}</text>
        </view>

        <!-- 快捷功能 -->
        <view class="quick-actions">
          <view class="action-item" @tap="navigateTo('/pages-sub/appointment/create/index')">
            <text class="action-icon">📅</text>
            <text class="action-label">预约</text>
          </view>
          <view class="action-item" @tap="navigateTo('/pages-sub/consultation/index')">
            <text class="action-icon">💬</text>
            <text class="action-label">咨询</text>
          </view>
          <view class="action-item" @tap="navigateTo('/pages-sub/pkg-health/trend/index')">
            <text class="action-icon">📊</text>
            <text class="action-label">趋势</text>
          </view>
          <view class="action-item" @tap="navigateTo('/pages-sub/article/index')">
            <text class="action-icon">📰</text>
            <text class="action-label">文章</text>
          </view>
        </view>

        <!-- 健康概览卡片 -->
        <view class="health-summary card">
          <text class="section-title">健康概览</text>
          <view v-if="healthSummary" class="summary-grid">
            <view class="summary-item">
              <text class="summary-value">{{ healthSummary.heart_rate || '--' }}</text>
              <text class="summary-label">心率</text>
            </view>
            <view class="summary-item">
              <text class="summary-value">{{ healthSummary.blood_pressure || '--' }}</text>
              <text class="summary-label">血压</text>
            </view>
            <view class="summary-item">
              <text class="summary-value">{{ healthSummary.blood_sugar || '--' }}</text>
              <text class="summary-label">血糖</text>
            </view>
          </view>
          <Loading v-else-if="summaryLoading" text="加载中..." />
          <EmptyState v-else icon="📋" title="暂无健康数据" action-text="录入数据" @action="switchTab('/pages/health/index')" />
        </view>

        <!-- 最近文章 -->
        <view class="articles-section card">
          <text class="section-title">健康文章</text>
          <Loading v-if="articlesLoading" text="加载中..." />
          <template v-else-if="articles.length > 0">
            <view v-for="article in articles" :key="article.id" class="article-entry" @tap="goArticle(article.id)">
              <text class="article-title">{{ article.title }}</text>
              <text class="article-date">{{ formatDate(article.created_at) }}</text>
            </view>
          </template>
          <EmptyState v-else icon="📰" title="暂无文章" />
        </view>
      </template>

      <!-- 访客模式 -->
      <template v-else>
        <view class="guest-page">
          <text class="guest-hero-icon">🏥</text>
          <text class="guest-hero-title">健康管理</text>
          <text class="guest-hero-desc">您的专属健康管家</text>
          <view class="guest-login-btn" @tap="navigateTo('/pages/login/index')">
            登录 / 注册
          </view>
          <text class="guest-browse">浏览健康资讯</text>

          <!-- 访客也展示文章 -->
          <view class="articles-section card">
            <text class="section-title">健康文章</text>
            <Loading v-if="articlesLoading" text="加载中..." />
            <template v-else-if="articles.length > 0">
              <view v-for="article in articles" :key="article.id" class="article-entry" @tap="goArticle(article.id)">
                <text class="article-title">{{ article.title }}</text>
                <text class="article-date">{{ formatDate(article.created_at) }}</text>
              </view>
            </template>
          </view>
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useAuthStore } from '@/stores/auth'
import { useElderClass } from '@/composables/useElderClass'
import { getArticles } from '@/services/article'
import { getTodaySummary } from '@/services/health'
import { formatDate } from '@/utils/date'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'

const authStore = useAuthStore()
const { elderClass } = useElderClass()

const articlesLoading = ref(false)
const summaryLoading = ref(false)
const articles = ref<any[]>([])
const healthSummary = ref<any>(null)

const greeting = computed(() => {
  const h = new Date().getHours()
  if (h < 6) return '夜深了'
  if (h < 12) return '早上好'
  if (h < 14) return '中午好'
  if (h < 18) return '下午好'
  return '晚上好'
})

const today = computed(() => formatDate(new Date(), 'YYYY年MM月DD日'))

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

function switchTab(url: string) {
  uni.switchTab({ url })
}

function goArticle(id: string) {
  uni.navigateTo({ url: `/pages-sub/article/detail/index?id=${id}` })
}

function onLoadMore() {
  // 分页加载预留
}

async function fetchArticles() {
  articlesLoading.value = true
  try {
    const res = await getArticles({ limit: 5 })
    articles.value = res || []
  } catch {
    articles.value = []
  }
  articlesLoading.value = false
}

async function fetchHealthSummary() {
  if (!authStore.user) return
  summaryLoading.value = true
  try {
    healthSummary.value = await getTodaySummary()
  } catch {
    healthSummary.value = null
  }
  summaryLoading.value = false
}

onMounted(() => {
  fetchArticles()
  fetchHealthSummary()
})

onShow(() => {
  authStore.restore()
})
</script>

<style lang="scss" scoped>
.home-scroll {
  height: 100vh;
  background: $bg;
}

.home-page {
  padding: 28px 24px 120px;
}

.greeting-section {
  margin-bottom: 28px;
}

.greeting-text {
  display: block;
  font-size: var(--tk-font-h1);
  font-weight: bold;
  color: $tx;
}

.greeting-date {
  display: block;
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  margin-top: 4px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.action-item {
  @include flex-center;
  flex-direction: column;
  background: $card;
  border-radius: $r-sm;
  padding: 20px 0;
  box-shadow: $shadow-sm;
}

.action-icon {
  font-size: var(--tk-font-hero);
  margin-bottom: 8px;
}

.action-label {
  font-size: var(--tk-font-body-sm);
  color: $tx2;
}

.card {
  @include card;
}

.section-title {
  @include section-title;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.summary-item {
  @include flex-center;
  flex-direction: column;
}

.summary-value {
  font-size: var(--tk-font-num);
  font-weight: bold;
  color: $pri;
  @include serif-number;
}

.summary-label {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  margin-top: 4px;
}

.article-entry {
  padding: 16px 0;
  min-height: $touch-min;
  border-bottom: 1px solid $bd-l;

  &:last-child { border-bottom: none; }
}

.article-title {
  display: block;
  font-size: var(--tk-font-body);
  color: $tx;
  font-weight: 500;
}

.article-date {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx3;
  margin-top: 4px;
}

// 访客模式
.guest-page {
  @include flex-center;
  flex-direction: column;
  padding-top: 80px;
}

.guest-hero-icon {
  font-size: var(--tk-font-display);
  margin-bottom: 16px;
}

.guest-hero-title {
  font-size: var(--tk-font-h1);
  font-weight: bold;
  color: $tx;
  margin-bottom: 8px;
}

.guest-hero-desc {
  font-size: var(--tk-font-body);
  color: $tx3;
  margin-bottom: 40px;
}

.guest-login-btn {
  @include btn-primary;
  width: 280px;
  margin-bottom: 16px;
}

.guest-browse {
  font-size: var(--tk-font-body-sm);
  color: $pri;
  margin-bottom: 40px;
}
</style>