|
@@ -18,9 +18,12 @@
|
|
|
<view class="food-card" v-for="food in totalFoods" :key="food.id">
|
|
<view class="food-card" v-for="food in totalFoods" :key="food.id">
|
|
|
<view class="food-header">
|
|
<view class="food-header">
|
|
|
<text class="food-name">{{ food.name }}</text>
|
|
<text class="food-name">{{ food.name }}</text>
|
|
|
- <view class="food-score" :class="getScoreClass(food.score)">
|
|
|
|
|
|
|
+ <view class="food-score" :class="'score-' + getScoreLevel(food.score)">
|
|
|
<text>{{ food.score || '--' }}分</text>
|
|
<text>{{ food.score || '--' }}分</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view class="rec-score" :class="'rec-' + getRecScoreLevel(food.recommendIndex)" v-if="food.recommendIndex != null">
|
|
|
|
|
+ <text>推荐 {{ food.recommendIndex }}</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="food-category" v-if="food.category">{{ food.category }}</text>
|
|
<text class="food-category" v-if="food.category">{{ food.category }}</text>
|
|
|
<view class="food-nutrition" v-if="hasNutrition(food)">
|
|
<view class="food-nutrition" v-if="hasNutrition(food)">
|
|
@@ -28,6 +31,9 @@
|
|
|
<text class="nutri-item" v-if="food.protein">蛋白质: {{ food.protein }}g</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.fat">脂肪: {{ food.fat }}g</text>
|
|
|
<text class="nutri-item" v-if="food.carbs">碳水: {{ food.carbs }}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>
|
|
|
<view class="empty-state" v-if="totalFoods.length === 0 && !loading">
|
|
<view class="empty-state" v-if="totalFoods.length === 0 && !loading">
|
|
@@ -46,19 +52,25 @@
|
|
|
<view class="food-card" v-for="food in foods" :key="food.id">
|
|
<view class="food-card" v-for="food in foods" :key="food.id">
|
|
|
<view class="food-header">
|
|
<view class="food-header">
|
|
|
<text class="food-name">{{ food.name }}</text>
|
|
<text class="food-name">{{ food.name }}</text>
|
|
|
- <view class="food-score" :class="getScoreClass(food.score)">
|
|
|
|
|
- <text>{{ food.score || '--' }}分</text>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="food-score" :class="'score-' + getScoreLevel(food.score)">
|
|
|
|
|
+ <text>{{ food.score || '--' }}分</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>
|
|
|
|
|
|
|
+ <view class="rec-score" :class="'rec-' + getRecScoreLevel(food.recommendIndex)" v-if="food.recommendIndex != null">
|
|
|
|
|
+ <text>推荐 {{ food.recommendIndex }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</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>
|
|
|
<view class="empty-state" v-if="Object.keys(byMemberFoods).length === 0 && !loading">
|
|
<view class="empty-state" v-if="Object.keys(byMemberFoods).length === 0 && !loading">
|
|
|
<text>暂无食材推荐</text>
|
|
<text>暂无食材推荐</text>
|
|
|
<text class="empty-hint">上传菌群检测报告后可获得个性化食材推荐</text>
|
|
<text class="empty-hint">上传菌群检测报告后可获得个性化食材推荐</text>
|
|
@@ -137,14 +149,20 @@ export default {
|
|
|
switchTab: function(tab) {
|
|
switchTab: function(tab) {
|
|
|
this.activeTab = tab
|
|
this.activeTab = tab
|
|
|
},
|
|
},
|
|
|
- getScoreClass: function(score) {
|
|
|
|
|
- if (score == null) return 'score-unknown'
|
|
|
|
|
- if (score >= 80) return 'score-high'
|
|
|
|
|
- if (score >= 60) return 'score-mid'
|
|
|
|
|
- return 'score-low'
|
|
|
|
|
|
|
+ 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) {
|
|
hasNutrition: function(food) {
|
|
|
- return food.energyKj || food.protein || food.fat || food.carbs
|
|
|
|
|
|
|
+ return food.energyKj || food.protein || food.fat || food.carbs || food.fiber || food.starch || food.cholesterol
|
|
|
},
|
|
},
|
|
|
getMemberName: function(childId) {
|
|
getMemberName: function(childId) {
|
|
|
return this.memberNames[childId] || '成员' + childId
|
|
return this.memberNames[childId] || '成员' + childId
|
|
@@ -228,13 +246,15 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
margin-bottom: 8rpx;
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
}
|
|
|
.food-name {
|
|
.food-name {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
|
|
+ margin-right: 12rpx;
|
|
|
}
|
|
}
|
|
|
.food-score {
|
|
.food-score {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
@@ -246,6 +266,17 @@ export default {
|
|
|
.score-mid { background: #FEF3C7; color: #D97706; }
|
|
.score-mid { background: #FEF3C7; color: #D97706; }
|
|
|
.score-low { background: #FEE2E2; color: #DC2626; }
|
|
.score-low { background: #FEE2E2; color: #DC2626; }
|
|
|
.score-unknown { background: #F3F4F6; color: #6B7280; }
|
|
.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 {
|
|
.food-category {
|
|
|
font-size: 22rpx;
|
|
font-size: 22rpx;
|
|
|
color: #6B7280;
|
|
color: #6B7280;
|