40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<template>
|
|
<div v-if="route.name !== 'cart.show'" class="fixed right-2 bottom-30 z-50 opacity-90">
|
|
<div class="indicator">
|
|
<span class="indicator-item indicator-top indicator-start badge badge-secondary">{{ cart.productsCount }}</span>
|
|
<button class="btn btn-primary btn-lg btn-circle" @click="openCart">
|
|
<span v-if="cart.isLoading" class="loading loading-spinner"></span>
|
|
<template v-else>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
|
</svg>
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted} from "vue";
|
|
import {useCartStore} from "@/stores/CartStore.js";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
|
|
const cart = useCartStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
function openCart() {
|
|
window.Telegram.WebApp.HapticFeedback.selectionChanged();
|
|
router.push({name: 'cart.show'});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await cart.getProducts();
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |