proginn-frontend/pages/recruit/_id.vue

<template>
  <div class="wrapper" v-if="job">
    <div class="loading" v-if="applying">
      <i class="el-icon-loading"></i>
      提交申请中
    </div>
    <div class="header">
      <div class="title-wrapper">
        <div class="title">{{job.title}}</div>
        <div v-bind:class="title_class">{{job.status_name}}</div>
      </div>
      <div class="price">¥ {{job.salary_from}}-{{job.salary_to}}</div>
    </div>
    <div class="info-wrapper">
      <div class="info">
        <p>发布时间: {{job.created_at}}</p>
        <p>工作经验: {{job.work_year}}年</p>
        <p>要求: {{job.skills_name}}</p>
        <p>驻场地点: {{job.city}}</p>
      </div>
      <div class="btn-wrapper">
        <template v-if="job.status===1">
          <template v-if="job.apply.status===-1">

            <button class="btn-first" @click="login">请先登陆</button>
          </template>
          <template v-else-if="job.apply.status===-2"><a href="/sign/new" class="btn-first">请先签约</a></template>
          <template v-else>
            <button v-bind:class="!applying?'btn-first':'btn-second'" v-if="job.apply.status===0" @click="apply()">
              {{applying?'提交申请中':'立即申请 '}} <i v-if="applying" class="el-icon-loading"></i>
            </button>
            <div class="btn-second" v-else-if="job.apply.status===1">筛选中</div>
            <div class="btn-second" v-else-if="job.apply.status===2">待面试</div>
            <div class="btn-third" v-else-if="job.apply.status===3">面试不通过</div>
            <div class="btn-third" v-else-if="job.apply.status===4">不合适</div>
            <div class="btn-fourth" v-else-if="job.apply.status===5">对接成功</div>
          </template>

        </template>
        <template v-else>
          <div class="btn-third" v-if="job.status>1">{{job.status_name}}</div>
        </template>

        <div class="btn-tips">当前已经有 <span>{{job.apply_count}}</span> 人申请</div>
      </div>
    </div>
    <div class="content">
      <div>工作内容:</div>
      <div>{{job.job_description}}</div>
    </div>
    <div class="file-list">
      <div class="file-item" v-for="file in job.files">
        <a v-bind:href="file.url"><img src="~@/assets/img/job/icon_file.png" alt=""></a>
        <a v-bind:href="file.url" v-bind:title="file.file_name" class="file">{{file.file_name}}</a>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        head() {
            return {
                title: '驻场工作招聘，2019年最新驻场工作招聘信息-程序员客栈',
                meta: [{
                    'name': 'keywords',
                    'content': '驻场招聘,驻场工作招聘,2019年最新驻场招聘信息'
                }, {
                    'name': 'description',
                    'content': '程序员客栈提供全国各地城市IT驻场工作最新招聘信息，核实企业资质，让有工作需求的程序员能得到一份满意的驻场工作；对程序员从业者能力进行严格把关，保障企业能在驻场招聘平台找到靠谱的程序员，确保项目正常进行。找工作、招聘合格的程序员，就上程序员客栈驻场招聘平台！'
                }]
            }
        },
        data() {
            return {
                has_login: false,
                city: '',
                total: 0,
                job: null,
                status: 1,
                title_class: "status-first",
                applying: false,
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.$axios.$post('/api/present_job/detail', {id: this.$route.params.id}).then(res => {
                    this.job = res.data;
                    switch (this.job.status) {
                        case 1:
                            this.title_class = 'status-first';
                            break;
                        case 3:
                            this.title_class = 'status-second';
                            break;
                        default:
                            this.title_class = 'status-third';
                    }
                })
            },
            login() {
                location.href = 'https://www.proginn.com/?loginbox=show&next=' + encodeURIComponent(location.href)
            },
            apply() {
                if (this.applying) {
                    return false;
                }
                this.applying = true;
                this.$axios.$post('/api/present_job/apply', {id: this.$route.params.id}).then(res => {
                    if (res.status === 1) {
                        this.$message.success(res.info);
                        this.getData();
                    } else {
                        this.$message.error(res.info);
                        this.getData();
                    }
                    this.applying = false;
                }).catch(res => {
                    this.applying = false;
                })
            }
        }
    }
</script>

<style lang="scss" scope>
  .wrapper {
    overflow: hidden;
    margin-top: 10px;
    width: 1000px;
    background-color: #ffffff;
  }

  .header {
    margin-top: 45px;
    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;
  }

  .info-wrapper {
    margin-top: 9px;
    display: flex;
  }

  .info {
    flex: 1;
    margin-left: 20px;
  }

  .info p {
    margin-top: 15px;
    line-height: 18px;
    font-weight: 500;
    font-size: 13px;
    color: #333333;
  }

  .btn-wrapper {
    margin-top: 19px;
    margin-right: 20px;
  }

  .btn-first {
    display: block;
    width: 125px;
    height: 40px;
    border-radius: 2px;
    background-color: #308EFF;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
  }

  .btn-second {
    width: 125px;
    height: 40px;
    border-radius: 2px;
    background-color: #308EFF;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    opacity: 0.5;
  }

  .btn-third {
    width: 125px;
    height: 40px;
    border-radius: 2px;
    background-color: #ECECEC;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #666666;
  }

  .btn-fourth {
    width: 125px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #10B96A;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #10B96A;
  }

  .btn-tips {
    margin-top: 13px;
    line-height: 20px;
    font-size: 13px;
    color: #666666;
  }

  .btn-tips span {
    color: #308EFF;
  }

  .content {
    margin: 61px 20px 0;
    line-height: 27px;
    font-weight: 500;
    font-size: 13px;
    color: #333333;
  }

  .file-list {
    margin-top: 45px;
    padding-bottom: 61px;
    display: flex;
    align-items: center;
  }

  .file-item {
    margin-left: 47px;
    margin-right: 30px;
    text-align: center;
  }

  .file-item img {
    width: 25px;
    height: 30px;
  }

  .file-item a {
    margin-top: 6px;
    display: block;
    line-height: 30px;
    font-size: 13px;
    color: #308EFF;
    text-decoration: underline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #EEEEEE;
    opacity: 0.5;
    filter: alpha(opacity=40);
    z-index: 5;
  }

</style>