Просмотр исходного кода

feat(miniapp): update food-list.vue with full nutrition fields and recommendation index display

Xiaogang Liao 4 месяцев назад
Родитель
Сommit
804e5044c6
1 измененных файлов с 48 добавлено и 17 удалено
  1. 48 17
      cfc-frontend/pages/body/food-list.vue

+ 48 - 17
cfc-frontend/pages/body/food-list.vue

@@ -18,9 +18,12 @@
       <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="getScoreClass(food.score)">
+          <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)">
@@ -28,6 +31,9 @@
           <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">
@@ -46,19 +52,25 @@
         <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="getScoreClass(food.score)">
-              <text>{{ food.score || '--' }}分</text>
-            </view>
+          <view class="food-score" :class="'score-' + getScoreLevel(food.score)">
+            <text>{{ food.score || '--' }}分</text>
           </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>
+        <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>
@@ -137,14 +149,20 @@ export default {
     switchTab: function(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) {
-      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) {
       return this.memberNames[childId] || '成员' + childId
@@ -228,13 +246,15 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  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;
@@ -246,6 +266,17 @@ export default {
 .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;