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', body: 'flex-1 overflow-y-auto',
}" }"
> >
<template #body> <template #content>
<ProductDescription /> <!-- <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> </template>
</UDrawer> </UDrawer>
@ -48,38 +71,49 @@
<script setup lang="ts"> <script setup lang="ts">
import type { UseSwipeDirection } from '@vueuse/core' 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 { computed, shallowRef } from 'vue'
import ProductPrice from '~/components/ProductPrice.vue' import ProductPrice from '~/components/ProductPrice.vue'
import { useCurrentProduct, useProduct } from '~/composables' import { useCurrentProduct, useProduct } from '~/composables'
const { productsData } = useProduct() const { productsData } = useProduct()
const { currentVariant } = useCurrentProduct()
const isMobile = useMediaQuery('(max-width: 1280px)') const isMobile = useMediaQuery('(max-width: 1280px)')
const open = ref(false) const open = ref(false)
const target = shallowRef<HTMLElement | null>(null) const target = shallowRef<HTMLElement | null>(null)
const targetHeight = computed(() => target.value?.offsetHeight) 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( const { lengthY } = useSwipe(
target, target,
{ {
passive: false, passive: false,
onSwipe(e: TouchEvent) {
if (targetHeight.value) {
if (lengthY.value > 100) {
open.value = true
}
}
},
onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) { onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
console.log('lengthY.value', lengthY.value) if (lengthY.value > 50 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.25) {
if (lengthY.value > 100 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
open.value = true 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">