sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改bug

Browse Source
This commit is contained in:
shirlwang
2025-11-19 18:10:28 +08:00
parent fba4723dda
commit 44831b6f6f
8 changed files with 83 additions and 1091 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
components/CustomTabBar/CustomTabBar.vue
View File

@@ -1,345 +0,0 @@
<template>
<view class="custom-tabbar">
<view
class="tabbar-item"
v-for="(item, index) in tabbarList"
:key="index"
@click.stop="switchTab(item, index)"
@tap.stop="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';
import { checkLoginAndNavigate } from '@/utils/loginHelper';
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 {
// 求职者用户（包括未登录状态）：显示招聘会
// H5端隐藏招聘会
// #ifndef H5
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,
});
// #endif
}
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) => {
console.log('switchTab called', item, index);
// 检查是否为需要登录的页面
const loginRequiredPages = [
'/pages/job/publishJob',
'/pages/mine/mine',
'/pages/mine/company-mine'
];
if (loginRequiredPages.includes(item.path)) {
// 检查用户是否已登录
const token = uni.getStorageSync('token') || '';
const hasLogin = userStore.hasLogin;
if (!token || !hasLogin) {
// 未登录，根据平台类型跳转到对应的登录页面
checkLoginAndNavigate();
return; // 不进行页面跳转
}
// 已登录，处理特定页面的逻辑
if (item.path === '/pages/job/publishJob') {
// 检查企业信息是否完整
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
const storeUserInfo = userInfo.value || {};
const currentUserInfo = storeUserInfo.id ? storeUserInfo : cachedUserInfo;
// 判断企业信息字段company是否为null或undefined
if (!currentUserInfo.company || currentUserInfo.company === null) {
// 企业信息为空，跳转到企业信息补全页面
uni.navigateTo({
url: '/pages/complete-info/company-info',
});
} else {
// 企业信息完整，跳转到发布岗位页面
uni.navigateTo({
url: '/pages/job/publishJob',
});
}
currentItem.value = item.id;
return;
}
if (item.path === '/pages/mine/mine') {
// 根据用户类型跳转到不同的"我的"页面
const cachedUserInfo = uni.getStorageSync('userInfo') || {};
const storeIsCompanyUser = userInfo.value?.isCompanyUser;
const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
// 获取用户类型
const userType = Number(storeIsCompanyUser !== undefined ? storeIsCompanyUser : (cachedIsCompanyUser !== undefined ? cachedIsCompanyUser : 1));
let targetPath = '/pages/mine/mine'; // 默认求职者页面
if (userType === 0) {
// 企业用户，跳转到企业我的页面
targetPath = '/pages/mine/company-mine';
} else {
// 求职者或其他用户类型，跳转到普通我的页面
targetPath = '/pages/mine/mine';
}
// 跳转到对应的页面
uni.navigateTo({
url: targetPath,
});
currentItem.value = item.id;
return;
}
}
// 判断是否为 tabBar 页面
const tabBarPages = [
'/pages/index/index',
'/pages/careerfair/careerfair',
'/pages/chat/chat',
'/pages/msglog/msglog',
'/pages/mine/mine'
];
if (tabBarPages.includes(item.path)) {
// TabBar 页面使用 redirectTo 避免页面栈溢出
uni.redirectTo({
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: 9999;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
pointer-events: auto;
}
.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;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.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>

234
components/tabbar/midell-box.vue
View File

@@ -1,234 +0,0 @@
<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 > 0">{{ 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, onMounted, computed, watch, nextTick } 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);
// 监听用户类型变化，重新生成tabbar配置
watch(() => userInfo.value?.isCompanyUser, (newIsCompanyUser, oldIsCompanyUser) => {
console.log('midell-box用户类型变化监听:', { newIsCompanyUser, oldIsCompanyUser, userInfo: userInfo.value });
if (newIsCompanyUser !== oldIsCompanyUser) {
console.log('用户类型发生变化，重新生成tabbar:', newIsCompanyUser);
// tabbarList是computed，会自动重新计算
// 强制触发响应式更新
nextTick(() => {
console.log('tabbar配置已更新:', tabbarList.value);
});
}
}, { immediate: true });
// 监听用户信息变化（包括登录状态）
watch(() => userInfo.value, (newUserInfo, oldUserInfo) => {
console.log('midell-box用户信息变化监听:', { newUserInfo, oldUserInfo });
if (newUserInfo !== oldUserInfo) {
console.log('用户信息发生变化，重新生成tabbar');
// 强制触发响应式更新
nextTick(() => {
console.log('tabbar配置已更新:', tabbarList.value);
});
}
}, { immediate: true, deep: true });
// 生成tabbar配置的函数
const generateTabbarList = () => {
const baseItems = [
{
id: 0,
text: '职位2',
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: '消息2',
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,
},
];
// 根据用户类型添加不同的导航项，未登录时默认为求职者
const userType = userInfo.value?.isCompanyUser !== undefined ? userInfo.value.isCompanyUser : 1;
if (userType === 0) {
// 企业用户：显示发布岗位，隐藏招聘会
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();
});
onMounted(() => {
// 自定义TabBar不需要调用hideTabBar，因为已经在pages.json中设置了custom: true
// uni.hideTabBar(); // 移除这行，避免在自定义TabBar模式下调用
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 页面使用 redirectTo 避免页面栈溢出
uni.redirectTo({
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>