sannongshichangwang/components/job/list_recruit.vue

<template>
    <main class="index_main">
        <section class="table_out clearfix">
            <div class="table_head clearfix phone_none">
                <div class="table_head_masg">职位信息</div>
                <div class="table_head_company">公司</div>
                <div class="table_head_job">岗位</div>
                <div class="table_head_address">地区</div>
                <div class="table_head_time">时间</div>
            </div>
            <div class="table_ul clearfix">
                <div class="table_li clearfix" v-for="(item, index) in jobList" :key="index">
                    <NuxtLink class="table_li_a clearfix" :href="getLinkPathDetail(item)" :title="item.title">
                        <div class="table_li_masg dot1">
                            <label class="table_li_label pc_none">职位信息:</label>
                            <div class="table_li_text dot1">
                                {{ item.title }}
                            </div>
                        </div>
                        <div class="table_li_company dot1">
                            <label class="table_li_label pc_none">公司:</label>
                            <div class="table_li_text dot1">
                                {{ item.business_name }}
                            </div>
                        </div>
                        <div class="table_li_job ">
                            <label class="table_li_label pc_none">岗位:</label>
                            <span class="table_li_job_in table_li_text dot1">
                                {{ item.jtzw_name }}
                            </span>
                        </div>
                        <div class="table_li_address dot1">
                            <label class="table_li_label pc_none">地区:</label>
                            <div class="table_li_text dot1">
                                {{ item.city_name }}
                            </div>
                        </div>
                        <div class="table_li_time">
                            <label class="table_li_label pc_none">时间:</label>
                            <div class="table_li_text dot1">
                                {{ getTime(item.updated_at, 'year', 1) }}
                            </div>
                        </div>
                    </NuxtLink>
                </div>
            </div>
            <div class="empty" v-if="jobList == false">
                <img src="@/public/topic/empty.png" alt="" class="empty_img">
                <span class="empty_text">当前暂无数据</span>
            </div>
        </section>
    </main>
    <!-- 分页器 -->
    <div class="pagination11" v-if="jobList != false">
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" prev-text="上一页"
                next-text="下一页" @current-change="changePage" />
        </div>
    </div>
</template>


<script setup>
//0.加载页面依赖 start ---------------------------------------->
import { ref, onMounted } from 'vue';
import { ElMessage, ElPagination } from 'element-plus';
//0.加载页面依赖 end ---------------------------------------->

//1.获得路由id start ---------------------------------------->
const targetSegment = getRoutePath(3);
//1.1 获得当前的路由id
let navTitle = ref('')//二级导航标题
let navCid = ref('')//二级导航id
//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
console.log("getRouteId", getRouteId);

if (getRouteId.code == 200) {
    navTitle.value = getRouteId.data.alias
    navCid.value = getRouteId.data.category_id
} else {
    console.log("获得路由id出错！", getRouteId.message)
}

//1.获得路由id end ---------------------------------------->

// 获取商品数据列表 start--------------------------------------->
const jobList = ref()
const page = ref(1)
const pageSize = ref(10)
const total = ref()
const getJobsList = await requestDataPromise('/web/getWebsiteJobList', {
    method: 'GET',
    query: {
        'catid': navCid.value,
        'page': page.value,
        'pageSize': pageSize.value,
        'type': 1
    },
});
// console.log("获取数据列表job", getJobsList);

if (getJobsList.code == 200) {
    jobList.value = getJobsList.data.JobRecruiting
    total.value = getJobsList.data.recruit_count
}
// 获取商品数据 end----------------------------------------->

//4.页面数据 end ---------------------------------------->

</script>

<style lang="less" scoped>
@import url('@/assets/css/job/list_zhaopin.less');
</style>