job-pc/src/components/job/detail/index.vue

<template>
	<a-row :gutter="[10,10]" type="flex" justify="space-between" v-if="detail">
		<a-col span="14">
			<a-row :gutter="[10,10]">
				<a-col span="24">
					<a-row :gutter="[10,20]" type="flex">
						<a-col>
							<div style="font-size: 20px; font-weight: 600;">{{detail.base.name}}</div>
						</a-col>
						<a-col>
							<div style="font-size: 16px;color: #4FBE70;">{{detail.base.pay_range_text}}</div>
						</a-col>
					</a-row>
				</a-col>
				<a-col span="24">
					<a-space>
						<a-tag>{{detail.require.experience_text ? detail.require.experience_text : '不限'}}</a-tag>
						<a-tag>{{detail.require.certification_text ? detail.require.certification_text : '不限'}}</a-tag>
						<a-tag>{{detail.require.school_degree_text ? detail.require.school_degree_text : '不限'}}</a-tag>
						<a-tag>{{detail.require.profelevel_text ? detail.require.profelevel_text : '不限'}}</a-tag>
					</a-space>
				</a-col>
			</a-row>
		</a-col>
		<a-col span="10" v-if="role != 'company'">
			<a-flex justify="flex-end">
				<a-sapce v-if="token">
					<a-button v-if="detail.favorited == 0" detail.favorited @click="confirmCollect(detail.id)">
						<StarOutlined />
						收藏
					</a-button>
					<a-button v-if="detail.favorited != 0" type="primary" @click="cancelCollect(detail.favorited)">
						<StarOutlined />
						取消收藏
					</a-button>
					<a-button v-if="detail.applyed == 0" @click="applyJob(detail.id)">
						投简历
					</a-button>
				</a-sapce>
				<a-space v-else>
					<a-button type="primary" @click="toLogin">
						立即登录
					</a-button>
				</a-space>
			</a-flex>
		</a-col>
	</a-row>
	<a-spin :spinning="spinning">
		<div style="margin-top: 30px;width: 100%;" v-if="detail">
			<a-descriptions :column="2" title="职位描述">
				<a-descriptions-item label="职位性质">{{detail.company.nature_text}}</a-descriptions-item>
				<a-descriptions-item label="招聘人数">{{detail.base.invite_count}}人</a-descriptions-item>
				<a-descriptions-item
					label="工作地区">{{detail.locations ? detail.locations[0].name : '未知地址'}}</a-descriptions-item>
				<a-descriptions-item label="月新范围">{{detail.base.pay_range_text}}</a-descriptions-item>
				<a-descriptions-item label="食宿条件">{{detail.base.shisu_text}}</a-descriptions-item>
	
				<a-descriptions-item label="节假日">{{detail.base.holidays_text}}</a-descriptions-item>
				<a-descriptions-item label="有效期">{{detail.base.disabled_date}}</a-descriptions-item>
				<a-descriptions-item label="有效期至"></a-descriptions-item>
				<a-descriptions-item label="联系人">{{detail.contact.contact}}</a-descriptions-item>
				<a-descriptions-item
					label="职业类别">{{detail.base.types ? detail.base.types[0].name : '未知'}}</a-descriptions-item>
				<a-descriptions-item label="联系电话">
					<span v-if="detail.contact.mobile_public == 1">{{detail.contact.mobile}}</span>
					<span v-else>未公开</span>
				</a-descriptions-item>
				<a-descriptions-item label="联系固话">
					<span v-if="detail.contact.phone_public == 1">{{detail.contact.phone}}</span>
					<span v-else>未公开</span>
				</a-descriptions-item>
				<a-descriptions-item :span="2" label="职业描述">
					<div style="white-space: pre-wrap;">
						<div  v-html="detail.base.describe_text"></div>
					</div>
				</a-descriptions-item>
			</a-descriptions>
		</div>
		<div style="margin-top: 30px;width: 100%;" v-if="detail">
			<a-descriptions :column="1" title="地图">
				<a-descriptions-item :span="24" label="企业地址">
					{{detail.contact.interview_address}}
				</a-descriptions-item>
				<a-descriptions-item :span="24">
					<div style="width: 100%;">
						<map-marker v-if="detail.contact.latitude && detail.contact.longitude"
							:lat="detail.contact.latitude" :lng="detail.contact.longitude"></map-marker>
					</div>
				</a-descriptions-item>
			</a-descriptions>
		</div>
	</a-spin>


	<a-login></a-login>

</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineProps, watch, createVNode, nextTick } from 'vue';
	import { GetJobDetail, GetJobAuthDetail, PostJobseekAddfavorite, PostJobseekDelfavorite, PostJobseekAddapplication } from '@/apis/models';
	import MapMarker from '@/components/map/marker.vue'
	import { useCommon } from '@/hooks/useCommon';
	import { warnToast, successToast } from '@/utils/toastHelper';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal, showOtherModal1 } = useCommon();
	let props = defineProps(['id']);
	let job_id = ref<Number>(props.id)
	let detail = ref<Object>(null);
	let spinning = ref<Boolean>(false)
	let token = ref(sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '')
	let role = ref(sessionStorage.getItem('role') ? sessionStorage.getItem('role') : '')
	onMounted(() => {
		getDetail()
	})


	const getDetail = () => {
		spinning.value = true
		if (sessionStorage.getItem('token')) {
			GetJobAuthDetail({ id: job_id.value }).then(res => {
				detail.value = res.data;
				spinning.value = false
			}).catch(err => {
				spinning.value = false
			})
		} else {
			GetJobDetail({ id: job_id.value }).then(res => {
				detail.value = res.data;
				spinning.value = false
			}).catch(err => {
				spinning.value = false
			})
		}
	}



	const toLogin = () => {
		showOtherModal1()
	}

	const confirmCollect = (job_id : Number) => {
		Modal.confirm({
			title: `是否要收藏该职位`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostJobseekAddfavorite({ job_id: job_id }).then(res => {
					successToast('已收藏')
					getDetail();
				})
			},
			onCancel() {

			},
		});
	}

	const cancelCollect = (id : Number) => {
		Modal.confirm({
			title: `是否要取消收藏该职位`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostJobseekDelfavorite({ id: id }).then(res => {
					successToast('已取消收藏')
					getDetail();
				})
			},
			onCancel() {

			},
		});
	}

	const applyJob = (job_id : Number) => {
		Modal.confirm({
			title: `是否要投递该职位`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostJobseekAddapplication({ job_id: job_id }).then(res => {
					successToast('已投递')
					getDetail();
				})
			},
			onCancel() {

			},
		});
	}



	watch(() => props.id, (newVal) => {
		job_id.value = newVal
		if (job_id.value) {
			spinning.value = true
			detail.value = null
			getDetail()
		}
	})
</script>

<style scoped lang="less">
	:deep(.ant-btn) {
		border-radius: 0 !important;
	}

	.map-container {
		width: 100%;
		height: 600px;
	}
</style>