From bd4edfdade0abc994dd551d9edb608d5cfa164c0 Mon Sep 17 00:00:00 2001 From: alsaze Date: Wed, 12 Nov 2025 13:19:47 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D1=8B=20=D0=BF=D0=B2?= =?UTF-8?q?=D0=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DeliveryInfo.vue | 9 ++++-- components/DeliverySearch.vue | 21 ++++++++++---- components/MapControlFitting.vue | 41 ++++++++++++++++---------- components/MapControlTabs.vue | 19 ++++-------- components/PvzMap.vue | 47 +++++++++++++++++++----------- pages/checkout/delivery.vue | 50 ++++++++++++++++++++------------ shared/types.ts | 5 ++++ 7 files changed, 120 insertions(+), 72 deletions(-) diff --git a/components/DeliveryInfo.vue b/components/DeliveryInfo.vue index 454843d..b58ef32 100644 --- a/components/DeliveryInfo.vue +++ b/components/DeliveryInfo.vue @@ -11,8 +11,13 @@
  • - - {{ checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'с примеркой' : 'без примерки' }} + + + {{ checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'с примеркой' : 'без примерки' }} +
  • diff --git a/components/DeliverySearch.vue b/components/DeliverySearch.vue index b233525..899e16d 100644 --- a/components/DeliverySearch.vue +++ b/components/DeliverySearch.vue @@ -24,12 +24,12 @@ v-for="pickupPoint in filteredPoints" :key="pickupPoint.id" class="pickup-point-card" - @click="checkoutPickupPoint = pickupPoint" + @click="onSelectPoint(pickupPoint)" >

    Yandex

    {{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}

    -

    с day month бесплатно

    +

    Как определить стоимость ?

    @@ -38,13 +38,24 @@ +const fitting = defineModel('fitting', { type: Object as PropType, default: () => IPvzMapFittingTabs.ALL }) + +const tabs = computed(() => [ + { + value: IPvzMapFittingTabs.ALL, + label: fitting.value === IPvzMapFittingTabs.ALL ? 'все' : '', + icon: 'i-lucide-globe', + }, + { + value: IPvzMapFittingTabs.ALLOW, + label: fitting.value === IPvzMapFittingTabs.ALLOW ? 'с примеркой' : '', + icon: 'i-lucide-shirt', + }, + { + value: IPvzMapFittingTabs.FORBID, + label: fitting.value === IPvzMapFittingTabs.FORBID ? 'без примерки' : '', + icon: 'i-lucide-ban', + }, +]) + diff --git a/components/MapControlTabs.vue b/components/MapControlTabs.vue index 0ed3eb6..20bb54f 100644 --- a/components/MapControlTabs.vue +++ b/components/MapControlTabs.vue @@ -1,36 +1,27 @@ - - diff --git a/components/PvzMap.vue b/components/PvzMap.vue index f4377f3..13478c5 100644 --- a/components/PvzMap.vue +++ b/components/PvzMap.vue @@ -24,7 +24,7 @@ :key="pickupPoint.id" position="top-center left-center" :settings="{ coordinates: [pickupPoint.position.longitude, pickupPoint.position.latitude] }" - @click="$emit('update:modelValue', pickupPoint)" + @click="onSelectPoint(pickupPoint)" >
    @@ -38,15 +38,15 @@ - + - + - + - + @@ -56,10 +56,11 @@ import type { LngLatBounds, YMap } from '@yandex/ymaps3-types' import type { YMapLocationRequest } from '@yandex/ymaps3-types/imperative/YMap' import type { YMapClusterer } from '@yandex/ymaps3-types/packages/clusterer' +import type { PropType } from 'vue' import type { PickupPoint } from '~/server/shared/types/yandex_pvz' -import { IPvzMapTabs } from '#shared/types' -import { useGeolocation } from '@vueuse/core' -import { computed, shallowRef } from 'vue' +import { IPvzMapFittingTabs, IPvzMapTabs } from '#shared/types' +import { useGeolocation, useMediaQuery } from '@vueuse/core' +import { computed, defineEmits, shallowRef } from 'vue' import { YandexMap, YandexMapClusterer, @@ -72,26 +73,30 @@ import { import MapControlFitting from '~/components/MapControlFitting.vue' import MapControlTabs from '~/components/MapControlTabs.vue' -const props = defineProps<{ modelValue: PickupPoint, pickupPoints: PickupPoint[] }>() +defineProps<{ pickupPoints: PickupPoint[] }>() +const emit = defineEmits(['update:checkout-pickup-point']) -defineEmits<{ - (e: 'update:modelValue', value: PickupPoint | undefined): void -}>() - -const activeTab = defineModel('activeTab', { type: String, default: IPvzMapTabs.MAP }) -const isFitting = defineModel('isFitting', { type: Boolean, default: false }) +const checkoutPickupPoint = defineModel('checkoutPickupPoint', { type: Object as PropType, default: () => undefined }) +const activeTab = defineModel('activeTab', { type: Object as PropType, default: () => IPvzMapTabs.MAP }) +const fitting = defineModel('fitting', { type: Object as PropType, default: () => IPvzMapFittingTabs.ALL }) const { coords } = useGeolocation() +const isMobile = useMediaQuery('(max-width: 1280px)') const clusterer = shallowRef(null) const trueBounds = ref([[0, 0], [0, 0]]) const map = shallowRef(null) -const hasCoords = computed(() => coords.value?.latitude !== Infinity && coords.value?.longitude !== Infinity) +const hasCoords = computed(() => coords.value.latitude !== Infinity && coords.value.longitude !== Infinity) const location = ref({ zoom: 2, }) +const onSelectPoint = (pickupPoint: PickupPoint) => { + checkoutPickupPoint.value = pickupPoint + emit('update:checkout-pickup-point', pickupPoint) +} + watch(coords, (newCoords) => { if (newCoords && hasCoords.value) { location.value = { @@ -102,7 +107,10 @@ watch(coords, (newCoords) => { } }, { once: true }) -watch(() => props.modelValue, (newPickupPoint) => { +watch(() => checkoutPickupPoint.value, (newPickupPoint) => { + if (!newPickupPoint) + return + location.value = { center: [newPickupPoint.position.longitude, newPickupPoint.position.latitude], zoom: 18, @@ -152,6 +160,11 @@ watch(() => props.modelValue, (newPickupPoint) => { width: 20px; height: 20px; } + + &:hover &__icon { + color: var(--ui-primary); + transform: scale(1.1); + } } .cluster { diff --git a/pages/checkout/delivery.vue b/pages/checkout/delivery.vue index cc2379e..2610e4b 100644 --- a/pages/checkout/delivery.vue +++ b/pages/checkout/delivery.vue @@ -4,7 +4,13 @@
    - +
    @@ -28,18 +34,20 @@