ks-app-employment-service/packageCa/job/details.vue

<template>
	<view class="specialtyItem">
		<view class="content">
			<view class="head">
				<view class="h3">
					{{jonInfo.Name}}
				</view>
				<view class="h2">所属大类：<text>{{bigType}}</text></view>
				<view class="h2">所属中类：<text>{{midType}}</text></view>
				<view class="h2">所属小类：<text>{{smallType}}</text></view>
			</view>
			<view class="txt-content">
				<view class="article-item" v-if="jonInfo.VideoUrl">
					<text class="h4">职业新说：</text>
					<video :src="jonInfo.VideoUrl"></video>
				</view>
				<view class="article-item" v-if="jonInfo.TopIntroduction">
					<text class="h4">职业说明：</text>
					<view class="article-content" v-html="jonInfo.TopIntroduction"></view>
				</view>
				<view class="article-item" v-if="jonInfo.TopWorkContent">
					<text class="h4">工作内容：</text>
					<view class="article-content" v-html="jonInfo.TopWorkContent"></view>
				</view>
				<view class="article-item" v-if="jonInfo.QualityRequirements">
					<text class="h4">从业要求：</text>
					<view class="article-content" v-html="jonInfo.QualityRequirements"></view>
				</view>
				<view class="article-item" v-if="jonInfo.AbilityRequirements">
					<text class="h4">能力要求：</text>
					<view class="article-content" v-html="jonInfo.AbilityRequirements"></view>
				</view>
				<view class="article-item" v-if="jonInfo.SalaryStr">
					<text class="h4">薪资范围：</text>
					<view class="article-content" v-html="jonInfo.SalaryStr"></view>
				</view>
				<view class="article-item" v-if="jonInfo.CareerProspects">
					<text class="h4">就业前景：</text>
					<view class="article-content" v-html="jonInfo.CareerProspects"></view>
				</view>
				<view class="article-item" v-if="jonInfo.JobSkill">
					<text class="h4">职业技能：</text>
					<view class="article-content" v-html="jonInfo.JobSkill"></view>
				</view>
				<view class="article-item" v-if="jonInfo.JobAbility">
					<text class="h4">职业能力：</text>
					<view class="article-content" v-html="jonInfo.JobAbility"></view>
				</view>
				<view class="article-item" v-if="jonInfo.JobKnowledge">
					<text class="h4">具备知识：</text>
					<view class="article-content" v-html="jonInfo.JobKnowledge"></view>
				</view>
				<view class="article-item" v-if="jonInfo.JobRequire">
					<text class="h4">职业素养：</text>
					<view class="article-content" v-html="jonInfo.JobRequire"></view>
				</view>
				
				<view class="article-item" v-if="jonInfo.JobActivity">
					<text class="h4">职业活动：</text>
					<view class="article-content" v-html="jonInfo.JobActivity"></view>
				</view>
				<view class="article-item" v-if="jonInfo.JobPath">
					<text class="h4">发展路径：</text>
					<view class="article-content" v-html="jonInfo.JobPath"></view>
				</view>
				<view class="article-item" v-if="jonInfo.TopWorkContent">
					<text class="h4">推荐专业：</text>
					<view class="article-content" v-html="jonInfo.TopWorkContent"></view>
				</view>
				<view class="article-item" v-if="jonInfo.SalaryStr">
					<text class="h4">薪资范围：</text>
					<view class="article-content" v-html="jonInfo.SalaryStr"></view>
				</view>
				<view class="article-item" v-if="jonInfo.CareerProspects">
					<text class="h4">就业前景：</text>
					<view class="article-content" v-html="jonInfo.CareerProspects"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/apiCa/job.js"
	import api1 from "@/apiCa/user.js"
	export default {
		data() {
			return {
				showLogin: false,
				isVisitor: false, //游客
				user: uni.getStorageSync("CAuserInfo").user,
				id: 0,
				// jonInfo: {
				// 	Name: "",
				// 	BigCategoryName: "",
				// 	MidCategoryName: "",
				// 	SmallCategoryName: "",
				// 	VideoUrl: "",
				// 	TopIntroduction: "",
				// 	TopWorkContent: "",
				// 	QualityRequirements: "",
				// },
				// listOne: [],//职业技能
				// listTwo: [],//职业能力
				// listThree: [],//具备知识
				// listFour: [],//职业素养
				// listFive: [],//职业活动
				
				jonInfo: {},
				isIntention: "",
				bigType: "",
				midType: "",
				smallType: "",
			}
		},
		onLoad(e) {
			if(this.user == undefined || this.user == null){
				this.isVisitor = true;
			}else {
				this.isVisitor = false;
			}
			this.id = e.id;
			this.queryJobDetailById();
		},
		methods: {
			changeIntention(){
				uni.showLoading({
					title: "加载中"
				})
				let isIntention = this.jonInfo.IsIntention;
				api1.doIntention(2,this.id,isIntention?1:0).then((res)=>{
					uni.hideLoading();
					if(res.Result == 1){
						this.jonInfo.IsIntention = !this.jonInfo.IsIntention;
					}
				})
			},
			// 获取专业信息
			queryJobDetailById(){
				uni.showLoading({
					title:"加载中"
				})
				api.queryJobDetailById(this.id).then((res) => {
					uni.hideLoading();
					if(res.Result == 1){
						  this.jonInfo = res.Data.info;
						  this.isIntention = res.Data.exit;
						  this.bigType = res.Data.parent3
						  this.midType = res.Data.parent2
						  this.smallType = res.Data.parent1
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.specialtyItem {
		// background-color: #f6f6f6;
		padding-bottom: 150rpx;
		.head {
			position: relative;
			padding: 20rpx 30rpx 20rpx;
			display: flex;
			width: 690rpx;
			background-color: #ffffff;
			justify-content: center;
			flex-direction: column;
			border-bottom: 20rpx solid #f6f6f6;
			.intention-btn {
				position: absolute;
				right: 30rpx;
				top: 10rpx;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				background: #1676FF;
				color: #fff;
				text-align: center;
			}
			.h3 {
				display: flex;
				align-items: center;
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #525252;
				margin-bottom: 10rpx;
			}
			.h2{
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
				text {
					color: #333;
				}
			}
		}

		.txt-content {
			position: relative;
			overflow: auto;
			background: #fff;
			padding: 34rpx 30rpx 60rpx 30rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			.article-item {
				margin-bottom: 32rpx;
				padding-bottom: 40rpx;
				border-bottom: 2rpx solid #f6f6f6;
				.h4 {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #323233;
					font-weight: 500;
					margin-bottom: 34rpx;
				}
				video {
					width: 100%;
				}
				.article-content {
					line-height: 46rpx;
					font-size: 28rpx;
					color: #969799;
				}
				.attr-wrap {
					.row {
						margin-bottom: 25rpx;
						.name {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							color: #20b664;
							margin-bottom: 18rpx;
							.label {
								display: block;
								width: 64rpx;
								height: 32rpx;
								line-height: 32rpx;
								margin-right: 20rpx;
								background: #FF8A00;
								border-radius: 12rpx;
								color: #fff;
								font-size: 24rpx;
								text-align: center;
							}
						}
						.desc {
							font-size: 28rpx;
							color: #969799;
							line-height: 42rpx;
						}
					}
				}
				.sp-wrap {
					display: flex;
					flex-wrap: wrap;
					.item {
						display: block;
						border: 2rpx solid #1677ff;
						border-radius: 8rpx;
						height: 52rpx;
						margin-right: 20rpx;
						line-height: 52rpx;
						padding: 0 15rpx;
						font-size: 28rpx;
						margin-bottom: 20rpx;
						color: #1677ff;
					}
				}
			}
		}
		.fiexd-visitor {
		  	position: fixed;
		  	bottom: 0;
		  	left: 0;
		  	display: flex;
		  	align-items: center;
		  	justify-content: center;
		  	width: 100%;
		  	height: 150rpx;
		  	background: rgba(255, 255, 255, 0.9);
		  	z-index: 99;
			border-top: 1px solid #eee;
		  	.btn {
		  		width: 300rpx;
		  		height: 80rpx;
		  		border-radius: 40rpx;
		  		line-height: 80rpx;
		  		background: #1677ff;
		  		font-size: 28rpx;
		  		text-align: center;
		  		color: #fff;
		  	}
		}
	}
</style>
<style>
	page {
		overflow-y: scroll;
	}	
</style>