yizhizan-h5/pages/index/game/order.vue

<template>
	<view>
		<!-- 岗位要求 -->
		<view class="job flex justify-center">
			<view class="job-info flex justify-center">
				<view class="job-info-c">
					<view class="job-info-c-title" v-if="info.stationName">
						<block v-if="isSameName(info.ruleClassifyName,info.stationName)">
							{{info.ruleClassifyName}}-
						</block>
						<block>
							{{info.stationName}}
						</block>
					</view>
					<view class="job-info-c-label flex align-center flex-wrap">
						<view class="job-info-c-label-item" v-if="info.county">
							{{info.county}}
						</view>
						<view class="job-info-c-label-item" v-if="info.experience">
							{{info.experience}}
						</view>
						<view class="job-info-c-label-item" v-if="info.education">
							{{info.education}}
						</view>
					</view>
					<view class="job-info-c-price" v-if="info.salaryRange">
						{{info.salaryRange}}
					</view>
				</view>
			</view>
		</view>
		<!-- 岗位介绍 -->
		<view class="jobRemarks flex justify-center">
			<!-- <skeleton type="round" bgColor="#ffffff"> -->
			<view class="jobRemarks-box flex justify-center">
				<view class="jobRemarks-box-c">
					<view class="jobRemarks-box-c-title">
						岗位介绍
					</view>
					<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-if="info.tag">
						<view class="jobRemarks-box-c-label-item" v-for="(item,index) in info.tag.split(',')"
							:key="index">
							{{item}}
						</view>
					</view>
					<view class="jobRemarks-box-c-con" v-if="info.positionDetails">
						<view class="jobRemarks-box-c-con-item" v-html="info.positionDetails">
						</view>
					</view>
					<view class="jobRemarks-box-c-line"></view>
					<view class="jobRemarks-box-c-title" style="margin-top: 25rpx;">
						岗位福利
					</view>
					<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-if="info.positionWelfare">
						<view class="jobRemarks-box-c-label-item"
							v-for="(item,index) in info.positionWelfare?info.positionWelfare.split(','):[]"
							:key="index">
							{{item}}
						</view>
					</view>
					<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-else>
						<view class="jobRemarks-box-c-label-item">
							暂无
						</view>
					</view>
				</view>
			</view>
			<!-- </skeleton> -->
		</view>
		<!-- 企业简介 -->
		<view class="enterprise flex justify-center" v-if="info.lng" @click="goInfo(info.company.companyId)">
			<view class="enterprise-box flex justify-center">
				<view class="enterprise-box-c">
					<view class="enterprise-box-c-info flex align-center">
						<image :src="info.company?info.company.companyLogo:'../../../static/logo.png'"
							style="width: 95rpx;height: 95rpx;border-radius: 50%;" mode=""></image>
						<view class="enterprise-box-c-info-n">
							<view class="">
								{{info.company?info.company.companyName:''}}
							</view>
							<view class="">
								{{info.company?info.company.companyScope:''}}
							</view>
						</view>
					</view>
					<view class="enterprise-box-c-bto flex align-center justify-between" @click.stop="gotoMap()">
						<view class="enterprise-box-c-bto-l flex align-center">
							<u-icon name="map" color="#00B88F" style="margin-left: 20rpx;margin-right: 10rpx;"
								size="28"></u-icon>
							{{info.province?info.province:''}}{{info.city?info.city:''}}{{info.county?info.county:''}}{{info.address?info.address:''}}
						</view>
						<view class="enterprise-box-c-bto-r">
							<u-icon name="arrow-right" color="#00B88F" style="margin-right: 20rpx;" size="28"></u-icon>
						</view>
					</view>
					<!-- #ifndef APP -->
					<view class="enterprise-box-c-map">
						<map style="width: 100%; height: 100%;" scale="14" @tap.stop="gotoMap()" :latitude="info.lat"
							:longitude="info.lng" :markers="covers">
						</map>
					</view>
					<!-- #endif -->


				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="caozuo flex justify-center align-center">
			<view class="caozuo-box flex align-center justify-between">
				<view class="caozuo-box-l flex align-center">
					<!-- #ifdef MP-WEIXIN -->
					<view class="caozuo-box-l-item flex align-center flex-wrap">
						<button open-type="share">
							<u-icon name="share" color="#333333" size="50"></u-icon>
							<text style="margin-top: 16rpx;">分享</text>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="caozuo-box-l-item flex align-center flex-wrap" @click="shar()">
						<u-icon name="share" color="#333333" size="50"></u-icon>
						<view class="">
							分享
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="caozuo-box-l-item flex align-center flex-wrap" @click="shows = true">
						<u-icon name="share" color="#333333" size="50"></u-icon>
						<view class="">
							分享
						</view>
					</view>
					<!-- #endif -->
					<view class="caozuo-box-l-item flex align-center flex-wrap" @click="goJuBao()">
						<u-icon name="warning" color="#333333" size="50"></u-icon>
						<view class="">
							举报
						</view>
					</view>
					<view @click="setCollection()" class="caozuo-box-l-item flex align-center flex-wrap">
						<u-icon name="star" v-if="info.isCollection==0" color="#333333" size="50"></u-icon>
						<u-icon name="star-fill" v-else color="#00B88F" size="50"></u-icon>
						<view class="">
							{{info.isCollection==0?'收藏':'取消'}}
						</view>
					</view>
				</view>
				<view class="caozuo-box-r flex align-center justify-center" @click="bindphone(2)">
					立即联系
				</view>
			</view>
		</view>


		<u-popup v-model="shows" z-index="99999" mode="bottom" border-radius="14" height="300rpx">
			<view class="shar flex justify-center">
				<view class="shar-box flex justify-around">
					<view class="shar-box-item" @click="appShare('WXSceneSession')">
						<u-icon name="weixin-circle-fill" color="#45b630" style="margin-left: 10rpx;" size="70">
						</u-icon>
						<view class="">
							微信好友
						</view>
					</view>
					<view class="shar-box-item" @click="appShare('WXSenceTimeline')">
						<u-icon name="moments-circel-fill" color="#6dbf30" size="70" style="margin-left: 20rpx;">
						</u-icon>
						<view class="">
							微信朋友圈
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="sharNo" @click="shows = false">
				取消
			</view>
		</u-popup>
		<!-- 返回首页按钮 -->
		<!-- #ifdef H5 -->
		<view class="backHome" @click="goHome()">
			<image src="../../../static/images/index/backHome.png" mode=""></image>
		</view>
		<!-- #endif -->

	</view>

</template>

<script>
	import config from '../../../common/config.js'
	export default {
		//分享
		onShareAppMessage(res) {
			return {
				path: '/pages/index/game/order?postPushId=' + this.postPushId + '&invitation=' + uni.getStorageSync(
					'invitationCode'),
				title: this.info.stationName,
			}
		},
		/*
		 * uniapp微信小程序分享页面到微信朋友圈
		 */
		onShareTimeline(res) {
			return {
				path: '/pages/index/game/order?postPushId=' + this.postPushId + '&invitation=' + uni.getStorageSync(
					'invitationCode'),
				title: this.info.stationName,
			}
		},
		data() {
			return {
				loading: true,
				shows: false,
				postPushId: '',
				info: {}, //岗位详情
				token: uni.getStorageSync('token'),
				covers: [{
					id: 1,
					latitude: '',
					longitude: '',
					width: 20,
					height: 20,
					iconPath: '../../../static/images/mapMarker.png',
					callout: {
						content: '',
						color: '#000', //文字颜色
						fontSize: 10, //文本大小
						padding: 10, //附近留白
						borderRadius: 24, //边框圆角
						bgColor: '#FFFFFF', //背景颜色
						display: 'ALWAYS', //常显
					}
				}],
				sharType: 0,
				sharMsg: '',
			};
		},
		onLoad(option) {
			// 获取邀请码保存到本地
			if (option.invitation) {
				this.$queue.setData('inviterCode', option.invitation);
			}
			// #ifdef MP-WEIXIN
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				this.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif
			//小程序分享版本
			this.$Request.getT('/app/common/type/340').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.sharType = res.data.value
					}
				}
			});
			//小程序分享图片
			this.$Request.getT('/app/common/type/341').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.sharMsg = res.data.value
					}
				}
			});
			uni.showLoading({
				title: '加载中'
			})
			this.postPushId = option.postPushId
			this.getInfo()
		},
		methods: {
			//判断岗位名称与职位名称是否相同（不区分大小写）
			isSameName(className, name) {
				let str1 = className.trim();
				let str2 = name.trim();
				if (str1.length !== str2.length) {
					return true;
				}
				return str1.toLowerCase() !== str2.toLowerCase();
			},
			goHome() {
				let pages = getCurrentPages(); // 获取页面栈
				console.log(pages)
				if (pages.length > 1) { //有上一页
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			//app分享
			appShare(scene) {
				let that = this
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
					scene: scene, //场景，可取值参考下面说明。
					type: 5, //分享形式 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
					// href: curRoute, //跳转链接
					// imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
					imageUrl: that.sharMsg,
					title: that.info.stationName, //分享内容的标题
					miniProgram: {
						id: 'gh_d531be6accdb', //分享的小程序原始id
						path: curRoute, //分享的小程序的页面路径
						webUrl: "https://ask.dcloud.net.cn/article/287", //地址
						type: that.sharType, //微信小程序的版本  0-正式版； 1-测试版； 2-体验版。 默认值为0。
					},
					success: function(res) {
						that.shows = false; //成功后关闭底部弹框
					},
					fail: function(err) {
						console.log(err, '分享失败回调')
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						that.shows = false;
					}
				});
			},
			getShowModal() {
				uni.showModal({
					title: '提示',
					content: '请登录后联系企业',
					showCancel: true,
					cancelText: '取消',
					confirmText: '去登录',
					complete: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/public/login'
							})
						}

					}
				});
			},
			shar() {
				if (this.token) {
					let that = this
					// h5分享
					// #ifdef H5
					let url = config.WSHOST4 + '/pages/index/game/order?postPushId=' + this.postPushId
					// let url = 'http://192.168.0.109:8081/pages/index/game/order?postPushId=' + this.postPushId
					// alert(url)
					uni.setClipboardData({
						data: url,
						success() {
							uni.showToast({
								title: '分享链接已复制'
							})
						}
					})
					// #endif

				} else {
					this.getShowModal()
				}

			},
			goJuBao() {
				if (this.token) {
					uni.navigateTo({
						url: '/my/feedback/jubao?postPushId=' + this.postPushId
					})
				} else {
					this.getShowModal()
				}

			},
			//在线联系
			bindphone(phone, index) {
				if (uni.getStorageSync('token')) {
					this.$Request.get('/app/resumes/selectResumesByUserId').then(res => {
						if (res.code == 0) {
							let obj = res.data
							if (JSON.stringify(obj) == '{}' || obj == null) {
								uni.showModal({
									title: '提示',
									content: '暂无简历，请完善简历!',
									confirmText: '去完善',
									confirmColor: '#00B88F',
									complete(ret) {
										if (ret.confirm) {
											uni.navigateTo({
												url: '/package/my/resume'
											})
										}
									}
								})
							} else {
								this.$Request.postJson('/app/chat/insertChatConversation', {
									userId: uni.getStorageSync('userId'), //用户userid
									focusedUserId: this.info.user.userId, //企业userid
									type: 1,
									postPushId: this.info.postPushId,
									resumesId: res.data.resumesId
								}).then(res => {
									if (res.code == 0) {
										uni.navigateTo({
											url: '/pages/msg/im?byUserId=' + this.info.user
												.userId + '&chatConversationId=' + res.data
												.chatConversationId + '&postPushId=' + res.data
												.postPushId
										})
									}
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录后联系企业',
						showCancel: true,
						cancelText: '取消',
						confirmText: '去登录',
						complete: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}

						}
					});
				}

			},
			//拉起地图导航
			gotoMap() {
				let that = this
				uni.openLocation({
					latitude: that.info.lat,
					longitude: that.info.lng,
					address: that.info.province + '' + that.info.city + '' + that.info.county + '' + that.info
						.address,
					name: that.info.address,
					complete(ret) {

					}
				})
			},
			/**
			 * 收藏岗位
			 */
			setCollection() {
				this.$Request.postT("/app/myCollection/saveCollection", {
					postPushId: this.postPushId,
					type: 1
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg
						})
						this.getInfo()
					}
				})
			},
			/**
			 * 获取岗位详情
			 */
			getInfo() {
				this.$Request.getT("/app/postPush/selectPostPushDetails", {
					userId: uni.getStorageSync('userId'),
					postPushId: this.postPushId
				}).then(res => {
					if (res.code == 0) {
						this.info = res.data
						this.covers = [{
							id: 1,
							latitude: this.info.lat,
							longitude: this.info.lng,
							width: 20,
							height: 20,
							iconPath: '../../../static/images/mapMarker.png',
							callout: {
								content: this.info.city + '' + this.info.county + '' + this.info.address,
								color: '#000', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 24, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							}
						}]
					}
					uni.hideLoading()
				})
			},
			//跳转企业详情
			goInfo(companyId) {
				uni.navigateTo({
					url: '/my/enterpriseInfo/enterpriseInfo?companyId=' + companyId
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F7;
		padding-bottom: 200rpx;
	}

	button {
		background: #ffffff;
		border: none !important;
		width: 120rpx;
		font-size: 24rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-content: flex-start;
		flex-wrap: wrap;
		margin: 0;
		padding: 0 !important;
		line-height: 0 !important;
	}

	button:after {
		border: none !important;
	}

	.backHome {
		position: fixed;
		right: 30rpx;
		bottom: 160rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}

	.shar {
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;

		.shar-box {
			width: 686rpx;
			height: 100%;

			.shar-box-item {
				font-size: 24rpx;
			}
		}
	}

	.line {
		width: 100%;
		border: 1rpx solid #F2F2F7;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.sharNo {
		width: 100%;
		color: #cccccc;
		font-size: 24rpx;
		text-align: center;
	}

	.job {
		width: 100%;
		margin-top: 30rpx;

		.job-info {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			background-color: #ffffff;

			.job-info-c {
				width: 626rpx;
				height: 100%;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.job-info-c-title {
				color: #333333;
				font-size: 38rpx;
				font-weight: 800;
			}

			.job-info-c-label {
				margin-top: 30rpx;

				.job-info-c-label-item {
					margin-right: 30rpx;
					color: #999999;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
			}

			.job-info-c-price {
				color: #00B88F;
				font-size: 38rpx;
				font-weight: bold;
				margin-top: 30rpx;
			}
		}
	}

	.jobRemarks {
		width: 100%;
		margin-top: 20rpx;

		.jobRemarks-box {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;

			.jobRemarks-box-c {
				width: 628rpx;
				height: 100%;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.jobRemarks-box-c-title {
				color: #333333;
				font-size: 32rpx;
				font-weight: 800;
			}

			.jobRemarks-box-c-label {
				width: 100%;
				margin-top: 25rpx;

				.jobRemarks-box-c-label-item {
					color: #666666;
					font-size: 24rpx;
					padding: 10rpx 15rpx;
					background-color: #F6F6F6;
					border-radius: 8rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}

			.jobRemarks-box-c-con {
				width: 100%;
				margin-top: 25rpx;

				.jobRemarks-box-c-con-item {
					margin-bottom: 10rpx;
					color: #141414;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.jobRemarks-box-c-line {
				width: 100%;
				border: 1rpx solid #E6E6E6;
				margin-top: 25rpx;
			}
		}
	}

	.enterprise {
		width: 100%;
		// height: 256rpx;
		margin-top: 25rpx;

		.enterprise-box {
			width: 686rpx;
			background-color: #ffffff;
			height: 100%;
			padding-bottom: 25rpx;
			border-radius: 24rpx;

			.enterprise-box-c {
				width: 626rpx;
				height: 100%;
			}

			.enterprise-box-c-info {
				width: 100%;
				height: 95rpx;
				margin-top: 40rpx;

				.enterprise-box-c-info-n {
					margin-left: 18rpx;

					view:nth-of-type(1) {
						color: #333333;
						font-size: 32rpx;
						font-weight: 800;
					}

					view:nth-of-type(2) {
						color: #999999;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 10rpx;
					}
				}
			}

			.enterprise-box-c-bto {
				width: 100%;
				// height: 60rpx;
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				background-color: #EDFFFB;
				border-radius: 30rpx;
				margin-top: 20rpx;
				color: #00B88F;
				font-size: 24rpx;
				font-weight: 500;
			}

			.enterprise-box-c-map {
				width: 100%;
				margin-top: 20rpx;
				height: 400rpx;
			}
		}
	}

	.caozuo {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;

		.caozuo-box {
			width: 686rpx;
			height: 80rpx;

			.caozuo-box-l {

				.caozuo-box-l-item {
					width: 60rpx;
					font-size: 24rpx;
					color: #242424;
					font-weight: 500;
					margin-right: 50rpx;
				}
			}

			.caozuo-box-r {
				width: 400rpx;
				height: 100%;
				color: #ffffff;
				border-radius: 45rpx;
				/* #ifndef APP-PLUS */
				background: linear-gradient(90deg, #00DCC2 0%, #00DC94 100%);
				/* #endif */
				/* #ifdef APP-PLUS */
				background-color: #00DCC2;
				line-height: 80rpx;
				text-align: center;
				/* #endif */
				font-size: 32rpx;
				font-weight: 800;
			}
		}
	}
</style>