карты пвз

components/PvzMap.vue

@@ -24,7 +24,7 @@
         :key="pickupPoint.id"
         position="top-center left-center"
         :settings="{ coordinates: [pickupPoint.position.longitude, pickupPoint.position.latitude] }"
-        @click="centerMap(pickupPoint)"
+        @click="$emit('update:modelValue', pickupPoint)"
       >
         <div class="marker">
           <Icon name="i-lucide-map-pin" class="marker__icon" />
@@ -54,11 +54,13 @@ import {
   YandexMapDefaultSchemeLayer,
   YandexMapMarker,
 } from 'vue-yandex-maps'
-import { useCheckout } from '~/composables/useCheckout'
 
-defineProps<{ pickupPoints: PickupPoint[] }>()
+const props = defineProps<{ modelValue: PickupPoint, pickupPoints: PickupPoint[] }>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: PickupPoint | undefined): void
+}>()
 
-const { setCheckoutPickupPoint, isPickupPointSelected } = useCheckout()
 const { coords } = useGeolocation()
 const clusterer = shallowRef<YMapClusterer | null>(null)
 const trueBounds = ref<LngLatBounds>([[0, 0], [0, 0]])
@@ -70,17 +72,6 @@ const location = ref<YMapLocationRequest>({
   zoom: 2,
 })
 
-function centerMap(pickupPoint: PickupPoint) {
-  location.value = {
-    center: [pickupPoint.position.longitude, pickupPoint.position.latitude],
-    zoom: 18,
-    duration: 500,
-  }
-
-  setCheckoutPickupPoint(pickupPoint)
-  isPickupPointSelected.value = true
-}
-
 watch(coords, (newCoords) => {
   if (newCoords && hasCoords.value) {
     location.value = {
@@ -91,7 +82,13 @@ watch(coords, (newCoords) => {
   }
 }, { once: true })
 
-defineExpose({ centerMap, location })
+watch(() => props.modelValue, (newPickupPoint) => {
+  location.value = {
+    center: [newPickupPoint.position.longitude, newPickupPoint.position.latitude],
+    zoom: 18,
+    duration: 500,
+  }
+})
 </script>
 
 <style lang="scss" scoped>

pages/checkout/delivery.vue

@@ -28,7 +28,7 @@
             v-for="pickupPoint in filteredPoints"
             :key="pickupPoint.id"
             class="pickup-point-card"
-            @click="centerMap(pickupPoint)"
+            @click="selectedPickupPoint = pickupPoint"
           >
             <div class="pickup-point-card__content">
               <h3>Yandex</h3>
@@ -41,7 +41,10 @@
       </div>
     </div>
 
-    <PvzMap ref="mapRef" :pickup-points="filteredPoints" />
+    <PvzMap
+      v-model="selectedPickupPoint"
+      :pickup-points="filteredPoints"
+    />
   </div>
 </template>
 
@@ -53,11 +56,11 @@ import DeliveryInfo from '~/components/DeliveryInfo.vue'
 import PvzMap from '~/components/PvzMap.vue'
 import { useCheckout } from '~/composables/useCheckout'
 
-const { isPickupPointSelected } = useCheckout()
+const { setCheckoutPickupPoint, isPickupPointSelected } = useCheckout()
 const { coords } = useGeolocation()
-const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
 const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')
+const selectedPickupPoint = ref<PickupPoint | undefined>()
 
 const waitForCoords = () =>
   new Promise<void>((resolve) => {
@@ -108,9 +111,10 @@ const filteredPoints = computed<PickupPoint[]>(() => {
   ) || []
 })
 
-const centerMap = (point: any) => {
-  mapRef.value?.centerMap(point)
-}
+watch(() => selectedPickupPoint.value, (newPickupPoint) => {
+  setCheckoutPickupPoint(newPickupPoint)
+  isPickupPointSelected.value = true
+})
 
 definePageMeta({
   layout: 'checkout',