147 lines
4.0 KiB
Vue
147 lines
4.0 KiB
Vue
<template>
|
||
<ul class="delivery-info">
|
||
<li v-if="showFullContent" class="delivery-info__item">
|
||
<Icon class="delivery-info__icon" name="lucide:truck" />
|
||
<span class="delivery-info__text">Yandex</span>
|
||
</li>
|
||
|
||
<li class="delivery-info__item">
|
||
<Icon class="delivery-info__icon" name="lucide:map-pin" />
|
||
<span class="delivery-info__text">{{ checkoutPickupPoint?.address?.full_address }}</span>
|
||
</li>
|
||
|
||
<li class="delivery-info__item">
|
||
<Icon class="delivery-info__icon" name="lucide:shirt" size="xl" />
|
||
<span class="delivery-info__text">{{ checkoutPickupPoint?.pickup_services?.is_fitting_allowed ? 'с примеркой' : 'без примерки' }}</span>
|
||
</li>
|
||
|
||
<li class="delivery-info__item">
|
||
<Icon class="delivery-info__icon" name="lucide:package" />
|
||
<span class="delivery-info__text">срок хранения — 7 дней</span>
|
||
</li>
|
||
|
||
<li class="delivery-info__item">
|
||
<UAccordion
|
||
:items="availableDays"
|
||
:ui="{
|
||
body: 'py-0',
|
||
panel: 'p-0',
|
||
wrapper: 'space-y-0',
|
||
}"
|
||
>
|
||
<template #schedule="{ item }">
|
||
<div>
|
||
<div
|
||
v-for="(scheduleItem, index) in item.content"
|
||
:key="index"
|
||
>
|
||
<Icon class="delivery-info__icon mr-2" name="lucide:clock" />
|
||
<span class="mr-2">{{ scheduleItem.dayName }}</span>
|
||
<span>{{ scheduleItem.timeRange }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</UAccordion>
|
||
</li>
|
||
|
||
<li>
|
||
<UAccordion :items="details" />
|
||
</li>
|
||
|
||
<UButton
|
||
v-if="showFullContent"
|
||
class="justify-content-center"
|
||
label="Привезти сюда"
|
||
size="xl"
|
||
@click="nextStep"
|
||
/>
|
||
</ul>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { AccordionItem } from '@nuxt/ui'
|
||
import { computed, ref } from 'vue'
|
||
import { useCheckout } from '~/composables/useCheckout'
|
||
|
||
withDefaults(defineProps<{
|
||
showFullContent?: boolean
|
||
}>(), {
|
||
showFullContent: true,
|
||
})
|
||
|
||
const { checkoutPickupPoint, nextStep } = useCheckout()
|
||
|
||
const restrictionDays = {
|
||
1: 'пн',
|
||
2: 'вт',
|
||
3: 'ср',
|
||
4: 'чт',
|
||
5: 'пт',
|
||
6: 'сб',
|
||
7: 'вс',
|
||
}
|
||
|
||
// Функция для форматирования времени с ведущим нулем
|
||
const formatTime = (time: { hours: number | string, minutes: number | string }): string => {
|
||
const hours = String(time.hours).padStart(2, '0')
|
||
const minutes = String(time.minutes).padStart(2, '0')
|
||
return `${hours}:${minutes}`
|
||
}
|
||
|
||
// Функция для форматирования временного диапазона
|
||
const formatTimeRange = (timeFrom: { hours: number | string, minutes: number | string }, timeTo: { hours: number | string, minutes: number | string }): string => {
|
||
return `${formatTime(timeFrom)} - ${formatTime(timeTo)}`
|
||
}
|
||
|
||
// Аккордеон с расписанием - используем слот вместо HTML строки
|
||
const availableDays = computed(() => {
|
||
const scheduleItems = checkoutPickupPoint?.value?.schedule?.restrictions?.map((restriction) => {
|
||
const dayName = restrictionDays[restriction.days[0]]
|
||
const timeRange = formatTimeRange(restriction.time_from, restriction.time_to)
|
||
return { dayName, timeRange }
|
||
}) || []
|
||
|
||
return [
|
||
{
|
||
label: 'График работы',
|
||
icon: 'i-lucide:calendar',
|
||
slot: 'schedule',
|
||
content: scheduleItems,
|
||
},
|
||
]
|
||
})
|
||
|
||
const details = ref<AccordionItem[]>([
|
||
{
|
||
label: 'Подробнее',
|
||
icon: 'i-lucide:info',
|
||
content: checkoutPickupPoint?.value?.address?.comment || 'Дополнительная информация о пункте выдачи',
|
||
},
|
||
])
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.delivery-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
&__item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
}
|
||
|
||
&__icon {
|
||
flex-shrink: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
&__text {
|
||
flex: 1;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
</style>
|