job-pc/src/views/jobseeker/recommend/index.vue

<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[20,20]" type="flex" justify="center">
			<a-col span="18">
				<template v-if="!jobList || jobList.length == 0">
					<a-empty style="height: 100vh;">
						<template #description>
							无职位信息
						</template>
					</a-empty>
				</template>
				<a-row :gutter="[10,20]">
					<a-col span="8" v-for="(item, index) in jobList">
						<a-flex vertical style="width: 100%;background-color: #fff;border-radius: 10px;padding: 20px;">
							<a-space direction="vertical" :size="10">
								<a-flex justify="space-between" style="width: 100%;">
									<div style="font-size: 18px; font-weight: 600;">{{item.name}}</div>
									<div style="font-size: 18px;color: #4FBE70;">{{item.pay_range_text}}</div>
								</a-flex>
								<a-flex style="width: 100%;">
									<a-tag>{{item.experience_text ? item.experience_text : '不限'}}</a-tag>
									<a-tag>{{item.certification_text ? item.certification_text : '不限'}}</a-tag>
									<a-tag>{{item.school_degree_text ? item.school_degree_text : '不限'}}</a-tag>
									<a-tag>{{item.profelevel_text ? item.profelevel_text : '不限'}}</a-tag>
								</a-flex>
							</a-space>
							<a-divider />
							<a-space direction="vertical">
								<a-flex justify="space-between" style="width: 100%;">
									<div>{{item.full_name}}</div>
									<a-button type="primary"  size="small"
										@click="toDetail(item.id, item.company_id)">查看详情</a-button>
								</a-flex>
								<a-flex style="width: 100%;color: #bebebe;">
									{{item.locations ? item.locations[0].name : '未知地址'}}
								</a-flex>
							</a-space>
						</a-flex>
					</a-col>
					<a-col span="24">
						<a-flex justify="center">
							<a-space>
								<a-pagination hideOnSinglePage :total="commomParams.page.total" @change="getPage" />
							</a-space>
						</a-flex>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>



	<!-- 企业显示 -->
	<!-- <a-tabs v-model:activeKey="activeKey">
		<a-tab-pane key="1" tab="推荐人才">
			<a-row :gutter="[10,10]">
				<a-col span="12" v-for="(item, index) in companyList">
					<job-talents></job-talents>
				</a-col>
			</a-row>
			<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多
			</div>
			<a-row :gutter="[10,10]">
				<a-col span="24" v-for="(item, index) in companyList">
					<job-talents></job-talents>
				</a-col>
				<a-col span="24">
					<a-pagination v-model:current="current" :total="500" style="text-align: center;" />
				</a-col>
			</a-row>
		</a-tab-pane>
		<a-tab-pane key="2" tab="最新简历" force-render>Content of Tab Pane 2</a-tab-pane>
		<a-tab-pane key="3" tab="应届毕业生">Content of Tab Pane 3</a-tab-pane>
	</a-tabs> -->
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineEmits } from 'vue';
	import { GetJobseekerReommendJob } from '@/apis/models';
	import { router } from '@/router';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	const emit = defineEmits();
	let loading = ref<Boolean>(true);
	let jobList = ref([]);
	let total = ref<Number>(0)


	const getPage = (page, pageSize) => {
		commomParams.value.search.page = page;
		commomParams.value.search.pagesize = pageSize;
		getData();
	}
	const getData = async () => {
		try {
			loading.value = true;
			let res = await GetJobseekerReommendJob(commomParams.value.search);
			loading.value = false;
			jobList.value = res.data.jobs;
			commomParams.value.page = {
				current: commomParams.value.search.page,
				pageSize: commomParams.value.search.pagesize,
				total: res.data.total,
				pageSizeOptions: ['10', '20', '30', '40'],
				hideOnSinglePage: false,
				showSizeChanger: true
			};
		} catch {
			loading.value = false;
		}
	}

	const toDetail = (job_id : Number, company_id : Number) => {
		sessionStorage.setItem('job_id', job_id)
		sessionStorage.setItem('tab_key', 2)
		sessionStorage.setItem('pubilc_id', company_id)
		sessionStorage.setItem('mode', 'detail')
		store.commit('getPageType', {
			pageType: ''
		})
		store.commit('setShowLoginBox', {
			showLoginBox: false
		})
		sessionStorage.setItem('pageType', '')
		store.commit('permissions/SET_PERMISSION', null)
		store.commit('permissions/SET_MENU', [])
		// router.push({
		// 	path: '/personal'
		// })
		window.open('/company/detail', "_blank");
	}

	onMounted(() => {
		getData();
	})
</script>

<style lang="less" scoped>
	.job-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// align-items: center;
		width: 100%;

		.job-title {
			padding: 20px;
			background-color: #ffffff;

			.aaaa {
				display: flex;
				justify-content: space-between;
			}
		}

		.job-company {
			padding: 20px;
			background-color: #cccccc;

			.aaaa {
				display: flex;
				justify-content: space-between;
			}
		}

	}

	.mt10 {
		margin-bottom: 10px;
	}
</style>