sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页布局更改

Browse Source
This commit is contained in:
冯辉
2025-10-16 16:44:30 +08:00
parent 028e3202bd
commit 14dafac147
12 changed files with 1281 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

454
pages/job/publishJob.vue Normal file
View File

@@ -0,0 +1,454 @@
<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>