265 lines
7.2 KiB
Vue
265 lines
7.2 KiB
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') || {};
|
||
|
||
// 获取isCompanyUser字段
|
||
const storeIsCompanyUser = userInfo.value?.isCompanyUser;
|
||
const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
|
||
|
||
// 获取用户类型的逻辑：
|
||
// 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);
|
||
};
|
||
|
||
// 监听用户类型变化（只监听isCompanyUser字段）
|
||
watch(() => userInfo.value?.isCompanyUser, (newIsCompanyUser, oldIsCompanyUser) => {
|
||
if (newIsCompanyUser !== oldIsCompanyUser) {
|
||
// 强制触发computed重新计算
|
||
forceRefresh();
|
||
}
|
||
}, { immediate: true });
|
||
|
||
// 监听用户信息变化（包括登录状态）
|
||
watch(() => userInfo.value, (newUserInfo, oldUserInfo) => {
|
||
if (newUserInfo !== oldUserInfo) {
|
||
// 强制触发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配置
|
||
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>
|