cfc/cfc-frontend/pages/body/food-list.vue

<template>
  <view class="food-list-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">食材推荐</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- Tab切换 -->
    <view class="tab-bar">
      <text class="tab-item" :class="{'active': activeTab === 'total'}" @click="switchTab('total')">全部食材</text>
      <text class="tab-item" :class="{'active': activeTab === 'byMember'}" @click="switchTab('byMember')">按成员</text>
    </view>

    <!-- 全部食材模式 -->
    <view v-if="activeTab === 'total'" class="food-section">
      <view class="food-card" v-for="food in totalFoods" :key="food.id">
        <view class="food-header">
          <text class="food-name">{{ food.name }}</text>
          <view class="food-score" :class="'score-' + getScoreLevel(food.score)">
            <text>{{ food.score || '--' }}分</text>
          </view>
          <view class="rec-score" :class="'rec-' + getRecScoreLevel(food.recommendIndex)" v-if="food.recommendIndex != null">
            <text>推荐 {{ food.recommendIndex }}</text>
          </view>
        </view>
        <text class="food-category" v-if="food.category">{{ food.category }}</text>
        <view class="food-nutrition" v-if="hasNutrition(food)">
          <text class="nutri-item" v-if="food.energyKj">能量: {{ food.energyKj }}kJ</text>
          <text class="nutri-item" v-if="food.protein">蛋白质: {{ food.protein }}g</text>
          <text class="nutri-item" v-if="food.fat">脂肪: {{ food.fat }}g</text>
          <text class="nutri-item" v-if="food.carbs">碳水: {{ food.carbs }}g</text>
          <text class="nutri-item" v-if="food.fiber">膳食纤维: {{ food.fiber }}g</text>
          <text class="nutri-item" v-if="food.starch">淀粉: {{ food.starch }}g</text>
          <text class="nutri-item" v-if="food.cholesterol">胆固醇: {{ food.cholesterol }}mg</text>
        </view>
      </view>
      <view class="empty-state" v-if="totalFoods.length === 0 && !loading">
        <text>暂无食材推荐</text>
        <text class="empty-hint">上传菌群检测报告后可获得个性化食材推荐</text>
      </view>
    </view>

    <!-- 按成员模式 -->
    <view v-if="activeTab === 'byMember'" class="food-section">
      <view v-for="(foods, childId) in byMemberFoods" :key="childId" class="member-group">
        <view class="member-header">
          <text class="member-name">{{ getMemberName(childId) }}</text>
          <text class="member-count">{{ foods.length }}项</text>
        </view>
        <view class="food-card" v-for="food in foods" :key="food.id">
          <view class="food-header">
            <text class="food-name">{{ food.name }}</text>
          <view class="food-score" :class="'score-' + getScoreLevel(food.score)">
            <text>{{ food.score || '--' }}分</text>
          </view>
          <view class="rec-score" :class="'rec-' + getRecScoreLevel(food.recommendIndex)" v-if="food.recommendIndex != null">
            <text>推荐 {{ food.recommendIndex }}</text>
          </view>
        </view>
        <text class="food-category" v-if="food.category">{{ food.category }}</text>
        <view class="food-nutrition" v-if="hasNutrition(food)">
          <text class="nutri-item" v-if="food.energyKj">能量: {{ food.energyKj }}kJ</text>
          <text class="nutri-item" v-if="food.protein">蛋白质: {{ food.protein }}g</text>
          <text class="nutri-item" v-if="food.fat">脂肪: {{ food.fat }}g</text>
          <text class="nutri-item" v-if="food.carbs">碳水: {{ food.carbs }}g</text>
          <text class="nutri-item" v-if="food.fiber">膳食纤维: {{ food.fiber }}g</text>
          <text class="nutri-item" v-if="food.starch">淀粉: {{ food.starch }}g</text>
          <text class="nutri-item" v-if="food.cholesterol">胆固醇: {{ food.cholesterol }}mg</text>
        </view>
      </view>
    </view>
      <view class="empty-state" v-if="Object.keys(byMemberFoods).length === 0 && !loading">
        <text>暂无食材推荐</text>
        <text class="empty-hint">上传菌群检测报告后可获得个性化食材推荐</text>
      </view>
    </view>

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

<script>
import config from '@/config.js'

const healthRequest = function(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: config.API_BASE_URL + url,
      method: 'POST',
      data: data,
      header: {
        'Content-Type': 'application/json',
        'Authorization': token ? 'Bearer ' + token : ''
      },
      success: function(res) {
        if (res.data.code === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  })
}

export default {
  data: function() {
    return {
      familyId: null,
      activeTab: 'total',
      totalFoods: [],
      byMemberFoods: {},
      memberNames: {},
      loading: false
    }
  },
  onLoad: function(options) {
    var familyId = options.familyId
    this.familyId = familyId ? parseInt(familyId) : null
    this.loadData()
  },
  methods: {
    loadData: function() {
      var self = this
      if (!this.familyId) {
        uni.showToast({ title: '缺少familyId', icon: 'none' })
        return
      }
      uni.showLoading({ title: '加载中...' })
      healthRequest('/api/health/foods/by-family', { familyId: this.familyId }).then(function(res) {
        uni.hideLoading()
        if (res.data) {
          self.totalFoods = res.data.total || []
          self.byMemberFoods = res.data.byMember || {}
          self.memberNames = res.data.memberNames || {}
        }
      }).catch(function(e) {
        uni.hideLoading()
        console.log('获取食材推荐失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    switchTab: function(tab) {
      this.activeTab = tab
    },
    getScoreLevel: function(score) {
      if (score == null) return 'unknown'
      if (score >= 80) return 'high'
      if (score >= 60) return 'mid'
      return 'low'
    },
    getRecScoreLevel: function(score) {
      if (score == null) return 'unknown'
      if (score >= 80) return 'high'
      if (score >= 60) return 'mid'
      return 'low'
    },
    hasNutrition: function(food) {
      return food.energyKj || food.protein || food.fat || food.carbs || food.fiber || food.starch || food.cholesterol
    },
    getMemberName: function(childId) {
      return this.memberNames[childId] || '成员' + childId
    },
    goBack: function() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.food-list-container {
  min-height: 100vh;
  background: #f5f7fa;
}
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back { font-size: 32rpx; color: #5B9BD5; }
.nav-title { font-size: 32rpx; font-weight: bold; color: #333; }
.nav-placeholder { width: 80rpx; }
.tab-bar {
  display: flex;
  flex-direction: row;
  background: #fff;
  padding: 0 30rpx;
  border-bottom: 2rpx solid #eee;
}
.tab-item {
  padding: 20rpx 0;
  margin-right: 40rpx;
  font-size: 28rpx;
  color: #666;
  border-bottom: 4rpx solid transparent;
}
.tab-item.active {
  color: #F97316;
  border-bottom-color: #F97316;
  font-weight: bold;
}
.food-section {
  padding: 20rpx 30rpx;
}
.member-group {
  margin-bottom: 30rpx;
}
.member-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.member-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.member-count {
  font-size: 22rpx;
  color: #999;
}
.food-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.food-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8rpx;
}
.food-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-right: 12rpx;
}
.food-score {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  font-weight: 600;
}
.score-high { background: #DCFCE7; color: #16A34A; }
.score-mid { background: #FEF3C7; color: #D97706; }
.score-low { background: #FEE2E2; color: #DC2626; }
.score-unknown { background: #F3F4F6; color: #6B7280; }
.rec-score {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-weight: 600;
  margin-left: 8rpx;
}
.rec-high { background: #DBEAFE; color: #2563EB; }
.rec-mid { background: #E0E7FF; color: #4F46E5; }
.rec-low { background: #F3E8FF; color: #7C3AED; }
.rec-unknown { background: #F3F4F6; color: #6B7280; }
.food-category {
  font-size: 22rpx;
  color: #6B7280;
  background: #F3F4F6;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
  display: inline-block;
  margin-bottom: 8rpx;
}
.food-nutrition {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 8rpx;
}
.nutri-item {
  font-size: 22rpx;
  color: #374151;
}
.empty-state {
  text-align: center;
  padding: 100rpx 40rpx;
}
.empty-state text:first-child {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 12rpx;
}
.empty-hint {
  font-size: 24rpx;
  color: #bbb;
}
.bottom-spacer {
  height: 40rpx;
}
</style>