карты пвз

pages/checkout/delivery.vue

@@ -25,20 +25,65 @@
       </template>
     </UDrawer>
 
-    activeTab
-    {{ activeTab }}
+    <UModal
+      v-model:open="openDeliverySearch"
+      fullscreen
+      :ui="{
+        body: 'overflow-hidden',
+        container: 'p-0',
+        overlay: 'bg-black/50',
+        base: 'rounded-none shadow-none',
+        header: 'hidden',
+      }"
+    >
+      <template #body>
+        <DeliverySearch
+          v-if="activeTab === IPvzMapTabs.LIST"
+          :filtered-points="filteredPoints"
+        />
+
+        <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="isFitting" />
+
+          <MapControlTabs v-model:active-tab="activeTab" />
+        </div>
+      </template>
+    </UModal>
+
     <!--    Desktop Mobile -->
     <PvzMap
       v-model="checkoutPickupPoint"
+      v-model:active-tab="activeTab"
+      v-model:is-fitting="isFitting"
       :pickup-points="filteredPoints"
-      @active-tab="value => activeTab = value"
       @update:model-value="updatePoint()"
+      @update:is-fitting="value => isFitting = value"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
+import { IPvzMapTabs } from '#shared/types'
 import { useGeolocation, useMediaQuery } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import DeliveryInfo from '~/components/DeliveryInfo.vue'
@@ -52,7 +97,9 @@ const open = ref(false)
 const isMobile = useMediaQuery('(max-width: 1280px)')
 const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')
-const activeTab = ref()
+const activeTab = ref(IPvzMapTabs.MAP)
+const isFitting = ref()
+const openDeliverySearch = ref(false)
 
 const waitForCoords = () =>
   new Promise<void>((resolve) => {
@@ -98,9 +145,8 @@ const filteredPoints = computed<PickupPoint[]>(() => {
     return yandexPvz.value?.points || []
   }
 
-  return yandexPvz.value?.points?.filter(point =>
-    point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()),
-  ) || []
+  return yandexPvz.value?.points?.filter(point => point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase())
+    || isFitting.value === point.pickup_services.is_fitting_allowed) || []
 })
 
 function updatePoint() {
@@ -108,6 +154,10 @@ function updatePoint() {
   open.value = true
 }
 
+watch(() => activeTab.value, () => {
+  openDeliverySearch.value = activeTab.value === IPvzMapTabs.LIST
+})
+
 definePageMeta({
   layout: 'checkout',
 })