карты пвз

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>

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,

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}`)
   }
 

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>

layouts/default.vue

@@ -32,15 +32,20 @@
       </UContainer>
     </main>
 
-    <!--    <footer class="footer"> -->
+    <footer class="footer" :class="{ 'footer--hidden': !(route.path === '/cart' && isMobile) }" />
-    <!--      Footer -->
-    <!--    </footer> -->
   </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 {
+.footer {
-  flex: 1;
+  position: fixed;
-  margin-top: 54px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 70px;
+  background-color: #0f172b;
+
+  &--hidden {
+    display: none;
+  }
 }
 
-.footer {
+.main {
-  margin-top: auto;
+  flex: 1;
+  margin-block: 54px 64px;
 }
 </style>

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 {

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>

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 {