карта ПВЗ

pages/order/delivery.vue

@@ -1,6 +1,19 @@
 <template>
-  <div>
-    <PvzMap :pickup-points="pickupPoints" />
+  <div class="delivery">
+    <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>