# 自定义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：

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

## 使用方法

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

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

### 2. 用户类型判断

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

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

### 3. 动态切换用户类型

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

```javascript
// 未登录状态：自动显示求职者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. 查看控制台是否有错误信息