карта ПВЗ

pages/cart.vue

@@ -14,7 +14,7 @@
         <div>{{ `Товары: ${cart?.line_items?.length}` }}</div>
         <div>{{ `Сумма: ${cart?.line_items?.length}` }}</div>
 
-        <UButton class="w-100 d-flex" @click="createOrder">
+        <UButton class="w-100 d-flex" @click="router.push(`/checkout/delivery`)">
           Перейти к оформлению
         </UButton>
       </div>
@@ -23,24 +23,10 @@
 </template>
 
 <script setup lang="ts">
-import type { IBspb } from '~/server/shared/types/bspb'
-import { usePostOrdersCreate } from '~/api/mutations/wp/usePostOrdersCreate'
 import { useCart } from '~/composables'
 
 const router = useRouter()
 const { cart } = useCart()
-const { mutateAsync } = usePostOrdersCreate()
-
-const createOrder = async () => {
-  router.push(`/order/delivery`)
-
-  await mutateAsync({ line_items: cart.value.line_items })
-
-  const { data } = await useFetch<IBspb>('/api/bspb')
-
-  const redirectUrl = `${data?.value?.order?.hppUrl}?orderId=${data?.value?.order?.id}&password=${data.value?.order?.password}`
-  window.open(redirectUrl, '_blank')
-}
 </script>
 
 <style lang="scss">

pages/checkout/contacts.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="contacts">
+    <UInput
+      v-model="name"
+      size="xl"
+      placeholder=" "
+      :ui="{ base: 'peer' }"
+      class="relative"
+    >
+      <label
+        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+          name
+            ? '-top-3 text-sm text-highlighted font-medium'
+            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+        ]"
+      >
+        <span class="inline-flex bg-default px-1">Имя</span>
+      </label>
+    </UInput>
+
+    <UInput
+      v-model="surname"
+      size="xl"
+      placeholder=" "
+      :ui="{ base: 'peer' }"
+      class="relative"
+    >
+      <label
+        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+          surname
+            ? '-top-3 text-sm text-highlighted font-medium'
+            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+        ]"
+      >
+        <span class="inline-flex bg-default px-1">Фамилия</span>
+      </label>
+    </UInput>
+
+    <UInput
+      v-model="phone"
+      v-maska="'+7 (###) ###-##-##'"
+      size="xl"
+      placeholder=" "
+      :ui="{ base: 'peer' }"
+      class="relative"
+    >
+      <label
+        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+          phone
+            ? '-top-3 text-sm text-highlighted font-medium'
+            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+        ]"
+      >
+        <span class="inline-flex bg-default px-1">телефон</span>
+      </label>
+    </UInput>
+
+    <UInput
+      v-model="email"
+      size="xl"
+      placeholder=" "
+      :ui="{ base: 'peer' }"
+      class="relative"
+      trailing-icon="i-lucide-at-sign"
+    >
+      <label
+        class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
+          email
+            ? '-top-3 text-sm text-highlighted font-medium'
+            : 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
+        ]"
+      >
+        <span class="inline-flex bg-default px-1">email</span>
+      </label>
+    </UInput>
+
+    <UButton
+      size="xl"
+      label="продолжить"
+      class="justify-center text-center"
+      @click="nextStep"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useCheckout } from '../../composables/useCheckout'
+
+const name = ref('')
+const surname = ref('')
+const phone = ref('')
+const email = ref('')
+
+const { nextStep } = useCheckout()
+
+definePageMeta({
+  layout: 'checkout',
+})
+</script>
+
+<style lang="scss">
+.contacts {
+  margin-inline: auto;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

pages/checkout/delivery.vue

@@ -11,7 +11,6 @@
         {{ `${point?.address?.street} ${point?.address?.house}` }}
         <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
       </div>
-      <pre />
     </div>
     <PvzMap ref="mapRef" :pickup-points="data?.points" />
   </div>
@@ -32,6 +31,10 @@ const onPickupClick = (point: any) => {
     mapRef.value?.centerMap(lat, lon)
   }
 }
+
+definePageMeta({
+  layout: 'checkout',
+})
 </script>
 
 <style lang="scss">

pages/checkout/summary.vue

@@ -0,0 +1,30 @@
+<template>
+  <UButton label="СОздать ОредЕр" @click="createOrder" />
+</template>
+
+<script setup lang="ts">
+import type { IBspb } from '~/server/shared/types/bspb'
+import { usePostOrdersCreate } from '~/api/mutations/wp/usePostOrdersCreate'
+import { useCart } from '~/composables'
+
+const router = useRouter()
+const { cart } = useCart()
+const { mutateAsync } = usePostOrdersCreate()
+
+const createOrder = async () => {
+  await mutateAsync({ line_items: cart.value.line_items })
+
+  const { data } = await useFetch<IBspb>('/api/bspb')
+
+  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 scoped lang="scss">
+
+</style>

pages/order/contacts.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss"></style>

pages/order/summary.vue

@@ -1,10 +0,0 @@
-<template>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>