126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<template>
|
||
<div v-if="coords" class="delivery">
|
||
<div class="delivery__sidebar">
|
||
<UInput v-model="searchTerm" size="xl" class="w-full" placeholder="pvz" />
|
||
|
||
<div class="delivery__items">
|
||
<div
|
||
v-for="point in filteredPvz?.points"
|
||
:key="point.id"
|
||
class="pickup-point-item"
|
||
@click="centerMap(point)"
|
||
>
|
||
<h3>Yandex</h3>
|
||
{{ `${point?.address?.street} ${point?.address?.house}` }}
|
||
<Icon class="pickup-point-item__action" name="lucide:chevron-right" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<PvzMap ref="mapRef" :pickup-points="yandexPvz?.points" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useGeolocation } from '@vueuse/core'
|
||
import { onMounted, ref } from 'vue'
|
||
import PvzMap from '~/components/PvzMap.vue'
|
||
|
||
const { coords } = useGeolocation()
|
||
const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
|
||
const yandexPvz = ref('')
|
||
const searchTerm = 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('/api/yandex_pvz', {
|
||
method: 'POST',
|
||
body: {
|
||
geo_id: yandexLocation?.value?.variants[0]?.geo_id,
|
||
},
|
||
})
|
||
|
||
yandexPvz.value = yandexPvzApi.value
|
||
})
|
||
|
||
// TODO сделать отдельный компонент UISearch
|
||
const filteredPvz = computed(() => {
|
||
if (!searchTerm.value && searchTerm.value === '')
|
||
return yandexPvz.value
|
||
|
||
const result = yandexPvz?.value?.points?.filter(value => value?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()))
|
||
return {
|
||
points: [...result],
|
||
}
|
||
})
|
||
|
||
const centerMap = (point: any) => {
|
||
mapRef.value?.centerMap([point?.position?.longitude, point?.position?.latitude])
|
||
}
|
||
|
||
definePageMeta({
|
||
layout: 'checkout',
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.delivery {
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
&__sidebar {
|
||
width: 410px;
|
||
padding: 24px;
|
||
}
|
||
|
||
&__items {
|
||
overflow-y: auto;
|
||
flex-shrink: 0;
|
||
height: calc(100dvh - 54px - 40px - 24px);
|
||
}
|
||
}
|
||
|
||
.pickup-point-item {
|
||
position: relative;
|
||
width: 400px;
|
||
height: 100px;
|
||
padding-block: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
|
||
&__action {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 40px;
|
||
}
|
||
}
|
||
</style>
|