151 lines
3.9 KiB
Vue
151 lines
3.9 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"
|
|
variant="ghost"
|
|
icon="i-ph-pencil-simple-line"
|
|
@click="onEditDelivery"
|
|
/>
|
|
</h3>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ contacts?.name }} {{ contacts?.surname }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ contacts?.name }} {{ contacts?.surname }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ contacts?.name }} {{ contacts?.surname }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ contacts?.name }} {{ contacts?.surname }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ contacts?.name }} {{ contacts?.surname }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h3 class="d-flex gap-1 text-center align-items-center">
|
|
Получатель
|
|
|
|
<UButton
|
|
size="sm"
|
|
class="text-muted-foreground"
|
|
variant="ghost"
|
|
icon="i-ph-pencil-simple-line"
|
|
@click="onEditContacts"
|
|
/>
|
|
</h3>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-user" class="text-muted-foreground" />
|
|
<span>{{ contacts?.name }} {{ contacts?.surname }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-envelope-simple" class="text-muted-foreground" />
|
|
<span>{{ contacts?.email }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-ph-phone" class="text-muted-foreground" />
|
|
<span>{{ contacts?.phone }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<UButton label="СОздать ОредЕр" @click="createOrder" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { IBspb } from '~/server/shared/types/bspb'
|
|
import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
|
|
|
|
const { cart } = useCart()
|
|
const { contacts } = useCheckout()
|
|
|
|
function onEditDelivery() {
|
|
console.log('pizda')
|
|
}
|
|
|
|
function onEditContacts() {
|
|
console.log('pizda')
|
|
}
|
|
|
|
const createOrder = async () => {
|
|
const { data } = await useFetch<IBspb>('/api/bspb', {
|
|
method: 'POST',
|
|
body: {
|
|
order: {
|
|
typeRid: 'Purchase',
|
|
amount: 100,
|
|
currency: 'RUB',
|
|
hppRedirectUrl: `${import.meta.env.VITE_BASE_URL}/cart`,
|
|
},
|
|
},
|
|
})
|
|
|
|
const redirectUrl = `${data?.value?.order?.hppUrl}?orderId=${data?.value?.order?.id}&password=${data.value?.order?.password}`
|
|
window.open(redirectUrl, '_blank')
|
|
}
|
|
|
|
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>
|