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

<template>
  <view class="diet-page">
    <view class="header">
      <text class="title">饮食记录</text>
      <button class="add-btn" size="mini" @click="goCreate">+ 记录</button>
    </view>

    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="info">
          <text class="food">{{ item.foodName }}</text>
          <text class="meta">{{ item.mealType }} · {{ format(item.eatDate) }}</text>
        </view>
        <view class="cal">{{ item.calories }} kcal</view>
      </view>
    </view>

    <view class="empty" v-if="list.length === 0">
      <text>暂无饮食记录</text>
    </view>
  </view>
</template>

<script>
import { getDietList } from '../../utils/api.js'
import { formatDate } from '../../utils/format.js'
export default {
  data() {
    return {
      list: []
    }
  },
  onShow() {
    this.loadList()
  },
  methods: {
    loadList() {
      getDietList().then(res => {
        if (res.data) this.list = res.data
      })
    },
    goCreate() {
      uni.navigateTo({ url: '/pages/diet/create' })
    },
    format(date) {
      return formatDate(date)
    }
  }
}
</script>

<style>
.diet-page { padding: 30rpx; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; }
.title { font-size: 36rpx; font-weight: 600; }
.add-btn { background: #F97316; color: #fff; border-radius: 40rpx; }
.list { background: #fff; border-radius: 16rpx; overflow: hidden; }
.item { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #f5f5f5; }
.info { display: flex; flex-direction: column; }
.food { font-size: 30rpx; font-weight: 600; margin-bottom: 8rpx; }
.meta { font-size: 24rpx; color: #666; }
.cal { color: #F97316; font-weight: 600; }
.empty { text-align: center; color: #999; padding: 60rpx; }
</style>