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

<template>
  <view class="diet-page">
    <scroll-view class="content" scroll-y>
      <!-- ===== 今日餐桌主视觉 ===== -->
      <view class="dining-hero">
        <view class="hero-top">
          <view class="hero-icon-wrap"><text class="hero-icon">🍳</text></view>
          <view class="hero-text">
            <text class="hero-title">今日共餐</text>
            <text class="hero-subtitle">{{ heroSubtitle }}</text>
          </view>
        </view>
        <view class="hero-meals" v-if="hasMealConfig">
          <view class="hero-meal" v-for="m in heroMeals" :key="m.key">
            <text class="hero-meal-emoji">{{ m.emoji }}</text>
            <text class="hero-meal-label">{{ m.label }}</text>
            <text class="hero-meal-count">{{ m.count || '—' }}</text>
          </view>
        </view>
        <view class="hero-empty" v-else @tap="navTo('/pages/diet/meal-config')">
          <text class="hero-empty-text">还没设置共餐？点这里安排家人一起吃饭</text>
          <view class="hero-empty-btn">去设置共餐</view>
        </view>
      </view>

      <!-- 食材推荐器 -->
      <view class="card">
        <view class="card-header">
          <view class="card-basket-icon"><text class="card-basket-emoji">🧺</text></view>
          <text class="card-title">今日菜篮</text>
        </view>
        <view class="card-body">
          <view class="action-bar">
            <view class="action-btn" @tap="refreshIngredients">
              <text class="action-btn-text">🔄 换一批</text>
            </view>
            <view class="action-btn action-btn-primary" @tap="showFoodPicker">
              <text class="action-btn-text-primary">+ 添加食材</text>
            </view>
            <view class="action-btn action-btn-accent" @tap="generateRecipe" :class="{'action-btn-disabled': selectedIngredients.length === 0}">
              <text class="action-btn-text-accent">✨ 生成食谱</text>
            </view>
          </view>

          <view class="ingredient-list" v-if="ingredients.length > 0">
            <view class="ingredient-item" v-for="(item, index) in ingredients" :key="getIngredientKey(item, index)">
              <view class="ingredient-left">
                <view class="ingredient-badge">
                  <text class="ingredient-badge-text">{{ index + 1 }}</text>
                </view>
                <view class="ingredient-info">
                  <text class="ingredient-name">{{ item.name }}</text>
                  <text class="ingredient-reason" v-if="item.reason">{{ item.reason }}</text>
                </view>
              </view>
              <view class="ingredient-remove" @tap="removeIngredient(index)">
                <text class="remove-text">✕</text>
              </view>
            </view>
          </view>
          <view class="empty-state" v-else>
            <text class="empty-icon">🥬</text>
            <text class="empty-text">{{ ingredientsLoading ? '加载中...' : '暂无推荐食材' }}</text>
            <text class="empty-sub" v-if="!ingredientsLoading">点击「添加食材」或「换一批」获取推荐</text>
          </view>
        </view>
      </view>

      <!-- 快捷入口 -->
      <view class="section-label">
        <text class="section-label-text">常用功能</text>
      </view>
      <view class="nav-grid">
        <view class="nav-item" @tap="navTo('/pages/diet/food-query')">
          <view class="nav-icon-wrap nav-icon-green">
            <text class="nav-icon">🥗</text>
          </view>
          <text class="nav-label">食材查询</text>
        </view>
        <view class="nav-item" @tap="navTo('/pages/diet/records')">
          <view class="nav-icon-wrap nav-icon-blue">
            <text class="nav-icon">📝</text>
          </view>
          <text class="nav-label">饮食记录</text>
        </view>
        <view class="nav-item" @tap="navTo('/pages/diet/preferences')">
          <view class="nav-icon-wrap nav-icon-orange">
            <text class="nav-icon">📋</text>
          </view>
          <text class="nav-label">调研表</text>
        </view>
        <view class="nav-item" @tap="navTo('/pages/diet/meal-config')">
          <view class="nav-icon-wrap nav-icon-purple">
            <text class="nav-icon">👨‍👩‍👧</text>
          </view>
          <text class="nav-label">共餐配置</text>
        </view>
        <view class="nav-item" @tap="navTo('/pages/diet/recommendation')">
          <view class="nav-icon-wrap nav-icon-red">
            <text class="nav-icon">🍽️</text>
          </view>
          <text class="nav-label">食谱推荐</text>
        </view>
      </view>

      <!-- 本周趋势 -->
      <view class="card" v-if="trendData.days > 0">
        <view class="card-header">
          <view class="card-dot"></view>
          <text class="card-title">本周饮食</text>
        </view>
        <view class="card-body">
          <view class="trend-row">
            <view class="trend-item">
              <text class="trend-num">{{ trendData.totalCalories || 0 }}</text>
              <text class="trend-unit">kcal</text>
              <text class="trend-label">总摄入</text>
            </view>
            <view class="trend-divider"></view>
            <view class="trend-item">
              <text class="trend-num">{{ trendData.days }}</text>
              <text class="trend-unit">天</text>
              <text class="trend-label">记录天数</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部留白 -->
      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 食材选择弹窗 -->
    <view class="modal" v-if="showPicker" @tap="closePicker">
      <view class="modal-mask"></view>
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">选择食材</text>
          <view class="modal-close" @tap="closePicker">
            <text class="close-text">✕</text>
          </view>
        </view>
        <view class="search-wrap">
          <input class="search-input" placeholder="搜索食材..." placeholder-style="color:#bbb" v-model="searchQuery" @input="searchFood" />
        </view>
        <scroll-view class="food-list" scroll-y>
          <view class="food-item" v-for="food in searchResults" :key="food.id" @tap="addFood(food)">
            <text class="food-name">{{ food.name }}</text>
            <text class="food-tag">{{ food.category }}</text>
          </view>
        </scroll-view>
        <view class="empty-state" v-if="searchResults.length === 0 && searchQuery">
          <text class="empty-text">未找到匹配食材</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDietIngredients, refreshDietIngredients, addDietIngredient, removeDietIngredient, generateDietRecommendation, getMealConfig } from '@/utils/api.js'
import { parseDate } from '@/utils/format.js'

export default {
  data: function() {
    return {
      familyId: null,
      familyMemberId: null,
      ingredients: [],
      selectedIngredients: [],
      ingredientsLoading: false,
      mealSummary: {},
      trendData: {},
      showPicker: false,
      searchQuery: '',
      searchResults: [],
      uploadPromptShown: false
    }
  },
  computed: {
    heroSubtitle: function() {
      var self = this
      var parts = this.heroMeals.filter(function(m) { return m.count && m.count !== '' })
      var count = parts.length > 0 ? (parts[0].count || '') : ''
      return (self.isWeekend(new Date()) ? '周末' : '工作日') + ' · ' + (count ? count : '全家一起吃饭')
    },
    heroMeals: function() {
      var defs = [
        { key: 'breakfast', label: '早餐', emoji: '🌅' },
        { key: 'lunch', label: '午餐', emoji: '☀️' },
        { key: 'dinner', label: '晚餐', emoji: '🌙' }
      ]
      var self = this
      return defs.map(function(d) {
        return { key: d.key, label: d.label, emoji: d.emoji, count: self.mealSummary[d.key] || '' }
      })
    },
    hasMealConfig: function() {
      return !!(this.mealSummary.breakfast || this.mealSummary.lunch || this.mealSummary.dinner)
    }
  },
  onLoad: function() {
    this.familyId = uni.getStorageSync('familyId')
    this.familyMemberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId')
    this.loadIngredients()
    this.loadMealSummary()
  },
  onShow: function() {
    // onLoad 已加载过，onShow 只刷新食材（共餐配置不重复请求）
    this.loadIngredients()
  },
  methods: {
    navTo: function(url) {
      uni.navigateTo({ url: url })
    },
    getIngredientKey: function(item, index) {
      return 'ing-' + (item.id || index)
    },
    loadIngredients: function() {
      var self = this
      self.ingredientsLoading = true
      getDietIngredients().then(function(res) {
        self.ingredientsLoading = false
        if (res && res.code === 200 && res.data && res.data.ingredients) {
          self.ingredients = res.data.ingredients
          if (self.ingredients.length === 0 && !self.uploadPromptShown) {
            self.uploadPromptShown = true
            uni.showModal({
              title: '暂无推荐食材',
              content: '还未上传菌群报告，无法生成个性化食材推荐。是否前往上传报告？',
              confirmText: '去上传',
              cancelText: '稍后',
              success: function(modalRes) {
                if (modalRes.confirm) {
                  uni.navigateTo({ url: '/pages/health/report-upload' })
                }
              }
            })
          }
        }
      }).catch(function() {
        self.ingredientsLoading = false
      })
    },
    refreshIngredients: function() {
      var self = this
      self.ingredientsLoading = true
      refreshDietIngredients().then(function(res) {
        self.ingredientsLoading = false
        if (res && res.code === 200 && res.data && res.data.ingredients) {
          self.ingredients = res.data.ingredients
        }
      }).catch(function() {
        self.ingredientsLoading = false
      })
    },
    addIngredient: function(index) {
      var self = this
      var item = this.ingredients[index]
      addDietIngredient({ food_id: item.foodId, name: item.name }).then(function(res) {
        self.loadIngredients()
      })
    },
    removeIngredient: function(index) {
      var self = this
      var item = this.ingredients[index]
      removeDietIngredient({ food_id: item.foodId }).then(function(res) {
        self.loadIngredients()
      })
    },
    generateRecipe: function() {
      var self = this
      var foodIds = this.ingredients.map(function(item) { return { food_id: item.foodId, name: item.name } })
      generateDietRecommendation({
        date: self.formatDate(new Date()),
        meal_type: 'all',
        selected_foods: JSON.stringify(foodIds)
      }).then(function(res) {
        if (res && res.id) {
          uni.showToast({ title: '食谱生成成功', icon: 'success' })
          setTimeout(function() {
            self.navTo('/pages/diet/recommendation')
          }, 1000)
        }
      })
    },
    formatDate: function(date) {
      var d = parseDate(date)
      if (!d) return ''
      var m = (d.getMonth() + 1).toString()
      if (m.length < 2) m = '0' + m
      var day = d.getDate().toString()
      if (day.length < 2) day = '0' + day
      return d.getFullYear() + '-' + m + '-' + day
    },
    loadMealSummary: function() {
      var self = this
      var dateType = self.isWeekend(new Date()) ? 'weekend' : 'weekday'
      Promise.all([
        getMealConfig({ date_type: dateType, meal_type: 'breakfast' }),
        getMealConfig({ date_type: dateType, meal_type: 'lunch' }),
        getMealConfig({ date_type: dateType, meal_type: 'dinner' })
      ]).then(function(results) {
        self.mealSummary.breakfast = self.parseMembers(results[0])
        self.mealSummary.lunch = self.parseMembers(results[1])
        self.mealSummary.dinner = self.parseMembers(results[2])
      })
    },
    parseMembers: function(result) {
      if (!result || result.code !== 200 || !result.data) return ''
      var config = result.data
      if (!config || !config.participantMemberIds) return ''
      try {
        var ids = JSON.parse(config.participantMemberIds)
        return '共 ' + ids.length + ' 人'
      } catch (e) {
        return ''
      }
    },
    isWeekend: function(date) {
      var day = date.getDay()
      return day === 0 || day === 6
    },
    showFoodPicker: function() {
      this.showPicker = true
    },
    closePicker: function() {
      this.showPicker = false
      this.searchQuery = ''
      this.searchResults = []
    },
    searchFood: function() {
      if (!this.searchQuery) {
        this.searchResults = []
        return
      }
      this.searchResults = []
    },
    addFood: function(food) {
      var self = this
      addDietIngredient({ food_id: food.id, name: food.name }).then(function(res) {
        self.closePicker()
        self.loadIngredients()
      })
    }
  }
}
</script>

<style scoped>
/* ===== 页面令牌（暖灶·家的味道） ===== */
.diet-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
  overflow: hidden;
}
.dining-hero {
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  border-radius: 32rpx;
  padding: 36rpx 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 140, 66, 0.25);
}
.hero-top { display: flex; align-items: center; margin-bottom: 24rpx; }
.hero-icon-wrap {
  width: 88rpx; height: 88rpx; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  margin-right: 20rpx; flex-shrink: 0;
}
.hero-icon { font-size: 44rpx; }
.hero-title { font-size: 38rpx; font-weight: 700; color: #FFFFFF; display: block; }
.hero-subtitle { font-size: 24rpx; color: rgba(255,255,255,0.85); margin-top: 6rpx; display: block; }
.hero-meals { display: flex; }
.hero-meal {
  flex: 1; margin: 0 8rpx;
  background: rgba(255,255,255,0.18);
  border-radius: 20rpx; padding: 20rpx 8rpx;
  display: flex; flex-direction: column; align-items: center;
}
.hero-meal:first-child { margin-left: 0; }
.hero-meal:last-child { margin-right: 0; }
.hero-meal-emoji { font-size: 40rpx; margin-bottom: 8rpx; }
.hero-meal-label { font-size: 24rpx; color: #FFFFFF; }
.hero-meal-count { font-size: 22rpx; color: rgba(255,255,255,0.9); margin-top: 6rpx; font-weight: 600; }
.hero-empty { display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; }
.hero-empty-text { font-size: 26rpx; color: #FFFFFF; margin-bottom: 20rpx; }
.hero-empty-btn {
  background: #FFFFFF; color: #C2410C; font-size: 28rpx; font-weight: 600;
  padding: 18rpx 44rpx; border-radius: 999rpx;
}
.content {
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

/* 共餐格子 */
.card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}
.card-header {
  display: flex;
  align-items: center;
  padding: 28rpx 28rpx 0;
}
.card-basket-icon {
  width: 64rpx; height: 64rpx; border-radius: 18rpx;
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  display: flex; align-items: center; justify-content: center;
  margin-right: 16rpx; flex-shrink: 0;
}
.card-basket-emoji { font-size: 32rpx; }
.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.card-body {
  padding: 24rpx 28rpx 28rpx;
}

/* 操作按钮栏 */
.action-bar {
  display: flex;
  margin-bottom: 24rpx;
  box-sizing: border-box;
  width: 100%;
}
.action-btn {
  padding: 14rpx 24rpx;
  border-radius: 32rpx;
  background: #F5F5F5;
  margin-right: 16rpx;
}
.action-btn:last-child {
  margin-right: 0;
}
.action-btn-primary {
  background: #FF8C42;
}
.action-btn-accent { background: linear-gradient(135deg, #10B981, #34D399); }
.action-btn-text-accent { font-size: 24rpx; color: #FFFFFF; }
.action-btn-disabled {
  opacity: 0.4;
}
.action-btn-text {
  font-size: 24rpx;
  color: #666;
}
.action-btn-text-primary {
  font-size: 24rpx;
  color: #FFFFFF;
}

/* 食材列表 */
.ingredient-list {
  margin-top: 8rpx;
}
.ingredient-item:active { background: #FFF9F0; }
.ingredient-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}
.ingredient-item:last-child {
  border-bottom: none;
}
.ingredient-left {
  display: flex;
  align-items: center;
  flex: 1;
}
.ingredient-badge {
  width: 40rpx;
  height: 40rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.ingredient-badge-text {
  font-size: 20rpx;
  color: #FFFFFF;
  font-weight: 600;
}
.ingredient-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ingredient-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.ingredient-reason {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}
.ingredient-remove {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remove-text {
  font-size: 28rpx;
  color: #ccc;
}

/* 区域标签 */
.section-label {
  padding: 8rpx 0 16rpx;
}
.section-label-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

/* 快捷入口网格 */
.nav-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24rpx;
  box-sizing: border-box;
  width: 100%;
}
.nav-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  position: relative;
  z-index: 1;
}
.nav-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  transition: transform 0.15s ease;
}
.nav-icon-green { background: linear-gradient(135deg, #FFF1E6, #FFE0C0); }
.nav-icon-blue  { background: linear-gradient(135deg, #FFF7ED, #FFEEDD); }
.nav-icon-orange{ background: linear-gradient(135deg, #FF8C42, #FFB366); }
.nav-icon-purple{ background: linear-gradient(135deg, #FFE8D6, #FFD4B0); }
.nav-icon-red   { background: linear-gradient(135deg, #E8F8F1, #C8F0E0); }
.nav-item:active .nav-icon-wrap { transform: scale(0.92); }
.nav-icon {
  font-size: 36rpx;
}
.nav-label {
  font-size: 22rpx;
  color: #333;
}

/* 趋势卡片 */
.trend-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}
.trend-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trend-divider {
  width: 1rpx;
  height: 60rpx;
  background: #FDE8D0;
}
.trend-num {
  font-size: 48rpx;
  font-weight: 700;
  color: #FF8C42;
}
.trend-unit {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}
.trend-label {
  font-size: 22rpx;
  color: #666;
  margin-top: 4rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}
.empty-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
}
.empty-text {
  font-size: 26rpx;
  color: #999;
}
.empty-sub {
  font-size: 22rpx;
  color: #ccc;
  margin-top: 8rpx;
}

/* 弹窗 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative;
  width: 100%;
  max-height: 80vh;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx;
  z-index: 1;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}
.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.modal-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-text {
  font-size: 32rpx;
  color: #999;
}
.search-wrap {
  margin-bottom: 20rpx;
}
.search-input {
  border: 1rpx solid #eee;
  border-radius: 40rpx;
  padding: 20rpx 28rpx;
  font-size: 28rpx;
  background: #F8F8F8;
}
.food-list {
  max-height: 500rpx;
}
.food-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}
.food-name {
  font-size: 28rpx;
  color: #333;
}
.food-tag {
  font-size: 22rpx;
  color: #FF8C42;
  background: #FFF0E0;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

/* 底部留白 */
.bottom-space {
  height: 40rpx;
}
</style>