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

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

    <scroll-view class="content" scroll-y>
      <!-- 无推荐状态 -->
      <view class="empty-state" v-if="!recommendation">
        <view class="empty-icon-wrap"><text class="empty-icon">🍽️</text></view>
        <text class="empty-title">今日菜单空着</text>
        <text class="empty-sub">点击生成今日三餐食谱</text>
        <view class="generate-btn" @tap="generateRecipe">
          <text>生成食谱</text>
        </view>
      </view>

      <!-- 有推荐状态 -->
      <view v-else>
        <!-- 日期和状态 -->
        <view class="card header-card">
          <view class="card-accent"></view>
          <view class="card-body">
            <text class="date-text">{{ recommendation.date }}</text>
            <view class="status-badge" :class="'status-' + recommendation.status">
              <text>{{ statusText }}</text>
            </view>
          </view>
        </view>

        <!-- 菜品列表 -->
        <view class="meal-section" v-for="(meal, index) in meals" :key="index">
          <view class="meal-header">
            <view class="meal-icon-wrap" :class="'meal-icon-' + meal.type">
              <text class="meal-icon">{{ meal.icon }}</text>
            </view>
            <text class="meal-name">{{ meal.name }}</text>
            <text class="meal-count">{{ meal.participants }} 人份</text>
          </view>
          
          <view class="dish-list">
            <view class="dish-item" v-for="(dish, dIndex) in meal.dishes" :key="dIndex">
              <view class="dish-header">
                <text class="dish-name">{{ dish.name }}</text>
                <text class="dish-cal">{{ dish.calories }} kcal</text>
              </view>
              <view class="dish-ingredients">
                <text class="ingredient-tag" v-for="(ing, iIndex) in dish.ingredients" :key="iIndex">
                  {{ ing.name }} {{ ing.amount }}g
                </text>
              </view>
              <view class="dish-method">
                <text class="method-text">🍳 {{ dish.method }}</text>
              </view>
              <view class="dish-actions">
                <view class="action-btn like-btn" @tap="likeDish(meal.name, dIndex)">👍 好吃</view>
                <view class="action-btn swap-btn" @tap="swapDish(meal.name, dIndex)">🔄 替换</view>
                <view class="action-btn skip-btn" @tap="skipDish(meal.name, dIndex)">✕ 跳过</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 营养汇总 -->
        <view class="card nutrition-card">
          <view class="card-accent"></view>
          <view class="card-body">
            <text class="card-title">今日营养汇总</text>
            <view class="nutrition-grid">
              <view class="nutrition-item">
                <text class="nutrition-value">{{ summary.calories }}</text>
                <text class="nutrition-unit">kcal</text>
                <text class="nutrition-label">热量</text>
              </view>
              <view class="nutrition-item">
                <text class="nutrition-value">{{ summary.protein }}</text>
                <text class="nutrition-unit">g</text>
                <text class="nutrition-label">蛋白质</text>
              </view>
              <view class="nutrition-item">
                <text class="nutrition-value">{{ summary.carbs }}</text>
                <text class="nutrition-unit">g</text>
                <text class="nutrition-label">碳水</text>
              </view>
              <view class="nutrition-item">
                <text class="nutrition-value">{{ summary.fat }}</text>
                <text class="nutrition-unit">g</text>
                <text class="nutrition-label">脂肪</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-area">
          <view class="btn-row">
            <view class="btn-secondary" @tap="regenerate">重新生成</view>
            <view class="btn-primary" @tap="completeRecipe" v-if="recommendation.status !== 'completed'">
              标记完成
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getDietRecommendation, generateDietRecommendation, completeDietRecommendation } from '@/utils/api.js'

export default {
  data() {
    return {
      recommendation: null,
      meals: [],
      summary: {},
      loading: false
    }
  },
  computed: {
    statusText: function() {
      var map = {
        'pending': '待确认',
        'accepted': '已接受',
        'completed': '已完成'
      }
      return map[this.recommendation && this.recommendation.status] || '待确认'
    }
  },
  onLoad: function() {
    this.loadRecommendation()
  },
  onShow: function() {
    this.loadRecommendation()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    loadRecommendation: function() {
      var self = this
      var today = self.formatDate(new Date())
      getDietRecommendation({ date: today }).then(function(res) {
        if (res && res.id) {
          self.recommendation = res
          self.parseMenu(res.menu)
          self.summary = res.nutritionSummary || {}
        }
      })
    },
    parseMenu: function(menuJson) {
      try {
        var menu = JSON.parse(menuJson || '{}')
        this.meals = []
        
        var mealMap = {
          'breakfast': { name: '早餐', icon: '🌅' },
          'lunch': { name: '午餐', icon: '☀️' },
          'dinner': { name: '晚餐', icon: '🌙' }
        }
        
        if (menu.meals) {
          menu.meals.forEach(function(meal) {
            var config = mealMap[meal.type] || { name: meal.type, icon: '🍽️' }
            self.meals.push({
              name: config.name,
              icon: config.icon,
              type: meal.type,
              iconCls: 'meal-icon-' + meal.type,
              participants: meal.participants || 1,
              dishes: meal.dishes || []
            })
          })
        }
      } catch (e) {
        console.error('解析菜单失败', e)
      }
    },
    generateRecipe: function() {
      var self = this
      self.loading = true
      generateDietRecommendation({
        date: self.formatDate(new Date()),
        meal_type: 'all'
      }).then(function(res) {
        self.loading = false
        if (res && res.id) {
          uni.showToast({ title: '食谱生成成功', icon: 'success' })
          self.loadRecommendation()
        }
      }).catch(function() {
        self.loading = false
        uni.showToast({ title: '生成失败', icon: 'none' })
      })
    },
    likeDish: function(mealName, dishIndex) {
      uni.showToast({ title: '已点赞', icon: 'success' })
    },
    swapDish: function(mealName, dishIndex) {
      uni.showToast({ title: '已替换菜品', icon: 'success' })
    },
    skipDish: function(mealName, dishIndex) {
      uni.showToast({ title: '已跳过', icon: 'none' })
    },
    regenerate: function() {
      this.generateRecipe()
    },
    completeRecipe: function() {
      var self = this
      if (!self.recommendation) return
      completeDietRecommendation({ id: self.recommendation.id }).then(function() {
        uni.showToast({ title: '已标记完成', icon: 'success' })
        self.loadRecommendation()
      })
    },
    formatDate: function(date) {
      var d = date
      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>
.recommendation-page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.nav-placeholder {
  width: 80rpx;
}
.content {
  flex: 1;
  padding: 30rpx;
}
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 40rpx; }
.empty-icon-wrap {
  width: 160rpx; height: 160rpx; border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(255, 140, 66, 0.3);
  margin-bottom: 40rpx;
}
.empty-icon { font-size: 72rpx; }
.empty-title { font-size: 34rpx; font-weight: 700; color: #333; display: block; margin-bottom: 16rpx; }
.empty-sub { font-size: 26rpx; color: #999; display: block; margin-bottom: 48rpx; }
.generate-btn {
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  color: #FFFFFF; padding: 28rpx 60rpx; border-radius: 999rpx;
  font-size: 30rpx; font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
}
.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: linear-gradient(180deg, #FF8C42, #FFB366); flex-shrink: 0; }
.card-body {
  flex: 1;
  padding: 30rpx;
}
.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.header-card .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.date-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
.status-pending { background: #FFF1E6; color: #C2410C; }
.status-accepted {
  background-color: #E3F2FD;
  color: #2196F3;
}
.status-completed {
  background-color: #E8F5E9;
  color: #4CAF50;
}
.meal-section {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.meal-header { display: flex; align-items: center; padding: 24rpx 30rpx; border-bottom: 1rpx solid #FDE8D0; }
.meal-icon-wrap { width: 64rpx; height: 64rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
.meal-icon-breakfast { background: linear-gradient(135deg, #FFB366, #FFD48A); }
.meal-icon-lunch     { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
.meal-icon-dinner    { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
.meal-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}
.meal-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
}
.meal-count {
  font-size: 24rpx;
  color: #999;
}
.dish-list {
  padding: 20rpx 30rpx;
}
.dish-item { padding: 24rpx; border-radius: 20rpx; background: #FFF9F0; margin-bottom: 16rpx; }
.dish-item:last-child { margin-bottom: 0; }
.dish-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.dish-name { font-size: 28rpx; font-weight: 600; color: #333; }
.dish-cal { font-size: 24rpx; color: #C2410C; font-weight: 600; }
.dish-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 12rpx;
}
.ingredient-tag {
  padding: 6rpx 16rpx;
  background-color: #F5F5F5;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #666;
}
.dish-method {
  margin-bottom: 16rpx;
}
.method-text {
  font-size: 24rpx;
  color: #999;
}
.dish-actions { display: flex; gap: 16rpx; margin-top: 8rpx; }
.action-btn { padding: 12rpx 26rpx; border-radius: 999rpx; font-size: 24rpx; }
.like-btn { background: #E8F5E9; color: #4CAF50; }
.swap-btn { background: #E8F1FB; color: #2196F3; }
.skip-btn { background: #FFEBEE; color: #F44336; }
.nutrition-grid {
  display: flex;
  justify-content: space-around;
}
.nutrition-item {
  text-align: center;
}
.nutrition-card .card-body { background: #FFF9F0; border-radius: 0 0 20rpx 20rpx; }
.nutrition-value { font-size: 40rpx; font-weight: 700; color: #C2410C; display: block; }
.nutrition-unit {
  font-size: 22rpx;
  color: #999;
}
.nutrition-label {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}
.action-area {
  padding: 40rpx 30rpx;
}
.btn-row {
  display: flex;
  gap: 20rpx;
}
.btn-secondary {
  flex: 1; padding: 28rpx 0; background: #FFFFFF;
  border: 2rpx solid #FF8C42; border-radius: 999rpx;
  text-align: center; font-size: 28rpx; color: #C2410C;
}
.btn-primary {
  flex: 1; padding: 28rpx 0;
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  border-radius: 999rpx; text-align: center;
  font-size: 28rpx; color: #FFFFFF; font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
}
</style>