152 lines
4.4 KiB
Vue
152 lines
4.4 KiB
Vue
<template>
|
|
<div ref="target" class="product">
|
|
<ProductImages v-if="isMobile" />
|
|
|
|
<div v-if="isMobile" class="product-info">
|
|
<div class="product-info__title">
|
|
<ProductPrice :price="currentVariant?.options[0]?.price || 0" />
|
|
|
|
<div>
|
|
фотомодель
|
|
</div>
|
|
</div>
|
|
|
|
<h1>
|
|
{{ productsData?.name }}
|
|
</h1>
|
|
|
|
<div class="mt20">
|
|
<UButton
|
|
icon="lucide:shopping-cart"
|
|
class="justify-content-center w-100 d-flex"
|
|
label="Добавить"
|
|
size="xl"
|
|
@click="open = !open"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<UDrawer
|
|
v-if="isMobile"
|
|
v-model:open="open"
|
|
class="product__drawer"
|
|
:ui="{
|
|
content: 'fixed bg-default ring ring-default flex focus:outline-none overflow-hidden',
|
|
container: 'w-full flex flex-col gap-4 p-4 overflow-hidden',
|
|
body: 'flex-1 overflow-y-auto',
|
|
}"
|
|
>
|
|
<template #content>
|
|
<!-- <div ref="targetDrawer" class="flex flex-col gap-10" style="overflow-y: auto;"> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- <h1>BABAB</h1> -->
|
|
<!-- </div> -->
|
|
|
|
<ProductDescription ref="targetDrawer" style="overflow-y: auto;" />
|
|
</template>
|
|
</UDrawer>
|
|
|
|
<ProductImages v-if="!isMobile" />
|
|
<ProductDescription v-if="!isMobile" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UseSwipeDirection } from '@vueuse/core'
|
|
import { useMediaQuery, useScroll, useSwipe } from '@vueuse/core'
|
|
import { computed, shallowRef } from 'vue'
|
|
import ProductPrice from '~/components/ProductPrice.vue'
|
|
import { useCurrentProduct, useProduct } from '~/composables'
|
|
|
|
const { productsData } = useProduct()
|
|
const { currentVariant } = useCurrentProduct()
|
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
|
const open = ref(false)
|
|
const target = shallowRef<HTMLElement | null>(null)
|
|
const targetHeight = computed(() => target.value?.offsetHeight)
|
|
const targetDrawer = shallowRef<HTMLElement | null>(null)
|
|
const targetDrawerHeight = computed(() => targetDrawer.value?.offsetHeight)
|
|
const { y } = useScroll(targetDrawer)
|
|
|
|
const { lengthY } = useSwipe(
|
|
target,
|
|
{
|
|
passive: false,
|
|
onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
|
|
if (lengthY.value > 50 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.25) {
|
|
open.value = true
|
|
}
|
|
},
|
|
},
|
|
)
|
|
|
|
const { lengthY: drawerLengthY } = useSwipe(
|
|
targetDrawer,
|
|
{
|
|
passive: false,
|
|
onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
|
|
console.log('drawerLengthY.value', drawerLengthY.value)
|
|
console.log('y', y.value)
|
|
console.log('targetDrawerHeight.value', targetDrawerHeight.value)
|
|
console.log('Math.abs(drawerLengthY.value)', Math.abs(drawerLengthY.value))
|
|
console.log('Math.abs(drawerLengthY.value) / targetDrawerHeight.value', Math.abs(drawerLengthY.value) / targetDrawerHeight.value)
|
|
if (drawerLengthY.value < 0 && y.value === 0 && targetDrawerHeight.value && (Math.abs(drawerLengthY.value) / targetDrawerHeight.value) >= 0.2) {
|
|
open.value = false
|
|
}
|
|
},
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '~/assets/scss/utils' as *;
|
|
|
|
.product {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
@media (max-width: 768px) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.product-info {
|
|
padding-inline: 15px;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
z-index: 10;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
|
|
&__title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
</style>
|