|
|
|
|
@ -18,7 +18,7 @@
|
|
|
|
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
|
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
|
import { getDynamicTabMenus } from '@/utils/permissionMenu'
|
|
|
|
|
import { getTabBarMenus } from '@/utils/permissionMenu'
|
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
|
|
|
|
|
|
const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change'
|
|
|
|
|
@ -42,44 +42,72 @@ const workSelectedIcon = '/static/images/tabbar/work_.png'
|
|
|
|
|
const mineIcon = '/static/images/tabbar/mine.png'
|
|
|
|
|
const mineSelectedIcon = '/static/images/tabbar/mine_.png'
|
|
|
|
|
|
|
|
|
|
const routeMap = {
|
|
|
|
|
'pages/index': 0,
|
|
|
|
|
'pages/report': 1,
|
|
|
|
|
'pages/work': 2,
|
|
|
|
|
'pages/mine': 3
|
|
|
|
|
const dynamicTabIconList = [
|
|
|
|
|
{
|
|
|
|
|
icon: homeIcon,
|
|
|
|
|
selectedIcon: homeSelectedIcon
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: reportIcon,
|
|
|
|
|
selectedIcon: reportSelectedIcon
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: workIcon,
|
|
|
|
|
selectedIcon: workSelectedIcon
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
function normalizeRoute(path = '') {
|
|
|
|
|
return String(path || '').trim().replace(/^\/+/, '')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resolveTabIcons(path, index) {
|
|
|
|
|
const route = normalizeRoute(path)
|
|
|
|
|
if (route === 'pages/index') {
|
|
|
|
|
return {
|
|
|
|
|
icon: homeIcon,
|
|
|
|
|
selectedIcon: homeSelectedIcon
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (route === 'pages/report') {
|
|
|
|
|
return {
|
|
|
|
|
icon: reportIcon,
|
|
|
|
|
selectedIcon: reportSelectedIcon
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (route === 'pages/work') {
|
|
|
|
|
return {
|
|
|
|
|
icon: workIcon,
|
|
|
|
|
selectedIcon: workSelectedIcon
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return dynamicTabIconList[index % dynamicTabIconList.length]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getCurrentActiveIndex() {
|
|
|
|
|
const pages = getCurrentPages()
|
|
|
|
|
if (pages && pages.length > 0) {
|
|
|
|
|
const route = pages[pages.length - 1].route
|
|
|
|
|
return routeMap[route] !== undefined ? routeMap[route] : 0
|
|
|
|
|
const currentIndex = tabList.value.findIndex((item) => normalizeRoute(item.path) === route)
|
|
|
|
|
return currentIndex >= 0 ? currentIndex : 0
|
|
|
|
|
}
|
|
|
|
|
return 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const tabList = computed(() => {
|
|
|
|
|
const dynamicMenus = getDynamicTabMenus(menus.value)
|
|
|
|
|
const dynamicTabList = getTabBarMenus(menus.value)
|
|
|
|
|
.map((menu, index) => {
|
|
|
|
|
const icons = resolveTabIcons(menu.path, index)
|
|
|
|
|
return {
|
|
|
|
|
text: String(menu.name || menu.enName || '').trim() || `菜单${index + 1}`,
|
|
|
|
|
icon: icons.icon,
|
|
|
|
|
selectedIcon: icons.selectedIcon,
|
|
|
|
|
path: menu.path
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
text: t('nav.home'),
|
|
|
|
|
icon: homeIcon,
|
|
|
|
|
selectedIcon: homeSelectedIcon,
|
|
|
|
|
path: '/pages/index'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: dynamicMenus[0]?.name || t('tab.report'),
|
|
|
|
|
icon: reportIcon,
|
|
|
|
|
selectedIcon: reportSelectedIcon,
|
|
|
|
|
path: '/pages/report'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: dynamicMenus[1]?.name || dynamicMenus[0]?.name || t('tab.work'),
|
|
|
|
|
icon: workIcon,
|
|
|
|
|
selectedIcon: workSelectedIcon,
|
|
|
|
|
path: '/pages/work'
|
|
|
|
|
},
|
|
|
|
|
...dynamicTabList,
|
|
|
|
|
{
|
|
|
|
|
text: t('nav.mine'),
|
|
|
|
|
icon: mineIcon,
|
|
|
|
|
|