42 lines
1.5 KiB
Plaintext
42 lines
1.5 KiB
Plaintext
<template>
|
||
<!--
|
||
使用组件库 x-tabbar。
|
||
- out-index=-1：关闭中间凸起（设计稿为平底导航）
|
||
- position=relative：x-tabbar 默认 position:fixed 会脱离文档流，
|
||
导致页面内容被底栏遮住。改成 relative 后它会占位，页面无需再手动预留高度。
|
||
-->
|
||
<x-tabbar :list="tabs" :active-index="active" :out-index="-1" position="relative" :is-canvas-render="false"
|
||
bg-color="#FFFFFF" dark-bg-color="#FFFFFF" color="#9CA3AF" selected-color="#2563EB" font-size="26rpx"
|
||
icon-size="48rpx" border-color="#F3F4F6" :show-top-border="true" @click="onClick">
|
||
</x-tabbar>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { computed } from 'vue'
|
||
import { hrSession, currentTabs, currentTabPages } from '@/utils/role.uts'
|
||
import { TABBAR_ITEM_INFO } from '@/uni_modules/tmx-ui/interface.uts'
|
||
|
||
/**
|
||
* 底部导航
|
||
* 双角色核心：救援人员端 3 Tab / 仓管人员端 5 Tab，切换角色后自动换装。
|
||
* 始终显式传 list / activeIndex，不依赖 tmx-ui 全局 TabBar 状态，避免多页面互相干扰。
|
||
*/
|
||
const props = defineProps({
|
||
/** 当前选中的 Tab 下标 */
|
||
active : { type: Number, default: 0 }
|
||
})
|
||
|
||
const tabs = computed(() : TABBAR_ITEM_INFO[] => {
|
||
// 依赖 hrSession.role，角色变化时自动刷新
|
||
const role = hrSession.role
|
||
return currentTabs()
|
||
})
|
||
|
||
function onClick(index : number) : void {
|
||
if (index == props.active) { return }
|
||
const pages = currentTabPages()
|
||
if (index < 0 || index >= pages.length) { return }
|
||
uni.reLaunch({ url: pages[index] })
|
||
}
|
||
</script>
|