74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<div class="app-container h-full">
|
|
<header class="app-header w-full" v-if="platform === 'ios'"></header>
|
|
|
|
<section class="safe-top">
|
|
<FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
|
|
<RouterView v-slot="{ Component, route }">
|
|
<Transition name="route" appear>
|
|
<component :is="Component" :key="route.fullPath"/>
|
|
</Transition>
|
|
</RouterView>
|
|
<CartButton v-if="settings.store_enabled"/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, watch} from "vue";
|
|
import {useWebAppViewport} from 'vue-tg';
|
|
import {useMiniApp, FullscreenViewport} from 'vue-tg';
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import CartButton from "@/components/CartButton.vue";
|
|
import {useSettingsStore} from "@/stores/SettingsStore.js";
|
|
|
|
const tg = useMiniApp();
|
|
const platform = ref();
|
|
platform.value = tg.platform;
|
|
|
|
const {disableVerticalSwipes} = useWebAppViewport();
|
|
disableVerticalSwipes();
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const settings = useSettingsStore();
|
|
const backButton = window.Telegram.WebApp.BackButton;
|
|
const haptic = window.Telegram.WebApp.HapticFeedback;
|
|
|
|
function navigateBack() {
|
|
haptic.impactOccurred('light');
|
|
router.back();
|
|
}
|
|
|
|
watch(
|
|
() => route.name,
|
|
() => {
|
|
if (route.name === 'home') {
|
|
backButton.hide();
|
|
backButton.offClick(navigateBack);
|
|
} else {
|
|
backButton.show();
|
|
backButton.onClick(navigateBack);
|
|
}
|
|
},
|
|
{immediate: true}
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* route transitions */
|
|
.route-enter-active,
|
|
.route-leave-active {
|
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
|
}
|
|
|
|
.route-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.route-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
</style> |