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>

    <view class="member-bar" v-if="memberList.length > 1">
      <view class="member-tab" :class="{'active': currentMemberId === (item.id || item.userId)}"
        v-for="item in memberList" :key="item.id || item.userId"
        @tap="switchMember(item)">
        <text class="member-name">{{ item.nickname || item.roleLabel || '全部' }}</text>
      </view>
    </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="getItemKey(item)">
        <view class="food-header">
          <text class="food-name">{{ item.foodName }}</text>
          <view class="score-badge-group">
            <text class="score-value danger">{{ item.indexScore }}</text>
            <view class="caution-badge">戒备</view>
          </view>
        </view>
        <view class="change-row" v-if="item.changeDir">
          <text class="change-label">较上次</text>
          <text :class="item.changeClass">{{ item.changeText }}</text>
        </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-label">推荐指数</text>
          </view>
        </view>
        <mini-trend :data="item.trendPoints" v-if="item.trendPoints && item.trendPoints.length >= 3"></mini-trend>
        <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, getFoodCautionTrend, getCautionFamilyMembers } from '../../utils/api.js'
import MiniTrend from './mini-trend.vue'

export default {
  components: { MiniTrend },
  data() {
    return {
      foods: [],
      loading: true,
      refreshing: false,
      nutritionCache: {},
      currentMemberId: null,
      memberList: [],
      trendMap: {}
    }
  },
  onLoad: function(options) {
    this.currentMemberId = options.memberId ? parseInt(options.memberId) : null
    this.loadMemberList()
    this.loadFoods()
  },
  methods: {
    getItemKey: function(item) { return item.foodId || item.id || Math.random() },
    goBack: function() {
      uni.navigateBack()
    },
    switchMember: function(item) {
      this.currentMemberId = item.id || item.userId
      this.loadFoods()
    },
    async loadMemberList() {
      try {
        var res = await getCautionFamilyMembers()
        if (res && res.code === 200 && res.data && res.data.length > 0) {
          var allItem = { id: -1, userId: -1, nickname: '全部', roleLabel: '全部' }
          this.memberList = [allItem].concat(res.data)
          if (!this.currentMemberId) {
            this.currentMemberId = -1
          }
        }
      } catch(e) {}
    },
    async loadFoods() {
      this.loading = true
      try {
        var res = await getFoodCautionList(this.currentMemberId > 0 ? this.currentMemberId : null)
        if (res && res.code === 200 && res.data) {
          this.foods = (res.data || []).map(function(f) {
            return {
              foodId: f.foodId || f.id,
              foodName: f.foodName,
              indexScore: f.indexScore,
              category: f.category,
              nutrition: null,
              changeDir: null,
              changeText: '',
              changeClass: '',
              trendPoints: null
            }
          })
          this.loadNutrition()
          this.loadTrends()
        } 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)
      }
    },
    loadTrends: function() {
      if (!this.foods.length) return
      var self = this
      var foodIds = this.foods.map(function(f) { return f.foodId }).filter(function(id) { return id != null })
      if (!foodIds.length) return
      getFoodCautionTrend(this.currentMemberId > 0 ? this.currentMemberId : null, foodIds).then(function(res) {
        if (res && res.code === 200 && res.data) {
          var trendMap = {}
          var dataArray = res.data || []
          for (var i = 0; i < dataArray.length; i++) {
            var t = dataArray[i]
            trendMap[t.foodId] = t
          }
          self.trendMap = trendMap
          self.foods = self.foods.map(function(item) {
            var t = trendMap[item.foodId]
            if (!t) return item
            var trendPoints = []
            var pts = t.trend || []
            for (var j = 0; j < pts.length; j++) {
              trendPoints.push(pts[j].score)
            }
            var changeDir = t.changeDir || 'flat'
            var changeText = ''
            var changeClass = ''
            if (changeDir === 'up') { changeText = '↑ 上升'
              changeClass = 'change-up' }
            else if (changeDir === 'down') { changeText = '↓ 下降'
              changeClass = 'change-down' }
            return Object.assign({}, item, {
              trendPoints: trendPoints.length >= 3 ? trendPoints : null,
              changeDir: changeDir,
              changeText: changeText,
              changeClass: changeClass
            })
          })
          self.$forceUpdate()
        }
      }).catch(function() {})
    },
    getKnowledgeSection: function(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: function() {
      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; }

.member-bar {
  display: flex;
  overflow-x: auto;
  padding: 16rpx 30rpx 8rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  gap: 16rpx;
  -webkit-overflow-scrolling: touch;
}
.member-tab {
  flex-shrink: 0;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  background: #f5f5f5;
  color: #666;
  font-size: 26rpx;
  font-weight: 500;
}
.member-tab.active {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
}

.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;
}
.score-badge-group {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.score-value {
  font-size: 28rpx;
  font-weight: 700;
  color: #EF4444;
  min-width: 60rpx;
  text-align: right;
}
.caution-badge {
  padding: 4rpx 16rpx;
  background: #EF4444;
  color: #fff;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}
.change-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 12rpx;
  font-size: 24rpx;
}
.change-label { color: #999; }
.change-up { color: #10B981; font-weight: 600; }
.change-down { color: #EF4444; font-weight: 600; }
.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-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>