карты пвз

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>