# 用户类型导航功能实现说明 ## 功能概述 根据用户类型动态显示不同的底部导航栏: - **企业用户(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` 测试页面 - 在首页添加了用户类型切换器(可控制显示/隐藏) ## 用户类型定义 ```javascript const userTypes = [ { value: 0, label: '企业用户' }, { value: 1, label: '求职者' }, { value: 2, label: '网格员' }, { value: 3, label: '政府人员' } ]; ``` ## 导航栏配置 ### 企业用户(userType=0) - 首页 - 发布岗位(招聘会导航完全隐藏) - AI助手 - 消息 - 我的 ### 其他用户(userType=1,2,3) - 首页 - 招聘会 - AI助手 - 消息 - 我的 ## 使用方法 ### 1. 切换用户类型 ```javascript // 在组件中切换用户类型 userInfo.value.userType = 0; // 切换到企业用户 uni.setStorageSync('userInfo', userInfo.value); ``` ### 2. 测试功能 - 访问 `/pages/test/userTypeTest` 页面进行测试 - 在首页可以看到用户类型切换器(测试用) ### 3. 生产环境 - 移除测试相关的组件和代码 - 从后端接口获取真实的用户类型信息 ## 注意事项 1. 当前是模拟实现,实际项目中需要从后端接口获取用户类型 2. 发布岗位页面已存在:`/packageA/pages/addPosition/addPosition` 3. 招聘会页面已存在:`/pages/careerfair/careerfair` 4. 测试完成后可以隐藏用户类型切换器 ## 文件修改清单 - `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` - 添加页面配置