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

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">饮食</text>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">均衡膳食指南</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">🌾 谷物类</text>
              <text class="info-desc">每餐应有适量主食，优先选择全谷物和杂粮，如糙米、燕麦、全麦面包，提供持续能量。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🥩 蛋白质</text>
              <text class="info-desc">每天摄入足量优质蛋白，来源包括鱼、禽肉、蛋、豆制品和奶制品，促进生长发育。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🥦 蔬菜水果</text>
              <text class="info-desc">每天吃 5 份以上蔬菜水果，不同颜色搭配，获取丰富的维生素、矿物质和膳食纤维。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🥛 奶制品</text>
              <text class="info-desc">每天 300-500ml 奶制品，如牛奶、酸奶、奶酪，补充钙质和蛋白质，强健骨骼。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">儿童营养要点</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">钙</text>
              <text class="info-desc">促进骨骼和牙齿发育。来源：牛奶、酸奶、豆腐、绿叶蔬菜、小鱼干。</text>
            </view>
            <view class="info-item">
              <text class="info-age">铁</text>
              <text class="info-desc">预防贫血，保证大脑供氧。来源：红肉、动物肝脏、菠菜、豆类、强化谷物。</text>
            </view>
            <view class="info-item">
              <text class="info-age">蛋白质</text>
              <text class="info-desc">身体组织和细胞的基础材料。来源：鸡蛋、鱼肉、鸡胸肉、牛奶、豆制品。</text>
            </view>
            <view class="info-item">
              <text class="info-age">维生素</text>
              <text class="info-desc">维持免疫力和新陈代谢。来源：各类蔬菜水果，特别是橙子、胡萝卜、西兰花。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">饮食搭配建议</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">重视早餐</text>
              <text class="info-desc">早餐提供全天 25-30% 的能量，保证谷物、蛋白质、水果搭配，开启活力一天。</text>
            </view>
            <view class="info-item">
              <text class="info-age">减少糖分</text>
              <text class="info-desc">控制含糖饮料和零食摄入，减少龋齿和肥胖风险，培养清淡口味。</text>
            </view>
            <view class="info-item">
              <text class="info-age">充足饮水</text>
              <text class="info-desc">每天饮水 800-1400ml（根据年龄），以白开水为主，少量多次，保持身体水分平衡。</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 记录饮食表单 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">记录饮食</text>
          <view class="form-group">
            <text class="form-label">餐次 *</text>
            <view class="tag-row">
              <view class="tag-btn" v-for="m in mealTypes" :key="m.value"
                :class="form.mealType === m.value ? 'tag-active' : ''"
                @tap="form.mealType = m.value">
                <text>{{ m.label }}</text>
              </view>
            </view>
          </view>
          <view class="form-group">
            <text class="form-label">食物清单</text>
            <textarea class="form-textarea" v-model="form.foodItems" placeholder="输入吃了什么，如：米饭1碗、青菜、鸡腿" maxlength="200"></textarea>
          </view>
          <view class="form-group">
            <text class="form-label">总卡路里（选填）</text>
            <input class="form-input" type="number" v-model="form.totalCalories" placeholder="估算总热量" />
          </view>
          <view class="form-group">
            <text class="form-label">备注（选填）</text>
            <input class="form-input" v-model="form.remark" placeholder="记录饮食感受..." />
          </view>
          <view class="submit-btn" @tap="doCheckin">
            <text>{{ submitting ? '提交中...' : '提交打卡' }}</text>
          </view>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">饮食记录</text>
          <view class="history-list" v-if="history.length > 0">
            <view class="history-item" v-for="item in history" :key="item.id">
              <view class="history-left">
                <text class="history-type">{{ item.mealType }}</text>
                <text class="history-duration">{{ item.foodItems || '-' }}</text>
              </view>
              <view class="history-right">
                <text class="history-date">{{ formatDate(item.createdAt) }}</text>
              </view>
            </view>
          </view>
          <view class="empty-state" v-else>
            <text>还没有饮食记录</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      memberId: null,
      submitting: false,
      history: [],
      mealTypes: [
        { label: '早餐', value: 'breakfast' },
        { label: '午餐', value: 'lunch' },
        { label: '晚餐', value: 'dinner' },
        { label: '加餐', value: 'snack' },
        { label: '零食', value: 'extra' }
      ],
      form: {
        mealType: '',
        foodItems: '',
        totalCalories: '',
        remark: ''
      }
    }
  },
  onLoad: function() {
    this.memberId = uni.getStorageSync('currentChildId') || null
    this.loadHistory()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var m = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return m + '-' + day
    },
    loadHistory: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token || !self.memberId) return
      uni.request({
        url: config.API_BASE_URL + '/api/health/meal/list',
        method: 'POST',
        data: { memberId: self.memberId },
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.history = res.data.data.slice(0, 10)
          }
        }
      })
    },
    doCheckin: function() {
      var self = this
      if (!self.form.mealType) {
        uni.showToast({ title: '请选择餐次', icon: 'none' })
        return
      }
      if (!self.memberId) {
        uni.showToast({ title: '孩子ID无效', icon: 'none' })
        return
      }
      self.submitting = true
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/health/meal/create',
        method: 'POST',
        data: {
          memberId: self.memberId,
          mealType: self.form.mealType,
          foodItems: self.form.foodItems || '',
          totalCalories: self.form.totalCalories ? parseInt(self.form.totalCalories) : null,
          remark: self.form.remark || ''
        },
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          self.submitting = false
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '打卡成功', icon: 'success' })
            self.form.mealType = ''
            self.form.foodItems = ''
            self.form.totalCalories = ''
            self.form.remark = ''
            self.loadHistory()
          } else {
            var msg = (res.data && res.data.message) || '打卡失败'
            uni.showToast({ title: msg, icon: 'none' })
          }
        },
        fail: function() {
          self.submitting = false
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding-top: var(--status-bar-height, 0);
  background-color: #FFFFFF;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-back {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}
.back-text {
  font-size: 28rpx;
  color: #333;
}
.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.content {
  flex: 1;
  padding: 30rpx;
}
.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;
}
.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}
.info-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.info-age {
  font-size: 26rpx;
  font-weight: 500;
  color: #FF8C42;
  display: block;
}
.info-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.form-group {
  margin-bottom: 24rpx;
}
.form-label {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  display: block;
}
.form-input {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 26rpx;
  background-color: #FAFAFA;
  width: auto;
}
.form-textarea {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 26rpx;
  background-color: #FAFAFA;
  width: auto;
  min-height: 120rpx;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.tag-btn {
  padding: 12rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FAFAFA;
}
.tag-active {
  border-color: #FF8C42;
  color: #FF8C42;
  background-color: #FFF5EB;
}
.submit-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
  text-align: center;
  padding: 22rpx 0;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
  margin-top: 10rpx;
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.history-left {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}
.history-type {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
}
.history-duration {
  font-size: 22rpx;
  color: #999;
}
.history-right {
  text-align: right;
}
.history-date {
  font-size: 22rpx;
  color: #999;
}
.empty-state {
  text-align: center;
  padding: 40rpx 0;
  font-size: 26rpx;
  color: #999;
}
</style>