cfc/xiaofat-miniprogram/pages/index/index.vue

<template>
  <view class="index-page">
    <view class="header">
      <view class="greeting">
        <text class="hi">Hi，</text>
        <text class="nickname">{{ nickname || '健康达人' }}</text>
      </view>
    </view>

    <view class="summary-card" v-if="activeGoal">
      <view class="summary-item">
        <text class="label">起始体重</text>
        <text class="value">{{ activeGoal.startWeight }} kg</text>
      </view>
      <view class="summary-item">
        <text class="label">目标体重</text>
        <text class="value">{{ activeGoal.targetWeight }} kg</text>
      </view>
      <view class="summary-item">
        <text class="label">已记录</text>
        <text class="value">{{ weightCount }} 次</text>
      </view>
    </view>

    <view class="empty-goal" v-else>
      <text>还没有减脂目标</text>
      <button class="set-goal-btn" size="mini" @click="goToProfile">去设置</button>
    </view>

    <view class="quick-actions">
      <view class="action-item" @click="goWeight">
        <text class="icon">📝</text>
        <text class="text">体重记录</text>
      </view>
      <view class="action-item" @click="goDiet">
        <text class="icon">🍽️</text>
        <text class="text">饮食记录</text>
      </view>
      <view class="action-item" @click="goExercise">
        <text class="icon">🏃</text>
        <text class="text">运动记录</text>
      </view>
      <view class="action-item" @click="goAI">
        <text class="icon">🤖</text>
        <text class="text">AI教练</text>
      </view>
    </view>

    <view class="today-stats">
      <view class="stat-box">
        <text class="stat-label">今日摄入</text>
        <text class="stat-value">{{ todayCalories }} kcal</text>
      </view>
      <view class="stat-box">
        <text class="stat-label">最新体重</text>
        <text class="stat-value">{{ latestWeight }} kg</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getActiveGoal, getWeightList, getCaloriesSummary } from '../../utils/api.js'
import { today } from '../../utils/format.js'
export default {
  data() {
    return {
      nickname: '',
      activeGoal: null,
      weightList: [],
      todayCalories: 0,
      latestWeight: '--'
    }
  },
  computed: {
    weightCount() {
      return this.weightList ? this.weightList.length : 0
    }
  },
  onLoad() {
    var userInfo = uni.getStorageSync('userInfo')
    this.nickname = userInfo && userInfo.nickname ? userInfo.nickname : ''
  },
  onShow() {
    this.loadData()
  },
  methods: {
    loadData() {
      getActiveGoal().then(res => {
        if (res.data) this.activeGoal = res.data
      })
      getWeightList().then(res => {
        if (res.data && res.data.length > 0) {
          this.weightList = res.data
          var sorted = [...res.data].sort((a,b) => {
            var ta = new Date(a.measureDate || a.createTime).getTime()
            var tb = new Date(b.measureDate || b.createTime).getTime()
            return tb - ta
          })
          this.latestWeight = sorted[0].weight
        } else {
          this.weightList = []
        }
      })
      getCaloriesSummary(today()).then(res => {
        if (res.data) this.todayCalories = res.data
      })
    },
    goToProfile() {
      uni.navigateTo({ url: '/pages/profile/index' })
    },
    goWeight() {
      uni.switchTab({ url: '/pages/weight/index' })
    },
    goDiet() {
      uni.switchTab({ url: '/pages/diet/index' })
    },
    goExercise() {
      uni.switchTab({ url: '/pages/exercise/index' })
    },
    goAI() {
      uni.switchTab({ url: '/pages/ai-coach/index' })
    }
  }
}
</script>

<style>
.index-page { padding: 30rpx; }
.header { margin-bottom: 30rpx; }
.greeting { font-size: 36rpx; font-weight: 600; }
.nickname { color: #F97316; }
.summary-card { display: flex; justify-content: space-between; background: #fff; padding: 30rpx; border-radius: 16rpx; margin-bottom: 30rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); }
.summary-item { display: flex; flex-direction: column; align-items: center; }
.label { font-size: 24rpx; color: #666; margin-bottom: 8rpx; }
.value { font-size: 32rpx; font-weight: 600; color: #333; }
.empty-goal { background: #fff; padding: 30rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: space-between; margin-bottom: 30rpx; }
.set-goal-btn { background: #F97316; color: #fff; border-radius: 40rpx; }
.quick-actions { display: flex; justify-content: space-between; background: #fff; padding: 30rpx 20rpx; border-radius: 16rpx; margin-bottom: 30rpx; }
.action-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.icon { font-size: 50rpx; margin-bottom: 8rpx; }
.text { font-size: 24rpx; color: #333; }
.today-stats { display: flex; justify-content: space-between; }
.stat-box { background: #fff; padding: 30rpx; border-radius: 16rpx; flex: 1; margin: 0 10rpx; }
.stat-label { font-size: 24rpx; color: #666; margin-bottom: 8rpx; display: block; }
.stat-value { font-size: 36rpx; font-weight: 600; color: #F97316; }
</style>