index.vue

components/ProductDescription.vue

@@ -0,0 +1,132 @@
+<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>

components/ProductImages.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="product-images">
+    <div
+      v-for="image in currentVariantImages?.slice(0, 5)"
+      :key="image?.id"
+    >
+      <img width="100%" :src="image?.src" :alt="image?.src">
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCurrentProduct } from '~/composables'
+
+const { currentVariantImages } = useCurrentProduct()
+</script>
+
+<style lang="scss">
+.product-images {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>