ks-app-employment-service/components/tabbar/midell-box.vue

<template>
    <view class="tabbar_container">
        <view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
            <view
                class="item-top"
                :class="[
                    item.centerItem ? 'center-item-img ' : '',
                    item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
                ]"
            >
                <image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
            </view>
            <view class="badge" v-if="item.badge">{{ item.badge }}</view>
            <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
                <text>{{ item.text }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, defineProps, onMounted, computed } from 'vue';
import { useReadMsg } from '@/stores/useReadMsg';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';

const props = defineProps({
    currentpage: {
        type: Number,
        required: true,
        default: 0,
    },
});

const readMsg = useReadMsg();
const { userInfo } = storeToRefs(useUserStore());
const currentItem = ref(0);

// 根据用户类型生成不同的导航栏配置
const tabbarList = computed(() => {
    const baseItems = [
        {
            id: 0,
            text: '首页',
            path: '/pages/index/index',
            iconPath: '../../static/tabbar/calendar.png',
            selectedIconPath: '../../static/tabbar/calendared.png',
            centerItem: false,
            badge: readMsg.badges[0].count,
        },
        {
            id: 2,
            text: '',
            path: '/pages/chat/chat',
            iconPath: '../../static/tabbar/logo3.png',
            selectedIconPath: '../../static/tabbar/logo3.png',
            centerItem: true,
            badge: readMsg.badges[2].count,
        },
        {
            id: 3,
            text: '消息',
            path: '/pages/msglog/msglog',
            iconPath: '../../static/tabbar/chat4.png',
            selectedIconPath: '../../static/tabbar/chat4ed.png',
            centerItem: false,
            badge: readMsg.badges[3].count,
        },
        {
            id: 4,
            text: '我的',
            path: '/pages/mine/mine',
            iconPath: '../../static/tabbar/mine.png',
            selectedIconPath: '../../static/tabbar/mined.png',
            centerItem: false,
            badge: readMsg.badges[4].count,
        },
    ];

    // 根据用户类型添加不同的导航项
    const userType = userInfo.value?.userType || 0;
    
    if (userType === 0) {
        // 企业用户：显示发布岗位，隐藏招聘会
        baseItems.splice(1, 0, {
            id: 1,
            text: '发布岗位',
            path: '/pages/job/publishJob',
            iconPath: '../../static/tabbar/publish-job.svg',
            selectedIconPath: '../../static/tabbar/publish-job-selected.svg',
            centerItem: false,
            badge: 0,
        });
    } else {
        // 普通用户、网格员、政府人员：显示招聘会
        baseItems.splice(1, 0, {
            id: 1,
            text: '招聘会',
            path: '/pages/careerfair/careerfair',
            iconPath: '../../static/tabbar/post.png',
            selectedIconPath: '../../static/tabbar/posted.png',
            centerItem: false,
            badge: readMsg.badges[1].count,
        });
    }

    return baseItems;
});

onMounted(() => {
    uni.hideTabBar();
    currentItem.value = props.currentpage;
});

const changeItem = (item) => {
    // 判断是否为 tabBar 页面
    const tabBarPages = [
        '/pages/index/index',
        '/pages/careerfair/careerfair', 
        '/pages/chat/chat',
        '/pages/msglog/msglog',
        '/pages/mine/mine'
    ];
    
    if (tabBarPages.includes(item.path)) {
        // tabBar 页面使用 switchTab
        uni.switchTab({
            url: item.path,
        });
    } else {
        // 非 tabBar 页面使用 navigateTo
        uni.navigateTo({
            url: item.path,
        });
    }
};
</script>

<style lang="scss" scoped>
.badge {
    position: absolute;
    top: 4rpx;
    right: 20rpx;
    min-width: 30rpx;
    height: 30rpx;
    background-color: red;
    color: #fff;
    font-size: 18rpx;
    border-radius: 15rpx;
    text-align: center;
    line-height: 30rpx;
    padding: 0 10rpx;
}
.tabbar_container {
    background-color: #ffffff;
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 5rpx 0;
    overflow: hidden;
    // position: fixed;
    // bottom: 0rpx;
    // left: 0rpx;
    // box-shadow: 0 0 5px #999;
    // padding-bottom: env(safe-area-inset-bottom);
    // z-index: 998;
    .tabbar_item {
        width: 33.33%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        color: #5e5f60;
        .item-top {
            width: 44.44rpx;
            height: 44.44rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .item-bottom {
            font-weight: 500;
            font-size: 22rpx;
        }
    }
}
.center-item-img {
    // position: absolute;
    // top: 0rpx;
    // left: 50%;
    // transform: translate(-50%, 0);
    width: 108rpx !important;
    height: 98rpx !important;
}
.item-active {
    color: #256bfa;
}
</style>