岗位发布开发

2025-10-23 17:16:16 +08:00
parent 20f2038f8c
commit b72b7dd7d6
25 changed files with 3402 additions and 327 deletions
--- a/docs/企业搜索功能实现说明.md
+++ b/docs/企业搜索功能实现说明.md
@@ -0,0 +1,187 @@
+# 企业搜索功能实现说明
+
+## 功能概述
+
+根据用户类型对发布岗位页面的"招聘公司"输入框进行不同的交互处理：
+
+- **企业用户**：直接输入公司名称
+- **网格员**：点击输入框跳转到企业搜索页面，支持模糊查询
+
+## 实现细节
+
+### 1. 用户类型判断
+
+通过 `userInfo.isCompanyUser` 字段判断用户类型：
+- `0`: 企业用户
+- `1`: 求职者  
+- `2`: 网格员
+- `3`: 政府人员
+
+### 2. 页面修改
+
+#### 发布岗位页面 (`pages/job/publishJob.vue`)
+
+**模板修改：**
+```vue
+<!-- 企业用户：直接输入 -->
+<input 
+    v-if="isCompanyUser"
+    class="input" 
+    placeholder="请输入公司名称" 
+    v-model="formData.companyName"
+/>
+<!-- 网格员：点击跳转到搜索页面 -->
+<view 
+    v-else
+    class="company-selector"
+    @click="openCompanySearch"
+>
+    <view class="selector-text" :class="{ 'placeholder': !formData.companyName }">
+        {{ formData.companyName || '请选择企业' }}
+    </view>
+    <view class="selector-icon">
+        <view class="arrow-icon">></view>
+    </view>
+</view>
+```
+
+**脚本修改：**
+- 添加用户类型判断逻辑
+- 添加打开企业搜索页面的方法
+- 添加页面显示时处理返回数据的逻辑
+
+#### 企业搜索页面 (`pages/job/companySearch.vue`)
+
+**功能特性：**
+- 搜索框支持实时输入
+- 防抖节流：500ms延迟执行搜索
+- 调用接口：`/app/company/likeList`，参数：`name`
+- 支持企业选择和数据回传
+- 空状态和加载状态处理
+
+**核心代码：**
+```javascript
+// 防抖搜索
+const onSearchInput = () => {
+    if (debounceTimer) {
+        clearTimeout(debounceTimer);
+    }
+    
+    debounceTimer = setTimeout(() => {
+        if (searchKeyword.value.trim()) {
+            searchCompanies();
+        } else {
+            searchResults.value = [];
+        }
+    }, 500);
+};
+
+// 搜索企业
+const searchCompanies = async () => {
+    const response = await createRequest('/app/company/likeList', {
+        name: searchKeyword.value.trim()
+    }, 'GET', false);
+    
+    if (response.code === 200) {
+        searchResults.value = response.data || [];
+    }
+};
+
+// 选择企业
+const selectCompany = (company) => {
+    uni.navigateBack({
+        success: () => {
+            getApp().globalData = getApp().globalData || {};
+            getApp().globalData.selectedCompany = company;
+        }
+    });
+};
+```
+
+### 3. 数据传递
+
+使用全局数据传递选中的企业信息：
+
+**企业搜索页面：**
+```javascript
+// 选择企业后设置全局数据
+getApp().globalData.selectedCompany = company;
+```
+
+**发布岗位页面：**
+```javascript
+// 页面显示时检查全局数据
+onShow(() => {
+    const app = getApp();
+    if (app.globalData && app.globalData.selectedCompany) {
+        const selectedCompany = app.globalData.selectedCompany;
+        formData.companyName = selectedCompany.name;
+        formData.companyId = selectedCompany.id;
+        
+        // 清除全局数据
+        app.globalData.selectedCompany = null;
+    }
+});
+```
+
+### 4. 页面配置
+
+在 `pages.json` 中添加了企业搜索页面配置：
+
+```json
+{
+    "path": "pages/job/companySearch",
+    "style": {
+        "navigationBarTitleText": "选择企业",
+        "navigationStyle": "custom",
+        "disableScroll": false,
+        "enablePullDownRefresh": false,
+        "backgroundColor": "#f5f5f5"
+    }
+}
+```
+
+### 5. 测试页面
+
+创建了测试页面 `pages/test/company-search-test.vue` 用于验证功能：
+- 用户类型切换
+- 功能说明展示
+- 直接跳转到发布岗位页面测试
+
+## 使用说明
+
+### 企业用户
+1. 进入发布岗位页面
+2. 招聘公司输入框为普通输入框
+3. 直接输入公司名称
+
+### 网格员
+1. 进入发布岗位页面
+2. 点击"招聘公司"输入框
+3. 跳转到企业搜索页面
+4. 输入企业名称进行搜索（支持防抖）
+5. 选择企业后自动返回
+6. 企业名称显示在输入框中
+
+## 技术特点
+
+1. **防抖节流**：搜索输入500ms延迟，避免频繁请求
+2. **用户类型判断**：根据 `isCompanyUser` 字段动态显示不同交互
+3. **数据传递**：使用全局数据实现页面间数据传递
+4. **响应式设计**：支持不同屏幕尺寸
+5. **错误处理**：完善的错误提示和空状态处理
+
+## 接口说明
+
+**搜索企业接口：**
+- 地址：`/app/company/likeList`
+- 方法：`GET`
+- 参数：`name` (企业名称)
+- 返回：企业列表数据
+
+## 注意事项
+
+1. 确保用户类型字段 `isCompanyUser` 正确设置
+2. 搜索接口需要支持模糊查询
+3. 企业数据需要包含 `id` 和 `name` 字段
+4. 防抖时间可根据实际需求调整
--- a/docs/自定义TabBar使用说明.md
+++ b/docs/自定义TabBar使用说明.md
@@ -0,0 +1,129 @@
+# 自定义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. 查看控制台是否有错误信息