карта ПВЗ

pages/cart.vue

@@ -9,25 +9,17 @@
       </div>
     </div>
 
-    <div>
-      <div class="cart__create-order">
-        <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
-        <div>{{ `Сумма: ${cart?.line_items?.length}` }}</div>
-
-        <UButton class="w-100 d-flex" @click="router.push(`/checkout/delivery`)">
-          Перейти к оформлению
-        </UButton>
-      </div>
-    </div>
+    <PayBlock />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useCart } from '~/composables'
+import PayBlock from './checkout/PayBlock.vue'
 
-const router = useRouter()
 const route = useRoute()
 const { cart } = useCart()
+const { contacts } = useCheckout()
 
 onMounted(async () => {
   if (!route?.query?.ID)
@@ -38,15 +30,15 @@ onMounted(async () => {
     body: {
       payment_method: 'bacs',
       payment_method_title: 'Оплата по реквизитам',
-      set_paid: false,
+      set_paid: true,
       billing: {
-        first_name: 'Иван',
-        last_name: 'Иванов',
+        first_name: contacts?.value?.name,
+        last_name: contacts?.value?.surname,
+        phone: contacts?.value?.phone,
+        email: contacts?.value?.email,
         address_1: 'ул. Ленина, 1',
         city: 'Москва',
         country: 'RU',
-        email: 'ivan@example.com',
-        phone: '+79990000000',
       },
       transaction_id: route?.query?.ID,
       line_items: cart.value.line_items,
@@ -77,16 +69,5 @@ onMounted(async () => {
     flex-direction: column;
     gap: 16px;
   }
-
-  &__create-order {
-    box-shadow: 1px 1px 8px 0 black;
-    border-radius: 10px;
-    padding: 10px;
-    max-width: 360px;
-
-    display: inline-flex;
-    flex-direction: column;
-    gap: 20px;
-  }
 }
 </style>

pages/checkout/PayBlock.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <UPageCard>
+      <template #body>
+        <div>товары {{ `(${cart?.line_items?.length} шт)` }}</div>
+        <div v-if="cartSum">
+          итого {{ cartSum }}
+        </div>
+      </template>
+
+      <template #footer>
+        <UButton
+          class="justify-center text-center w-2xs"
+          size="xl"
+          :label="pay ? 'оформить заказ' : 'перейти к оформлению'"
+          @click="pay ? createOrder() : router.push(`/checkout/delivery`)"
+        />
+      </template>
+    </UPageCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBspb } from '~/server/shared/types/bspb'
+
+defineProps({
+  pay: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const router = useRouter()
+const { cart, cartSum } = useCart()
+
+const createOrder = async () => {
+  const { data } = await useFetch<IBspb>('/api/bspb', {
+    method: 'POST',
+    body: {
+      order: {
+        typeRid: 'Purchase',
+        amount: cartSum,
+        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')
+}
+</script>

pages/checkout/contacts.vue

@@ -140,14 +140,14 @@
 <script lang="ts" setup>
 import { useCheckout } from '../../composables/useCheckout'
 
-const { setContacts, nextStep } = useCheckout()
+const { contacts, setContacts, nextStep } = useCheckout()
 
 const { errors, handleSubmit, defineField } = useForm({
   initialValues: {
-    name: '',
-    surname: '',
-    phone: '',
-    email: '',
+    name: contacts.value.name,
+    surname: contacts.value.surname,
+    phone: contacts.value.phone,
+    email: contacts.value.email,
   },
   validationSchema: {
     name(value: string) {

pages/checkout/summary.vue

@@ -18,10 +18,10 @@
 
           <UButton
             size="sm"
-            class="text-muted-foreground"
+            class="text-muted-foreground mla cursor-pointer"
             variant="ghost"
             icon="i-ph-pencil-simple-line"
-            @click="onEditDelivery"
+            @click="setStep('delivery')"
           />
         </h3>
 
@@ -57,10 +57,10 @@
 
           <UButton
             size="sm"
-            class="text-muted-foreground"
+            class="text-muted-foreground mla cursor-pointer"
             variant="ghost"
             icon="i-ph-pencil-simple-line"
-            @click="onEditContacts"
+            @click="setStep('contacts')"
           />
         </h3>
 
@@ -81,43 +81,16 @@
       </div>
     </div>
 
-    <div>
-      <UButton label="СОздать ОредЕр" @click="createOrder" />
-    </div>
+    <PayBlock pay />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { IBspb } from '~/server/shared/types/bspb'
 import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
+import PayBlock from './PayBlock.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')
-}
+const { contacts, setStep } = useCheckout()
 
 definePageMeta({
   layout: 'checkout',