yizhizan-h5/pages/my/jobPosting.vue

<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'"
          >
            <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>
        <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>
        <view class="desc-tip">介绍工作内容、职位要求</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>
</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' }
        ]
      ]
    };
  },
  methods: {
    confirmJob(e) {
      this.selectedJob = e.value[0].label;
      this.showJobPicker = false;
    },
    
    nextStep() {
      if (!this.selectedJob) {
        uni.showToast({
          title: '请选择招聘职位',
          icon: 'none'
        });
        return;
      }
      
      if (!this.jobDescription) {
        uni.showToast({
          title: '请输入岗位描述',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到下一步
      uni.navigateTo({
        url: '/pages/job/publish-next'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.publish-job {
  background-color: #f5f5f5;
  min-height: 100vh;
  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;
  }
}

.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>