Files
ks-app-employment-service/用户类型导航功能说明.md
2025-10-16 16:44:30 +08:00

3.0 KiB
Raw Permalink Blame History

用户类型导航功能实现说明

功能概述

根据用户类型动态显示不同的底部导航栏:

  • 企业用户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. 生产环境

  • 移除测试相关的组件和代码
  • 从后端接口获取真实的用户类型信息

注意事项

  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 - 添加页面配置