188 lines
4.6 KiB
Markdown
188 lines
4.6 KiB
Markdown
|
|
# 企业搜索功能实现说明
|
|||
|
|
|
|||
|
|
## 功能概述
|
|||
|
|
|
|||
|
|
根据用户类型对发布岗位页面的"招聘公司"输入框进行不同的交互处理:
|
|||
|
|
|
|||
|
|
- **企业用户**:直接输入公司名称
|
|||
|
|
- **网格员**:点击输入框跳转到企业搜索页面,支持模糊查询
|
|||
|
|
|
|||
|
|
## 实现细节
|
|||
|
|
|
|||
|
|
### 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. 防抖时间可根据实际需求调整
|