96 lines
3.0 KiB
Markdown
96 lines
3.0 KiB
Markdown
|
# 用户类型导航功能实现说明
|
|||
|
|
|
|||
|
|
## 功能概述
|
|||
|
|
|
|||
|
|
根据用户类型动态显示不同的底部导航栏：
|
|||
|
|
- **企业用户（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` - 添加页面配置
|