97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<template>
|
|
<div class="delivery__search">
|
|
<UInput
|
|
v-model="searchTerm"
|
|
size="xl"
|
|
class="w-full"
|
|
placeholder="Выберите пункт выдачи"
|
|
:ui="{ trailing: 'pe-1' }"
|
|
>
|
|
<template v-if="searchTerm?.length" #trailing>
|
|
<UButton
|
|
color="neutral"
|
|
variant="link"
|
|
size="sm"
|
|
icon="i-lucide-circle-x"
|
|
aria-label="Clear input"
|
|
@click="searchTerm = ''"
|
|
/>
|
|
</template>
|
|
</UInput>
|
|
|
|
<div class="pickup-point-card__items">
|
|
<div
|
|
v-for="pickupPoint in filteredPoints"
|
|
:key="pickupPoint.id"
|
|
class="pickup-point-card"
|
|
@click="onSelectPoint(pickupPoint)"
|
|
>
|
|
<div class="pickup-point-card__content">
|
|
<h3>Yandex</h3>
|
|
<p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
|
|
<h3>Как определить стоимость ?</h3>
|
|
</div>
|
|
<Icon class="pickup-point-card__action" name="lucide:chevron-right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PickupPoint } from '#shared/yandex_pvz'
|
|
import type { PropType } from 'vue'
|
|
import { defineEmits } from 'vue'
|
|
|
|
defineProps<{ filteredPoints: PickupPoint[] }>()
|
|
const emit = defineEmits(['update:checkout-pickup-point'])
|
|
|
|
const checkoutPickupPoint = defineModel('checkoutPickupPoint', {
|
|
type: Object as PropType<PickupPoint>,
|
|
default: () => undefined,
|
|
})
|
|
|
|
const searchTerm = defineModel('searchTerm', { type: String, default: '' })
|
|
|
|
const onSelectPoint = (pickupPoint: PickupPoint) => {
|
|
checkoutPickupPoint.value = pickupPoint
|
|
emit('update:checkout-pickup-point', pickupPoint)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pickup-point-card {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
|
|
&__items {
|
|
height: calc(100dvh - 54px - 40px - 24px);
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
|
|
@include mobile {
|
|
height: calc(100dvh - 72px - 40px - 32px);
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
&__action {
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|