feat(recipe list): 修改菜谱列表中的 tag 颜色，按菜谱类型区分

修改菜谱列表中的 tag 颜色，按菜谱类型区分

Signed-off-by: Ching <loooching@gmail.com>

frontend/src/components/recipe-mobile/recipe-list.vue

@@ -17,9 +17,12 @@
       }"
     >
       <template #title>
-        <van-tag class="recipe-type-tag" plain type="primary">{{
-          constants.formatRecipeType(recipe.recipe_type)
-        }}</van-tag>
+        <van-tag
+          class="recipe-type-tag"
+          plain
+          v-bind:type="getTagType(recipe.recipe_type)"
+          >{{ constants.formatRecipeType(recipe.recipe_type) }}</van-tag
+        >
         <span class="recipe-name"> {{ recipe.name }}</span>
       </template>
       <template #value>
@@ -46,7 +49,7 @@ export default {
     [CollapseItem.name]: CollapseItem,
     [Icon.name]: Icon,
   },
-  data: function() {
+  data: function () {
     return {
       loading: false,
       finished: false,
@@ -57,6 +60,13 @@ export default {
       constants: constants,
       is_link: true,
       activeNames: ['1'],
+      getTagType: function (recipe_type) {
+        return {
+          [constants.RECIPE_TYPE_MEAT]: 'primary',
+          [constants.RECIPE_TYPE_VEGETABLE]: 'success',
+          [constants.RECIPE_TYPE_SOUP]: 'warning',
+        }[recipe_type];
+      },
     };
   },
   mounted() {},