455 lines
12 KiB
Vue
455 lines
12 KiB
Vue
<template>
|
|
<view class="publish-job-page">
|
|
<!-- 头部导航 -->
|
|
<view class="header">
|
|
<view class="header-left" @click="goBack">
|
|
<image src="@/static/icon/back.png" class="back-icon"></image>
|
|
</view>
|
|
<view class="header-title">发布岗位</view>
|
|
<view class="header-right"></view>
|
|
</view>
|
|
|
|
<!-- 主要内容 -->
|
|
<view class="content">
|
|
<!-- 岗位基本信息 -->
|
|
<view class="section">
|
|
<view class="section-title">岗位基本信息</view>
|
|
<view class="form-group">
|
|
<view class="label">岗位名称 *</view>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入岗位名称"
|
|
v-model="formData.jobTitle"
|
|
/>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">岗位类型 *</view>
|
|
<picker
|
|
mode="selector"
|
|
:range="jobTypes"
|
|
@change="onJobTypeChange"
|
|
class="picker"
|
|
>
|
|
<view class="picker-text">{{ selectedJobType || '请选择岗位类型' }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">工作地点 *</view>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入工作地点"
|
|
v-model="formData.workLocation"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 薪资待遇 -->
|
|
<view class="section">
|
|
<view class="section-title">薪资待遇</view>
|
|
<view class="salary-row">
|
|
<view class="form-group">
|
|
<view class="label">最低薪资</view>
|
|
<input
|
|
class="input salary-input"
|
|
placeholder="0"
|
|
type="number"
|
|
v-model="formData.minSalary"
|
|
/>
|
|
</view>
|
|
<view class="salary-separator">-</view>
|
|
<view class="form-group">
|
|
<view class="label">最高薪资</view>
|
|
<input
|
|
class="input salary-input"
|
|
placeholder="0"
|
|
type="number"
|
|
v-model="formData.maxSalary"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">薪资单位</view>
|
|
<picker
|
|
mode="selector"
|
|
:range="salaryUnits"
|
|
@change="onSalaryUnitChange"
|
|
class="picker"
|
|
>
|
|
<view class="picker-text">{{ selectedSalaryUnit || '请选择薪资单位' }}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 任职要求 -->
|
|
<view class="section">
|
|
<view class="section-title">任职要求</view>
|
|
<view class="form-group">
|
|
<view class="label">学历要求</view>
|
|
<picker
|
|
mode="selector"
|
|
:range="educationLevels"
|
|
@change="onEducationChange"
|
|
class="picker"
|
|
>
|
|
<view class="picker-text">{{ selectedEducation || '请选择学历要求' }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">工作经验</view>
|
|
<picker
|
|
mode="selector"
|
|
:range="experienceLevels"
|
|
@change="onExperienceChange"
|
|
class="picker"
|
|
>
|
|
<view class="picker-text">{{ selectedExperience || '请选择工作经验' }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">招聘人数</view>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入招聘人数"
|
|
type="number"
|
|
v-model="formData.recruitCount"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 岗位描述 -->
|
|
<view class="section">
|
|
<view class="section-title">岗位描述</view>
|
|
<view class="form-group">
|
|
<view class="label">岗位职责</view>
|
|
<textarea
|
|
class="textarea"
|
|
placeholder="请详细描述岗位职责和工作内容"
|
|
v-model="formData.jobDescription"
|
|
></textarea>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">任职要求</view>
|
|
<textarea
|
|
class="textarea"
|
|
placeholder="请描述对候选人的具体要求"
|
|
v-model="formData.jobRequirements"
|
|
></textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系方式 -->
|
|
<view class="section">
|
|
<view class="section-title">联系方式</view>
|
|
<view class="form-group">
|
|
<view class="label">联系人</view>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入联系人姓名"
|
|
v-model="formData.contactPerson"
|
|
/>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">联系电话</view>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入联系电话"
|
|
v-model="formData.contactPhone"
|
|
/>
|
|
</view>
|
|
<view class="form-group">
|
|
<view class="label">联系邮箱</view>
|
|
<input
|
|
class="input"
|
|
placeholder="请输入联系邮箱"
|
|
v-model="formData.contactEmail"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<view class="footer">
|
|
<view class="btn-group">
|
|
<button class="btn btn-cancel" @click="goBack">取消</button>
|
|
<button class="btn btn-publish" @click="publishJob">发布岗位</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
|
|
// 表单数据
|
|
const formData = reactive({
|
|
jobTitle: '',
|
|
workLocation: '',
|
|
minSalary: '',
|
|
maxSalary: '',
|
|
recruitCount: '',
|
|
jobDescription: '',
|
|
jobRequirements: '',
|
|
contactPerson: '',
|
|
contactPhone: '',
|
|
contactEmail: ''
|
|
});
|
|
|
|
// 选择器数据
|
|
const jobTypes = ['技术类', '销售类', '管理类', '服务类', '其他'];
|
|
const salaryUnits = ['元/月', '元/年', '元/小时'];
|
|
const educationLevels = ['不限', '高中', '大专', '本科', '硕士', '博士'];
|
|
const experienceLevels = ['不限', '应届毕业生', '1-3年', '3-5年', '5-10年', '10年以上'];
|
|
|
|
// 选中的值
|
|
const selectedJobType = ref('');
|
|
const selectedSalaryUnit = ref('');
|
|
const selectedEducation = ref('');
|
|
const selectedExperience = ref('');
|
|
|
|
// 选择器事件处理
|
|
const onJobTypeChange = (e) => {
|
|
selectedJobType.value = jobTypes[e.detail.value];
|
|
};
|
|
|
|
const onSalaryUnitChange = (e) => {
|
|
selectedSalaryUnit.value = salaryUnits[e.detail.value];
|
|
};
|
|
|
|
const onEducationChange = (e) => {
|
|
selectedEducation.value = educationLevels[e.detail.value];
|
|
};
|
|
|
|
const onExperienceChange = (e) => {
|
|
selectedExperience.value = experienceLevels[e.detail.value];
|
|
};
|
|
|
|
// 返回上一页
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
};
|
|
|
|
// 发布岗位
|
|
const publishJob = () => {
|
|
// 简单验证
|
|
if (!formData.jobTitle) {
|
|
uni.showToast({
|
|
title: '请输入岗位名称',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!formData.workLocation) {
|
|
uni.showToast({
|
|
title: '请输入工作地点',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 模拟发布成功
|
|
uni.showLoading({
|
|
title: '发布中...'
|
|
});
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '发布成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 延迟返回
|
|
setTimeout(() => {
|
|
goBack();
|
|
}, 1500);
|
|
}, 2000);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.publish-job-page {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
|
|
.header-left {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.back-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.header-right {
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 0;
|
|
}
|
|
|
|
.section {
|
|
background: #fff;
|
|
border-radius: 0;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
width: 100%;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
}
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 30rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 15rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: #fff;
|
|
border: none;
|
|
border-bottom: 2rpx solid #e0e0e0;
|
|
border-radius: 0;
|
|
padding: 0 0 10rpx 0;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
|
|
&:focus {
|
|
border-bottom-color: #256BFA;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
min-height: 120rpx;
|
|
background: #fff;
|
|
border: none;
|
|
border-bottom: 2rpx solid #e0e0e0;
|
|
border-radius: 0;
|
|
padding: 20rpx 0 10rpx 0;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
|
|
&:focus {
|
|
border-bottom-color: #256BFA;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.picker {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: #fff;
|
|
border: none;
|
|
border-bottom: 2rpx solid #e0e0e0;
|
|
border-radius: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0 10rpx 0;
|
|
|
|
.picker-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.salary-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.form-group {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.salary-separator {
|
|
font-size: 32rpx;
|
|
color: #666;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.salary-input {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
padding: 20rpx 30rpx;
|
|
border-top: 1rpx solid #eee;
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
|
|
&.btn-cancel {
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
&.btn-publish {
|
|
background: #256BFA;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|