cfc/cfc-frontend/pages/diet/food-query.vue

<template>
  <view class="food-query-page">

    <view class="search-bar">
      <input class="search-input" placeholder="搜索食材..." v-model="searchQuery" @confirm="searchFood" />
      <view class="search-btn" @tap="searchFood">搜索</view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 分类标签 -->
      <view class="category-tabs">
        <view class="tab-item" :class="{'tab-active': activeCategory === 'all'}" @tap="switchCategory('all')">
          <text>全部</text>
        </view>
        <view class="tab-item" :class="{'tab-active': activeCategory === 'vegetable'}" @tap="switchCategory('vegetable')">
          <text>蔬菜</text>
        </view>
        <view class="tab-item" :class="{'tab-active': activeCategory === 'fruit'}" @tap="switchCategory('fruit')">
          <text>水果</text>
        </view>
        <view class="tab-item" :class="{'tab-active': activeCategory === 'meat'}" @tap="switchCategory('meat')">
          <text>肉禽</text>
        </view>
        <view class="tab-item" :class="{'tab-active': activeCategory === 'seafood'}" @tap="switchCategory('seafood')">
          <text>水产</text>
        </view>
        <view class="tab-item" :class="{'tab-active': activeCategory === 'grain'}" @tap="switchCategory('grain')">
          <text>谷物</text>
        </view>
      </view>

      <!-- 筛选 -->
      <view class="filter-bar">
        <view class="filter-item" :class="{'filter-active': filterType === 'suitable'}" @tap="setFilter('suitable')">
          <text>✅ 适合</text>
        </view>
        <view class="filter-item" :class="{'filter-active': filterType === 'unsuitable'}" @tap="setFilter('unsuitable')">
          <text>❌ 不适合</text>
        </view>
      </view>

      <!-- 食材列表 -->
      <view class="food-list">
        <view class="food-item" v-for="food in filteredFoods" :key="food.id">
          <view class="food-info">
            <text class="food-name">{{ food.name }}</text>
            <text class="food-category">{{ food.category }}</text>
            <text class="food-score" v-if="food.score">推荐分: {{ food.score }}</text>
          </view>
          <view class="food-status" :class="'status-' + food.status">
            <text>{{ food.statusText }}</text>
          </view>
        </view>
      </view>

      <view class="empty-state" v-if="filteredFoods.length === 0">
        <text>暂无食材数据</text>
      </view>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      searchQuery: '',
      activeCategory: 'all',
      filterType: 'suitable',
      foods: [],
      allFoods: []
    }
  },
  computed: {
    filteredFoods: function() {
      var self = this
      var result = self.allFoods
      
      // 分类筛选
      if (self.activeCategory !== 'all') {
        result = result.filter(function(f) {
          return f.category === self.activeCategory
        })
      }
      
      // 搜索筛选
      if (self.searchQuery) {
        result = result.filter(function(f) {
          return f.name.indexOf(self.searchQuery) >= 0
        })
      }
      
      // 适合/不适合筛选
      if (self.filterType === 'suitable') {
        result = result.filter(function(f) {
          return f.score >= 50
        })
      } else {
        result = result.filter(function(f) {
          return f.score < 50
        })
      }
      
      return result
    }
  },
  onLoad: function() {
    this.loadFoods()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    loadFoods: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token) return
      
      uni.request({
        url: this.getApiUrl('/api/health/foods'),
        method: 'POST',
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.allFoods = res.data.data
          }
        }
      })
    },
    searchFood: function() {
      // 搜索由 computed 自动处理
    },
    switchCategory: function(category) {
      this.activeCategory = category
    },
    setFilter: function(type) {
      this.filterType = type
    },
    getApiUrl: function(path) {
      return config.api(path)
    }
  }
}
</script>

<style scoped>
.food-query-page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.nav-placeholder {
  width: 80rpx;
}
.search-bar {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
}
.search-input {
  flex: 1;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  background-color: #FAFAFA;
}
.search-btn {
  margin-left: 20rpx;
  padding: 16rpx 32rpx;
  background-color: #FF8C42;
  color: #FFFFFF;
  border-radius: 30rpx;
  font-size: 26rpx;
}
.content {
  flex: 1;
  padding: 20rpx 30rpx;
}
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.tab-item {
  padding: 12rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FFFFFF;
}
.tab-active {
  border-color: #FF8C42;
  color: #FF8C42;
  background-color: #FFF5EB;
}
.filter-bar {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}
.filter-item {
  padding: 12rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FFFFFF;
}
.filter-active {
  border-color: #4CAF50;
  color: #4CAF50;
  background-color: #E8F5E9;
}
.food-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.food-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  padding: 24rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.food-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.food-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}
.food-category {
  font-size: 22rpx;
  color: #999;
}
.food-score {
  font-size: 22rpx;
  color: #FF8C42;
}
.food-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}
.status-suitable {
  background-color: #E8F5E9;
  color: #4CAF50;
}
.status-unsuitable {
  background-color: #FFEBEE;
  color: #F44336;
}
.empty-state {
  text-align: center;
  padding: 60rpx 0;
  font-size: 26rpx;
  color: #999;
}
</style>