карта ПВЗ

pages/cart.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { useCart } from '~/composables'
-import PayBlock from './checkout/PayBlock.vue'
+import PayBlock from '../components/PayBlock.vue'
 
 const route = useRoute()
 const { cart } = useCart()

pages/checkout/PayBlock.vue

@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <UPageCard>
-      <template #body>
-        <div>товары {{ `(${cart?.line_items?.length} шт)` }}</div>
-        <div v-if="cartSum">
-          итого {{ cartSum }}
-        </div>
-      </template>
-
-      <template #footer>
-        <UButton
-          class="justify-center text-center w-2xs"
-          size="xl"
-          :label="pay ? 'оформить заказ' : 'перейти к оформлению'"
-          @click="pay ? createOrder() : router.push(`/checkout/delivery`)"
-        />
-      </template>
-    </UPageCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IBspb } from '~/server/shared/types/bspb'
-
-defineProps({
-  pay: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const router = useRouter()
-const { cart, cartSum } = useCart()
-
-const createOrder = async () => {
-  const { data } = await useFetch<IBspb>('/api/bspb', {
-    method: 'POST',
-    body: {
-      order: {
-        typeRid: 'Purchase',
-        amount: cartSum,
-        currency: 'RUB',
-        hppRedirectUrl: `${import.meta.env.VITE_BASE_URL}/cart`,
-      },
-    },
-  })
-
-  const redirectUrl = `${data?.value?.order?.hppUrl}?orderId=${data?.value?.order?.id}&password=${data.value?.order?.password}`
-  window.open(redirectUrl, '_blank')
-}
-</script>

pages/checkout/delivery.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="delivery">
+  <div v-if="coords" class="delivery">
     <div class="delivery__sidebar">
       <div
-        v-for="point in data?.points"
+        v-for="point in yandexPvz?.points"
         :key="point.id"
         class="pickup-point-item"
         @click="onPickupClick(point)"
@@ -12,15 +12,53 @@
         <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
       </div>
     </div>
-    <PvzMap ref="mapRef" :pickup-points="data?.points" />
+    <PvzMap ref="mapRef" :pickup-points="yandexPvz?.points" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useGeolocation } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
 import PvzMap from '~/components/PvzMap.vue'
 
-const { data } = useFetch('/api/yandex')
+const yandexPvz = ref('')
+const { coords } = useGeolocation()
+const city = ref('')
+
+const waitForCoords = () =>
+  new Promise<void>((resolve) => {
+    const stop = watch(coords, (newCoords) => {
+      if (newCoords.latitude && newCoords.longitude) {
+        stop()
+        resolve()
+      }
+    })
+  })
+
+onMounted(async () => {
+  await waitForCoords()
+
+  const response = await fetch(
+    `https://nominatim.openstreetmap.org/reverse?lat=${coords.value.latitude}&lon=${coords.value.longitude}&format=json&accept-language=ru`,
+  )
+  const openstreetmap = await response.json()
+
+  const { data: yandexLocation } = await useFetch('/api/yandex_location', {
+    method: 'POST',
+    body: {
+      location: openstreetmap?.address?.city,
+    },
+  })
+
+  const { data: yandexPvzApi } = await useFetch('/api/yandex_pvz', {
+    method: 'POST',
+    body: {
+      geo_id: yandexLocation?.value?.variants[0]?.geo_id,
+    },
+  })
+
+  yandexPvz.value = yandexPvzApi.value
+})
 
 const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
 

pages/checkout/summary.vue

@@ -87,7 +87,7 @@
 
 <script setup lang="ts">
 import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
-import PayBlock from './PayBlock.vue'
+import PayBlock from '../../components/PayBlock.vue'
 
 const { cart } = useCart()
 const { contacts, setStep } = useCheckout()