|
|
@@ -0,0 +1,300 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view class="nav-bar">
|
|
|
+ <view class="nav-back" @tap="goBack">
|
|
|
+ <text class="back-text">‹ 返回</text>
|
|
|
+ </view>
|
|
|
+ <text class="nav-title">食材戒备匹配</text>
|
|
|
+ <view class="nav-placeholder"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <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-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.nav-back { padding: 10rpx 0; }
|
|
|
+.back-text { font-size: 28rpx; color: #4A9BD7; }
|
|
|
+.nav-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 600; }
|
|
|
+.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>
|
iwt