101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
|
<div class="summary">
|
|
<div class="summary__info">
|
|
<h3>в заказе • {{ cart?.line_items?.length }} шт</h3>
|
|
|
|
<div class="summary__items">
|
|
<div
|
|
v-for="cartItem in cart?.line_items"
|
|
:key="cartItem.variation_id"
|
|
>
|
|
<SummaryCartItem :summary-cart-item="cartItem" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h3 class="d-flex gap-1 text-center align-items-center">
|
|
Yandex
|
|
|
|
<UButton
|
|
size="sm"
|
|
class="text-muted-foreground mla cursor-pointer"
|
|
variant="ghost"
|
|
icon="i-ph-pencil-simple-line"
|
|
@click="setStep('delivery')"
|
|
/>
|
|
</h3>
|
|
|
|
<DeliveryInfo :show-full-content="false" />
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h3 class="d-flex gap-1 text-center align-items-center">
|
|
Получатель
|
|
|
|
<UButton
|
|
size="sm"
|
|
class="text-muted-foreground mla cursor-pointer"
|
|
variant="ghost"
|
|
icon="i-ph-pencil-simple-line"
|
|
@click="setStep('contacts')"
|
|
/>
|
|
</h3>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ checkoutContacts?.name }} {{ checkoutContacts?.surname }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-envelope-simple" class="text-muted-foreground" />
|
|
<span>{{ checkoutContacts?.email }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-phone" class="text-muted-foreground" />
|
|
<span>{{ checkoutContacts?.phone }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PayBlock pay />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
|
|
import PayBlock from '../../components/PayBlock.vue'
|
|
|
|
const { cart } = useCart()
|
|
const { checkoutContacts, setStep } = useCheckout()
|
|
|
|
definePageMeta({
|
|
layout: 'checkout',
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use '~/assets/scss/utils' as *;
|
|
|
|
.summary {
|
|
max-width: 1200px;
|
|
margin-inline: auto;
|
|
padding-inline: 16px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
&__items {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
</style>
|