121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
<template>
|
||
<div class="product-description">
|
||
<h1>{{ productsData?.name }}</h1>
|
||
|
||
<h2>{{ currentVariant?.options[0]?.price }} <Icon name="ph:currency-rub" /></h2>
|
||
|
||
<ProductVariations v-if="colors?.length > 1" />
|
||
|
||
<div>
|
||
{{ `Цвет: ${t(`colors.${currentColor}`)}` }}
|
||
</div>
|
||
|
||
<div>
|
||
{{ `Материал: ${t(`materials.${currentMaterial}`)}` }}
|
||
</div>
|
||
|
||
<div>
|
||
Размер
|
||
</div>
|
||
|
||
<div class="product-description__sizes">
|
||
<div
|
||
v-for="option in currentVariant?.options"
|
||
:key="option"
|
||
class="product-description__size"
|
||
@click="() => currentSize = option"
|
||
>
|
||
<UButton
|
||
block
|
||
:label="getAttribute(option?.attributes, 'size')?.option"
|
||
:disabled="option?.stock_status === 'outofstock'"
|
||
:variant="currentSize === option ? undefined : 'outline'"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<UButton class="justify-content-center" label="Добавить в корзину" size="xl" />
|
||
|
||
<UAccordion :items="items" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import ProductVariations from '~/components/ProductVariations.vue'
|
||
import { useCurrentProduct, useProduct } from '~/composables'
|
||
|
||
const { t } = useI18n()
|
||
|
||
const { productsData, colors, getAttribute } = useProduct()
|
||
const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
|
||
|
||
const currentSize = ref(0)
|
||
|
||
const items = computed(() => [
|
||
{
|
||
label: 'Описание товара',
|
||
icon: 'i-heroicons-document-text',
|
||
content: productsData?.value?.description?.replace(/<\/?p>/g, ''),
|
||
},
|
||
{
|
||
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 lang="scss">
|
||
.product-description {
|
||
width: 100%;
|
||
max-width: 335px;
|
||
|
||
@media (min-width: 768px) {
|
||
position: sticky;
|
||
align-self: self-start;
|
||
top: 40px;
|
||
overflow-y: auto;
|
||
max-height: calc(100vh - 80px);
|
||
}
|
||
|
||
padding-top: 30px;
|
||
padding-inline: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
&__sizes {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 4px;
|
||
}
|
||
|
||
&__size {
|
||
width: 65px;
|
||
}
|
||
|
||
h2 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 4px;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|