карты пвз

components/DeliverySearch.vue

@@ -0,0 +1,81 @@
+<template>
+  <div 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="pickup-point-card__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>
+</template>
+
+<script setup lang="ts">
+import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
+import { useCheckout } from '~/composables/useCheckout'
+
+defineProps<{ filteredPoints: PickupPoint[] }>()
+
+const { checkoutPickupPoint } = useCheckout()
+const searchTerm = ref('')
+</script>
+
+<style lang="scss">
+.pickup-point-card {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  cursor: pointer;
+
+  &__items {
+    height: calc(100dvh - 54px - 40px - 24px);
+    overflow-y: auto;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__action {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: #999;
+  }
+}
+</style>

components/PvzMap.vue

@@ -37,10 +37,35 @@
         </div>
       </template>
     </YandexMapClusterer>
+
+    <YandexMapControls :settings="{ position: 'bottom left', orientation: 'vertical' }">
+      <YandexMapControl>
+        <div
+          class="control"
+        >
+          <UCheckbox
+            v-model="isFitting"
+            size="xl"
+            label="с примеркой"
+          />
+        </div>
+      </YandexMapControl>
+    </YandexMapControls>
+
+    <YandexMapControls :settings="{ position: 'bottom right', orientation: 'vertical' }">
+      <YandexMapControl>
+        <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'
@@ -50,6 +75,8 @@ import { computed, shallowRef } from 'vue'
 import {
   YandexMap,
   YandexMapClusterer,
+  YandexMapControl,
+  YandexMapControls,
   YandexMapDefaultFeaturesLayer,
   YandexMapDefaultSchemeLayer,
   YandexMapMarker,
@@ -66,6 +93,25 @@ const clusterer = shallowRef<YMapClusterer | null>(null)
 const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
 const map = shallowRef<null | YMap>(null)
 
+const isFitting = ref(false)
+const activeTab = ref('map')
+const tabs = computed<TabsItem[]>(() =>
+  [
+    {
+      value: 'map',
+      label: activeTab.value === 'map' || activeTab.value === undefined ? 'Карта' : '',
+      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>({
@@ -156,4 +202,10 @@ watch(() => props.modelValue, (newPickupPoint) => {
     background-color: #1e293b;
   }
 }
+
+.control {
+  background: var(--ui-bg-elevated);
+  padding: 8px 18px;
+  border-radius: 10px;
+}
 </style>