siteFront/pages/employ/jobs/index.vue

<template>
	<view class="job-page">
		<view class="basic tn-p">
			<view class="title tn-text-2xl tn-text-bold">
				{{jobData.title}}
			</view>
			<view class="tn-flex tn-flex-center-between tn-pt-xs tn-pb-xs tn-text-lg">
				<view class="needs">
					招聘人数：{{jobData.needs}}
				</view>
				<view class="salary tn-text-bold">
					工资待遇：{{jobData.salary}}
				</view>
			</view>
			
			<view class="tn-flex tn-flex-center-between tn-text-lg">
				<view class="degree">
					学历要求：{{jobData.degree}}
				</view>
				<view class="seniority">
					工作经验：{{jobData.seniority}}
				</view>
			</view>

			<view class="welfare tn-flex tn-flex-wrap tn-pt-sm">
				<view class="tag-item tn-mr-xs" v-for="(item,index) in jobData.tags" :key="index">
					<TnTag font-size="28rpx" text-color="#fff" bg-color="#24ba97">{{item.name}}</TnTag>
				</view>
			</view>
		</view>
		
		<view class="desc tn-p tn-mt-sm">
			<view class="subtitle tn-pt-sm tn-pb-sm">
				<TnTitle mode="vLine" assist-color="#24ba97" title="岗位详情"></TnTitle>
			</view>
			<view class="content tn-mt tn-mb tn-text-lg">
				<mp-html :content="htmlNodes" />
			</view>
		</view>
		
		<view class="companyInfo tn-p tn-mt-sm">
			<view class="subtitle tn-pt-sm tn-pb-sm">
				<TnTitle mode="vLine" assist-color="#24ba97" title="企业信息"></TnTitle>
			</view>
			
			<view class="info tn-flex tn-flex-center-between tn-mt">
				<view class="logo tn-w-1-3" style="height: 200rpx;">
					<image :src="companyData.logo?companyData.logo:noimage" style="width: 100%;height: 100%;"/>
				</view>
				<view class="text-info tn-w-2-3 tn-text-lg ">
					<view class="companyName tn-flex tn-pt-xs tn-pb-xs" @click="toCompany(companyData.companyId)">
						<view class="tn-w-1-6 tn-text-center">
							<TnIcon name="home-fill" color="#fa3534" size="42"/>
						</view>
						<view class="tn-w-5-6">
							{{companyData.name}}
						</view>
					</view>
					<view class="address tn-flex tn-pt-xs tn-pb-xs" >
						<view class="tn-w-1-6 tn-text-center">
							<TnIcon name="map-fill" color="#fa3534" size="42"/>
						</view>
						<view class="tn-w-5-6">
							{{companyData.address}}
						</view>
					</view>
					<view class="phone tn-flex tn-pt-xs tn-pb-xs" @click="call(companyData.phone)">
						<view class="tn-w-1-6 tn-text-center">
							<TnIcon name="tel-circle-fill" color="#fa3534" size="42"/>
						</view>
						<view class="tn-w-5-6">
							{{companyData.hr}}:{{companyData.phone}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="relative tn-p tn-mt-sm" >
			<view class="subtitle tn-pt-sm tn-pb-sm">
				<TnTitle mode="vLine" assist-color="#24ba97" title="相关招聘"></TnTitle>
			</view>
			<view class="item tn-pt-sm tn-pb-sm" v-for="(item,index) in relative" :key="index" @click="toJob(item.jobId)">
				<view class="title-time tn-flex tn-flex-center-between tn-pt-xs tn-pb-xs">
					<view class="title tn-text-xl tn-text-bold">
						{{item.title}}
					</view>
					<view class="time">
						{{dayjs(Date.parse(item.createTime)).locale('zh-cn').fromNow()}}
					</view>
				</view>
				
				<view class="info tn-flex tn-flex-center-between tn-pt-xs tn-pb-xs">
					<view class="needs">
						<span>招聘人数：</span>{{item.needs}}
					</view>
					<view class="salary tn-text-bold tn-text-lg">
						{{item.salary}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	import { onMounted, ref } from 'vue';
	import request from '@/utils/request';
	import { onLoad } from "@dcloudio/uni-app";
	import TnTag from '@/uni_modules/tuniaoui-vue3/components/tag/src/tag.vue'
	import dayjs from "dayjs";
	import 'dayjs/locale/zh-cn'
	import relativeTime from "dayjs/plugin/relativeTime";
	dayjs.extend(relativeTime)
	
	const noimage = ref('/static/noimage.png')

	const jobId = ref()
	
	const htmlNodes = ref('')
	
	const relative = ref([])
	
	const companyData = ref<{
		hr?:string,
		phone?:string,
		address?:string,
		logo?:string,
		companyId?:number,
		name?:string
	}>({})
	
	const jobData = ref<{
		title?:string,
		degree?:string,
		tags?:any,
		needs?:number,
		salary?:string,
		seniority?:string
	}>({})
	
	const getJobDetail = (jobId:number) => {
		request({
			url:'/employ/job/'+jobId,
			method:'GET'
		}).then((res)=>{
			let htmlString = res.data.data.description.replace(/\\/g, "").replace(/<img/g, "<img style=\"width:100%;height:auto\"");
			htmlNodes.value = htmlString
			companyData.value = res.data.data.company
			jobData.value = res.data.data
			relative.value = res.data.data.relative
		})
	}	
	
	const call = (phone:string) => {
		uni.makePhoneCall({
			phoneNumber: phone 
		});
	}
	
	const toJob = (jobId:number) => {
		uni.navigateTo({
			url:'/pages/employ/jobs/index?jobId='+ jobId
		})
	}
	const toCompany = (id:number) => {
		uni.navigateTo({
			url:'/pages/employ/company/index?companyId='+ id
		})
	}
	
	onMounted(()=>{
		getJobDetail(jobId.value)
	})
	
	onLoad((options) => {
		jobId.value = options.jobId
	})
	
</script>

<style lang="scss" scoped>
	.job-page{
		background-color: #f5f5f5;
		.subtitle {
			border-bottom: 1rpx solid #e8e8e8;
		}
		.basic{
			background-color: #fff;
			color: #444;
			.title {
				color: #000;
				line-height: 2em;
			}
			.salary {
				color: #24ba97;
				line-height: 2em;
			}
		}
		
		.desc {
			background-color: #fff;
			color: #444444;
		}
		
		.companyInfo {
			background-color: #fff;
			color: #444;
		}
		.relative {
			background-color: #fff;
			color: #444444;
			.item{
				border-bottom: 1rpx solid #e8e8e8;
				.title-time{
					.title{
						color: #444;
					}
					.time{
						text-align: right;
						color: #888;
						font-style: italic;
						font-size: 26rpx;
					}
				}
				
				.info{
					.needs{
						font-size: 28rpx;
						color: #888;
					}
					.salary{
						text-align: right;
						font-size: 32rpx;
						color: #24ba97;
					}
				}
			}	
		}
	}
	
</style>