hire-wx-houxuanren/pagesB/details.vue

<template>
	<view class="concant">
		<view class="top">
			<!-- 职位 -->
			<view class="u-flex u-row-between  " style="align-items: center;">
				<view class="title">
					{{data.job_name}}
				</view>
				<view class="money">
					<text>{{data.salary_min}}-{{data.salary_max}}k</text>
					<text>·{{data.salary_structure}}</text>
				</view>
			</view>
			<!-- 地址 -->
			<view class="address">
				<text>{{data.work_province}}·{{data.work_city}}</text>|
				<text>{{data.experience_name}}</text>|
				<text>{{data.education_name}}</text>
			</view>
			<!-- 急聘 -->
			<view class="hint" v-if="data.is_urgent">
				<image src="" mode="" style="width: 52rpx;height: 52rpx;"></image>
				<text class="font1">急聘</text>
				<text class="font2">该职位为急聘职位，立即应聘抢占先机！</text>
			</view>
		</view>
		<view class="hr u-flex " style="align-items: center;">
			<image :src="data.usermanager.avatar" mode="" style="width: 96rpx ; height: 96rpx;border-radius: 50%;"></image>
			<view class="" style="margin-left: 20rpx;">
				<view class="font1">{{data.usermanager.name}}</view>
				<text class="font2">内核招聘·{{data.usermanager.company_text}}</text>
			</view>
		</view>
		<view class="position">
			<view class="titleb">职位信息</view>
			<view class="" style="display: flex; margin-top: 6rpx;">
				<view class="left">
					<text class="font">职位类型：{{data.categoryjob.name}}</text>
					<text class="font">所属部门：{{data.department}}</text>
					<text class="font">汇报对象：{{data.department}}</text>
					<text class="font">是否管理岗：{{data.data.is_guanli == 1?"是":"否"}}</text>
				</view>
				<view class="right" style="margin-left: 68rpx;">
					<text class="font">招聘人数：{{data.is_guanli}}人</text>
					<text class="font">开放原因：{{data.open_cause}}</text>
					<text class="font">团队规模：{{data.scale}}人</text>
				</view>
			</view>
		</view>
		<view class="introduce">
			<view class="titleb">职位描述</view>
			<view class="font" style="margin-top: 32rpx;">岗位职责：</view>
			<view class="font" style="margin-top: 24rpx;">
				{{data.job_describe}}
			</view>
		</view>
		<!-- 薪资福利 -->
		<view class="introduce" style="margin-top: 32rpx;">
			<view class="titleb">薪资福利</view>
			<view class="font " style="margin-top: 32rpx;display: flex; ">
				<view style="width:150rpx;">薪资范围：</view>
				<view style="width: 536rpx;min-height: 42rpx;word-break: break-all; ">
					{{data.social_benefits}}</view>
			</view>
			<view class="font " style="margin-top: 32rpx;display: flex; ">
				<view style="width:150rpx;">薪资结构：</view>
				<view style="width: 536rpx;min-height: 42rpx;word-break: break-all;">
					{{data.salary_structure}}</view>
			</view>
			<view class="font " style="margin-top: 32rpx;display: flex; ">
				<view style="width:150rpx;">福利待遇：</view>
				<view style="width: 536rpx;min-height: 42rpx;word-break: break-all;">
					{{data.social_benefits}}</view>
			</view>
		</view>
		<!-- 面试信息 -->
		<view class="introduce" style="margin-top: 32rpx;">
			<view class="titleb">面试信息</view>
			<view class="font " style="margin-top: 32rpx;display: flex; ">
				<view style="width:150rpx;">面试轮次：</view>
				<view style="width: 536rpx;min-height: 42rpx;word-break: break-all; ">
					{{data.interview_num}}轮</view>
			</view>
			<view class="font " style="margin-top: 32rpx;display: flex; ">
				<view style="width:150rpx;">面试流程：</view>
				<view style="width: 536rpx;min-height: 42rpx;word-break: break-all;">
					{{data.interview_flow}}</view>
			</view>
		</view>
		<!-- 工作地点 -->
		<view class="address1" style="margin-top: 32rpx;">
			<view class="titleb">工作地点</view>
			<view class="font " style="margin-top: 32rpx;display: flex; ">
				<view style="width:150rpx;">工作地址：</view>
				<view style="width: 536rpx;min-height: 42rpx;word-break: break-all; ">
					{{data.work_province}} - {{data.work_city}} - {{data.work_address}}- {{data.company.name}}</view>
			</view>
			<view class="border">
				<view class="u-flex u-row-between"  @click="toGsinfo(data.company.id)">
					<view class="u-flex">
						<image :src="data.companys.categoryindustry.logo"  mode="" style="width: 100rpx;height: 100rpx;">
						<view class="" style="margin-left: 28rpx;">
							<view class="">{{data.company.name}}</view>
							<view class="font2" style="margin-top: 12rpx;margin-left: -20rpx;">
								<text class="">{{data.company.categoryindustry.name}}</text>|
								<text class="">{{data.company.stage.name}}</text>|
								<text class="">{{data.company.scale.name}}</text>
							</view>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="" style="margin-top: 32rpx;">
					<view class="page-body" style="hanging-punctuation: 336rpx;">
						<view class="page-section page-section-gap">
							<map style="width: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
							</map>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom u-flex">
			<view class="" @click="call" style="width: 80rpx;display: flex;flex-direction: column;align-items: center;">
				<u-icon v-if="!data.collectjob" name="star" size="26"></u-icon>
				<u-icon v-if="data.collectjob" name="star-fill" color="#2979ff" size="26"></u-icon>
				<text :style="[{color:data.collectjob?'#2979ff':'#555'}]"
					class="font">{{data.collectjob?'已收藏':"收藏"}}</text>
			</view>
			<button class="btn11" @click="open">投递简历</button>
			<button class="btn22" @click="open">立即聊聊</button>
		</view>

		<!-- 弹出层 -->
		<u-popup customStyle="width: 556rpx;height: 404rpx;border-radius: 16rpx;" :show="show" mode="center">
			<view class="back1">
				<view class="font1">完善简历信息</view>
				<view class="font2" style="margin-top:20rpx;">当前账号还未完善简历信息，该功能无法使用，如需使用该功能，请去完善个人简历信息</view>
				<view class="u-flex" style="margin-top: 40rpx;">
					<button class="btn1" @tap="close">取消</button>
					<button class="btn2">去完善</button>
				</view>
			</view>
			<view class="u-flex " style="margin-top: 44rpx;justify-content:center;">
				<image @click="close" style="width: 66rpx; height: 66rpx;" src="../static/images/close.png" mode="">
				</image>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		getdetail,collect
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				// 收藏
				collect: false,
				show: false,
				zid: "", //职位id
				data:{},//职位详情数据

				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				// covers: [{
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	// iconPath: '../../../static/location.png'
				// }, {
				// 	latitude: 39.90,
				// 	longitude: 116.39,
				// 	// iconPath: '../../../static/location.png'
				// }]
			}
		},
		onLoad(options) {
			console.log(options.id);
			this.zid = options.id
			this.getDetail()
		},
		methods: {
			call() {
				if (this.data.collectjob==null) {
					this.data.collectjob = "1"
					this.$u.toast("收藏成功")
					collect({
						id:this.zid,
						status:1
					}).then((res)=>{
						
					})
				}else{
					this.data.collectjob = null
					this.$u.toast("取消收藏")
					collect({
						id:this.zid,
						status:2
					}).then((res)=>{
						
					})
				}
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			// 获取职位详情
			getDetail() {
				getdetail({
					id: this.zid
				}).then((res) => {
					if(res.code == 1){
						this.data =  res.data
					}else{
						this.$u.toast(res.msg)
					}
					
				})
			},
			//跳转到公司详情
			toGsinfo(id){
				uni.navigateTo({
					url:"/pagesB/gongsi-info?id="+id
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.back1 {
		background: url(../static/images/pop.png) no-repeat;
		// width: 556rpx;height: 404rpx;
		text-align: center;
		padding: 56rpx 46rpx 42rpx 46rpx;
		box-sizing: border-box;
		background-size: 100% 100%;

		.font1 {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.font2 {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #555555;
		}

		.btn1 {
			width: 220rpx;
			height: 84rpx;
			background: #F3F3F3;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.btn2 {
			width: 220rpx;
			height: 84rpx;
			background: #0C66C2;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.bottom {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		height: 118rpx;
		padding: 18rpx 32rpx 12rpx 0;
		background: #fff;
		box-sizing: border-box;
		border-top: 2rpx solid #F4F4F4;


		.font {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}

		.btn11 {
			width: 236rpx;
			height: 88rpx;
			background: #FA6400;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
		}

		.btn22 {
			width: 344rpx;
			height: 88rpx;
			background: #0C66C2;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}

	.titleb {
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 50rpx;
	}

	.concant {
		padding: 44rpx 32rpx 130rpx;
		min-height: 100vh;


		.address1 {
			margin-top: 40rpx;

			.font {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}

			.border {
				margin-top: 32rpx;
				padding: 34rpx 0;
				border-top: 2rpx solid #F4F4F4;

				.font2 {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;

					text :first-child {
						// margin-left: 0 !important;
						margin-right: 20rpx;
					}

					text :nth-child(2) {
						margin: 0 20rpx;
					}

					text :last-child {
						margin: 20rpx;
					}
				}

			}
		}

		.introduce {
			margin-top: 40rpx;

			.font {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}
		}

		.top {

			.title {
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			.money {
				font-size: 32rpx;
				font-family: SFPro-Medium, SFPro;
				font-weight: 500;
				color: #0C66C2;
			}

			.address {
				margin: 20rpx 0 28rpx -20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #444444;

				text :first-child {
					margin-left: 0 !important;
					margin-right: 20rpx;
				}

				text :nth-child(2) {
					margin: 0 20rpx;
				}

				text :last-child {
					margin: 20rpx;
				}
			}

			.hint {
				background: #FFE9DF;
				border-radius: 12rpx;
				margin-bottom: 28rpx;
				display: flex;
				align-items: center;
				padding: 16rpx 0 16rpx 24rpx;

				.font1 {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF5335;
					margin: 0 20rpx 0 16rpx;
				}

				.font2 {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #444444;
				}
			}
		}

		.hr {
			margin-top: 28rpx;
			border-bottom: 2rpx solid #F4F4F4;
			border-top: 2rpx solid #F4F4F4;
			height: 150rpx;
			padding: 26rpx 0 28rpx;

			.font1 {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #444444;
				line-height: 42rpx;
			}

			.font2 {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 34rpx;
			}
		}

		.position {
			margin-top: 34rpx;

			.font {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				margin-top: 24rpx;
				display: block;
			}
		}
	}
</style>