cfc/cfc-frontend/pages/growth/caution-detail.vue

<template>
  <view class="page">

    <view class="warning-banner">
      <text class="banner-icon">⚠️</text>
      <text class="banner-text">以下食材推荐指数低于 0，建议谨慎食用或避免</text>
    </view>

    <scroll-view class="content" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
      <view class="food-card" v-for="(item, idx) in foods" :key="idx">
        <view class="food-header">
          <text class="food-name">{{ item.foodName }}</text>
          <view class="caution-badge">戒备</view>
        </view>
        <view class="food-meta">
          <text class="meta-item" v-if="item.category">{{ item.category }}</text>
        </view>
        <view class="food-score-row">
          <view class="score-bar-wrap">
            <view class="score-bar-bg">
              <view class="score-bar-fill danger" :style="'width:' + Math.min(Math.abs(item.indexScore) / 50 * 100, 100) + '%'"></view>
            </view>
            <text class="score-value danger">{{ item.indexScore }}</text>
          </view>
          <text class="score-label">推荐指数</text>
        </view>
        <view class="food-nutrition" v-if="item.nutrition">
          <text class="nut-item">蛋白 {{ item.nutrition.protein }}g</text>
          <text class="nut-item">脂肪 {{ item.nutrition.fat }}g</text>
          <text class="nut-item">碳水 {{ item.nutrition.carbs }}g</text>
        </view>
      </view>

      <view class="empty-state" v-if="!loading && foods.length === 0">
        <text class="empty-icon">✅</text>
        <text class="empty-text">暂无戒备食材</text>
        <text class="empty-hint">您的菌群报告未显示需要戒备的食材</text>
      </view>

      <view class="loading-state" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>
  </view>
</template>

<script>
import { getFoodCautionList } from '../../utils/api.js'

export default {
  data() {
    return {
      foods: [],
      loading: true,
      refreshing: false,
      nutritionCache: {}
    }
  },
  onLoad() {
    this.loadFoods()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    async loadFoods() {
      this.loading = true
      try {
        var res = await getFoodCautionList()
        if (res && res.code === 200 && res.data) {
          this.foods = res.data
          // 批量加载营养数据
          this.loadNutrition()
        } else {
          this.foods = []
        }
      } catch (e) {
        console.error('加载戒备食材失败', e)
        this.foods = []
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },
    async loadNutrition() {
      if (!this.foods.length) return
      try {
        var kbRes = await this.getKnowledgeSection('食物库')
        if (kbRes && kbRes.data && kbRes.data['数据']) {
          var kbFoods = kbRes.data['数据']
          var cache = {}
          for (var i = 0; i < kbFoods.length; i++) {
            var f = kbFoods[i]
            cache[f['名称']] = {
              protein: f['蛋白g'] || null,
              fat: f['脂肪g'] || null,
              carbs: f['碳水化合物g'] || null,
              fiber: f['总膳食纤维g'] || null,
              energy: f['能量KJ'] || null,
              category: f['分类'] || ''
            }
          }
          this.nutritionCache = cache
          this.foods = this.foods.map(function(item) {
            var n = cache[item.foodName] || {}
            return Object.assign({}, item, {
              nutrition: n,
              category: item.category || n.category || ''
            })
          })
          this.$forceUpdate()
        }
      } catch (e) {
        console.warn('加载营养数据失败', e)
      }
    },
    getKnowledgeSection(key) {
      return new Promise(function(resolve) {
        uni.request({
          url: getApp().globalData.baseApi + '/api/kb/section',
          method: 'POST',
          header: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + (uni.getStorageSync('token') || '')
          },
          data: { key: key },
          success: function(res) { resolve(res.data) },
          fail: function() { resolve({}) }
        })
      })
    },
    onRefresh() {
      this.refreshing = true
      this.loadFoods()
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f6fa;
}
.nav-placeholder { width: 80rpx; }

.warning-banner {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx 30rpx;
  background: #FFF3CD;
  border-bottom: 1rpx solid #FFECB5;
}
.banner-icon { font-size: 32rpx; }
.banner-text { font-size: 24rpx; color: #856404; flex: 1; }

.content {
  padding: 20rpx 30rpx;
  height: calc(100vh - 160rpx);
}

.food-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  border-left: 6rpx solid #EF4444;
  box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.08);
}
.food-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.food-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
}
.caution-badge {
  padding: 4rpx 16rpx;
  background: #EF4444;
  color: #fff;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}
.food-meta {
  margin-bottom: 16rpx;
}
.meta-item {
  font-size: 24rpx;
  color: #888;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}
.food-score-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 12rpx;
}
.score-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.score-bar-bg {
  flex: 1;
  height: 12rpx;
  background: #fee2e2;
  border-radius: 6rpx;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}
.score-bar-fill.danger {
  background: linear-gradient(90deg, #EF4444, #DC2626);
}
.score-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #EF4444;
  min-width: 60rpx;
  text-align: right;
}
.score-label {
  font-size: 24rpx;
  color: #999;
  white-space: nowrap;
}
.food-nutrition {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}
.nut-item {
  font-size: 22rpx;
  color: #999;
}

.empty-state {
  text-align: center;
  padding: 100rpx 40rpx;
}
.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 12rpx;
}
.empty-hint {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.loading-state {
  text-align: center;
  padding: 80rpx 0;
}
.loading-text {
  font-size: 26rpx;
  color: #999;
}

.bottom-spacer { height: 40rpx; }
</style>