60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<template>
|
|
<div class="info-item card-item">
|
|
<div class="title-info">
|
|
<svg-icon name="home-material"/>
|
|
<span class="sub-title">食材信息</span>
|
|
</div>
|
|
|
|
<div class="info material-info">
|
|
<div class="material-item">
|
|
<span class="material-title">主料</span>
|
|
<div v-if="getFoodMaterial('主料').length > 0" class="material-content">
|
|
<el-tag v-for="(item, index) in getFoodMaterial('主料')"
|
|
:key="index">{{ `${item.name} ${item.amount}` }}
|
|
</el-tag>
|
|
</div>
|
|
<div v-else class="material-content">
|
|
<el-tag>无</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="material-item">
|
|
<span class="material-title">配料</span>
|
|
<div v-if="getFoodMaterial('辅料').length > 0" class="material-content">
|
|
<el-tag v-for="(item, index) in getFoodMaterial('辅料')"
|
|
:key="index">{{ `${item.name} ${item.amount}` }}
|
|
</el-tag>
|
|
</div>
|
|
<div v-else class="material-content">
|
|
<el-tag>无</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="material-item">
|
|
<span class="material-title">辅料</span>
|
|
<div v-if="getFoodMaterial('调料').length > 0" class="material-content">
|
|
<el-tag v-for="(item, index) in getFoodMaterial('调料')"
|
|
:key="index">{{ `${item.name} ${item.amount}` }}
|
|
</el-tag>
|
|
</div>
|
|
<div v-else class="material-content">
|
|
<el-tag>无</el-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFoodStore } from '@/store/food.ts'
|
|
import { SvgIcon } from 'vue3-common'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
const getFoodMaterial = (type: string) => {
|
|
return foodStore.currentFoodRecipe.materialList.filter((item) => {
|
|
return item.type === type
|
|
})
|
|
}
|
|
</script>
|