proginn-frontend/pages/recruit/index.vue

<template>
  <div>
    <el-form class="select-list">
      <el-form-item label="驻场地点" class="select-item">
        <el-select v-model="city" placeholder="不限" @change="changeCity">
          <el-option label="全部" value=""></el-option>
          <el-option label="北京" value="1"></el-option>
          <el-option label="上海" value="2"></el-option>
          <el-option label="广州" value="3"></el-option>
          <el-option label="深圳" value="4"></el-option>
          <el-option label="成都" value="5"></el-option>
          <el-option label="杭州" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否申请" class="select-item" v-if="Number(uid)>0">
        <el-select v-model="apply" placeholder="全部" @change="changeApply">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="job-list">
      <template v-for="job in jobs">
        <div class="job-item" @click="jump(job.id)">
          <div class="job-header">
            <div class="title-wrapper">
              <div class="title">{{job.title}}</div>
              <div class="status-first">{{job.status_name}}</div>
            </div>
            <div class="price">¥ {{job.salary_from}}-{{job.salary_to}}</div>
          </div>
          <div class="job-content">
            <p><span>工作内容: </span><span class="description">{{job.job_description}}</span></p>
            <p><span>要求: </span>{{job.skills_name}}<span style="margin-left: 30px;">工作经验: </span>{{job.work_year}}年<span style="margin-left: 30px;">驻场地点: </span>{{job.city}}</p>
          </div>
        </div>
      </template>
    </div>

    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="changePage"/>
    </div>
  </div>
</template>

<script>
    import {Pagination} from "element-ui"

    export default {
        head() {
            return {
                title: '驻场工作招聘，2019年最新驻场工作招聘信息-程序员客栈',
                meta: [{
                    'name': 'keywords',
                    'content': '驻场招聘,驻场工作招聘,2019年最新驻场招聘信息'
                }, {
                    'name': 'description',
                    'content': '程序员客栈提供全国各地城市IT驻场工作最新招聘信息，核实企业资质，让有工作需求的程序员能得到一份满意的驻场工作；对程序员从业者能力进行严格把关，保障企业能在驻场招聘平台找到靠谱的程序员，确保项目正常进行。找工作、招聘合格的程序员，就上程序员客栈驻场招聘平台！'
                }]
            }
        },
        data() {
            return {
                city: '',
                apply: '',
                total: 0,
                jobs: [],
                page: 1,
                size: 10,
                uid: 0,
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                let formData = {page: this.page, size: this.size, city: this.city, has_apply: this.apply};
                this.$axios.$post('/api/present_job/index', formData).then(res => {
                    this.jobs = res.data.jobs;
                    this.total = Number(res.data.total);
                    this.uid = Number(res.data.uid);
                })
            },
            changePage(page) {
                this.page = page;
                this.getData();
            },
            changeCity(city) {
                this.city = city;
                this.getData();
            },
            changeApply(apply) {
                console.log(apply);
                this.apply = apply;
                this.getData();
            },
            jump(id) {
                this.$router.push('/recruit/' + id);
            }
        }
    }
</script>

<style lang="scss" scope>
  .select-list {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
  }

  .select-item {
    margin: 25px;
    width: 300px;
  }

  .job-list {

  }

  .job-item {
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    height: 166px;
    background-color: #ffffff;
    cursor: pointer;
  }

  .job-header {
    margin-top: 33px;
    display: flex;
    align-items: center;

  }

  .title-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .title {
    margin-left: 20px;
    margin-right: 9px;
    font-weight: 500;
    font-size: 17px;
    color: #222222;
  }

  .status-first {
    padding: 3px 9px;
    border-radius: 1px;
    border: 1px solid #27BB6F;
    text-align: center;
    font-size: 11px;
    color: #27BB6F;
  }

  .status-second {
    padding: 3px 9px;
    border-radius: 1px;
    border: 1px solid #FF6600;
    text-align: center;
    font-size: 11px;
    color: #FF6600;
  }

  .status-third {
    padding: 3px 9px;
    border-radius: 1px;
    border: 1px solid #666666;
    text-align: center;
    font-size: 11px;
    color: #666666;
  }

  .price {
    margin-right: 20px;
    font-weight: 600;
    font-size: 16px;
    color: #FF331E;
  }

  .job-content {
    margin-top: 22px;
    margin-left: 20px;
    width: 620px;
    line-height: 27px;
    font-size: 13px;
    color: #333333;
  }

  .job-content span {
    font-weight: 500;
  }

  .pagination {
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
  }

  .el-pagination {
    margin: 23px auto;
  }

  .description {
    padding-right: 10px;
    font-weight: normal !important;
  }

</style>