cfc/cfc-frontend/pages/diet/records.vue

<template>
  <view class="records-page">

    <!-- 日期选择 -->
    <view class="date-picker">
      <view class="date-item" :class="{'date-active': selectedDate === item}" 
        v-for="item in dateRange" :key="item" @tap="selectDate(item)">
        <text class="date-num">{{ getDayNum(item) }}</text>
        <text class="date-week">{{ getWeekday(item) }}</text>
      </view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 统计卡片 -->
      <view class="card stats-card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="stat-title">{{ selectedDate }} 饮食统计</text>
          <view class="stat-grid">
            <view class="stat-item">
              <text class="stat-value">{{ stats.calories || 0 }}</text>
              <text class="stat-unit">kcal</text>
              <text class="stat-label">总热量</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ stats.records || 0 }}</text>
              <text class="stat-unit">次</text>
              <text class="stat-label">记录次数</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ stats.photos || 0 }}</text>
              <text class="stat-unit">张</text>
              <text class="stat-label">拍照记录</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 记录列表 -->
      <view class="record-list" v-if="records.length > 0">
        <view class="record-item" v-for="record in records" :key="record.id" @tap="goDetail(record)">
          <view class="record-header">
            <text class="record-meal">{{ record.mealType }}</text>
            <text class="record-time">{{ formatTime(record.createdAt) }}</text>
          </view>
          <view class="record-body">
            <view class="record-photo" v-if="record.imageUrl">
              <image :src="record.imageUrl" mode="aspectFill" class="photo-img" />
            </view>
            <view class="record-info">
              <text class="record-foods">{{ getFoodsText(record.userConfirmedFoods) }}</text>
              <text class="record-source" v-if="record.recordMethod === 'photo'">📷 拍照识别</text>
              <text class="record-source" v-else>✏️ 手动记录</text>
            </view>
          </view>
        </view>
      </view>

      <view class="empty-state" v-else>
        <text class="empty-icon">📝</text>
        <text class="empty-text">今天还没有饮食记录</text>
        <view class="add-btn" @tap="addRecord">
          <text>+ 添加记录</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部浮动按钮 -->
    <view class="fab" @tap="addRecord">
      <text class="fab-icon">+</text>
    </view>
  </view>
</template>

<script>
import { getDietDailyRecords } from '@/utils/api.js'
import { parseDate } from '@/utils/format.js'

export default {
  data() {
    return {
      selectedDate: this.formatDate(new Date()),
      dateRange: [],
      records: [],
      stats: {}
    }
  },
  onLoad: function() {
    this.initDateRange()
    this.loadRecords()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    initDateRange: function() {
      var self = this
      var today = new Date()
      for (var i = 6; i >= 0; i--) {
        var d = new Date(today)
        d.setDate(d.getDate() - i)
        self.dateRange.push(self.formatDate(d))
      }
      this.selectedDate = self.dateRange[6]
    },
    selectDate: function(date) {
      this.selectedDate = date
      this.loadRecords()
    },
    getDayNum: function(dateStr) {
      var d = parseDate(dateStr)
      return d ? d.getDate() : ''
    },
    getWeekday: function(dateStr) {
      var days = ['日', '一', '二', '三', '四', '五', '六']
      var d = parseDate(dateStr)
      return d ? '周' + days[d.getDay()] : ''
    },
    loadRecords: function() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId')
      if (!memberId) return
      
      getDietDailyRecords({ memberId: memberId, date: this.selectedDate }).then(function(res) {
        if (res && res.records) {
          self.records = res.records
          self.stats = res
        }
      })
    },
    formatTime: function(timeStr) {
      if (!timeStr) return ''
      var d = parseDate(timeStr)
      if (!d) return ''
      var h = d.getHours().toString().padStart(2, '0')
      var m = d.getMinutes().toString().padStart(2, '0')
      return h + ':' + m
    },
    getFoodsText: function(foodsJson) {
      try {
        var foods = JSON.parse(foodsJson || '[]')
        return foods.map(function(f) { return f.name }).join('、')
      } catch (e) {
        return ''
      }
    },
    addRecord: function() {
      uni.navigateTo({ url: 'pages/diet/record-detail' })
    },
    goDetail: function(record) {
      var id = record.id
      uni.navigateTo({ url: 'pages/diet/record-detail?id=' + id })
    },
    formatDate: function(date) {
      var d = parseDate(date)
      if (!d) return ''
      var m = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return d.getFullYear() + '-' + m + '-' + day
    }
  }
}
</script>

<style scoped>
.records-page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.nav-placeholder {
  width: 80rpx;
}
.date-picker {
  display: flex;
  background-color: #FFFFFF;
  padding: 20rpx 0;
  overflow-x: auto;
  white-space: nowrap;
}
.date-item {
  flex-shrink: 0;
  width: 120rpx;
  text-align: center;
  padding: 16rpx 0;
  margin: 0 10rpx;
  border-radius: 16rpx;
}
.date-active {
  background-color: #FF8C42;
  color: #FFFFFF;
}
.date-num {
  font-size: 32rpx;
  font-weight: 600;
  display: block;
}
.date-week {
  font-size: 22rpx;
  opacity: 0.8;
  display: block;
  margin-top: 4rpx;
}
.content {
  flex: 1;
  padding: 30rpx;
  padding-bottom: 160rpx;
}
.card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.card-accent {
  width: 8rpx;
  background-color: #FF8C42;
  flex-shrink: 0;
}
.card-body {
  flex: 1;
  padding: 30rpx;
}
.stat-title {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
  display: block;
}
.stat-grid {
  display: flex;
  justify-content: space-around;
}
.stat-item {
  text-align: center;
}
.stat-value {
  font-size: 40rpx;
  font-weight: 600;
  color: #FF8C42;
  display: block;
}
.stat-unit {
  font-size: 22rpx;
  color: #999;
}
.stat-label {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}
.record-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.record-item {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.record-meal {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  padding: 4rpx 16rpx;
  background-color: #FFF5EB;
  color: #FF8C42;
  border-radius: 20rpx;
}
.record-time {
  font-size: 24rpx;
  color: #999;
}
.record-body {
  display: flex;
  gap: 20rpx;
}
.record-photo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  overflow: hidden;
  flex-shrink: 0;
}
.photo-img {
  width: 100%;
  height: 100%;
}
.record-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8rpx;
}
.record-foods {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
}
.record-source {
  font-size: 22rpx;
  color: #999;
}
.empty-state {
  text-align: center;
  padding: 80rpx 40rpx;
}
.empty-icon {
  font-size: 100rpx;
  display: block;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 40rpx;
}
.add-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
  padding: 24rpx 60rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  display: inline-block;
}
.fab {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #FF8C42;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.4);
}
.fab-icon {
  font-size: 48rpx;
  color: #FFFFFF;
  font-weight: 300;
}
</style>