clsd/app/pages/job/detail.vue

<template>
	<view>
		<view class="main">
			<view class="title">{{ item.title || '' }}</view>
			<view class="price" v-if="item.type == 0">{{ item.salary == '面议' ? item.salary : item.salary + '/月' }}</view>
			<view class="desc" v-if="item.title">
				<text>{{ item.experience == '不限' ? '经验不限' : item.experience + '经验' }} · {{ item.positionName || '' }} · {{ item.type == 0 ? '全职' : '兼职' }}</text>
				<view class="audit">
					<text class="icon">&#xe64f;</text>
					<text>已审核</text>
				</view>
			</view>
		</view>
		<view class="bos">
			<view class="ms" style="margin-top: 0px">
				<view class="mtitle">职位描述</view>
				<u-parse :content="item.contents" class="item"></u-parse>
			</view>
			<!--企业信息-->
			<view v-if="item.type == 0">
				<view class="ms" @click="go('/pages/job/enterprise/detail?id=' + enterprise.id)">
					<view class="icon gs">&#xe646;</view>
					<view class="con">
						<view class="mti omit">{{ enterprise.name }}</view>
						<view class="address omit">{{ enterprise.address }}</view>
					</view>
					<text class="icon more">&#xe62b;</text>
				</view>
				<map :latitude="item.latitude" :longitude="item.longitude" :markers="covers"></map>
			</view>
		</view>
		<view class="bz">
			<text class="icon">&#xe634;</text>
			<text>如有疑问或者需要帮助请联系我们客服</text>
			<button class="contact" open-type="contact">
				<text class="icon">&#xe632;</text>
				<text>点我沟通</text>
			</button>
		</view>
		<view class="mfooter">
			<view class="cn">
				<button class="tob share" open-type="share">
					<text class="icon">&#xe637;</text>
					<view class="mtt">分享</view>
				</button>
				<view class="tob" @click="add()" :class="{ active: flag }">
					<text class="icon">&#xe626;</text>
					<view class="mtt">收藏</view>
				</view>
				<button class="btn" @click="send()">
					<text class="icon">&#xe652;</text>
					<text>投递简历</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			item: {},
			enterprise: {},
			covers: [],
			flag: false
		};
	},
	onLoad(e) {
		this.http.request({
			url: '/app/position/detail/' + e.id,
			success: (res) => {
				this.item = res.data.data.position;
				this.enterprise = res.data.data.enterprise;
				this.covers.push({ latitude: this.item.latitude, longitude: this.item.longitude });
			}
		});
	},
	methods: {
		go(url) {
			uni.navigateTo({ url: url });
		},
		//收藏职位
		add() {
			this.http.request({
				url: '/app/favorite/add/' + this.item.id,
				success: (res) => {
					uni.showToast({ title: '收藏成功' });
					this.flag = true;
				}
			});
		},
		//投递简历
		send() {
			this.http.request({
				url: '/app/deliver/send/' + this.item.id,
				success: (res) => {
					//实名认证跳转
					if (res.data.code == 7878) {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: (res) => {
								uni.navigateTo({ url: '/pages/user/auth' });
							}
						});
						return;
					}
					//完善简历跳转
					if (res.data.code == 7979) {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: (res) => {
								uni.navigateTo({ url: '/pages/user/resume/index' });
							}
						});
						return;
					}
					//通知模板订阅消息
					uni.requestSubscribeMessage({
						tmplIds: ['ll-qdaEgbDN4rEod0nJpsjUuSqHT9e12EniZfRPiNqM'],
						complete: (c) => {
							uni.showModal({ content: '投递成功，等待企业回应', showCancel: false });
						}
					});
				}
			});
		},
		//分享
		onShareAppMessage: function (res) {
			return {
				title: this.item.title,
				path: '/pages/job/detail?id=' + this.item.id,
				success: (res) => {},
				fail: (res) => {}
			};
		}
	}
};
</script>

<style lang="scss">
.title {
	font-weight: bold;
}
.price {
	padding-top: 5px;
	font-size: 15px;
	font-weight: bold;
	color: #ff5722;
}
.desc {
	padding-top: 5px;
	font-size: 14px;
	.audit {
		float: right;
		color: $main-color;
	}
}
.bos {
	background-color: white;
	padding: 20px;
	border-radius: 25px;
	.ms {
		margin-top: 20px;
		overflow: hidden;
		.mtitle {
			font-weight: bold;
			margin-bottom: 10px;
		}
		.item {
			font-size: 14px;
			padding-top: 7px;
		}
		.gs {
			float: left;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #f1f1f1;
			text-align: center;
			font-size: 30px;
			line-height: 47px;
		}
		.con {
			float: left;
			padding-left: 10px;
			width: 70%;
			.mti {
				font-weight: bold;
				padding-bottom: 5px;
			}
			.address {
				font-size: 13px;
			}
		}
		.more {
			float: right;
			margin-top: 14px;
		}
	}
	map {
		border-radius: 8px;
		overflow: hidden;
		margin-top: 15px;
		width: 100%;
		height: 150px;
	}
}
.bz {
	padding-left: 5px;
	font-size: 13px;
	.contact {
		background-color: #f1f1f1;
		float: right;
		font-size: 13px;
		color: $main-color;
		margin-top: -5px;
	}
}
.mfooter {
	background-color: white;
	bottom: 0px;
	border-top: 1px solid $line;
	.cn {
		padding: 10px 10px 15px 10px;
		overflow: hidden;
		.tob {
			margin-right: 15px;
			float: left;
			color: $font-c;
			&.active {
				color: $main-color;
			}
			.icon {
				font-size: 28px;
			}
			.mtt {
				font-size: 14px;
			}
		}
		.share {
			background-color: white;
			line-height: 22px;
			padding-top: 3px;
		}
		.btn {
			float: right;
			margin-top: 5px;
		}
	}
}
</style>