feat(spa): add dock

2025-10-22 07:51:59 +03:00
parent 98ee6d9eca
commit 2e699eb0d6
6 changed files with 67 additions and 13 deletions
--- a/spa/src/App.vue
+++ b/spa/src/App.vue
@@ -9,19 +9,52 @@
          <component :is="Component" :key="route.fullPath"/>
        </KeepAlive>
      </RouterView>
+
      <CartButton v-if="settings.store_enabled"/>
+
+      <div
+          v-if="isAppDockShown"
+          class="app-dock dock"
+      >
+        <RouterLink :to="{name: 'home'}" :class="{'dock-active': route.name === 'home'}">
+          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
+          <span class="dock-label">Главная</span>
+        </RouterLink>
+
+        <RouterLink :to="{name: 'search'}" :class="{'dock-active': route.name === 'search'}">
+          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+          </svg>
+          <span class="dock-label">Поиск</span>
+        </RouterLink>
+
+        <RouterLink
+            v-if="settings.store_enabled"
+            :to="{name: 'cart'}"
+            :class="{'dock-active': route.name === 'cart'}"
+        >
+          <div class="indicator">
+            <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
+            <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <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>
+          </div>
+          <span class="dock-label">Корзина</span>
+        </RouterLink>
+      </div>
    </section>
  </div>
 </template>

 <script setup>
-import {ref, watch} from "vue";
+import {computed, 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";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import {useCartStore} from "@/stores/CartStore.js";
+import CartButton from "@/components/CartButton.vue";

 const tg = useMiniApp();
 const platform = ref();
@@ -34,9 +67,26 @@ const router = useRouter();
 const route = useRoute();
 const settings = useSettingsStore();
 const filtersStore = useProductFiltersStore();
+const cart = useCartStore();
 const backButton = window.Telegram.WebApp.BackButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;

+const routesToHideAppDock = [
+    'product.show',
+    'checkout',
+    'order_created',
+];
+
+const isAppDockShown = computed(() => {
+  // Скрывать, если маршрут в списке скрываемых
+  // или если мы в корзине с товарами
+  const shouldHide =
+      routesToHideAppDock.includes(route.name) ||
+      (route.name === 'cart' && cart.productsCount > 0);
+
+  return !shouldHide;
+});
+
 function navigateBack() {
  haptic.impactOccurred('light');
  router.back();
--- a/spa/src/components/CartButton.vue
+++ b/spa/src/components/CartButton.vue
@@ -24,7 +24,7 @@ const router = useRouter();
 const route = useRoute();

 const isCartBtnShow = computed(() => {
-  return route.name !== 'cart' && route.name !== 'checkout' && route.name !== 'order_created' && route.name !== 'filters';
+  return route.name === 'product.show';
 });


--- a/spa/src/style.css
+++ b/spa/src/style.css
@@ -52,6 +52,11 @@ html {
    color: white;
 }

+.app-dock {
+    padding-bottom: var(--tg-safe-area-inset-bottom);
+    height: calc(64px + var(--tg-safe-area-inset-bottom));
+}
+
 .swiper-pagination-bullets > .swiper-pagination-bullet {
    background-color: red;
    color: red;
--- a/spa/src/views/Cart.vue
+++ b/spa/src/views/Cart.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
-    <h2 class="text-2xl">
+    <h2 class="text-2xl text-center">
      Корзина
      <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
    </h2>
@@ -119,7 +119,7 @@
        </div>

        <button
-            class="btn btn-primary"
+            class="btn btn-primary select-none"
            :disabled="cart.canCheckout === false"
            @click="goToCheckout"
        >
@@ -132,8 +132,9 @@
        v-else
        class="text-center rounded-2xl"
    >
+      <div class="text-5xl mb-4">🛒</div>
      <p class="text-lg mb-3">Ваша корзина пуста</p>
-      <RouterLink class="btn btn-primary" to="/">Начать покупки.</RouterLink>
+      <RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
    </div>
  </div>
 </template>
--- a/spa/src/views/Home.vue
+++ b/spa/src/views/Home.vue
@@ -2,12 +2,11 @@
  <div ref="goodsRef" class="pb-10">
    <CategoriesInline/>

-    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 5px);">
-      <div class="floating-panel bg-base-200 flex justify-between p-2 shadow-md">
-        <button @click="showFilters" class="btn mr-3">
-          <IconFunnel/>
+    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 80px);">
+      <div class="flex justify-center">
+        <button @click="showFilters" class="btn shadow-xl">
+          <IconFunnel/> Фильтры
        </button>
-        <SearchInput/>
      </div>
    </div>

@@ -24,7 +23,6 @@
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
 import CategoriesInline from "../components/CategoriesInline.vue";
-import SearchInput from "@/components/SearchInput.vue";
 import {onActivated, onMounted, ref, toRaw} from "vue";
 import IconFunnel from "@/components/Icons/IconFunnel.vue";
 import {useRouter} from "vue-router";
--- a/spa/src/views/Search.vue
+++ b/spa/src/views/Search.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
-    <h2 class="text-2xl mb-3">Поиск</h2>
+    <h2 class="text-2xl mb-5 text-center">Поиск</h2>

    <div class="w-full">
      <label class="input w-full">