карта ПВЗ

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="delivery">
+    <div class="delivery__sidebar">
+      <div
+        v-for="point in data?.points"
+        :key="point.id"
+        class="pickup-point-item"
+        @click="onPickupClick(point)"
+      >
+        <h3>Yandex</h3>
+        {{ `${point?.address?.street} ${point?.address?.house}` }}
+        <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
+      </div>
+    </div>
+    <PvzMap ref="mapRef" :pickup-points="data?.points" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import PvzMap from '~/components/PvzMap.vue'
+
+const { data } = useFetch('/api/yandex')
+
+const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
+
+const onPickupClick = (point: any) => {
+  const lat = point?.position?.latitude
+  const lon = point?.position?.longitude
+  if (typeof lat === 'number' && typeof lon === 'number') {
+    mapRef.value?.centerMap(lat, lon)
+  }
+}
+
+definePageMeta({
+  layout: 'checkout',
+})
+</script>
+
+<style lang="scss">
+.delivery {
+  display: flex;
+  flex-direction: row;
+
+  &__sidebar {
+    width: 410px;
+    height: calc(100dvh - 54px);
+    flex-shrink: 0;
+    overflow-y: auto;
+  }
+}
+
+.pickup-point-item {
+  position: relative;
+  width: 400px;
+  height: 100px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &__action {
+    position: absolute;
+    right: 20px;
+    top: 40px;
+  }
+}
+</style>

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>