карты пвз

pages/checkout/delivery.vue

@@ -1,64 +1,52 @@
 <template>
   <div v-if="coords" class="delivery">
-    <div class="delivery__sidebar">
+    <!--    Desktop -->
+    <div v-if="!isMobile" class="delivery__sidebar">
       <DeliveryInfo v-if="isPickupPointSelected" />
 
-      <div v-else class="delivery__search">
-        <UInput
-          v-model="searchTerm"
-          size="xl"
-          class="w-full"
-          placeholder="Выберите пункт выдачи"
-          :ui="{ trailing: 'pe-1' }"
-        >
-          <template v-if="searchTerm?.length" #trailing>
-            <UButton
-              color="neutral"
-              variant="link"
-              size="sm"
-              icon="i-lucide-circle-x"
-              aria-label="Clear input"
-              @click="searchTerm = ''"
-            />
-          </template>
-        </UInput>
-
-        <div class="delivery__items">
-          <div
-            v-for="pickupPoint in filteredPoints"
-            :key="pickupPoint.id"
-            class="pickup-point-card"
-            @click="checkoutPickupPoint = pickupPoint"
-          >
-            <div class="pickup-point-card__content">
-              <h3>Yandex</h3>
-              <p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
-              <h3>с day month бесплатно</h3>
-            </div>
-            <Icon class="pickup-point-card__action" name="lucide:chevron-right" />
-          </div>
-        </div>
-      </div>
+      <DeliverySearch v-else :filtered-points="filteredPoints" />
     </div>
 
+    <!--    Mobile -->
+    <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>
+
+    <!--    Desktop Mobile -->
     <PvzMap
       v-model="checkoutPickupPoint"
       :pickup-points="filteredPoints"
-      @update:model-value="setCheckoutPickupPoint(checkoutPickupPoint)"
+      @update:model-value="updatePoint()"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
-import { useGeolocation } from '@vueuse/core'
+import { useGeolocation, useMediaQuery } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import DeliveryInfo from '~/components/DeliveryInfo.vue'
+import DeliverySearch from '~/components/DeliverySearch.vue'
 import PvzMap from '~/components/PvzMap.vue'
 import { useCheckout } from '~/composables/useCheckout'
 
 const { setCheckoutPickupPoint, isPickupPointSelected, checkoutPickupPoint } = useCheckout()
 const { coords } = useGeolocation()
+const open = ref(false)
+const isMobile = useMediaQuery('(max-width: 1280px)')
 const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')
 
@@ -111,6 +99,11 @@ const filteredPoints = computed<PickupPoint[]>(() => {
   ) || []
 })
 
+function updatePoint() {
+  setCheckoutPickupPoint(checkoutPickupPoint.value)
+  open.value = true
+}
+
 definePageMeta({
   layout: 'checkout',
 })
@@ -130,36 +123,5 @@ definePageMeta({
     width: 410px;
     padding-inline: 24px;
   }
-
-  &__items {
-    height: calc(100dvh - 54px - 40px - 24px);
-    overflow-y: auto;
-    flex-shrink: 0;
-  }
-}
-
-.pickup-point-card {
-  position: relative;
-  width: 100%;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  cursor: pointer;
-
-  &__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__action {
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-    color: #999;
-  }
 }
 </style>