components/DeliveryInfo.vue

@@ -11,13 +11,8 @@
     </li>
 
     <li class="delivery-info__item">
-      <Icon
+      <Icon class="delivery-info__icon" name="lucide:shirt" size="xl" />
-        class="delivery-info__icon"
+      <span class="delivery-info__text">{{ checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'с примеркой' : 'без примерки' }}</span>
-        :name="checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'lucide:shirt' : 'i-lucide-ban'" size="xl"
-      />
-      <span class="delivery-info__text">
-        {{ checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'с примеркой' : 'без примерки' }}
-      </span>
     </li>
 
     <li class="delivery-info__item">

components/DeliverySearch.vue

@@ -24,12 +24,12 @@
         v-for="pickupPoint in filteredPoints"
         :key="pickupPoint.id"
         class="pickup-point-card"
-        @click="onSelectPoint(pickupPoint)"
+        @click="checkoutPickupPoint = pickupPoint"
       >
         <div class="pickup-point-card__content">
           <h3>Yandex</h3>
           <p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
-          <h3>Как определить стоимость ?</h3>
+          <h3>с day month бесплатно</h3>
         </div>
         <Icon class="pickup-point-card__action" name="lucide:chevron-right" />
       </div>
@@ -38,29 +38,16 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
-import { defineEmits } from 'vue'
+import { useCheckout } from '~/composables/useCheckout'
 
 defineProps<{ filteredPoints: PickupPoint[] }>()
-const emit = defineEmits(['update:checkout-pickup-point'])
 
-const checkoutPickupPoint = defineModel('checkoutPickupPoint', {
+const { checkoutPickupPoint } = useCheckout()
-  type: Object as PropType<PickupPoint>,
+const searchTerm = ref('')
-  default: () => undefined,
-})
-
-const searchTerm = defineModel('searchTerm', { type: String, default: '' })
-
-const onSelectPoint = (pickupPoint: PickupPoint) => {
-  checkoutPickupPoint.value = pickupPoint
-  emit('update:checkout-pickup-point', pickupPoint)
-}
 </script>
 
 <style lang="scss">
-@use '~/assets/scss/utils' as *;
-
 .pickup-point-card {
   position: relative;
   width: 100%;
@@ -75,10 +62,6 @@ const onSelectPoint = (pickupPoint: PickupPoint) => {
     height: calc(100dvh - 54px - 40px - 24px);
     overflow-y: auto;
     flex-shrink: 0;
-
-    @include mobile {
-      height: calc(100dvh - 72px - 40px - 32px);
-    }
   }
 
   &__content {

components/MapControlFitting.vue

@@ -1,30 +0,0 @@
-<template>
-  <UTabs v-model="fitting" :content="false" :items="tabs" size="sm" />
-</template>
-
-<script setup lang="ts">
-import type { TabsItem } from '@nuxt/ui'
-import type { PropType } from 'vue'
-import { IPvzMapFittingTabs } from '#shared/types'
-import { computed } from 'vue'
-
-const fitting = defineModel('fitting', { type: Object as PropType<IPvzMapFittingTabs>, default: () => IPvzMapFittingTabs.ALL })
-
-const tabs = computed<TabsItem[]>(() => [
-  {
-    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',
-  },
-])
-</script>

components/MapControlTabs.vue

@@ -1,27 +0,0 @@
-<template>
-  <UTabs v-model="activeTab" :content="false" :items="tabs" size="sm" />
-</template>
-
-<script setup lang="ts">
-import type { TabsItem } from '@nuxt/ui'
-import type { PropType } from 'vue'
-import { IPvzMapTabs } from '#shared/types'
-import { computed } from 'vue'
-
-const activeTab = defineModel('activeTab', { type: Object as PropType<IPvzMapTabs>, default: () => IPvzMapTabs.MAP })
-
-const tabs = computed<TabsItem[]>(() =>
-  [
-    {
-      value: IPvzMapTabs.MAP,
-      label: activeTab.value === IPvzMapTabs.MAP ? 'Карта' : '',
-      icon: 'lucide:map-pin',
-    },
-    {
-      value: IPvzMapTabs.LIST,
-      label: activeTab.value === IPvzMapTabs.LIST ? 'Список' : '',
-      icon: 'i-lucide-list',
-    },
-  ],
-)
-</script>

components/PvzMap.vue

@@ -24,7 +24,7 @@
         :key="pickupPoint.id"
         position="top-center left-center"
         :settings="{ coordinates: [pickupPoint.position.longitude, pickupPoint.position.latitude] }"
-        @click="onSelectPoint(pickupPoint)"
+        @click="$emit('update:modelValue', pickupPoint)"
       >
         <div class="marker">
           <Icon name="i-lucide-map-pin" class="marker__icon" />
@@ -38,29 +38,40 @@
       </template>
     </YandexMapClusterer>
 
-    <YandexMapControls :settings="{ position: isMobile ? 'bottom left' : 'top left', orientation: 'vertical' }">
+    <YandexMapControls :settings="{ position: 'bottom left', orientation: 'vertical' }">
       <YandexMapControl>
-        <MapControlFitting v-model:fitting="fitting" />
+        <div
+          class="control"
+        >
+          <UCheckbox
+            v-model="isFitting"
+            size="xl"
+            label="с примеркой"
+          />
+        </div>
       </YandexMapControl>
     </YandexMapControls>
 
-    <YandexMapControls v-if="isMobile" :settings="{ position: 'bottom right', orientation: 'vertical' }">
+    <YandexMapControls :settings="{ position: 'bottom right', orientation: 'vertical' }">
       <YandexMapControl>
-        <MapControlTabs v-model:active-tab="activeTab" />
+        <UTabs v-model="activeTab" :content="false" :items="tabs">
+          <template #map>
+            {{ activeTab === '0' ? 'Карта' : activeTab === '1' ? 'Список' : 'Другое' }}
+          </template>
+        </UTabs>
       </YandexMapControl>
     </YandexMapControls>
   </YandexMap>
 </template>
 
 <script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui'
 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 { IPvzMapFittingTabs, IPvzMapTabs } from '#shared/types'
+import { useGeolocation } from '@vueuse/core'
-import { useGeolocation, useMediaQuery } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
-import { computed, defineEmits, shallowRef } from 'vue'
 import {
   YandexMap,
   YandexMapClusterer,
@@ -70,33 +81,44 @@ import {
   YandexMapDefaultSchemeLayer,
   YandexMapMarker,
 } from 'vue-yandex-maps'
-import MapControlFitting from '~/components/MapControlFitting.vue'
-import MapControlTabs from '~/components/MapControlTabs.vue'
 
-defineProps<{ pickupPoints: PickupPoint[] }>()
+const props = defineProps<{ modelValue: PickupPoint, pickupPoints: PickupPoint[] }>()
-const emit = defineEmits(['update:checkout-pickup-point'])
 
-const checkoutPickupPoint = defineModel('checkoutPickupPoint', { type: Object as PropType<PickupPoint>, default: () => undefined })
+const emit = defineEmits<{
-const activeTab = defineModel('activeTab', { type: Object as PropType<IPvzMapTabs>, default: () => IPvzMapTabs.MAP })
+  (e: 'update:modelValue', value: PickupPoint | undefined): void
-const fitting = defineModel('fitting', { type: Object as PropType<IPvzMapFittingTabs>, default: () => IPvzMapFittingTabs.ALL })
+  (e: 'activeTab', value: string): void
+}>()
 
 const { coords } = useGeolocation()
-const isMobile = useMediaQuery('(max-width: 1280px)')
 const clusterer = shallowRef<YMapClusterer | null>(null)
 const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
 const map = shallowRef<null | YMap>(null)
 
-const hasCoords = computed(() => coords.value.latitude !== Infinity && coords.value.longitude !== Infinity)
+const isFitting = ref(false)
+const activeTab = ref('map')
+const tabs = computed<TabsItem[]>(() =>
+  [
+    {
+      value: 'map',
+      label: activeTab.value === 'map' ? 'Карта' : '',
+      icon: 'lucide:map-pin',
+      slot: 'map' as const,
+    },
+    {
+      value: 'list',
+      label: activeTab.value === 'list' ? 'Список' : '',
+      icon: 'i-lucide-list',
+      slot: 'list' as const,
+    },
+  ],
+)
+
+const hasCoords = computed(() => coords.value?.latitude !== Infinity && coords.value?.longitude !== Infinity)
 
 const location = ref<YMapLocationRequest>({
   zoom: 2,
 })
 
-const onSelectPoint = (pickupPoint: PickupPoint) => {
-  checkoutPickupPoint.value = pickupPoint
-  emit('update:checkout-pickup-point', pickupPoint)
-}
-
 watch(coords, (newCoords) => {
   if (newCoords && hasCoords.value) {
     location.value = {
@@ -107,16 +129,17 @@ watch(coords, (newCoords) => {
   }
 }, { once: true })
 
-watch(() => checkoutPickupPoint.value, (newPickupPoint) => {
+watch(() => props.modelValue, (newPickupPoint) => {
-  if (!newPickupPoint)
-    return
-
   location.value = {
     center: [newPickupPoint.position.longitude, newPickupPoint.position.latitude],
     zoom: 18,
     duration: 500,
   }
 })
+
+watch(() => activeTab.value, (newActiveTab) => {
+  emit('activeTab', newActiveTab)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -160,11 +183,6 @@ watch(() => checkoutPickupPoint.value, (newPickupPoint) => {
     width: 20px;
     height: 20px;
   }
-
-  &:hover &__icon {
-    color: var(--ui-primary);
-    transform: scale(1.1);
-  }
 }
 
 .cluster {
@@ -189,4 +207,10 @@ watch(() => checkoutPickupPoint.value, (newPickupPoint) => {
     background-color: #1e293b;
   }
 }
+
+.control {
+  background: var(--ui-bg-elevated);
+  padding: 8px 18px;
+  border-radius: 10px;
+}
 </style>

pages/checkout/delivery.vue

@@ -4,13 +4,7 @@
     <div v-if="!isMobile" class="delivery__sidebar">
       <DeliveryInfo v-if="isPickupPointSelected" />
 
-      <DeliverySearch
+      <DeliverySearch v-else :filtered-points="filteredPoints" />
-        v-else
-        v-model:checkout-pickup-point="checkoutPickupPoint"
-        v-model:search-term="searchTerm"
-        :filtered-points="filteredPoints"
-        @update:checkout-pickup-point="updatePoint()"
-      />
     </div>
 
     <!--    Mobile -->
@@ -31,66 +25,20 @@
       </template>
     </UDrawer>
 
-    <UModal
+    activeTab
-      v-model:open="openDeliverySearch"
+    {{ activeTab }}
-      fullscreen
-      :dismissible="false"
-      :ui="{
-        body: 'overflow-hidden',
-        overlay: 'bg-black/50',
-        header: 'hidden',
-      }"
-    >
-      <template #body>
-        <DeliverySearch
-          v-if="activeTab === IPvzMapTabs.LIST"
-          v-model:checkout-pickup-point="checkoutPickupPoint"
-          v-model:search-term="searchTerm"
-          :filtered-points="filteredPoints"
-          @update:checkout-pickup-point="updatePoint()"
-        />
-
-        <UDrawer
-          v-if="isMobile"
-          v-model:open="open"
-          fixed
-          :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 class="px-4 pb-4">
-              <DeliveryInfo v-if="isPickupPointSelected" />
-            </div>
-          </template>
-        </UDrawer>
-      </template>
-
-      <template #footer>
-        <div class="d-flex flex-row w-full justify-between">
-          <MapControlFitting v-model:fitting="fitting" />
-
-          <MapControlTabs v-model:active-tab="activeTab" />
-        </div>
-      </template>
-    </UModal>
-
     <!--    Desktop Mobile -->
     <PvzMap
-      v-model:checkout-pickup-point="checkoutPickupPoint"
+      v-model="checkoutPickupPoint"
-      v-model:active-tab="activeTab"
-      v-model:fitting="fitting"
       :pickup-points="filteredPoints"
-      @update:checkout-pickup-point="updatePoint()"
+      @active-tab="value => activeTab = value"
+      @update:model-value="updatePoint()"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
-import { IPvzMapFittingTabs, IPvzMapTabs } from '#shared/types'
 import { useGeolocation, useMediaQuery } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import DeliveryInfo from '~/components/DeliveryInfo.vue'
@@ -105,8 +53,6 @@ const isMobile = useMediaQuery('(max-width: 1280px)')
 const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')
 const activeTab = ref()
-const fitting = ref(IPvzMapFittingTabs.ALL)
-const openDeliverySearch = ref()
 
 const waitForCoords = () =>
   new Promise<void>((resolve) => {
@@ -146,21 +92,15 @@ onMounted(async () => {
   yandexPvz.value = yandexPvzApi.value
 })
 
+// TODO сделать отдельный компонент UISearch
 const filteredPoints = computed<PickupPoint[]>(() => {
-  const points = yandexPvz.value?.points || []
+  if (!searchTerm.value || searchTerm.value === '') {
-  const term = searchTerm.value?.toLowerCase() || ''
+    return yandexPvz.value?.points || []
+  }
 
-  return points.filter((point) => {
+  return yandexPvz.value?.points?.filter(point =>
-    const matchesSearch = !term || point.address.full_address.toLowerCase().includes(term)
+    point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()),
-
+  ) || []
-    const isAllowed = point.pickup_services.is_fitting_allowed
-    const matchesFitting
-      = fitting.value === IPvzMapFittingTabs.ALL
-        || (fitting.value === IPvzMapFittingTabs.ALLOW && isAllowed)
-        || (fitting.value === IPvzMapFittingTabs.FORBID && !isAllowed)
-
-    return matchesSearch && matchesFitting
-  })
 })
 
 function updatePoint() {
@@ -168,10 +108,6 @@ function updatePoint() {
   open.value = true
 }
 
-watch(() => activeTab.value, () => {
-  openDeliverySearch.value = activeTab.value === IPvzMapTabs.LIST
-})
-
 definePageMeta({
   layout: 'checkout',
 })

shared/types.ts

@@ -1,9 +0,0 @@
-export enum IPvzMapTabs {
-  MAP = 'map',
-  LIST = 'list',
-}
-export enum IPvzMapFittingTabs {
-  ALL = 'all',
-  ALLOW = 'allow',
-  FORBID = 'Forbid',
-}