jp-zeroWorkerStation/pages/packages/jobInformation/jobDetails.vue

<template>
	<view>
	 
		<u-navbar :back-text="showTitle"  :share="share"  back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="content">
			<view class="title">
				<span class="titleSpan"  v-if="!info.isOnline">
					已下架
				</span>
				{{info.positionName}}
			</view>
			<view class="saraly">
				{{info.salary}}<text>{{getUnit(info)}}</text>
			</view>
			
			<view class="date-views">
				<view class="date">
					更新时间：{{info.updateTime?info.updateTime:info.createTime}}
				</view>
				<view class="views">
					浏览量：{{info.browseNumber}}
				</view>
			</view>
		</view>
		<!-- 岗位详情 -->
		<view class="content">
			<view class="headline">
				招工要求
			</view>
			<view class="group">
				<view class="item">
					<view class="item-title">
						招聘人数：
					</view>
					<view class="item-value">
						{{info.recruitingNumbers}}人
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						结算方式：
					</view>
					<view class="item-value">
						{{info.settlementMethodN}}
					</view>
				</view>
				<view class="item"  v-if="info.ageRequirement" >
					<view class="item-title">
						年龄要求：
					</view>
					<view class="item-value">
						{{info.ageRequirement?info.ageRequirement:'未填写'}}
					</view>
				</view>
			</view>
			<view class="headline">
				工作详情
			</view>
			<view class="group">
				<view class="item">
					<view class="item-title">
						工作内容：
					</view>
					<view class="item-value">
						{{info.desc}}
					</view>
				</view>
			</view>

			<view class="headline">
				联系方式
			</view>
			<view class="group">
				<view class="item">
					<view class="item-title">
						联系人：
					</view>
					<view class="item-value">
						{{info.contacts}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						手机号：
					</view>
					<view class="item-value"  v-if="ck()" >
						{{info.contactsPhone}}
					</view>
					<view class="item-value"  style="font-size: 24rpx;    color: #777777;" v-else >
						(实名认证后可查看)
					</view>
				</view>
				
				<view class="item" v-if="info.images" >
					
					
					<view   class="codeImage">
						<view class="codeImageView">预览图片 点击查看</view>
						
						<view class="class">
							<img   v-for="(item,i) in imagesList "  @click="previewImage(i)"
							v-if="item" :key="i"     :class="'class'+i"
							:src="item.url" :show-menu-by-longpress="false" ></image>
						</view>
						
					</view>
				</view>
				

			</view>
			
			
		</view>
		
		
		
		<!-- 幻灯片 -->
		<view class="swiper"  v-if="bannerlist.length">
			<u-swiper  img-mode="scaleToFill"  mode="none"   height="100"  :list="bannerlist" @click="clickBanner"  ></u-swiper>
		
		</view>
		<view class="content">	
			<view class="headline">
				公司信息
			</view>
			<view class="group">
				<view class="item">
					<view class="item-title">
						公司名称：
					</view>
					<view class="item-value">
						{{enterpriseInfo.name}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						工作地区：
					</view>
					<view class="item-value"   >
						{{info.workArea}}
					</view>
				
				</view>
				<view class="item">
					<view class="item-title">
						详细地址：
					</view>
					<view class="item-value"   >
						{{info.address}}
					</view>
				
				</view>
			</view>
		</view>
		
		

		<!-- 底部按钮 -->
		<view class="bottom">
			<!-- 分享 -->
			<view>
				<button class="share" open-type="share">
					<view class="icon">
						<img src="@/assets/img/riFill-share-circle-fill@1x.png" alt="">
					</view>
					<view class="text">
						分享
					</view>

				</button>
			</view>
			<view class="btn">
				<button class="dialing" @click="showPhoneBtn">拨打电话</button>
				<button class="invite" :class="{
					isJoin:isJoin
				}" @click="isJoinBtn">{{isJoin?'已报名':'我要报名'}}</button>


			</view>
			<u-modal v-model="showPhone" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" title="联系电话" :content="info.contactsPhone"
				:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
		import * as API_weixin from '@/apis/weixin.js'
	export default {
		data() {
			return {
				id: "",
				showPhone: false,
				confirmText: '拨打电话',
				content: "",
				tabList: ['', '日', '周', '月'],
				isJoin: false,
				share: 0,
				isRead:0,
				readId:"",
				enterpriseInfo:{},
				bannerlist: [
				],
				info: {
					"isOnline":true,
					"id": "",
					"enterpriseId": "",
					"positionName": "",
					"salary": "",
					"settlementMethod": "",
					"industry": "",
					"recruitingNumbers": "",
					"desc": "",
					"contacts": "",
					"contactsPhone": "",
					"workArea": "",
					"address": "",
					"browseNumber": "",
					"status": "0",
					"createBy": "",
					"createTime": "",
					"updateBy": "",
					"updateTime": "",
					"delFlag": false,
					"salaryForm": "",
					"salaryFormN": "",
					"enterpriseName": "",
					"industryN": "",
					"settlementMethodN": "",
					ageRequirement:"",
				},
			}
		},
		onShareTimeline(){
			return {
				title: "荆州经开区共享用工平台",
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				//.log(res.target)
			}
			return {
				title: this.showTitle,
				path: '/pages/packages/jobInformation/jobDetails?shareMP=1&id=' + this.id
			}
		},
		computed: {
			imagesList(){
				if(this.info&&this.info.images){
					var images=this.info.images;
					return  JSON.parse(images)
				}
					return []
			},
			showTitle() {
				if (this.info.id) {
					return (this.info.isOnline?'':'已下架-')+this.info.positionName + '-' + this.info.salary + this.getUnit(this.info)
				}
				return ''
			}
		},
		onLoad(op) {
			//uni.showShareMenu()
			this.id = op.id
			if (op.shareMP) {
				this.share = op.shareMP
			}
			if(op.isread){
				this.isRead=op.isread
					this.readId=op.readid
			}
			this.getInfo()
			this.getNewsInfo()
		},
		
		methods: {
				previewImage(index) {
					var list=this.imagesList.map(item=>{
						return item.url
					})
			   		uni.previewImage({
			   			urls:list ,
			   			current: index,
			   			 indicator:"number",
			   			loop: true
			   		})
			   	},
			getNewsInfo(){
				
				API_weixin.bannerList({
					classify:2,
					
				}).then((res) => {
					uni.hideLoading();
					
					//this.newsList = res.data.data;
					this.bannerlist	=res.data.data.map(item=>{
						item.image=item.picUrl
						return item
					})	 
					
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			customBack(){
				uni.redirectTo({
					url:"/pages/main/index/index"
				})
			},
			showPhoneBtn(){
				if(this.ck()){
					this.showPhone=true
				}else{
					uni.showToast({
						title:"实名认证后可以拨打电话",
						icon:"none"
					})
				}
			},
			ck(){
				var user = this.carhelp.getPersonInfo();
				if(user&&user.status ==1){
					return true
				}else{
					return false
				}
			},
			confirmPhone() {
				this.showPhone = false;
				uni.makePhoneCall({
					phoneNumber: this.info.contactsPhone
				});
			},
			isJoinBtn() {
				if (this.isJoin) {
					return
				}
				var user = this.carhelp.getPersonInfo();

				if (!user) {
					uni.showModal({
						title: '提示',
						content: '登录并实名认证创建简历后可以报名',
						confirmText: "前往登录",
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/tab/mine/mine'
								})

							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
					return
				}
				if (user.status != 1) {
					uni.showModal({
						title: '提示',
						content: '实名认证并创建简历后可以报名',
						confirmText: "实名认证",
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/packages/mine/otherServices/authentication'
								})

							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
					return
				}
				var jobInformationInfo = this.carhelp.getPersonInfoPlus().jobInformationInfo;
				if (!jobInformationInfo) {
					uni.showModal({
						title: '提示',
						content: '创建简历后可以报名',
						confirmText: "创建简历",
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/packages/mine/myJobInformation/myJobInformation'
								})

							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
					return
				}
				if (jobInformationInfo&&jobInformationInfo.status!=1) {
					uni.showToast({
						title:"简历审核中，请耐心等待",
						icon:"none"
					})
					return
				}
				
				if(user.intention=="2"){
					var _this= this
					uni.showModal({
						title: '提示',
						content: '您当前求职意向为[已入职/勿扰],是否帮您修改为[求职中]，并为您报名此岗位？',
						confirmText: "报名",
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								
								_this.updateintentionBtn()
							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
					return
				}
				
				
				
				this.joinRecruitApi()
			},
			joinRecruitApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.joinRecruit({
					recruitId: this.id,
				}).then((res) => {
					this.isJoin = true;
					//this.info=res.data.recruitInformationInfo;
					uni.showModal({
						title: '提示',
						content: '报名成功',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
				
								//uni.navigateBack()
							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
					uni.hideLoading();
				
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			updateintentionBtn(){
				 
				var intention=1
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.updateIntention({
					intention: intention
				}).then((res) => {
					uni.hideLoading();
					
					this.joinRecruitApi();
					
				}).catch(error => {
					this.showPhone = false;
					uni.hideLoading();
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				var obj={
					recruitId: this.id,
				}
				if(this.isRead==1){
					obj.isRead=1
					obj.jerId=this.readId
				}
				
				API.recruitDetail(obj).then((res) => {
					this.isJoin = res.data.isJoin;
					this.info = res.data.recruitInformationInfo;
					this.enterpriseInfo=res.data.enterpriseInfo
					uni.hideLoading();

				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 100px;
	}
</style>

<style lang="scss" scoped>
	
	.codeImage{
		 //   height:160rpx;
		background-color: #fff;
		// text-align: center;
		//  border: 1px dashed;
		 // width: 700rpx;
		 //position: relative;
		 // padding-bottom: 20px;
		.codeImageView{
			//padding: 20rpx 0px 40rpx;
			color: #777777;
			//font-size: 24rpx;
		}
		.class{
			// position: absolute;
			 img{
				 margin: 3px;
				 //border-bottom: 1px solid #777777;
				//  position: absolute;
				 width :180rpx;
				 height: 160rpx;
			 }
		}
		// .class0{
		// 	top:0 ;left:0;
		// }
		// .class1{
		// 	top:10px ;left:20px;
		// }
		// .class2{
		// 	top:20px ;left:40px;
		// }
		// .class3{
		// 	top:60px ;left:60px;
		// }
		
		
		// .class0{
		// 	top:0;left:0;
		// }
		// .class1{
		// 	top:3px;left:20px;
		// }
		// .class2{
		// 	top:6px;left:40px;
		// }
		// .class3{
		// 	left:60px;
		// }
		
		// .class{
		// 	 position: absolute;
		// }
		 
		
	}
	
	.swiper{
		  margin: 20rpx;
	}
	// 岗位详情
	.content {
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 52rpx;
			font-family: 'PingFangSC-medium';
			.titleSpan{
				padding:0 12rpx;
				font-size: 42rpx;
				text-align: center;
				border-radius: 4px;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(178, 184, 190, 1);
			}
		}

		.saraly {
			color: rgba(255, 61, 0, 1);
			font-size: 24px;
			margin-top: 16rpx;
			font-weight: bold;

			text {
				font-size: 28rpx
			}
		}

		.address {
			color: rgba(16, 16, 16, 1);
			margin-top: 40rpx;
		}

		.date-views {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;

			.date {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}

			.views {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}
		}

		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
		}

		.group {
			margin-top: 24rpx;
			margin-bottom: 64rpx;

			.item {
				line-height: 40rpx;
				display: flex;
				margin-bottom: 8rpx;

				.item-title {
					color: rgba(119, 119, 119, 1);
					line-height: 40rpx;
					width: 150rpx;
				}

				.item-value {
					flex: 1;
					margin-left: 8rpx;

					color: #101010;
				}
			}
		}

	}


	// 底部按钮
	.bottom {
		background-color: #fff;
		padding: 24rpx 44rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.share {
			background-color: #fff;
		}

		// 分享
		.icon {
			width: 48rpx;
			height: 48rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			color: rgba(39, 149, 253, 1);
			font-size: 24rpx;
			line-height: 48rpx;
		}

		.btn {
			display: flex;
			margin-left: auto;

			.dialing {
				width: 240rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 50px;
				background-color: #fff;
				color: rgba(39, 149, 253, 1);
				font-size: 36rpx;
				text-align: center;
				border: 1px solid rgba(39, 149, 253, 1);
				margin-right: 24rpx;
			}

			.invite {
				width: 280rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 50px;
				background-color: rgba(34, 149, 255, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 36rpx;
				text-align: center;

			}

			.isJoin {
				background-color: #19be6d;
			}

		}
	}
	.swiper2{
		display: flex;
		background-color: #2295ff;
		    align-items: center;
			    margin: 10px 10px;
			    border-radius: 10px;
		.view{
			margin-left: 5px;
			    color: #fff;
			    font-size: 18px;
		}
		.span{
			margin-left: 5px;
			     font-size: 12px;
			     background: #fff;
			     color: #2295ff;
			     padding: 3px;
			     border-radius: 4px;
			     font-weight: 400;
		}
	}
</style>