cfc/cfc-frontend/pages/meal/recommend.vue

<template>
  <view class="meal-recommend">
    <!-- 顶部配置 -->
    <view class="config-section">
      <view class="config-item">
        <text class="label">餐次</text>
        <picker :value="mealTypeIndex" :range="mealTypes" @change="onMealTypeChange">
          <view class="picker-value">{{ mealTypes[mealTypeIndex] || '请选择' }}</view>
        </picker>
      </view>
      <view class="config-item">
        <text class="label">口味偏好</text>
        <input class="input" v-model="tasteNote" placeholder="如: 清淡、少辣" />
      </view>
    </view>
    <button class="generate-btn" type="primary" :loading="generating" @click="generateRecommend" :disabled="generating">
      {{ generating ? '生成中...' : '生成推荐' }}
    </button>

    <!-- 推荐结果 -->
    <view v-if="recommendResult" class="result-section">
      <view class="section-title">推荐方案</view>
      <view class="answer-card">
        <text class="answer-text">{{ recommendResult.answer }}</text>
      </view>

      <!-- 替换选项 -->
      <view v-if="replaceOptions.length > 0" class="replace-section">
        <view class="section-title">可替换食材</view>
        <scroll-view class="replace-scroll" scroll-x>
          <view class="replace-items">
            <view
              v-for="food in replaceOptions"
              :key="food.id"
              class="replace-item"
              hover-class="replace-item-hover"
              @click="replaceFoodItem(food.id)"
            >
              <text class="food-name">{{ food.name }}</text>
              <text class="food-kcal">{{ food.kcalPer100g }}kcal/100g</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 营养摘要 -->
      <view v-if="nutritionSummary" class="nutrition-section">
        <view class="section-title">营养摘要</view>
        <view class="nutrition-grid">
          <view v-for="(val, key) in nutritionSummary" :key="key" class="nutrition-item">
            <text class="nutrition-key">{{ key }}</text>
            <text class="nutrition-val">{{ val }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="!recommendResult && !generating" class="empty-state">
      <text class="empty-icon">🍽️</text>
      <text class="empty-text">点击上方按钮获取智能食谱推荐</text>
    </view>

    <!-- 替换结果提示 -->
    <view v-if="replaceResult" class="toast" @click="replaceResult = ''">
      <text>已替换为: {{ replaceResult.name }}</text>
    </view>
  </view>
</template>

<script>
import { getMealRecommend, replaceFood } from '@/utils/api'

export default {
  name: 'MealRecommend',
  data() {
    return {
      mealTypes: ['早餐', '午餐', '晚餐', '加餐'],
      mealTypeIndex: -1,
      tasteNote: '',
      generating: false,
      recommendResult: null,
      replaceOptions: [],
      nutritionSummary: null,
      replaceResult: null
    }
  },
  methods: {
    onMealTypeChange(e) {
      this.mealTypeIndex = e.detail.value
    },
    async generateRecommend() {
      this.generating = true
      this.recommendResult = null
      this.replaceResult = null
      try {
        const params = {}
        if (this.mealTypeIndex >= 0) {
          params.mealType = this.mealTypes[this.mealTypeIndex]
        }
        const res = await getMealRecommend(params)
        if (res.code === 0) {
          this.recommendResult = res.data
          this.replaceOptions = res.data.replaceOptions || []
          this.nutritionSummary = res.data.nutritionSummary || null
        } else {
          uni.showToast({ title: res.message || '获取推荐失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        this.generating = false
      }
    },
    async replaceFoodItem(foodId) {
      try {
        const res = await replaceFood({ foodId })
        if (res.code === 0 && res.data) {
          this.replaceResult = res.data
          uni.showToast({ title: '已替换: ' + res.data.name, icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '替换失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '替换失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.meal-recommend {
  min-height: 100vh;
  background: var(--bg, #FFF7ED);
  padding: 20rpx 30rpx;
}
.config-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: var(--shadow-md, 0 2rpx 12rpx rgba(0,0,0,0.06));
}
.config-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.config-item:last-child {
  margin-bottom: 0;
}
.label {
  width: 140rpx;
  font-size: 28rpx;
  color: #333;
  flex-shrink: 0;
}
.picker-value {
  font-size: 28rpx;
  color: var(--color-primary, #F97316);
  padding: 10rpx 20rpx;
  background: #FFF0E0;
  border-radius: 8rpx;
}
.input {
  flex: 1;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  color: #333;
}
.generate-btn {
  margin: 30rpx 0;
  background: var(--color-primary, #F97316);
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
}
.result-section {
  margin-top: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid var(--color-primary, #F97316);
}
.answer-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: var(--shadow-md, 0 2rpx 12rpx rgba(0,0,0,0.06));
}
.answer-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  white-space: pre-wrap;
}
.replace-section {
  margin-top: 30rpx;
}
.replace-scroll {
  width: 100%;
  white-space: nowrap;
}
.replace-items {
  display: flex;
  flex-direction: row;
  padding: 10rpx 0;
}
.replace-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  margin-right: 20rpx;
  box-shadow: var(--shadow-md, 0 2rpx 12rpx rgba(0,0,0,0.06));
  min-width: 160rpx;
}
.replace-item-hover {
  opacity: 0.8;
  background: #FFF0E0;
}
.food-name {
  font-size: 28rpx;
  color: var(--color-primary, #F97316);
  font-weight: 500;
}
.food-kcal {
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
}
.nutrition-section {
  margin-top: 30rpx;
}
.nutrition-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.nutrition-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
  min-width: 140rpx;
  box-shadow: var(--shadow-md, 0 2rpx 12rpx rgba(0,0,0,0.06));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nutrition-key {
  font-size: 24rpx;
  color: #999;
}
.nutrition-val {
  font-size: 30rpx;
  color: var(--color-primary, #F97316);
  font-weight: 600;
  margin-top: 6rpx;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.empty-icon {
  font-size: 80rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}
.toast {
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 16rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>