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

<template>
	<view>
		<u-navbar  :back-text="showTitle" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="content">
			<view class="title">
				{{info.positionName}}
			</view>
			<view class="saraly">
				{{info.salary}}<text>元/天</text>
			</view>
			<view class="address">
				{{info.address}}
			</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="false">
					<view class="item-title">
						招聘类型：
					</view>
					<view class="item-value">
						个人
					</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">
						{{info.contactsPhone}}
					</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="showPhone=true">拨打电话</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'
	export default {
		data() {
			return {
				id: "",
				showPhone: false,
				confirmText: '拨打电话',
				content: "",
				tabList: ['', '日', '周', '月'],
				isJoin: false,
				share: 0,
				info: {
					"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": "",
				},
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.showTitle,
				path: '/?shareMP=1&t=jobDetails&id=' + this.id
			}
		},
		computed: {
			showTitle() {
				if (this.info.id) {
					return this.info.positionName + '-' + this.info.salary + '元/天' 
				}
				return ''
			}
		},
		onLoad(op) {
			//uni.showShareMenu()
			this.id = op.id
			if (op.shareMP) {
				this.share = op.shareMP
			}
			this.getInfo()
		},
		methods: {
			
			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) {
								console.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) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				 
				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) {
								console.log('用户点击取消');
							}
						}
					});
					uni.hideLoading();

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.recruitDetail({
					recruitId: this.id,
				}).then((res) => {
					this.isJoin = res.data.isJoin;
					this.info = res.data.recruitInformationInfo;

					uni.hideLoading();

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

<style lang="scss" scoped>
	// 岗位详情
	.content {
		padding: 32rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 48rpx;
			font-family: 'PingFangSC-medium';
		}

		.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: 140rpx;
				}

				.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;
			}
			
		}
	}
</style>