keysass_app/pages/index/outsourcing/cloudUserdetail.vue

<template>
	<view class="moreCould">
		<view class="topbanner">
			<image class="topbannerimg" src="http://image.keyitest.cn/static/index/renliwb/cloudbanner3.png" mode=""></image>
			<view class="topCon">
				<view class="topConT">
					<div class="topConTL">{{ jonInfo.title }}</div>
					<div class="topConTR">{{ jonInfo.emolument }}</div>
				</view>
				<view class="topConM">
					<div class="topConMit">
						<image src="http://image.keyitest.cn/static/index/renliwb/cloudicon1.png" mode=""></image>
						{{ jonInfo.city }}
					</div>
					<div class="topConMit">
						<image src="http://image.keyitest.cn/static/index/renliwb/cloudicon2.png" mode=""></image>
						{{ jonInfo.experience }}
					</div>
					<div class="topConMit">
						<image src="http://image.keyitest.cn/static/index/renliwb/cloudicon3.png" mode=""></image>
						{{ jonInfo.education }}
					</div>
					<div class="topConMit">
						<image src="http://image.keyitest.cn/static/index/renliwb/cloudicon4.png" mode=""></image>
						招{{ jonInfo.personCount }}人
					</div>
					<div class="topConMit">
						<image src="http://image.keyitest.cn/static/index/renliwb/cloudicon5.png" mode=""></image>
						{{ jonInfo.jobType == 1 ? '兼职' : '全职' }}
					</div>
				</view>
				<view class="topConB">
					<div class="topConBit">五险一金</div>
					<div class="topConBit">加班补助</div>
					<div class="topConBit">餐补</div>
					<div class="topConBit">带薪年假</div>
				</view>
			</view>
			<view class="bocontent">
				<div class="bocontentBox">
					<div class="bocontentBoxT">职位描述</div>
					<!-- <div class="skillBox">
						<div class="skillBoxIt">C++test</div>
						<div class="skillBoxIt">Testbed</div>
						<div class="skillBoxIt">loadrunner</div>
						<div class="skillBoxIt">jmeter</div>
						<div class="skillBoxIt">C++</div>
					</div> -->
					<div v-html="jonInfo.jobDesc" class="bocontentBoxC">
					</div>

					<div class="bocontentBoxT">工作地点</div>
					<div class="bocontentBoxC">{{ jonInfo.city }}</div>
					<div class="bocontentBoxT">入职企业</div>
					<div class="bocontentBoxC">{{ jonInfo.company }}</div>
				</div>
			</view>
			<view class="bottomBtn">
				<div class="bottomB" @click="shenqing">
					申请职位
				</div>
			</view>
		</view>
		<u-modal title='温馨提示' v-model="tokenshow" content="您还没有登录" confirm-text='现在就去' cancel-text='稍等一下'
			show-cancel-button='true' cancel-color='#1578ED' confirm-color='#1578ED' @confirm="confirms"
			@cancel='tokenshow=false'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jonInfo: {},
				tokenshow: false
			};
		},
		onLoad(options) {
			const id = options.id
			this.getInfo(id)
		},
		methods: {
			getInfo(id) {
				this.http.quickGet(
					`/job/detail/${id}`,
					false).then(res => {
					this.jonInfo = res.data.data
				})
			},
			shenqing() {
				const accessToken = uni.getStorageSync('accessToken');
				if (!accessToken) {
					this.tokenshow = true
				} else {
					const wxUserInfo = uni.getStorageSync('wxUserInfo');
					this.http.quickPost(
						`/job/apply/${this.jonInfo.jobId}`, {
							userId: wxUserInfo.userId
						},
						true).then(res => {
						uni.showToast({
							title: '职位申请成功',
							icon: 'none'
						})
					}).catch(error => {
						uni.showToast({
							title: '职位申请失败',
							icon: 'none'
						})
					})
				}


			},
			confirms() {
				uni.navigateTo({
					url: '/pages/personal/login'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.moreCould {
		.topbanner {
			height: 250rpx;
			margin-bottom: 26rpx;
			position: relative;

			.topbannerimg {
				width: 100%;
				height: 100%;
			}

			.topCon {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 0 60rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.topConT {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.topConTL {
						font-weight: bold;
						font-size: 34rpx;
						color: #FFFFFF;
					}

					.topConTR {
						font-weight: bold;
						font-size: 34rpx;
						color: #FCA362;
					}
				}

				.topConM {
					display: flex;
					align-items: center;
					margin: 20rpx 0;
					flex-wrap: wrap;

					.topConMit {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF;
						margin-right: 32rpx;
						margin-bottom: 10rpx;

						image {
							width: 23rpx;
							height: 23rpx;
							margin-right: 7rpx;
						}
					}
				}

				.topConB {
					display: flex;
					align-items: center;

					.topConBit {
						width: 113rpx;
						height: 43rpx;
						line-height: 43rpx;
						text-align: center;
						background: rgba(140, 158, 177, 0.3);
						border-radius: 3rpx;
						font-weight: 500;
						font-size: 22rpx;
						color: #E6E6E6;
						margin-right: 18rpx;
					}

				}
			}

			.bocontent {
				padding: 0 25rpx;
				box-sizing: border-box;

				.bocontentBox {
					background: #FFFFFF;
					padding: 30rpx;
					box-sizing: border-box;

					.bocontentBoxT {
						font-weight: bold;
						font-size: 30rpx;
						color: #1A1A1A;
						margin-bottom: 27rpx;
					}

					.bocontentBoxC {
						font-weight: 500;
						font-size: 24rpx;
						color: #595959;
						line-height: 40rpx;
						margin-bottom: 30rpx;
					}

					.skillBox {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-bottom: 30rpx;

						.skillBoxIt {
							height: 45rpx;
							line-height: 45rpx;
							background: #F2F3F7;
							border-radius: 3rpx;
							padding: 0 10rpx;
							margin-right: 17rpx;
							font-weight: 500;
							font-size: 23rpx;
							color: #4D4D4D;
						}
					}
				}
			}

			.bottomBtn {
				height: 120rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 32rpx;

				.bottomB {
					width: 700rpx;
					height: 70rpx;
					background: #1778F7;
					border-radius: 6rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: center;
				}
			}
		}

	}
</style>