94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card__images">
|
|
<div
|
|
v-for="image in currentVariantImages"
|
|
:key="image?.id"
|
|
>
|
|
<img width="100%" :src="image?.src" :alt="image?.src">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card__description">
|
|
<h1>{{ productsData?.name }}</h1>
|
|
|
|
Цена
|
|
{{ currentVariant?.price }}
|
|
|
|
Коротокое описание
|
|
{{ productsData?.short_description }}
|
|
|
|
<div class="card__variation">
|
|
<div
|
|
v-for="variation in productsData?.variations"
|
|
:key="variation?.id"
|
|
@click="() => currentVariantId = variation?.id"
|
|
>
|
|
{{ variation?.id }}
|
|
<img width="200px" :src="variation?.image[0]?.src" :alt="variation?.image[0]?.src">
|
|
</div>
|
|
</div>
|
|
|
|
<pre>
|
|
{{ currentVariant }}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGetProductsDetail } from '~/api/queries'
|
|
|
|
const { data: productsData } = useGetProductsDetail(79)
|
|
|
|
function getAttribute(attributes, name: string) {
|
|
return attributes?.find(attribute => attribute?.name === name)?.option
|
|
}
|
|
|
|
const defaultColor = computed(() => getAttribute(productsData?.value?.default_attributes, 'color'))
|
|
const defaultMaterial = computed(() => getAttribute(productsData?.value?.default_attributes, 'material'))
|
|
|
|
const defaultVariant = computed(() => {
|
|
return productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'color') === defaultColor?.value)
|
|
&& productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'material') === defaultMaterial?.value)
|
|
})
|
|
|
|
const currentVariantId = ref(defaultVariant?.value?.id)
|
|
|
|
const currentVariant = computed(() => productsData?.value?.variations?.find(variation => variation?.id === currentVariantId?.value))
|
|
|
|
const currentColor = computed(() => getAttribute(currentVariant?.value?.attributes, 'color'))
|
|
const currentMaterial = computed(() => getAttribute(currentVariant?.value?.attributes, 'material'))
|
|
|
|
const currentVariantImages
|
|
= computed(() => productsData?.value?.images
|
|
?.filter(img => img?.src?.includes(`${currentColor.value}_${currentMaterial.value}_`)))
|
|
|
|
watch(() => defaultVariant.value, newValue => currentVariantId.value = newValue?.id)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.card {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&__images {
|
|
margin-left: 10%;
|
|
margin-right: 10%;
|
|
width: 40%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__description {
|
|
width: 40%;
|
|
}
|
|
|
|
&__variation {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|