|
|
|
|
@ -4,11 +4,13 @@
|
|
|
|
|
:fixed="true" :placeholder="true" :border="false" @change="handleChange" zIndex="1000">
|
|
|
|
|
<up-tabbar-item v-for="(item, index) in tabList" :key="index" :text="item.text" :name="index">
|
|
|
|
|
<template #active-icon>
|
|
|
|
|
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="24" :color="activeColor" />
|
|
|
|
|
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="activeColor" />
|
|
|
|
|
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="activeColor"></u-icon>
|
|
|
|
|
<image v-else :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
|
|
|
|
|
</template>
|
|
|
|
|
<template #inactive-icon>
|
|
|
|
|
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="24" :color="inactiveColor" />
|
|
|
|
|
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="inactiveColor" />
|
|
|
|
|
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="inactiveColor"></u-icon>
|
|
|
|
|
<image v-else :src="item.icon" class="tabbar-icon" mode="widthFix" />
|
|
|
|
|
</template>
|
|
|
|
|
</up-tabbar-item>
|
|
|
|
|
@ -21,44 +23,18 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
|
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
|
import { getTabBarMenus } from '@/utils/permissionMenu'
|
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
|
|
|
|
|
|
const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change'
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
const { menus } = storeToRefs(userStore)
|
|
|
|
|
|
|
|
|
|
const inactiveColor = '#666666'
|
|
|
|
|
const activeColor = '#1a3a5c'
|
|
|
|
|
const activeColor = '#409eff'
|
|
|
|
|
|
|
|
|
|
const activeIndex = ref(0)
|
|
|
|
|
const tabbarVisible = ref(true)
|
|
|
|
|
|
|
|
|
|
const homeIcon = '/static/images/tabbar/home.png'
|
|
|
|
|
const homeSelectedIcon = '/static/images/tabbar/home_.png'
|
|
|
|
|
const reportIcon = '/static/images/tabbar/report.png'
|
|
|
|
|
const reportSelectedIcon = '/static/images/tabbar/report_.png'
|
|
|
|
|
const workIcon = '/static/images/tabbar/work.png'
|
|
|
|
|
const workSelectedIcon = '/static/images/tabbar/work_.png'
|
|
|
|
|
const mineIcon = '/static/images/tabbar/mine.png'
|
|
|
|
|
const mineSelectedIcon = '/static/images/tabbar/mine_.png'
|
|
|
|
|
|
|
|
|
|
const dynamicTabIconList = [
|
|
|
|
|
{
|
|
|
|
|
icon: homeIcon,
|
|
|
|
|
selectedIcon: homeSelectedIcon
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: reportIcon,
|
|
|
|
|
selectedIcon: reportSelectedIcon
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: workIcon,
|
|
|
|
|
selectedIcon: workSelectedIcon
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
function normalizeRoute(path = '') {
|
|
|
|
|
return String(path || '').trim().replace(/^\/+/, '')
|
|
|
|
|
}
|
|
|
|
|
@ -67,34 +43,19 @@ function isUniIcon(icon) {
|
|
|
|
|
return String(icon || '').startsWith('uni-icons:')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isUviewIcon(icon) {
|
|
|
|
|
return String(icon || '').startsWith('uview-plus:')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getUniIconName(icon) {
|
|
|
|
|
return String(icon || '').replace(/^uni-icons:/, '').trim()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 getUviewIconName(icon) {
|
|
|
|
|
return String(icon || '').replace(/^uview-plus:/, '').trim()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resolveTabIconMeta(menu, index) {
|
|
|
|
|
function resolveTabIconMeta(menu) {
|
|
|
|
|
if (isUniIcon(menu?.icon)) {
|
|
|
|
|
return {
|
|
|
|
|
iconType: 'uni-icons',
|
|
|
|
|
@ -102,12 +63,18 @@ function resolveTabIconMeta(menu, index) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const icons = resolveTabIcons(menu?.path, index)
|
|
|
|
|
if (isUviewIcon(menu?.icon)) {
|
|
|
|
|
return {
|
|
|
|
|
iconType: 'uview-plus',
|
|
|
|
|
iconName: getUviewIconName(menu.icon)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
iconType: 'image',
|
|
|
|
|
iconType: '',
|
|
|
|
|
iconName: '',
|
|
|
|
|
icon: icons.icon,
|
|
|
|
|
selectedIcon: icons.selectedIcon
|
|
|
|
|
icon: '',
|
|
|
|
|
selectedIcon: ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -122,11 +89,11 @@ function getCurrentActiveIndex() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const tabList = computed(() => {
|
|
|
|
|
const dynamicTabList = getTabBarMenus(menus.value)
|
|
|
|
|
.map((menu, index) => {
|
|
|
|
|
const iconMeta = resolveTabIconMeta(menu, index)
|
|
|
|
|
return getTabBarMenus(menus.value)
|
|
|
|
|
.map((menu) => {
|
|
|
|
|
const iconMeta = resolveTabIconMeta(menu)
|
|
|
|
|
return {
|
|
|
|
|
text: String(menu.name || menu.enName || '').trim() || `菜单${index + 1}`,
|
|
|
|
|
text: String(menu.name || menu.enName || '').trim(),
|
|
|
|
|
icon: iconMeta.icon,
|
|
|
|
|
selectedIcon: iconMeta.selectedIcon,
|
|
|
|
|
iconType: iconMeta.iconType,
|
|
|
|
|
@ -134,18 +101,6 @@ const tabList = computed(() => {
|
|
|
|
|
path: menu.path
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
...dynamicTabList,
|
|
|
|
|
{
|
|
|
|
|
text: t('nav.mine'),
|
|
|
|
|
icon: mineIcon,
|
|
|
|
|
selectedIcon: mineSelectedIcon,
|
|
|
|
|
iconType: 'image',
|
|
|
|
|
iconName: '',
|
|
|
|
|
path: '/pages/mine'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
@ -217,4 +172,7 @@ watch(() => useUserStore().menus, () => {
|
|
|
|
|
.u-tabbar {
|
|
|
|
|
flex: none !important;
|
|
|
|
|
}
|
|
|
|
|
.u-tabbar-item__text{
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|