ks-app-employment-service/components/CustomTabBar/CustomTabBar.vue

<template>
    <view class="custom-tabbar">
        <view 
            class="tabbar-item" 
            v-for="(item, index) in tabbarList" 
            :key="index"
            @click="switchTab(item, index)"
        >
            <view class="tabbar-icon">
                <image 
                    :src="currentItem === item.id ? item.selectedIconPath : item.iconPath"
                    mode="aspectFit"
                />
            </view>
            <view class="badge" v-if="item.badge && item.badge > 0">{{ item.badge }}</view>
            <view class="tabbar-text" :class="{ 'active': currentItem === item.id }">
                {{ item.text }}
            </view>
        </view>
    </view>
</template>

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

const props = defineProps({
    currentPage: {
        type: Number,
        default: 0
    }
});

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const readMsg = useReadMsg();
const currentItem = ref(props.currentPage);

// 监听props变化
watch(() => props.currentPage, (newPage) => {
    currentItem.value = newPage;
});

// 生成tabbar配置的函数
const generateTabbarList = () => {
    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 || 0,
        },
        {
            id: 2,
            text: 'AI+',
            path: '/pages/chat/chat',
            iconPath: '/static/tabbar/logo3.png',
            selectedIconPath: '/static/tabbar/logo3.png',
            centerItem: true,
            badge: readMsg.badges[2]?.count || 0,
        },
        {
            id: 3,
            text: '消息',
            path: '/pages/msglog/msglog',
            iconPath: '/static/tabbar/chat4.png',
            selectedIconPath: '/static/tabbar/chat4ed.png',
            centerItem: false,
            badge: readMsg.badges[3]?.count || 0,
        },
        {
            id: 4,
            text: '我的',
            path: '/pages/mine/mine',
            iconPath: '/static/tabbar/mine.png',
            selectedIconPath: '/static/tabbar/mined.png',
            centerItem: false,
            badge: readMsg.badges[4]?.count || 0,
        },
    ];

    // 获取用户类型，统一使用isCompanyUser字段（0=企业用户，1=求职者, 3=网格员） 
    // 优先从store获取，如果为空则直接从缓存获取
    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
    
    console.log('完整userInfo对象:', userInfo.value);
    console.log('缓存中的userInfo:', cachedUserInfo);
    
    // 获取isCompanyUser字段
    const storeIsCompanyUser = userInfo.value?.isCompanyUser;
    const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
    
    console.log('store中的isCompanyUser:', storeIsCompanyUser);
    console.log('缓存中的isCompanyUser:', cachedIsCompanyUser);
    
    // 获取用户类型的逻辑：
    // 1. 优先使用store中的isCompanyUser
    // 2. 如果store中没有，使用缓存中的isCompanyUser
    // 3. 最后默认为1（求职者）
    const userType = Number(storeIsCompanyUser !== undefined ? storeIsCompanyUser : (cachedIsCompanyUser !== undefined ? cachedIsCompanyUser : 1));
    if (userType === 0 || userType === 2) {
        // 企业用户：显示发布岗位
        baseItems.splice(1, 0, {
            id: 1,
            text: '发布岗位',
            path: '/pages/job/publishJob',
            iconPath: '/static/tabbar/post.png',
            selectedIconPath: '/static/tabbar/posted.png',
            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 || 0,
        });
    }

    return baseItems;
};

// 根据用户类型生成不同的导航栏配置
const tabbarList = computed(() => {
    return generateTabbarList();
});

// 强制刷新tabbar的方法
const forceRefresh = () => {
    // 触发响应式更新
    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
    const currentUserType = userInfo.value?.isCompanyUser !== undefined ? userInfo.value.isCompanyUser : (cachedUserInfo.isCompanyUser !== undefined ? cachedUserInfo.isCompanyUser : 1);
    console.log('强制刷新tabbar，当前用户类型:', currentUserType);
};

// 监听用户类型变化（只监听isCompanyUser字段）
watch(() => userInfo.value?.isCompanyUser, (newIsCompanyUser, oldIsCompanyUser) => {
    console.log('用户类型变化监听:', { 
        newIsCompanyUser, 
        oldIsCompanyUser, 
        userInfo: userInfo.value 
    });
    if (newIsCompanyUser !== oldIsCompanyUser) {
        console.log('用户类型发生变化，重新生成tabbar:', newIsCompanyUser);
        // 强制触发computed重新计算
        forceRefresh();
    }
}, { immediate: true });

// 监听用户信息变化（包括登录状态）
watch(() => userInfo.value, (newUserInfo, oldUserInfo) => {
    console.log('用户信息变化监听:', { newUserInfo, oldUserInfo });
    if (newUserInfo !== oldUserInfo) {
        console.log('用户信息发生变化，重新生成tabbar');
        // 强制触发computed重新计算
        forceRefresh();
    }
}, { immediate: true, deep: true });

// 切换tab
const switchTab = (item, index) => {
    // 判断是否为 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.navigateTo({
            url: item.path,
        });
    } else {
        // 非 tabBar 页面使用 navigateTo
        uni.navigateTo({
            url: item.path,
        });
    }
    
    currentItem.value = item.id;
};

onMounted(() => {
    currentItem.value = props.currentPage;
    // 调试信息：显示当前用户状态和tabbar配置
    console.log('CustomTabBar mounted, 用户信息:', userInfo.value);
    console.log('当前tabbar配置:', tabbarList.value);
    forceRefresh();
});
</script>

<style lang="scss" scoped>
.custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #e5e5e5;
    display: flex;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 999;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #5E5F60;
    font-size: 22rpx;
    position: relative;
    cursor: pointer;
}

.tabbar-icon {
    width: 44rpx;
    height: 44rpx;
    margin-bottom: 4rpx;
    position: relative;
}

.tabbar-icon image {
    width: 100%;
    height: 100%;
}

.tabbar-text {
    font-size: 20rpx;
    line-height: 1;
    transition: color 0.3s ease;
}

.tabbar-text.active {
    color: #256BFA;
    font-weight: 500;
}

.badge {
    position: absolute;
    top: 4rpx;
    right: 20rpx;
    min-width: 30rpx;
    height: 30rpx;
    background-color: #ff4444;
    color: #fff;
    font-size: 18rpx;
    border-radius: 15rpx;
    text-align: center;
    line-height: 30rpx;
    padding: 0 10rpx;
    transform: scale(0.8);
}

/* 中间按钮特殊样式 */
.tabbar-item:has(.center-item) {
    .tabbar-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 0;
    }
}
</style>