карты пвз

2025-11-10 16:35:00 +03:00
parent 6cd7bd1dec
commit bff6833781
10 changed files with 372 additions and 100 deletions
--- a/pages/cart.vue
+++ b/pages/cart.vue
@@ -19,7 +19,7 @@ import PayBlock from '../components/PayBlock.vue'

 const route = useRoute()
 const { cart } = useCart()
-const { contacts } = useCheckout()
+const { checkoutContacts, checkoutPickupPoint } = useCheckout()

 onMounted(async () => {
  if (!route?.query?.ID)
@@ -32,12 +32,13 @@ onMounted(async () => {
      payment_method_title: 'Оплата по реквизитам',
      set_paid: true,
      billing: {
-        first_name: contacts?.value?.name,
-        last_name: contacts?.value?.surname,
-        phone: contacts?.value?.phone,
-        email: contacts?.value?.email,
-        address_1: 'ул. Ленина, 1',
-        city: 'Москва',
+        first_name: checkoutContacts?.value?.name,
+        last_name: checkoutContacts?.value?.surname,
+        phone: checkoutContacts?.value?.phone,
+        email: checkoutContacts?.value?.email,
+        address_1: checkoutPickupPoint.value?.address?.full_address,
+        postcode: checkoutPickupPoint.value?.address?.postal_code,
+        city: checkoutPickupPoint?.value?.address?.locality,
        country: 'RU',
      },
      transaction_id: route?.query?.ID,
--- a/pages/checkout/contacts.vue
+++ b/pages/checkout/contacts.vue
@@ -140,14 +140,14 @@
 <script lang="ts" setup>
 import { useCheckout } from '../../composables/useCheckout'

-const { contacts, setContacts, nextStep } = useCheckout()
+const { checkoutContacts, setCheckoutContacts, nextStep } = useCheckout()

 const { errors, handleSubmit, defineField } = useForm({
  initialValues: {
-    name: contacts.value.name,
-    surname: contacts.value.surname,
-    phone: contacts.value.phone,
-    email: contacts.value.email,
+    name: checkoutContacts.value.name,
+    surname: checkoutContacts.value.surname,
+    phone: checkoutContacts.value.phone,
+    email: checkoutContacts.value.email,
  },
  validationSchema: {
    name(value: string) {
@@ -189,7 +189,7 @@ const [phone, phoneAttrs] = defineField('phone')
 const [email, emailAttrs] = defineField('email')

 const onSubmit = handleSubmit((values) => {
-  setContacts(values)
+  setCheckoutContacts(values)
  nextStep()
 })

--- a/pages/checkout/delivery.vue
+++ b/pages/checkout/delivery.vue
@@ -1,34 +1,62 @@
 <template>
  <div v-if="coords" class="delivery">
    <div class="delivery__sidebar">
-      <UInput v-model="searchTerm" size="xl" class="w-full" placeholder="pvz" />
+      <DeliveryInfo v-if="isPickupPointSelected" />

-      <div class="delivery__items">
-        <div
-          v-for="point in filteredPvz?.points"
-          :key="point.id"
-          class="pickup-point-item"
-          @click="centerMap(point)"
+      <div v-else class="delivery__search">
+        <UInput
+          v-model="searchTerm"
+          size="xl"
+          class="w-full"
+          placeholder="Выберите пункт выдачи"
+          :ui="{ trailing: 'pe-1' }"
        >
-          <h3>Yandex</h3>
-          {{ `${point?.address?.street} ${point?.address?.house}` }}
-          <Icon class="pickup-point-item__action" name="lucide:chevron-right" />
+          <template v-if="searchTerm?.length" #trailing>
+            <UButton
+              color="neutral"
+              variant="link"
+              size="sm"
+              icon="i-lucide-circle-x"
+              aria-label="Clear input"
+              @click="searchTerm = ''"
+            />
+          </template>
+        </UInput>
+
+        <div class="delivery__items">
+          <div
+            v-for="pickupPoint in filteredPoints"
+            :key="pickupPoint.id"
+            class="pickup-point-card"
+            @click="centerMap(pickupPoint)"
+          >
+            <div class="pickup-point-card__content">
+              <h3>Yandex</h3>
+              <p>{{ `${pickupPoint?.address?.street} ${pickupPoint?.address?.house}` }}</p>
+              <h3>с day month бесплатно</h3>
+            </div>
+            <Icon class="pickup-point-card__action" name="lucide:chevron-right" />
+          </div>
        </div>
      </div>
    </div>

-    <PvzMap ref="mapRef" :pickup-points="yandexPvz?.points" />
+    <PvzMap ref="mapRef" :pickup-points="filteredPoints" />
  </div>
 </template>

 <script setup lang="ts">
+import type { PickupPoint, YandexPvzResponse } from '~/server/shared/types/yandex_pvz'
 import { useGeolocation } from '@vueuse/core'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import DeliveryInfo from '~/components/DeliveryInfo.vue'
 import PvzMap from '~/components/PvzMap.vue'
+import { useCheckout } from '~/composables/useCheckout'

+const { isPickupPointSelected } = useCheckout()
 const { coords } = useGeolocation()
 const mapRef = ref<InstanceType<typeof PvzMap> | null>(null)
-const yandexPvz = ref('')
+const yandexPvz = ref<YandexPvzResponse>()
 const searchTerm = ref('')

 const waitForCoords = () =>
@@ -59,7 +87,7 @@ onMounted(async () => {
  })

  // получения пунктов выдачи города из geo_id
-  const { data: yandexPvzApi } = await useFetch('/api/yandex_pvz', {
+  const { data: yandexPvzApi } = await useFetch<YandexPvzResponse>('/api/yandex_pvz', {
    method: 'POST',
    body: {
      geo_id: yandexLocation?.value?.variants[0]?.geo_id,
@@ -70,18 +98,18 @@ onMounted(async () => {
 })

 // TODO сделать отдельный компонент UISearch
-const filteredPvz = computed(() => {
-  if (!searchTerm.value && searchTerm.value === '')
-    return yandexPvz.value
-
-  const result = yandexPvz?.value?.points?.filter(value => value?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()))
-  return {
-    points: [...result],
+const filteredPoints = computed<PickupPoint[]>(() => {
+  if (!searchTerm.value || searchTerm.value === '') {
+    return yandexPvz.value?.points || []
  }
+
+  return yandexPvz.value?.points?.filter(point =>
+    point?.address?.full_address?.toLowerCase().includes(searchTerm.value.toLowerCase()),
+  ) || []
 })

 const centerMap = (point: any) => {
-  mapRef.value?.centerMap([point?.position?.longitude, point?.position?.latitude])
+  mapRef.value?.centerMap(point)
 }

 definePageMeta({
@@ -90,36 +118,49 @@ definePageMeta({
 </script>

 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .delivery {
  display: flex;
  flex-direction: row;

  &__sidebar {
+    flex-shrink: 0;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
    width: 410px;
-    padding: 24px;
+    padding-inline: 24px;
  }

  &__items {
+    height: calc(100dvh - 54px - 40px - 24px);
    overflow-y: auto;
    flex-shrink: 0;
-    height: calc(100dvh - 54px - 40px - 24px);
  }
 }

-.pickup-point-item {
+.pickup-point-card {
  position: relative;
-  width: 400px;
-  height: 100px;
-  padding-block: 24px;
+  width: 100%;
+  padding: 20px;
  display: flex;
-  flex-direction: column;
+  align-items: center;
  justify-content: space-between;
+  gap: 16px;
  cursor: pointer;

+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
  &__action {
-    position: absolute;
-    right: 20px;
-    top: 40px;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: #999;
  }
 }
 </style>
--- a/pages/checkout/summary.vue
+++ b/pages/checkout/summary.vue
@@ -25,30 +25,7 @@
          />
        </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>
+        <DeliveryInfo :show-full-content="false" />
      </div>

      <div class="space-y-2">
@@ -66,17 +43,17 @@

        <div class="flex items-center gap-2">
          <UIcon name="i-ph-user" class="text-muted-foreground" />
-          <span>{{ contacts?.name }} {{ contacts?.surname }}</span>
+          <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>{{ contacts?.email }}</span>
+          <span>{{ checkoutContacts?.email }}</span>
        </div>

        <div class="flex items-center gap-2">
          <UIcon name="i-ph-phone" class="text-muted-foreground" />
-          <span>{{ contacts?.phone }}</span>
+          <span>{{ checkoutContacts?.phone }}</span>
        </div>
      </div>
    </div>
@@ -90,7 +67,7 @@ import SummaryCartItem from '../../components/cart/SummaryCartItem.vue'
 import PayBlock from '../../components/PayBlock.vue'

 const { cart } = useCart()
-const { contacts, setStep } = useCheckout()
+const { checkoutContacts, setStep } = useCheckout()

 definePageMeta({
  layout: 'checkout',