jp-zeroWorkerStation/pages/packages/choreInformation/jobSearchDetails.vue

<template>
	<view>
		<u-navbar :back-text="showTitle" v-if="share" back-icon-size="28" :customBack="customBack" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		
		<u-navbar :back-text="showTitle" v-else back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="content">
			<!-- 职位 -->
			<view class="position">
				{{info.intendedIndustriesN}}
			</view>
			<!-- 薪水 -->
			<view class="saraly">
				{{info.hopeSalary}}<text>{{getUnit(info)}}</text>
			</view>
			<!-- 发布日期和浏览量 -->
			<view class="date-views">
				<view class="date">
					更新时间：{{getTime(info)}}
				</view>
				<view class="views">
					浏览量：{{info.browseNumber}}
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="job-information">
				求职信息
			</view>
			<!-- 意向岗位 -->
			<view class="intention">
				<view class="title">
					意向岗位：
				</view>
				<view class="details">
					{{info.intendedPosition}}
				</view>
			</view>
			<!-- 服务描述 -->
			<view class="describe">
				服务描述
			</view>
			<view class="describe-details">
				{{info.serviceDesc}}
			</view>
		</view>
	
	
	    <view class="content">
			<!-- 联系方式 -->
	    	<view class="contact-information">
				<view class="title">
					联系方式
				</view>
				<view class="details">
					<!-- 照片 -->
					<view class="photo">
						<u-avatar :src="personInfo.photo"></u-avatar>
						
					</view>
					<view class="linkman-infos">
						<!-- 姓名电话 -->
						<view class="name-tel">
							<view class="name">
								{{getPersonName(personInfo.realName,personInfo)}}
							</view>
							<view class="tel" v-if="ck()">
							
								{{personInfo.phone}}
							</view>
							<view class="tel" style="font-size: 24rpx;" v-else >
							
								**** 企业认证后查看电话
							</view>
						</view>
						<!-- 标签 -->
						<view class="tags">
							<view class="tag-item" style="background-color: red;color:#fff" v-if="personInfo.intention==2" >
								已入职/勿扰
							</view>
							
							<view class="tag-item">
								{{personInfo.gender==1?'男':'女'}}
							</view>
							<view class="tag-item">
								{{personInfo.age}}岁
							</view>
							<view class="tag-item" v-if="info.educationN">
								{{info.educationN}}
							</view>
							
						</view>
						<view style="margin-top: 18rpx;    color: #777777;">
							现居住地：
							
							<span class="tel" v-if="ck()">
							
								{{info.address?info.address:'未填写'}}
							</span>
							<span class="tel" style="font-size: 24rpx;" v-else >
							
								**** 企业认证后查看
							</span>
						</view>
					</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="dialingBtn" >一键拨号</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="personInfo.phone"
	 		:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
	 	<!-- 筛选框 -->
	 	<u-popup v-model="popupShow"    mode="bottom" border-radius="20" :closeable="true">
	 		<view class="popup-content">
	 			<view class="headline">
	 				选择岗位
	 			</view>
	 			
	 			<!-- 工作经验 -->
	 			<view class="work-experience">
	 				
	 				<!-- 选项 -->
	 				<view class="options">
	 					<view :class="{item,checked:workChecked==index}" v-for="(item,index) in workList" :key="index"
	 						@click="workChecked=index">
	 						{{item.positionName}}-{{item.salary}}{{getUnit(item)}}
	 					</view>
	 				</view>
	 			</view>
	 			<view class="button">
	 				<button class="reset" @click="popupShow=false">关闭</button>
	 				<button class="confirm" @click="isJoinMethodBtn()" >发出邀请</button>
	 			</view>
	 		</view>
	 	</u-popup>
	 </view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				id: "",
				workList:[],
				popupShow:false,
				showPhone: false,
				confirmText: '拨打电话',
				content: "",
				isJoin: false,
				share: 0,
				personInfo:{},
				readId:"",
				isRead:0,
				workChecked:-1,
				info: {
					"id": "",
					"personId": "",
					"photo": "",
					"serviceDesc": "",
					"intendedIndustries": "",
					"intendedPosition": "",
					"hopeSalary": '',
					"method": "",
					"workExperience": "",
					"education": "",
					"status": "",
					"createBy": "",
					"createTime": "",
					"updateBy": "",
					"updateTime": "",
					"delFlag": false,
					"personName": null,
					"intendedIndustriesN": null,
					"methodN": null,
					"workExperienceN": null,
					"educationN": null
				}
			}
		},
		onShareTimeline(){
			return {
				title: "荆州经开区共享用工平台",
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				//.log(res.target)
			}
			return {
				title: this.showTitle,
				path: '/pages/packages/choreInformation/jobSearchDetails?shareMP=1&id=' + this.id
			}
		},
		computed: {
			showTitle() {
				if (this.info.id) {
					return (this.personInfo.intention==2?'勿扰-':'')+this.getPersonName(this.personInfo.realName,this.personInfo)+"-"+this.info.hopeSalary+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()
		},
		methods: {
			customBack(){
				uni.redirectTo({
					url:"/pages/main/index/index"
				})
			},
			ck(){
				var user=this.carhelp.getPersonInfo();
				var enterpriseInfo=this.carhelp.getPersonInfoPlus().enterpriseInfo;
				
				if(user&&enterpriseInfo&&enterpriseInfo.status==1){
					return true
				}else{
					return false
				}
			},
			dialingBtn(){
				
				if(this.ck()){
					if(this.personInfo.phone){
						this.showPhone=true
					}else{
						uni.showToast({
							icon: 'none',
							title:"该用户未预留手机号"
						})
					}
				}else{
					uni.showToast({
						title:"企业认证后可以拨打电话",
						icon:"none"
					})
				}
				
				
			},
			confirmPhone() {
				
				this.showPhone = false;
				uni.makePhoneCall({
					phoneNumber: this.personInfo.phone
				});
			},
			isJoinMethodBtn() {
				if(this.workChecked==-1){
					uni.showToast({icon: 'none',
						title:"请选择邀请岗位"
					})
					return
				}
				var jobId =this.workList[this.workChecked].id
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.inviteJob({
					recruitId:jobId,
					jobId: this.id,
				}).then((res) => {
					this.isJoin = true;
					this.popupShow=false
					//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"
					})
				})
			},
			popupShowOpen(){
				if(this.workList.length==0){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API.myEmployment({
						pageIndex: 1,
						pageSize: 200,
						isOnline:1,
						status: 1
					}).then((res) => {
						uni.hideLoading();
						if(res.data.data.length){
							this.workList=res.data.data
							
							this.popupShow=true
						}else{
							
							uni.showModal({
								title: '提示',
								content: '发布招工信息后可以邀请人员',
								confirmText:"前往发布",
								showCancel: true,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/tab/issue/issue'
										})
										
									} else if (res.cancel) {
										//.log('用户点击取消');
									}
								}
							});
						}
						
					}).catch(error => {
					
						uni.showToast({icon: 'none',
							title: error
						})
						//this.getPhone()
						
					})
				}else{
					this.popupShow=true
				}
			},
			isJoinBtn() {
				if (this.isJoin) {
					return
				}
				var user=this.carhelp.getPersonInfo();
				var enterpriseInfo=this.carhelp.getPersonInfoPlus().enterpriseInfo;
				
				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 (!enterpriseInfo||enterpriseInfo.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
				}
				 this.popupShowOpen()
				
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj={
					id: this.id,
				}
				if(this.isRead==1){
					obj.isRead=1
					obj.rprId=this.readId
				}
				API.jobHuntDetail(obj).then((res) => {
					this.isJoin = res.data.isInvite;
					this.info = res.data.jobInformationInfo;
					this.personInfo = res.data.personInfo;
					
					uni.hideLoading();
			
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 24rpx;
		// 职位
	  .position{
		  color: rgba(16, 16, 16, 1);
		  font-size: 24px;
		  font-family: 'PingFangSC-medium';
	  }
	  // 薪水
	  .saraly{
		  margin-top: 16rpx;
		  color: rgba(255, 61, 0, 1);
		  font-size: 48rpx;
		  text{
			  font-size: 14px;
			  margin-left: 4rpx;
		  }
	  }
	  // 发布日期和浏览量
	  .date-views{
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-top: 40rpx;
		  .date{
			  color: rgba(119, 119, 119, 1);
			  font-size: 24rpx;
		  }
		  .views{
			  color: rgba(119, 119, 119, 1);
			  font-size: 24rpx;
		  }
	  }
	  // 求职信息
	  .job-information{
		  color: rgba(16, 16, 16, 1);
		  font-size: 18px;
		  
		  font-family: 'PingFangSC-medium';
	  }
	  // 意向岗位
	  .intention{
		  display: flex;
		  align-items: center;
		  margin-top: 24rpx;
		  .title{
			  color: rgba(119, 119, 119, 1);
		  }
		  .datails{
			  color: rgba(16, 16, 16, 1);
		  }
	  }
	  // 服务描述
	  .describe{
		  font-size: 36rpx;
		  text-align: left;
		  font-family: 'PingFangSC-medium';
		  margin-top: 64rpx;
		  color: rgba(16, 16, 16, 1);
	  }
	  .describe-details{
		  color: rgba(51, 51, 51, 1);
		  font-size: 32rpx;
		  margin-top: 24rpx;
	  }
	  
	  // 联系方式
	  .contact-information{
		  .title{
			  color: rgba(16, 16, 16, 1);
			  font-size: 36rpx;
		  }
		  .details{
			  display: flex;
			  margin-top: 24rpx;
			  .photo{
				  width: 112rpx;
				  height: 112rpx;
				  border-radius: 50rpx;
				  border: 1px solid rgba(255, 255, 255, 1);
				  overflow: hidden;
				  img{
					  width: 100%;
					  height: 100%;
				  }
			  }
			  .linkman-infos{
				  margin-left: 24rpx;
				  // 姓名电话
				  .name-tel{
					  display: flex;
					  align-items: center;
					  .name{
						  color: rgba(16, 16, 16, 1);
						  font-size: 36rpx;
						  font-family: 'PingFangSC-medium';
					  }
					  .tel{
						  color: rgba(119, 119, 119, 1);
						  font-size: 36rpx;
						  margin-left: 16rpx;
					  }
				  }
				  // 标签
				  .tags{
					  display: flex;
					  margin-top: 16rpx;
					  .tag-item{
						  line-height: 40rpx;
						  padding: 0 8rpx;
						  border-radius: 4px;
						  background-color: rgba(241, 241, 247, 1);
						  color: rgba(129, 127, 153, 1);
						  font-size: 24rpx;
						  text-align: center;
						  margin-right: 16rpx;
					  }
				  }
			  }
		  }
	  }
	}


  // 底部按钮
  .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;
	  }
	  .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;
		  }
	  }
  }
  
  
  // 筛选框
  .popup-content {
  	padding: 32rpx;
  
  	.headline {
  		color: #101010;
  		font-size: 40rpx;
  		text-align: center;
  	}
  
  	// 薪资待遇
  	.salary-package,
  	.work-experience {
  		margin-top: 16rpx;
  
  		.title {
  			font-size: 32rpx;
  			color: #111111;
  		}
  
  		// 选项
  		.options {
  			display: flex;
  			flex-wrap: wrap;
  			justify-content: flex-start;
  			margin-top: 24rpx;
			margin-bottom: 94rpx;
  			.item {
  				height: 56rpx;
  				line-height: 56rpx;
  				min-width: 210rpx;
  				text-align: center;
  				margin-bottom: 16rpx;
  				margin-right: 16rpx;
  				color: #999999;
  				background-color: #F3F3F4;
  				border-radius: 4px;
				    padding: 0 6rpx;
  			}
  
  			.checked {
  				background-color: #2795FD;
  				color: #fff;
  			}
  		}
  	}
  
  	.button {
  		display: flex;
  
  		margin-top: 8rpx;
  
  		.reset {
  			color: #999999;
  			background-color: #F3F3F4;
  			width: 200rpx;
  			height: 72rpx;
  			line-height: 72rpx;
  			border-radius: 8px;
  		}
  
  		.confirm {
  			width: 440rpx;
  			background-color: #2795FD;
  			color: #fff;
  			height: 72rpx;
  			line-height: 72rpx;
  			border-radius: 8px;
  		}
  	}
  }
</style>