132 lines
3.6 KiB
Vue
132 lines
3.6 KiB
Vue
<template>
|
||
<div v-if="coords" class="delivery">
|
||
<!-- Desktop -->
|
||
<div v-if="!isMobile" class="delivery__sidebar">
|
||
<DeliveryInfo v-if="isPickupPointSelected" />
|
||
|
||
<DeliverySearch v-else :filtered-points="filteredPoints" />
|
||
</div>
|
||
|
||
<!-- Mobile -->
|
||
<UDrawer
|
||
v-if="isMobile"
|
||
v-model:open="open"
|
||
fixed
|
||
:ui="{
|
||
content: 'fixed bg-default ring ring-default flex focus:outline-none overflow-hidden',
|
||
container: 'w-full flex flex-col gap-4 p-4 overflow-hidden',
|
||
body: 'flex-1 overflow-y-auto',
|
||
}"
|
||
>
|
||
<template #content>
|
||
<div class="px-4 pb-4">
|
||
<DeliveryInfo v-if="isPickupPointSelected" />
|
||
</div>
|
||
</template>
|
||
</UDrawer>
|
||
|
||
activeTab
|
||
{{ activeTab }}
|
||
<!-- Desktop Mobile -->
|
||
<PvzMap
|
||
v-model="checkoutPickupPoint"
|
||
:pickup-points="filteredPoints"
|
||
@active-tab="value => activeTab = value"
|
||
@update:model-value="updatePoint()"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
|
||
import { useGeolocation, useMediaQuery } from '@vueuse/core'
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import DeliveryInfo from '~/components/DeliveryInfo.vue'
|
||
import DeliverySearch from '~/components/DeliverySearch.vue'
|
||
import PvzMap from '~/components/PvzMap.vue'
|
||
import { useCheckout } from '~/composables/useCheckout'
|
||
|
||
const { setCheckoutPickupPoint, isPickupPointSelected, checkoutPickupPoint } = useCheckout()
|
||
const { coords } = useGeolocation()
|
||
const open = ref(false)
|
||
const isMobile = useMediaQuery('(max-width: 1280px)')
|
||
const yandexPvz = ref<YandexPvzResponse>()
|
||
const searchTerm = ref('')
|
||
const activeTab = 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()
|
||
|
||
// получение geo_id из названию города
|
||
const { data: yandexLocation } = await useFetch('/api/yandex_location', {
|
||
method: 'POST',
|
||
body: {
|
||
location: openstreetmap?.address?.city,
|
||
},
|
||
})
|
||
|
||
// получения пунктов выдачи города из geo_id
|
||
const { data: yandexPvzApi } = await useFetch<YandexPvzResponse>('/api/yandex_pvz', {
|
||
method: 'POST',
|
||
body: {
|
||
geo_id: yandexLocation?.value?.variants[0]?.geo_id,
|
||
},
|
||
})
|
||
|
||
yandexPvz.value = yandexPvzApi.value
|
||
})
|
||
|
||
// TODO сделать отдельный компонент UISearch
|
||
const filteredPoints = computed<PickupPoint[]>(() => {
|
||
if (!searchTerm.value || searchTerm.value === '') {
|
||
return yandexPvz.value?.points || []
|
||
}
|
||
|
||
return yandexPvz.value?.points?.filter(point =>
|
||
point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()),
|
||
) || []
|
||
})
|
||
|
||
function updatePoint() {
|
||
setCheckoutPickupPoint(checkoutPickupPoint.value)
|
||
open.value = true
|
||
}
|
||
|
||
definePageMeta({
|
||
layout: 'checkout',
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@use '~/assets/scss/utils' as *;
|
||
|
||
.delivery {
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
&__sidebar {
|
||
flex-shrink: 0;
|
||
max-height: calc(100vh - 40px);
|
||
overflow-y: auto;
|
||
width: 410px;
|
||
padding-inline: 24px;
|
||
}
|
||
}
|
||
</style>
|