155 lines
4.2 KiB
Vue
155 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
||
import type { StuffItem } from '~/types'
|
||
import { meat, staple, vegetable } from '~/data/food'
|
||
|
||
import { useEmojiAnimation } from '~/composables/animation'
|
||
import { getRecipeImage } from '~/utils/api'
|
||
|
||
const rStore = useRecipeStore()
|
||
const curStuff = computed(() => rStore.selectedStuff)
|
||
|
||
const recipeBtnRef = ref<HTMLButtonElement>()
|
||
const { playAnimation } = useEmojiAnimation(recipeBtnRef)
|
||
|
||
const gtm = useGtm()
|
||
const recipePanelRef = ref()
|
||
const { isVisible, show } = useInvisibleElement(recipePanelRef)
|
||
|
||
function toggleStuff(item: StuffItem, category = '', _e?: Event) {
|
||
rStore.toggleStuff(item.name)
|
||
|
||
if (curStuff.value.includes(item.name))
|
||
playAnimation(item.emoji)
|
||
|
||
gtm?.trackEvent({
|
||
event: 'click',
|
||
category: `${category}_${item.name}`,
|
||
action: 'click_stuff',
|
||
label: '食材',
|
||
})
|
||
gtm?.trackEvent({
|
||
event: 'click_stuff',
|
||
action: item.name,
|
||
})
|
||
}
|
||
|
||
// cook recipe
|
||
const cooking = ref(false)
|
||
const recipeImg = ref('')
|
||
async function cook() {
|
||
cooking.value = true
|
||
const foods = rStore.selectedStuff
|
||
const img = await getRecipeImage(foods)
|
||
recipeImg.value = img
|
||
cooking.value = false
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<h2 m="t-4" text="xl" font="bold" p="1">
|
||
🥘 先选一下食材
|
||
</h2>
|
||
<div>
|
||
<h2 opacity="90" text="base" font="bold" p="1">
|
||
🥬 菜菜们
|
||
</h2>
|
||
<div>
|
||
<VegetableTag
|
||
v-for="item, i in vegetable" :key="i"
|
||
:active="curStuff.includes(item.name)"
|
||
@click="toggleStuff(item, 'vegetable')"
|
||
>
|
||
<span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
|
||
<span v-else-if="item.image" class="inline-flex">
|
||
<img class="inline-flex" w="2" h="2" width="10" height="10" :src="item.image" :alt="item.name">
|
||
</span>
|
||
<span class="inline-flex" m="l-1">{{ item.name }}</span>
|
||
</VegetableTag>
|
||
</div>
|
||
</div>
|
||
<div m="y-4">
|
||
<h2 opacity="90" text="base" font="bold" p="1">
|
||
🥩 肉肉们
|
||
</h2>
|
||
<div>
|
||
<MeatTag
|
||
v-for="item, i in meat" :key="i"
|
||
:active="curStuff.includes(item.name)"
|
||
@click="toggleStuff(item, 'meat')"
|
||
>
|
||
<span>{{ item.emoji }}</span>
|
||
<span m="l-1">{{ item.name }}</span>
|
||
</MeatTag>
|
||
</div>
|
||
</div>
|
||
<div m="y-4">
|
||
<h2 opacity="90" text="base" font="bold" p="1">
|
||
🍚 主食也要一起下锅吗？（不选也行）
|
||
</h2>
|
||
<div>
|
||
<StapleTag
|
||
v-for="item, i in staple" :key="i"
|
||
:active="curStuff.includes(item.name)"
|
||
@click="toggleStuff(item, 'staple')"
|
||
>
|
||
<span>{{ item.emoji }}</span>
|
||
<span m="l-1">{{ item.name }}</span>
|
||
</StapleTag>
|
||
</div>
|
||
</div>
|
||
<!-- <div m="t-4">
|
||
<h2 text="xl" font="bold" p="1">
|
||
🍳 再选一下厨具
|
||
</h2>
|
||
<div>
|
||
<ToolTag
|
||
v-for="item, i in tools" :key="i"
|
||
:active="curTool === item.name"
|
||
@click="rStore.clickTool(item)"
|
||
>
|
||
<span v-if="item.emoji" class="inline-flex">
|
||
{{ item.emoji }}
|
||
</span>
|
||
<span v-else-if="item.icon" class="inline-flex">
|
||
<div :class="item.icon" />
|
||
</span>
|
||
<span class="inline-flex" m="l-1">{{ item.label || item.name }}</span>
|
||
</ToolTag>
|
||
</div>
|
||
</div> -->
|
||
|
||
<Transition>
|
||
<BasketButton ref="recipeBtnRef" :is-visible="isVisible" @click="show" />
|
||
</Transition>
|
||
|
||
<button
|
||
m-auto
|
||
flex items-center justify-center
|
||
class="rounded bg-yellow px-4 py-2 text-orange-900 font-black shadow hover:shadow-md active:shadow-inset"
|
||
@click="cook()"
|
||
>
|
||
<div v-if="cooking" class="mr-2 inline-flex" i-svg-spinners:clock />
|
||
<span>做美食 🥘</span>
|
||
</button>
|
||
|
||
<div
|
||
class="recipe-panel relative shadow transition"
|
||
m="x-2 y-4" p="2"
|
||
bg="gray-400/8"
|
||
>
|
||
<div text="xl" font="bold" p="1">
|
||
🍲 来看看制作出的美食吧！
|
||
</div>
|
||
|
||
<div class="cook-recipes text-center" p="2">
|
||
<img
|
||
class="m-auto w-25 rounded shadow transition hover:shadow-md"
|
||
:src="recipeImg"
|
||
alt="recipes"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|