82 lines
1.8 KiB
Vue
82 lines
1.8 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="checkoutPickupPoint = pickupPoint"
|
||
>
|
||
<div class="pickup-point-card__content">
|
||
<h3>Yandex</h3>
|
||
<p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
|
||
<h3>с day month бесплатно</h3>
|
||
</div>
|
||
<Icon class="pickup-point-card__action" name="lucide:chevron-right" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { PickupPoint } from '~/server/shared/types/yandex_pvz'
|
||
import { useCheckout } from '~/composables/useCheckout'
|
||
|
||
defineProps<{ filteredPoints: PickupPoint[] }>()
|
||
|
||
const { checkoutPickupPoint } = useCheckout()
|
||
const searchTerm = ref('')
|
||
</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;
|
||
}
|
||
|
||
&__content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
&__action {
|
||
flex-shrink: 0;
|
||
width: 16px;
|
||
height: 16px;
|
||
color: #999;
|
||
}
|
||
}
|
||
</style>
|