gxt_app/components/custom-tabbar/custom-tabbar.uvue

<template>
    <view class="custom-tabbar">
        <view v-for="(item, index) in visibleTabList" :key="index" class="tab-item" @click="handleTabClick(index)">
            <image class="tab-icon" :src="currentVisibleIndex == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
            <text :class="['tab-text', currentVisibleIndex == index ? 'tab-text-active' : '']">
                {{ item.text }}
            </text>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref, computed } from 'vue'

    // Props
    type Props = {
        current?: number
		hide0:number
		hide1:number
		hide2:number
		hide3:number
    }

    const props = withDefaults(defineProps<Props>(), {
        current: 0,
		hide0:1,
		hide1:1,
		hide2:1,
		hide3:1
    })

    // Tab 列表配置
    type TabItem = {
        pagePath: string
        text: string
        iconPath: string
        selectedIconPath: string
    }
	
    const tabList: TabItem[] = [
        {
            pagePath: '/pages/index/index',
            text: '首页',
            iconPath: '/static/images/custom-tabbar/11.png',
            selectedIconPath: '/static/images/custom-tabbar/22.png'
        },
        {
            pagePath: '/pages/order/index',
            text: '工单',
            iconPath: '/static/images/custom-tabbar/33.png',
            selectedIconPath: '/static/images/custom-tabbar/44.png'
        },
		{
		    pagePath: '/pages/worktime/index',
		    text: '工时',
		    iconPath: '/static/images/custom-tabbar/77.png',
		    selectedIconPath: '/static/images/custom-tabbar/88.png'
		},
		{
		    pagePath: '/pages/score/index',
		    text: '工分',
		    iconPath: '/static/images/custom-tabbar/55.png',
		    selectedIconPath: '/static/images/custom-tabbar/66.png'
		}
    ]
	
	// 计算可见的 tab 列表
	const visibleTabList = computed(() => {
	    const hideValues = [props.hide0, props.hide1, props.hide2, props.hide3]
	    return tabList.filter((_, index) => {
	        return index < hideValues.length && hideValues[index] === 1
	    })
	})
	
	// 计算当前选中项在可见列表中的索引
	const currentVisibleIndex = computed(() => {
	    const hideValues = [props.hide0, props.hide1, props.hide2, props.hide3]
	    let visibleIndex = 0
	    
	    for (let i = 0; i < props.current; i++) {
	        // 如果前面的 tab 是可见的，则可见索引增加
	        if (i < hideValues.length && hideValues[i] === 1) {
	            visibleIndex++
	        }
	    }
	    
	    // 检查当前 tab 是否可见
	    if (props.current >= hideValues.length || hideValues[props.current] !== 1) {
	        // 如果当前 tab 不可见，返回第一个可见的 tab 索引
	        return 0
	    }
	    
	    return visibleIndex
	})

    // Tab 点击事件
    const handleTabClick = (index: number): void => {
        // 将可见索引转换回原始索引
        const hideValues = [props.hide0, props.hide1, props.hide2, props.hide3]
        let originalIndex = 0
        let visibleCount = 0
        
        for (let i = 0; i < tabList.length; i++) {
            if (i < hideValues.length && hideValues[i] === 1) {
                if (visibleCount === index) {
                    originalIndex = i
                    break
                }
                visibleCount++
            }
        }
        
        if (originalIndex == props.current) {
            return
        }
        
        const item = tabList[originalIndex]
        uni.redirectTo({
            url: item.pagePath
        })
    }
</script>

<style lang="scss">
    .custom-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: 150rpx;
        background-color: #ffffff;
        border-top: 1rpx solid #e5e5e5;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tab {
        &-item {
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        &-icon {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 8rpx;
        }

        &-text {
            font-size: 24rpx;
            color: #666666;

            &-active {
                color: #0081ff;
            }
        }
    }
</style>