133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
<template>
|
||
<div class="product-description">
|
||
<h1>{{ productsData?.name }}</h1>
|
||
|
||
<h2>{{ currentVariant?.price }} <Icon name="ph:currency-rub" /></h2>
|
||
|
||
<div class="product-description__variations">
|
||
<div
|
||
v-for="variation in productsVariationsData"
|
||
:key="variation?.id"
|
||
@click="() => currentVariantId = variation?.id"
|
||
>
|
||
<div class="product-description__variation">
|
||
<img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
{{ `Цвет: ${t(`colors.${currentColor}`)}` }}
|
||
</div>
|
||
|
||
<div>
|
||
{{ `Материал: ${t(`materials.${currentMaterial}`)}` }}
|
||
</div>
|
||
|
||
<div>
|
||
Размер
|
||
</div>
|
||
|
||
<div class="product-description__sizes">
|
||
<div
|
||
v-for="size in sizes"
|
||
:key="size"
|
||
class="product-description__size"
|
||
@click="() => currentSize = size"
|
||
>
|
||
<UButton block :label="size" :variant="currentSize === size ? undefined : 'outline'" />
|
||
</div>
|
||
</div>
|
||
|
||
<UButton class="justify-content-center" label="Добавить в корзину" size="xl" />
|
||
|
||
<UAccordion :items="items" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { AccordionItem } from '@nuxt/ui'
|
||
import { useCurrentProduct, useProduct } from '~/composables'
|
||
|
||
const { t } = useI18n()
|
||
|
||
const { productsData, productsVariationsData, sizes } = useProduct()
|
||
const { currentVariant, currentVariantId, currentColor, currentMaterial } = useCurrentProduct()
|
||
|
||
const currentSize = ref(0)
|
||
|
||
const items = ref<AccordionItem[]>([
|
||
{
|
||
label: 'Описание товара',
|
||
icon: 'i-heroicons-document-text',
|
||
content: productsData?.value?.description,
|
||
},
|
||
{
|
||
label: 'Состав и параметры',
|
||
icon: 'i-heroicons-beaker',
|
||
content: 'хлопок 100%',
|
||
},
|
||
{
|
||
label: 'Рекомендации по уходу',
|
||
icon: 'i-heroicons-sparkles',
|
||
content: 'Бережная стирка при максимальной температуре 30ºС\nНе отбеливать\nМашинная сушка запрещена\nГлажение при 110ºС\nПрофессиональная сухая чистка',
|
||
},
|
||
{
|
||
label: 'Доставка и оплата',
|
||
icon: 'i-heroicons-truck',
|
||
content: 'Доставка в пункт выдачи',
|
||
},
|
||
{
|
||
label: 'Возврат и обмен',
|
||
icon: 'i-heroicons-arrow-path',
|
||
content: 'Возврат в течение 14 дней\nОбмен размера в течение 7 дней',
|
||
},
|
||
])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.product-description {
|
||
padding-top: 50px;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
width: 400px;
|
||
padding-inline: 30px;
|
||
|
||
&__variations {
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
background: white;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 4px;
|
||
}
|
||
|
||
&__sizes {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 4px;
|
||
}
|
||
|
||
&__size {
|
||
width: 65px;
|
||
}
|
||
|
||
&__variation {
|
||
img {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 4px;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|