You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<template>
|
|
<up-tabbar
|
|
:value="activeIndex"
|
|
:activeColor="activeColor"
|
|
:inactiveColor="inactiveColor"
|
|
:safeAreaInsetBottom="true"
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
:border="false"
|
|
@change="handleChange"
|
|
zIndex="100"
|
|
>
|
|
<up-tabbar-item
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
:text="item.text"
|
|
:name="index"
|
|
>
|
|
<template #active-icon>
|
|
<image :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
|
|
</template>
|
|
<template #inactive-icon>
|
|
<image :src="item.icon" class="tabbar-icon" mode="widthFix" />
|
|
</template>
|
|
</up-tabbar-item>
|
|
</up-tabbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, watch } from 'vue'
|
|
import useUserStore from '@/store/modules/user'
|
|
import { storeToRefs } from 'pinia'
|
|
import { getDynamicTabMenus } from '@/utils/permissionMenu'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
const userStore = useUserStore()
|
|
const { menus } = storeToRefs(userStore)
|
|
|
|
const inactiveColor = '#666666'
|
|
const activeColor = '#1a3a5c'
|
|
|
|
const activeIndex = ref(0)
|
|
|
|
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 routeMap = {
|
|
'pages/index': 0,
|
|
'pages/report': 1,
|
|
'pages/work': 2,
|
|
'pages/mine': 3
|
|
}
|
|
|
|
function getCurrentActiveIndex() {
|
|
const pages = getCurrentPages()
|
|
if (pages && pages.length > 0) {
|
|
const route = pages[pages.length - 1].route
|
|
return routeMap[route] !== undefined ? routeMap[route] : 0
|
|
}
|
|
return 0
|
|
}
|
|
|
|
const tabList = computed(() => {
|
|
const dynamicMenus = getDynamicTabMenus(menus.value)
|
|
|
|
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'
|
|
},
|
|
{
|
|
text: t('nav.mine'),
|
|
icon: mineIcon,
|
|
selectedIcon: mineSelectedIcon,
|
|
path: '/pages/mine'
|
|
}
|
|
]
|
|
})
|
|
|
|
onMounted(() => {
|
|
activeIndex.value = getCurrentActiveIndex()
|
|
})
|
|
|
|
function handleChange(index) {
|
|
if (activeIndex.value === index) return
|
|
activeIndex.value = index
|
|
const item = tabList.value[index]
|
|
if (item) {
|
|
uni.reLaunch({
|
|
url: item.path
|
|
})
|
|
}
|
|
}
|
|
|
|
watch(() => useUserStore().menus, () => {
|
|
activeIndex.value = getCurrentActiveIndex()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tabbar-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
</style>
|