From f857c40ca26dd21dd8c0d78571c2ec5e31168cae Mon Sep 17 00:00:00 2001
From: alsaze <veselov@alfabit.com>
Date: Thu, 13 Nov 2025 16:24:10 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D1=8B=20=D0=BF=D0=B2?=
 =?UTF-8?q?=D0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/PayBlock.vue     | 53 ++++++++++++++++++++++++++++++++++++-
 composables/useCart.ts      |  5 ++++
 composables/useCheckout.ts  |  9 ++++---
 layouts/checkout.vue        | 34 +++++++++++++++++++++---
 layouts/default.vue         | 31 ++++++++++++++++------
 pages/cart.vue              |  7 +++--
 pages/checkout/contacts.vue | 10 +++++--
 pages/checkout/summary.vue  | 12 ++++++++-
 8 files changed, 141 insertions(+), 20 deletions(-)

diff --git a/components/PayBlock.vue b/components/PayBlock.vue
index 1cd335e..d67aba9 100644
--- a/components/PayBlock.vue
+++ b/components/PayBlock.vue
@@ -1,6 +1,37 @@
 <template>
   <div>
-    <UPageCard>
+    <teleport
+      v-if="isMobile && isSummary" to="footer"
+    >
+      <UPageCard
+        class="pay-block--mobile"
+        variant="ghost"
+        :ui="{
+          body: 'w-full',
+          footer: 'hidden',
+        }"
+      >
+        <template #body>
+          <div class="d-flex flex-row">
+            <div>
+              <div v-if="cartSum">
+                <ProductPrice :is-headline="false" :price="cartSum" />
+              </div>
+              <div>{{ `${cart?.line_items?.length} шт` }}</div>
+            </div>
+
+            <UButton
+              class="justify-center text-center w-full ml10"
+              size="xl"
+              :label="pay ? 'оформить заказ' : 'перейти к оформлению'"
+              @click="pay ? createOrder() : router.push(`/checkout/delivery`)"
+            />
+          </div>
+        </template>
+      </UPageCard>
+    </teleport>
+
+    <UPageCard v-else>
       <template #body>
         <div>товары {{ `(${cart?.line_items?.length} шт)` }}</div>
         <div v-if="cartSum">
@@ -22,15 +53,23 @@
 
 <script setup lang="ts">
 import type { IBspb } from '~/server/shared/types/bspb'
+import { useMediaQuery } from '@vueuse/core'
 
 defineProps({
   pay: {
     type: Boolean,
     default: false,
   },
+  isSummary: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const router = useRouter()
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
 const { cart, cartSum } = useCart()
 
 const createOrder = async () => {
@@ -50,3 +89,15 @@ const createOrder = async () => {
   window.open(redirectUrl, '_blank')
 }
 </script>
+
+<style lang="scss">
+.pay-block {
+  &--mobile {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+  }
+}
+</style>
diff --git a/composables/useCart.ts b/composables/useCart.ts
index 5ed3cc5..65aa5da 100644
--- a/composables/useCart.ts
+++ b/composables/useCart.ts
@@ -23,6 +23,10 @@ export const useCart = () => {
           cartItem?.variation_id === item?.variation_id), 1)
   }
 
+  const cartRemoveAllItems = () => {
+    cart.value = { line_items: [] }
+  }
+
   const cartProducts = computed(() => cart?.value?.line_items?.map((line_item) => {
     const { productsData } = useProduct(line_item?.variation_id.toString())
     return productsData
@@ -37,6 +41,7 @@ export const useCart = () => {
     cart,
     cartAddItem,
     cartRemoveItem,
+    cartRemoveAllItems,
 
     cartProducts,
     cartSum,
diff --git a/composables/useCheckout.ts b/composables/useCheckout.ts
index c02b2dd..a9ab446 100644
--- a/composables/useCheckout.ts
+++ b/composables/useCheckout.ts
@@ -34,14 +34,17 @@ export const useCheckout = createSharedComposable(() => {
     {
       step: 1,
       title: isMobile.value ? 'mobileDelivery' : 'delivery',
+      route: 'delivery',
     },
     {
       step: 2,
       title: isMobile.value ? 'mobileContacts' : 'contacts',
+      route: 'contacts',
     },
     {
       step: 3,
       title: isMobile.value ? 'mobileSummary' : 'summary',
+      route: 'summary',
     },
   ]
 
@@ -57,7 +60,7 @@ export const useCheckout = createSharedComposable(() => {
     const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
     if (findIndex !== 0) {
       currentCheckoutStep.value = checkoutSteps[findIndex - 1]
-      router.push(`/checkout/${currentCheckoutStep?.value.title}`)
+      router.push(`/checkout/${currentCheckoutStep?.value.route}`)
     }
     else {
       router.push(`/cart`)
@@ -68,12 +71,12 @@ export const useCheckout = createSharedComposable(() => {
     const findIndex = checkoutSteps.findIndex(value => value.step === currentCheckoutStep.value.step)
     if (findIndex + 1 !== checkoutSteps.length) {
       currentCheckoutStep.value = checkoutSteps[findIndex + 1]
-      router.push(`/checkout/${currentCheckoutStep?.value.title}`)
+      router.push(`/checkout/${currentCheckoutStep?.value.route}`)
     }
   }
 
   function setStep(pathName: string) {
-    currentCheckoutStep.value = checkoutSteps.find(value => value.title === pathName) || checkoutSteps[0]
+    currentCheckoutStep.value = checkoutSteps.find(value => value.route === pathName) || checkoutSteps[0]
     router.push(`/checkout/${pathName}`)
   }
 
diff --git a/layouts/checkout.vue b/layouts/checkout.vue
index a09fe9e..323f38c 100644
--- a/layouts/checkout.vue
+++ b/layouts/checkout.vue
@@ -12,19 +12,28 @@
       </div>
     </header>
 
-    <main class="main">
+    <main class="main" :style="showFooter ? 'margin-bottom: 54px' : 'margin-bottom: 0'">
       <UContainer class="container">
         <slot />
       </UContainer>
     </main>
+
+    <footer class="footer" :class="{ 'footer--hidden': !showFooter }" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useCheckout } from '../composables/useCheckout'
+import { useMediaQuery } from '@vueuse/core'
+import { useCheckout } from '~/composables/useCheckout'
+
+const route = useRoute()
+const { t } = useI18n()
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
+const showFooter = computed(() => route.path !== '/checkout/delivery' && isMobile.value)
 
 const { previewStep, currentCheckoutStep, checkoutSteps } = useCheckout()
-const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
@@ -63,8 +72,27 @@ const { t } = useI18n()
   }
 }
 
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
+}
+
 .main {
   flex: 1;
   margin-top: 54px;
+  margin-bottom: 64px;
+
+  &__hide-footer {
+    margin-bottom: 0 !important;
+  }
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8c08e2b..9ccfaa0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -32,15 +32,20 @@
       </UContainer>
     </main>
 
-    <!--    <footer class="footer"> -->
-    <!--      Footer -->
-    <!--    </footer> -->
+    <footer class="footer" :class="{ 'footer--hidden': !(route.path === '/cart' && isMobile) }" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+const route = useRoute()
 const router = useRouter()
 const { cart } = useCart()
+
+const isMobile = useMediaQuery('(max-width: 1280px)', {
+  ssrWidth: 768,
+})
 </script>
 
 <style lang="scss" scoped>
@@ -106,12 +111,22 @@ const { cart } = useCart()
   }
 }
 
-.main {
-  flex: 1;
-  margin-top: 54px;
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
 }
 
-.footer {
-  margin-top: auto;
+.main {
+  flex: 1;
+  margin-block: 54px 64px;
 }
 </style>
diff --git a/pages/cart.vue b/pages/cart.vue
index 0fe4f37..b8c2272 100644
--- a/pages/cart.vue
+++ b/pages/cart.vue
@@ -9,7 +9,7 @@
       </div>
     </div>
 
-    <PayBlock />
+    <PayBlock :is-summary="true" />
   </div>
 </template>
 
@@ -18,7 +18,7 @@ import { useCart } from '~/composables'
 import PayBlock from '../components/PayBlock.vue'
 
 const route = useRoute()
-const { cart } = useCart()
+const { cart, cartRemoveAllItems } = useCart()
 const { checkoutContacts, checkoutPickupPoint } = useCheckout()
 
 onMounted(async () => {
@@ -46,6 +46,8 @@ onMounted(async () => {
       status: 'processing',
     },
   })
+
+  cartRemoveAllItems()
 })
 </script>
 
@@ -63,6 +65,7 @@ onMounted(async () => {
   @include mobile {
     margin-top: 20px;
     flex-direction: column;
+    padding-inline: 16px;
   }
 
   &__items {
diff --git a/pages/checkout/contacts.vue b/pages/checkout/contacts.vue
index d224fe9..7382e31 100644
--- a/pages/checkout/contacts.vue
+++ b/pages/checkout/contacts.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="contacts" @submit.prevent="onSubmit">
+  <form v-if="checkoutContacts" class="contacts" @submit.prevent="onSubmit">
     <div>
       <UInput
         id="name"
@@ -138,7 +138,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useCheckout } from '../../composables/useCheckout'
+import { useCheckout } from '~/composables/useCheckout'
 
 const { checkoutContacts, setCheckoutContacts, nextStep } = useCheckout()
 
@@ -199,11 +199,17 @@ definePageMeta({
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .contacts {
   margin-inline: auto;
   max-width: 400px;
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  @include mobile {
+    padding-inline: 10px;
+  }
 }
 </style>
diff --git a/pages/checkout/summary.vue b/pages/checkout/summary.vue
index d5edb58..aaf4237 100644
--- a/pages/checkout/summary.vue
+++ b/pages/checkout/summary.vue
@@ -58,7 +58,9 @@
       </div>
     </div>
 
-    <PayBlock pay />
+    <ClientOnly>
+      <PayBlock pay :is-summary="true" />
+    </ClientOnly>
   </div>
 </template>
 
@@ -85,10 +87,18 @@ definePageMeta({
   flex-direction: row;
   justify-content: space-between;
 
+  @include mobile {
+    flex-direction: column;
+  }
+
   &__info {
     display: flex;
     flex-direction: column;
     gap: 16px;
+
+    @include mobile {
+      margin-bottom: 26px;
+    }
   }
 
   &__items {