alsaze/paxton-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Wiki Activity

создаю телегу товаров
All checks were successful
Deploy / build (push) Successful in 47s
Details

Browse Source
This commit is contained in:
alsaze 2025-10-09 00:05:27 +03:00
parent 123639f573
commit 9d77c12b1d
1 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
pages/product/[id].vue
View File

@ -36,8 +36,31 @@
body: 'flex-1 overflow-y-auto',
}"
>
<template #body>
<ProductDescription />
<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>
@ -48,38 +71,49 @@
<script setup lang="ts">
import type { UseSwipeDirection } from '@vueuse/core'
import { useMediaQuery, useSwipe } 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,
onSwipe(e: TouchEvent) {
if (targetHeight.value) {
if (lengthY.value > 100) {
open.value = true
}
}
},
onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
console.log('lengthY.value', lengthY.value)
if (lengthY.value > 100 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
if (lengthY.value > 50 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.25) {
open.value = true
}
},
},
)
const { currentVariant } = useCurrentProduct()
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">