ks-app-employment-service/docs/自定义TabBar使用说明.md

自定义TabBar使用说明

功能概述

本项目实现了基于用户类型的动态自定义TabBar，支持根据用户登录状态和类型显示不同的导航项：

• 未登录状态：默认显示求职者tabbar（职位 + 招聘会 + AI+ + 消息 + 我的）
• 企业用户（userType=0）：显示"发布岗位"导航
• 求职者用户（userType=1,2,3）：显示"招聘会"导航

实现方案

1. 微信小程序原生自定义TabBar

在 custom-tab-bar/ 目录下创建了微信小程序原生自定义TabBar组件：

• index.js - 组件逻辑，根据用户类型动态生成TabBar配置
• index.wxml - 模板文件
• index.wxss - 样式文件
• index.json - 组件配置文件

2. UniApp兼容的自定义TabBar组件

创建了 components/CustomTabBar/CustomTabBar.vue 组件，支持多端兼容：

• 支持微信小程序、H5、APP等多端
• 响应式设计，根据用户类型动态显示
• 支持消息徽章显示
• 支持页面跳转逻辑

3. 配置修改

在 pages.json 中启用了自定义TabBar：

"tabBar": {
    "custom": true,
    // ... 其他配置
}

使用方法

1. 在页面中引入自定义TabBar

<template>
    <view class="page">
        <!-- 页面内容 -->
        
        <!-- 自定义tabbar -->
        <CustomTabBar :currentPage="0" />
    </view>
</template>

2. 用户类型判断

组件会自动从 useUserStore 中获取用户信息，根据用户登录状态和 userInfo.userType 字段判断用户类型：

// 用户类型说明
// 未登录: 默认显示求职者tabbar
// 0: 企业用户 - 显示"发布岗位"
// 1: 求职者 - 显示"招聘会"  
// 2: 网格员 - 显示"招聘会"
// 3: 政府人员 - 显示"招聘会"

3. 动态切换用户类型

当用户登录状态或类型发生变化时，TabBar会自动更新：

// 未登录状态：自动显示求职者tabbar
// 登录后根据用户类型显示对应tabbar

// 切换用户类型
userInfo.value.userType = 1; // 切换到求职者
uni.setStorageSync('userInfo', userInfo.value);

// 登出时清除用户信息，自动回到未登录状态
userStore.logOut(false);

页面配置

已配置的页面

• pages/index/index.vue - 首页（currentPage: 0）
• pages/careerfair/careerfair.vue - 招聘会页面（currentPage: 1）
• pages/chat/chat.vue - AI+页面（currentPage: 2）
• pages/msglog/msglog.vue - 消息页面（currentPage: 3）
• pages/mine/mine.vue - 我的页面（currentPage: 4）

测试页面

• pages/test/tabbar-test.vue - TabBar功能测试页面

技术特点

1. 响应式设计：根据用户类型动态显示不同的导航项
2. 多端兼容：支持微信小程序、H5、APP等平台
3. 消息徽章：支持显示未读消息数量
4. 页面跳转：智能判断tabBar页面和普通页面的跳转方式
5. 用户类型监听：实时监听用户类型变化并更新TabBar

注意事项

1. 确保在 pages.json 中设置了 "custom": true
2. 每个页面的 currentPage 参数需要正确设置
3. 用户类型存储在 userInfo.userType 字段中
4. 组件会自动监听用户类型变化并更新显示

测试方法

1. 访问测试页面：/pages/test/tabbar-test
2. 切换不同的用户类型
3. 观察底部TabBar的变化
4. 测试页面跳转功能

故障排除

如果TabBar不显示或显示异常：

1. 检查 pages.json 中的 custom: true 配置
2. 确认用户信息是否正确存储
3. 检查组件是否正确引入
4. 查看控制台是否有错误信息