3.0 KiB
3.0 KiB
用户类型导航功能实现说明
功能概述
根据用户类型动态显示不同的底部导航栏:
- 企业用户(userType=0):显示"发布岗位"导航,隐藏"招聘会"导航
- 其他用户(userType=1,2,3):显示"招聘会"导航
实现内容
1. 用户信息扩展
- 在
stores/useUserStore.js
中添加了模拟的userType
字段 - 默认设置为企业用户(userType=0)
2. 导航栏组件修改
- 修改了
components/tabbar/midell-box.vue
- 根据
userInfo.userType
动态生成不同的导航配置 - 企业用户显示"发布岗位",其他用户显示"招聘会"
- 修复了跳转逻辑:tabBar页面使用
switchTab
,普通页面使用navigateTo
- 更新了发布岗位图标:使用自定义SVG图标
- 未选中状态:深灰色 (#666666) - 新图标设计
- 选中状态:蓝色 (#256BFA) - 新图标设计
3. 发布岗位页面
- 创建了
pages/job/publishJob.vue
发布岗位页面 - 包含完整的岗位信息表单
- 支持岗位基本信息、薪资待遇、任职要求、岗位描述、联系方式等
4. 测试组件
- 创建了
components/UserTypeSwitcher/UserTypeSwitcher.vue
用于测试 - 创建了
pages/test/userTypeTest.vue
测试页面 - 在首页添加了用户类型切换器(可控制显示/隐藏)
用户类型定义
const userTypes = [
{ value: 0, label: '企业用户' },
{ value: 1, label: '求职者' },
{ value: 2, label: '网格员' },
{ value: 3, label: '政府人员' }
];
导航栏配置
企业用户(userType=0)
- 首页
- 发布岗位(招聘会导航完全隐藏)
- AI助手
- 消息
- 我的
其他用户(userType=1,2,3)
- 首页
- 招聘会
- AI助手
- 消息
- 我的
使用方法
1. 切换用户类型
// 在组件中切换用户类型
userInfo.value.userType = 0; // 切换到企业用户
uni.setStorageSync('userInfo', userInfo.value);
2. 测试功能
- 访问
/pages/test/userTypeTest
页面进行测试 - 在首页可以看到用户类型切换器(测试用)
3. 生产环境
- 移除测试相关的组件和代码
- 从后端接口获取真实的用户类型信息
注意事项
- 当前是模拟实现,实际项目中需要从后端接口获取用户类型
- 发布岗位页面已存在:
/packageA/pages/addPosition/addPosition
- 招聘会页面已存在:
/pages/careerfair/careerfair
- 测试完成后可以隐藏用户类型切换器
文件修改清单
stores/useUserStore.js
- 添加 userType 字段components/tabbar/midell-box.vue
- 动态导航配置pages/job/publishJob.vue
- 发布岗位页面static/tabbar/publish-job.svg
- 发布岗位图标(普通状态)static/tabbar/publish-job-selected.svg
- 发布岗位图标(选中状态)components/UserTypeSwitcher/UserTypeSwitcher.vue
- 测试组件pages/test/userTypeTest.vue
- 测试页面pages/index/components/index-one.vue
- 添加测试组件pages.json
- 添加页面配置