карта ПВЗ

components/PvzMap.vue

@@ -21,6 +21,7 @@ const token = '13f4c06b-cb7e-4eeb-81f1-af52f12587b2'
 const mapContainer = ref<HTMLDivElement | null>(null)
 const { coords } = useGeolocation()
 const coordsReady = ref(false)
+const mapInstance = ref<any | null>(null)
 
 const initMap = async (lat: number, lon: number) => {
   if (!window.ymaps) {
@@ -38,6 +39,7 @@ const initMap = async (lat: number, lon: number) => {
       zoom: 10,
       controls: ['zoomControl'],
     })
+    mapInstance.value = map
 
     props.pickupPoints.forEach((point) => {
       const placemark = new window.ymaps.Placemark(
@@ -53,6 +55,15 @@ const initMap = async (lat: number, lon: number) => {
   })
 }
 
+const centerMap = (lat: number, lon: number) => {
+  if (!mapInstance.value)
+    return
+
+  mapInstance.value.setCenter([lat, lon], 18)
+}
+
+defineExpose({ centerMap })
+
 watch(
   () => coords.value,
   async (val) => {

pages/order/delivery.vue

@@ -1,6 +1,19 @@
 <template>
-  <div>
+  <div class="delivery">
-    <PvzMap :pickup-points="pickupPoints" />
+    <div class="delivery__sidebar">
+      <div
+        v-for="point in data?.points"
+        :key="point.id"
+        class="pickup-point-item"
+        @click="onPickupClick(point)"
+      >
+        <h3>Yandex</h3>
+        {{ `${point?.address?.street} ${point?.address?.house}` }}
+        <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
+      </div>
+      <pre />
+    </div>
+    <PvzMap ref="mapRef" :pickup-points="data?.points" />
   </div>
 </template>
 
@@ -8,9 +21,46 @@
 import { ref } from 'vue'
 import PvzMap from '~/components/PvzMap.vue'
 
-const pickupPoints = ref([])
-
 const { data } = useFetch('/api/yandex')
-pickupPoints.value = data.value?.points
+
-console.log(pickupPoints?.value)
+const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
+
+const onPickupClick = (point: any) => {
+  const lat = point?.position?.latitude
+  const lon = point?.position?.longitude
+  if (typeof lat === 'number' && typeof lon === 'number') {
+    mapRef.value?.centerMap(lat, lon)
+  }
+}
 </script>
+
+<style lang="scss">
+.delivery {
+  display: flex;
+  flex-direction: row;
+
+  &__sidebar {
+    width: 410px;
+    height: calc(100dvh - 54px);
+    flex-shrink: 0;
+    overflow-y: auto;
+  }
+}
+
+.pickup-point-item {
+  position: relative;
+  width: 400px;
+  height: 100px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &__action {
+    position: absolute;
+    right: 20px;
+    top: 40px;
+  }
+}
+</style>