|
|
@@ -1,280 +1,207 @@
|
|
|
<template>
|
|
|
- <view class="publish-job">
|
|
|
- <!-- 导航栏 -->
|
|
|
- <nav-bar title="发布职位" color="#000"></nav-bar>
|
|
|
-
|
|
|
- <view class="content">
|
|
|
- <!-- 顶部提示 -->
|
|
|
- <view class="top-tip">
|
|
|
- <text class="tip-title">发布社招</text>
|
|
|
- <text class="tip-desc">“深圳市汉睿国际猎头服务有限公司”的人员规模</text>
|
|
|
- <text class="tip-step">填写基本信息 · Confirm</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 招聘类型 -->
|
|
|
- <view class="section">
|
|
|
- <view class="section-title">招聘类型</view>
|
|
|
- <view class="recruit-type">
|
|
|
- <view
|
|
|
- class="type-item"
|
|
|
- :class="{ active: recruitType === 'social' }"
|
|
|
- @click="recruitType = 'social'"
|
|
|
- >
|
|
|
- <text>社招全职</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="type-item"
|
|
|
- :class="{ active: recruitType === 'campus' }"
|
|
|
- @click="recruitType = 'campus'"
|
|
|
- >
|
|
|
- <text>应届生校园招聘</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="type-item"
|
|
|
- :class="{ active: recruitType === 'intern' }"
|
|
|
- @click="recruitType = 'intern'"
|
|
|
- >
|
|
|
- <text>实习生招聘</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="type-item"
|
|
|
- :class="{ active: recruitType === 'parttime' }"
|
|
|
- @click="recruitType = 'parttime'"
|
|
|
+ <view class="switch-roles">
|
|
|
+ <nav-bar title="选择公司规模" color="#000"></nav-bar>
|
|
|
+ <view class="roles-content">
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">发布社招</view>
|
|
|
+ <view class="desc">“深圳市汉睿国际猎头服务有限公司”的人员规模</view>
|
|
|
+ <view class="step">
|
|
|
+ <u-steps :list="numList" mode="number" :current="1"></u-steps>
|
|
|
+ </view>
|
|
|
+ <view class="check-title">招聘类型</view>
|
|
|
+ <view class="check-box">
|
|
|
+ <view
|
|
|
+ class="check-item"
|
|
|
+ :class="{ 'is-check': check == index }"
|
|
|
+ v-for="(item, index) in peopleList"
|
|
|
+ :key="index"
|
|
|
+ @click="checkPeople(index)"
|
|
|
+ >{{ item }}</view
|
|
|
>
|
|
|
- <text>兼职招聘</text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 招聘职位 -->
|
|
|
- <view class="section">
|
|
|
- <view class="section-title">招聘职位</view>
|
|
|
- <view class="job-select" @click="showJobPicker = true">
|
|
|
- <text class="placeholder" v-if="!selectedJob">请选择要招聘的职位</text>
|
|
|
- <text class="selected-job" v-else>{{ selectedJob }}</text>
|
|
|
- <u-icon name="arrow-right" color="#999" size="14"></u-icon>
|
|
|
+ <view class="check-title-big">招聘职位</view>
|
|
|
+ <view class="check-select">
|
|
|
+ <view class="select-txt">请选择要招聘的职位</view>
|
|
|
+ <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
|
|
|
</view>
|
|
|
- <u-picker
|
|
|
- :show="showJobPicker"
|
|
|
- :columns="jobColumns"
|
|
|
- keyName="label"
|
|
|
- @confirm="confirmJob"
|
|
|
- @cancel="showJobPicker = false"
|
|
|
- ></u-picker>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 岗位描述 -->
|
|
|
- <view class="section">
|
|
|
- <view class="section-title">岗位描述</view>
|
|
|
- <view class="job-desc">
|
|
|
- <u-textarea
|
|
|
- v-model="jobDescription"
|
|
|
- placeholder="介绍工作内容、职位要求"
|
|
|
- height="200"
|
|
|
- maxlength="1000"
|
|
|
- ></u-textarea>
|
|
|
+ <view class="check-title-big">岗位描述</view>
|
|
|
+ <view class="check-select">
|
|
|
+ <view class="select-txt">介绍工作内容、职位要求</view>
|
|
|
+ <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
|
|
|
</view>
|
|
|
- <view class="desc-tip">介绍工作内容、职位要求</view>
|
|
|
+ <view class="txt-desc">注：职位名称、职位类型等发布后不可修改</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 注意事项 -->
|
|
|
- <view class="notice">
|
|
|
- <text class="notice-text">注：职位名称、职位类型等发布后不可修改</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <view class="footer">
|
|
|
- <u-button
|
|
|
- type="primary"
|
|
|
- text="下一步"
|
|
|
- @click="nextStep"
|
|
|
- :customStyle="{
|
|
|
- height: '88rpx',
|
|
|
- borderRadius: '44rpx',
|
|
|
- fontSize: '32rpx',
|
|
|
- margin: '0 32rpx'
|
|
|
- }"
|
|
|
- ></u-button>
|
|
|
</view>
|
|
|
+ <view class="submit-btn" @click="goJobPosting">确定</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import navBar from "@/components/nav-bar/index.vue";
|
|
|
-
|
|
|
export default {
|
|
|
- components: {
|
|
|
- navBar
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- recruitType: 'social', // 默认社招全职
|
|
|
- showJobPicker: false,
|
|
|
- selectedJob: '',
|
|
|
- jobDescription: '',
|
|
|
- jobColumns: [
|
|
|
- [
|
|
|
- { label: '前端开发工程师', value: 'frontend' },
|
|
|
- { label: '后端开发工程师', value: 'backend' },
|
|
|
- { label: 'UI设计师', value: 'ui' },
|
|
|
- { label: '产品经理', value: 'pm' },
|
|
|
- { label: '测试工程师', value: 'test' },
|
|
|
- { label: '运维工程师', value: 'devops' }
|
|
|
- ]
|
|
|
- ]
|
|
|
+ peopleList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
|
|
|
+ check: 0,
|
|
|
+ numList: [
|
|
|
+ {
|
|
|
+ name: "填写基本信息",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "Confirm",
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
+ components: {
|
|
|
+ navBar,
|
|
|
+ },
|
|
|
methods: {
|
|
|
- confirmJob(e) {
|
|
|
- this.selectedJob = e.value[0].label;
|
|
|
- this.showJobPicker = false;
|
|
|
+ goBusinessLicense() {
|
|
|
+ uni.navigateTo({ url: "/pages/my/businessLicense" });
|
|
|
},
|
|
|
-
|
|
|
- nextStep() {
|
|
|
- if (!this.selectedJob) {
|
|
|
- uni.showToast({
|
|
|
- title: '请选择招聘职位',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (!this.jobDescription) {
|
|
|
- uni.showToast({
|
|
|
- title: '请输入岗位描述',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 跳转到下一步
|
|
|
+ checkPeople(index) {
|
|
|
+ this.check = index;
|
|
|
+ },
|
|
|
+ goJobPosting() {
|
|
|
uni.navigateTo({
|
|
|
- url: '/pages/job/publish-next'
|
|
|
+ url: "/pages/my/jobPosting",
|
|
|
});
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
-.publish-job {
|
|
|
- background-color: #f5f5f5;
|
|
|
- min-height: 100vh;
|
|
|
+.switch-roles {
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.content {
|
|
|
- flex: 1;
|
|
|
- padding: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.top-tip {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 32rpx;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.tip-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tip-desc {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 8rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tip-step {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.section {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 32rpx;
|
|
|
- margin-bottom: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.section-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 24rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.recruit-type {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 24rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.type-item {
|
|
|
- height: 80rpx;
|
|
|
- border: 2rpx solid #e0e0e0;
|
|
|
- border-radius: 12rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
-
|
|
|
- &.active {
|
|
|
- border-color: #2979ff;
|
|
|
- background: #f0f7ff;
|
|
|
- color: #2979ff;
|
|
|
+ .roles-content {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .content {
|
|
|
+ padding: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .title {
|
|
|
+ color: #333;
|
|
|
+ width: 100%;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ width: 100%;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .check-title {
|
|
|
+ width: 100%;
|
|
|
+ color: rgba(31, 44, 55, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 44rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ .check-title-big {
|
|
|
+ color: rgba(58, 57, 67, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 48rpx;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .check-select {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ box-shadow: 0px 16rpx 300rpx 0px rgba(0, 0, 0, 0.06);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ padding: 32rpx 47rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .select-txt {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-box {
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 24rpx;
|
|
|
+ .check-item {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: rgba(245, 248, 254, 1);
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 12rpx 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .is-check {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1rpx solid #016bf6;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: rgba(252, 233, 220, 1);
|
|
|
+ color: #016bf6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .step{
|
|
|
+ width: 100%;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 999px;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
|
|
|
+ background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 60rpx 20rpx;
|
|
|
+ }
|
|
|
+ .txt-desc {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.job-select {
|
|
|
- height: 80rpx;
|
|
|
- border: 2rpx solid #e0e0e0;
|
|
|
- border-radius: 12rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.placeholder {
|
|
|
- color: #999;
|
|
|
- font-size: 28rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.selected-job {
|
|
|
- color: #333;
|
|
|
- font-size: 28rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.job-desc {
|
|
|
- margin-bottom: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.desc-tip {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.notice {
|
|
|
- padding: 0 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.notice-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #ff6b35;
|
|
|
-}
|
|
|
-
|
|
|
-.footer {
|
|
|
- padding: 32rpx 0;
|
|
|
- background: #fff;
|
|
|
- border-top: 1rpx solid #f0f0f0;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
