|
@@ -41,7 +41,17 @@
|
|
|
:class="{ 'provider-bottom-nav-item--active': isNavItemActive(item) }"
|
|
:class="{ 'provider-bottom-nav-item--active': isNavItemActive(item) }"
|
|
|
class="provider-bottom-nav-item"
|
|
class="provider-bottom-nav-item"
|
|
|
>
|
|
>
|
|
|
- <q-icon :name="item.icon" class="provider-bottom-nav-icon" />
|
|
|
|
|
|
|
+ <span class="provider-bottom-nav-icon-wrap">
|
|
|
|
|
+ <q-icon :name="item.icon" class="provider-bottom-nav-icon" />
|
|
|
|
|
+ <q-badge
|
|
|
|
|
+ v-if="item.name === 'ScheduleCartPage' && cartCount"
|
|
|
|
|
+ color="secondary"
|
|
|
|
|
+ floating
|
|
|
|
|
+ rounded
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ cartCount }}
|
|
|
|
|
+ </q-badge>
|
|
|
|
|
+ </span>
|
|
|
|
|
|
|
|
<span class="provider-bottom-nav-label font12">
|
|
<span class="provider-bottom-nav-label font12">
|
|
|
{{ item.label }}
|
|
{{ item.label }}
|
|
@@ -57,6 +67,7 @@ import { computed, useTemplateRef, watch } from "vue";
|
|
|
import { useI18n } from "vue-i18n";
|
|
import { useI18n } from "vue-i18n";
|
|
|
import { useQuasar } from "quasar";
|
|
import { useQuasar } from "quasar";
|
|
|
import { useRoute } from "vue-router";
|
|
import { useRoute } from "vue-router";
|
|
|
|
|
+import { useScheduleCartStore } from "src/stores/scheduleCart";
|
|
|
|
|
|
|
|
defineOptions({
|
|
defineOptions({
|
|
|
name: "MainLayout",
|
|
name: "MainLayout",
|
|
@@ -79,6 +90,10 @@ const navItems = computed(() => [
|
|
|
{ name: "ProfilePage", label: t('nav.profile'), icon: "mdi-account-circle-outline" },
|
|
{ name: "ProfilePage", label: t('nav.profile'), icon: "mdi-account-circle-outline" },
|
|
|
]);
|
|
]);
|
|
|
|
|
|
|
|
|
|
+const cart = useScheduleCartStore();
|
|
|
|
|
+
|
|
|
|
|
+const cartCount = computed(() => cart.items.length);
|
|
|
|
|
+
|
|
|
const isNavItemActive = (item) => route.name === item.name;
|
|
const isNavItemActive = (item) => route.name === item.name;
|
|
|
|
|
|
|
|
const scrollAreaHeight = computed(() => {
|
|
const scrollAreaHeight = computed(() => {
|
|
@@ -182,6 +197,16 @@ watch(
|
|
|
color: #ff00ea;
|
|
color: #ff00ea;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.provider-bottom-nav-icon-wrap {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.provider-bottom-nav-icon-wrap :deep(.q-badge--floating) {
|
|
|
|
|
+ top: -8px;
|
|
|
|
|
+ right: -14px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.provider-bottom-nav-icon {
|
|
.provider-bottom-nav-icon {
|
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
|
line-height: 1;
|
|
line-height: 1;
|