66 lines
2.3 KiB
Vue
66 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<nuxt-link :to="{
|
|
name: `id-slug___${$i18n.locale}`,
|
|
params: {
|
|
id: menuStore.getProductMenu()?.id,
|
|
slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
|
|
},
|
|
query: {
|
|
prod_id: product.id,
|
|
name: product.link_rewrite,
|
|
},
|
|
}">
|
|
<div
|
|
class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px] h-full">
|
|
<img :src="`/api/public/file/${product.cover_picture_uuid}.webp`" alt="Product Image"
|
|
class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]" @error="handleImageError" />
|
|
|
|
<div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
|
|
<div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
|
|
<h3
|
|
class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
|
|
{{ product.name }}
|
|
</h3>
|
|
<p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
|
|
{{ product.tax_name }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<p
|
|
class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
|
|
{{ product.formatted_price }}
|
|
</p>
|
|
<button
|
|
class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1"
|
|
@click.stop.prevent="productStore.incrementCartItem(product.id)">
|
|
<i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px]" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Product {
|
|
id: number
|
|
name: string
|
|
link_rewrite: string
|
|
tax_name: string
|
|
formatted_price: string
|
|
cover_picture_uuid: string
|
|
}
|
|
|
|
defineProps<{ product: Product }>()
|
|
|
|
const productStore = useProductStore()
|
|
const menuStore = useMenuStore()
|
|
|
|
function handleImageError(event: Event) {
|
|
const img = event.target as HTMLImageElement
|
|
img.src = '/photo.svg'
|
|
}
|
|
</script>
|