yixiang/pageC/zhiwei-detail.vue

<template>
	<view class="content">
		<view class="navbar">
			<u-navbar title=" " :autoBack="true" :placeholder="true">
				<!-- <view slot="right" class="u-nav-right hflex acenter">
					<image src="static/share.png" mode="aspectFill"></image>
					<image src="static/sandian.png" mode="aspectFill"></image>
				</view> -->
			</u-navbar>
		</view>
		<view class="detail">
			<view class="name hflex acenter jbetween">
				<text class="text_hide">{{detail.title}}</text>
				<text>{{detail.salary_min}}-{{detail.salary_max}}K·{{detail.salary_month}}薪</text>
			</view>
			<view class="city hflex acenter">
				<text v-if="detail.city">{{detail.city}}  | </text>
				<text v-if="detail.experience_min">{{detail.experience_min}}-{{detail.experience_max}}年  | </text>
				<text v-if="detail.education">{{detail.education}}</text>
			</view>
			<view class="user hflex acenter">
				<image :src="detail.avatar" mode="aspectFill"></image>
				<view class="vflex user-right jbetween">
					<text>{{detail.name}}</text>
					<text>{{detail.mobile}}</text>
				</view>
			</view>
			<view class="box">
				<view class="title">职位详情</view>
				<u-parse :content="detail.detail"></u-parse>
			</view>
			<view class="box">
				<view class="title">职位福利</view>
				<view class="hflex acenter fwrap box-list">
					<text v-for="(item,index) in detail.tags" :key="index">{{item.name}}</text>
				</view>
			</view>
			<view class="box">
				<view class="title">公司信息</view>
				<u-parse :content="detail.company_info"></u-parse>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="totoudi">投递简历</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return{
				id: '',
				detail: {},
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		methods: {
			totoudi() {
				uni.navigateTo({
					url: '/pageC/jianli'
				})
			},
			getdata() {
				var _this = this
				$api.req({
					url: 'job/'+ this.id,
					method: 'GET',
				}, function(res) {
					if(res.code == 10000) {
						_this.detail = res.data
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #FFFFFF;
		.detail {
			margin: 0 0 166rpx;
			padding: 32rpx 28rpx 166rpx;
			.name {
				text:first-child {
					font-size: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				text:last-child {
					font-size: 32rpx;
					font-family: JDZhengHT, JDZhengHT;
					font-weight: 400;
					color: #00B0B0;
				}
			}
			.city {
				padding: 20rpx 0 40rpx;
				text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					padding: 0 16rpx 0 0;
				}
			}
			.user {
				padding-bottom: 32rpx;
				border-bottom: 1px solid #FAFAFA;
				image {
					width: 80rpx;
					height: 80rpx;
					margin: 0 20rpx 0 0;
					border-radius: 50%;
				}
				.user-right {
					height: 80rpx;
					
					text:first-child {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
					text:last-child {
						font-size: 24rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: rgba(51, 51, 51, .6);
					}
				}
			}
			.box {
				padding: 28rpx 0;
				border-bottom: 1px solid #FAFAFA;
				.title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #222222;
					padding: 0 0 20rpx;
				}
				.text {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
				.box-list {
					text {
						background: #F2F2F2;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #555555;
						padding: 6rpx 14rpx;
						margin: 0 20rpx 18rpx 0;
					}
				}
			}
		}
		.bottom {
			width: 750rpx;
			box-sizing: border-box;
			height: 166rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 12rpx 34rpx 70rpx;
			border-top: 1px solid #f5f5f5;
			.btn {
				width: 682rpx;
				height: 84rpx;
				background: #00B0B0;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
			}
		}
		.navbar {
			.u-nav-right {
				image {
					width: 48rpx;
					height: 48rpx;
					margin: 0 0 0 20rpx;
				}
			}
		}
	}
</style>