su_nan_guan_wang/src/views/jobs/index.vue

<template>
  <div style="background: #f0f0f0;padding-bottom:50px">
    <div class="banner">
      <img src="~@/assets/images/yzrc.jpg" alt="">
    </div>
    <div class="bread">
      <div>
        <span>当前位置:首页-<span style="color: rgba(75, 175, 227, 1)">优质人才</span></span>
      </div>
    </div>
    <div class="smart-device">
      <div class="smart-title">
        <span><span>企业招聘</span>JOBS</span>
        <!--        <i @click="join()">人才入驻</i>-->
      </div>
      <div class="smart-device-content">
        <div class="list-content">
          <div class="case-list">
            <div class="case-content">
              <ul class="list-table">
                <li v-for="(item,index) in noticeList" :key="index" class="myLi" @click="detail(item)">
                  <div>
                    <p>
                      {{ item.name }}
                    </p>
                  </div>
                  <div>
                    <p>
                      {{ item.num }}名
                    </p>
                  </div>
                  <div>
                    <p>
                      {{ item.company }}
                    </p>
                  </div>
                  <div>
                    <p>
                      发布日期{{ item.createTime }}
                    </p>
                  </div>
                  <div>
                    <p :class="item.isValid?'yx':'gq'">
                      {{ item.isValid?'有效':'过期' }}
                    </p>
                  </div>
                  <div>查看详情</div>
                </li>
              </ul>
              <div class="paginationo-box">
                <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
                  <template #prev-text>
                    <van-icon name="arrow-left" />
                  </template>
                  <template #next-text>
                    <van-icon name="arrow" />
                  </template>
                  <template #page="{ text }">{{ text }}</template>
                </van-pagination>
              </div>
            </div>
            <div class="case-content-app">
              <ul class="list-table">
                <li v-for="(item,index) in noticeList" :key="index" @click="detail(item)">
                  <div>
                    <p class="date-circle">
                      {{ item.createDate }}
                    </p>
                  </div>
                  <div>
                    <p style="font-weight: 600;color: #000;font-size: 0.8rem;">
                      {{ item.name }}
                    </p>
                    <p style="font-size: 0.6rem">
                      {{ item.company }}
                    </p>
                  </div>
                </li>
              </ul>
              <div class="paginationo-box">
                <van-pagination v-model="search.pageNum" :total-items="total" :show-page-size="10" @change="handleCurrentChange">
                  <template #prev-text>
                    <van-icon name="arrow-left" />
                  </template>
                  <template #next-text>
                    <van-icon name="arrow" />
                  </template>
                  <template #page="{ text }">{{ text }}</template>
                </van-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecruit } from '@/service/api_service'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
export default {
    mixins: [Base, BaseData],
    data() {
        return {
            active: 1,
            total: 0,
            currentPage: 1,
            noticeList: [
                // {
                //     name:'JAVA开发工程师',
                //     eventIndex:1,
                //     num:12,
                //     company:'小艾软件',
                //     createTime:'2012-12-12',
                // },
            ],
            search: {
                pageSize: 10,
                pageNum: 1,
                state: '1'
            }
        }
    },
    mounted() {
        document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
        this.initBiz().then((res) => {
            this.getData()
        })
        if (window.history && window.history.pushState) {
            // 向历史记录中插入了当前页
            history.pushState(null, null, document.URL)
            window.addEventListener('popstate', this.goBack, false)
        }
    },
    destroyed() {
        window.removeEventListener('popstate', this.goBack, false)
    },
    methods: {
        goBack() {
            // console.log("点击了浏览器的返回按钮");
            // sessionStorage.clear()
            // window.history.back()
            // history.pushState(null, null, document.URL)
            this.$router.push({ path: '/' })
        },
        handleCurrentChange: function(val) {
            this.search.pageNum = val
            this.getData()
        },
        getData() {
            const _this = this
            getRecruit(_this.search).then((res) => {
                const dayjs = require('dayjs')
                if (res.rows) {
                    this.total = res.total
                    this.noticeList = []
                    res.rows.forEach((item) => {
                        const i = {
                            name: item.position,
                            eventIndex: 3,
                            num: item.peopleNumber,
                            company: _this.BizMap[item.enterpriseId],
                            createTime: item.createdAt,
                            createDate: item.createdAt.substring(5),
                            workRequire: item.workRequire,
                            recruitRecruit: item.recruitRecruit,
                            peopleNumber: item.peopleNumber
                        }

                        i.isValid = dayjs(new Date()).isBefore(dayjs(item.validityDate))
                        this.noticeList.push(i)
                    })
                }
            })
        },
        detail(index) {
            this.$router.push({ name: 'jobsDetail', params: index })
        },
        join() {
            this.$router.push({ path: '/jobs/join' })
        }
    }
}
</script>

<style scoped>
    .banner img{
        width: 100% !important;
    }
    @media screen and (min-width: 1000px){
        .bread{
            background: #fff;
        }
        .bread div{
            width: 1200px;
            margin: 0 auto;
            text-align: left;
            padding: 0.8rem 0;
            font-size: 1rem;
        }
        .smart-title{
            margin-top:3rem;
        }
        .smart-device{
            width: 1200px;
            margin: 0 auto;
            text-align: left;
            font-size: 1rem;
            position: relative;
        }
        .smart-title i{
            font-style: normal;
            display: inline-block;
            border: 1px solid #996eee;
            color: #996eee;
            padding: 0rem 0.8rem;
            font-weight: 400;
            position: absolute;
            right: 0;
            top: 1rem;
        }
        .smart-device span span{
            font-size: 2rem;
            display: inline-block;
            position: relative;
            padding-right: 1rem;
            margin-right: 1rem;
            font-weight: 900;
        }
        .smart-device span span:after{
            content: '';
            width: 1px;
            height: 15px;
            background: #666;
            position: absolute;
            right: 0;
            bottom: 7px;
        }
        .device-title img{
            width: 80%;
        }
        .nav-list{
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            margin: 2rem auto;
            width: 50%;
        }
        .nav-list li{
            min-width: 33.33%;
            max-width: 33.33%;
            text-align: center;
            color: #666;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .myLi:hover{
          background: rgba(75, 175, 227, 0.5) !important;
          color: white !important;
        }
        .nav-list li span{
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 0.8rem;
        }
        .active span{
            display: inline-block;
            border-bottom: 2px solid #FF6A00!important;
            color: #333;
        }
        .list-table li{
            overflow: hidden;
            width: 100%;
            background: #fff;
            margin-bottom: 1rem;
            padding: 1rem 0;
            display: flex;
        }
        .list-table li>div{
            flex: 1;
            text-align: center;
            overflow: hidden;
        }
        .list-table li>div button{
            background: #fff;
            border: none;
            color: #333;
        }
        .smart-device-content{
            margin: 2rem 0;
        }
        /*.list-table li>div:nth-child(1){*/
        /*    width: 20%;*/
        /*    text-align: center;*/
        /*}*/
        /*.list-table li>div:nth-child(2){*/
        /*    width: 60%;*/
        /*}*/
        /*.list-table li>div:nth-child(3){*/
        /*    width: 20%;*/
        /*    text-align: right;*/
        /*}*/
        /*.list-table li>div:nth-child(3) span{*/
        /*    margin-right: 1rem;*/
        /*}*/
        .paginationo-box{
            width: 20%;
            margin: 0 auto;
        }
        .case-content-app{
            display: none;
        }
    }
    @media screen and (max-width: 1000px){
        .case-content{
            display: none;
        }
        .banner{
            display: none;
        }
        .bread{
            display: none;
        }
        .smart-title{
            margin-top:2rem;
            position: relative;
        }
        .smart-title span{
            content: '企业招聘'!important;
        }
        .smart-title span span{
            font-size: 0.8rem;
        }
        .smart-title span{
            font-size: 0.6rem;
        }
        .smart-title i{
            font-style: normal;
            border: 1px solid #996eee;
            color: #996eee;
            padding: 0;
            font-weight: 400;
            right: 0;
            top: 0;
            width: 5rem;
            margin: 0.4rem auto 0 auto;
            position: absolute;
        }
        .smart-device{
            width: 90%;
            margin: 0 auto;
            text-align: left;
            font-size: 1rem;
            overflow: hidden;
        }
        .smart-device span span{
            font-size: 1.5rem;
            display: inline-block;
            position: relative;
            padding-right: 1rem;
            margin-right: 1rem;
            font-weight: 900;
        }
        .smart-device span span:after{
            content: '';
            width: 1px;
            height: 15px;
            background: #666;
            position: absolute;
            right: 0;
            bottom: 7px;
        }
        .device-title img{
            width: 100%;
        }
        .smart-device-content{
            margin: 3rem 0;
        }
        .nav-list{
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            margin: 2rem;
        }
        .nav-list li{
            min-width: 33.33%;
            max-width: 33.33%;
            text-align: center;
            color: #666;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .nav-list li span{
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 0.8rem;
        }
        .active span{
            display: inline-block;
            border-bottom: 2px solid #FF6A00!important;
            color: #333;
            font-weight:800!important;
        }
        .list-table li{
            overflow: hidden;
            width: 100%;
            background: #fff;
            margin-bottom: 1rem;
            padding: 1rem 0;
            position: relative;
        }
        .list-table li>div{
            float: left;
        }
        .list-table li>div:nth-child(1){
            width: 20%;
        }
        .list-table li>div:nth-child(2){
            width: 80%;
        }
        .list-table li>div:nth-child(2) p{
            margin-top: 6px;
        }
        .list-table li>div p{
            width: 90%;
            margin: 0 auto;
        }
        .list-table li:after{
            content: '';
            width: 0.6rem;
            height: 0.6rem;
            border-right: 4px solid #666;
            border-top: 4px solid #666;
            transform:rotate(45deg);
            position: absolute;
            right: 1rem;
            top: 1.5rem;
        }
        .date-circle{
            background: #996eee;
            height: 2.8rem;
            border-radius:2rem;
            width: 60% !important;
            margin: 0 auto;
            font-size: 0.8rem;
            text-align: center;
            line-height: 2.8rem;
            color: #fff;
        }

    }
    .list-table{
        width: 100%;
    }
    .list-table p{
        white-space:nowrap;
        overflow: hidden;
    }
    .join-policy h3{
        margin: 1rem 0;
    }
    .join-policy p{
        line-height: 2rem;
    }
    .paginationo-box /deep/ .van-pagination__item--active{
        background: rgba(75, 175, 227, 1)!important;
        color: #fff!important;
    }
    .paginationo-box /deep/ .van-pagination__item{
        color: #333;
    }
    .yx{
      color: #229f59;
    }
    .gq{
      color: orangered;
    }
</style>