jp-zeroWorkerStation/pages/packages/skillTraining/trainingRegistration.vue

<template>
	<view>
		<u-navbar :back-text="info.title" :share="share" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		
		<!-- 内容 -->
		<view class="main">
			 <view class="headline">
				{{info.title}}
			</view>
			<view class="title">
				培训详情
			</view>
			<view class="picture" v-if="info.thumbnailImage">
				<img :src="info.thumbnailImage" alt="">
			</view>
			<!-- 详细信息 -->
			<view class="details" v-html="info.content">
				
			</view>
			<view  v-if="info.codeImage" class="codeImage">
				<image  mode="aspectFit"
				
				v-if="info.codeImage" :src="info.codeImage" :show-menu-by-longpress="true" ></image>
				<view  class="codeImageView" ><u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon> 长按图片<u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon><u-icon name="arrow-upward"></u-icon></view>
			</view>
		</view>

		<!-- 资料 -->
	<!-- 	<view class="data">
			<view class="title">
				培训资料
			</view>
			<u-line color="#e6e6e6" />
			<view class="class">
				<view class="text">
					育婴师资格证（高级）培训课程表
				</view>
				<view class="download">
					<view class="icon">
						<img src="@/assets/img/md-file_download@1x.png" alt="">
					</view>
					<view class="download-text">
						下载
					</view>
				</view>
			</view>

		</view> -->

		<!-- 报名按钮 -->
		<view class="bottom">
		
			
			<button class="sign-up"   v-if="getStatus()"  :class="{
					isJoin:isJoin
				}" @click="isJoinBtn" >{{isJoin?'取消报名':'我要报名'}}</button>
			<button class="sign-up isEnd"  v-else style="background: #999999;">已结束</button>
			
			<button class="btncontact" @click="showPhone=true" >
				<view class="icon">
					<img src="@/assets/img/riLine-customer-service-line@1x.png" alt="">	
				</view>
				<view class="grid-text">咨询</view>
			</button>
			
			<u-modal v-model="showPhone" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" title="咨询电话" :content="content"
				: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: "",
				isJoin: false,
				content: "",
					showPhone: false,
				info: {

				},
				share:0,
			}
		},
		onShareTimeline(){
			return {
				title: this.info.title,
				path: '/pages/packages/skillTraining/trainingRegistration?shareMP=1&id=' + this.id
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				//.log(res.target)
			}
			return {
				title: this.info.title,
				path: '/pages/packages/skillTraining/trainingRegistration?shareMP=1&id=' + this.id
			}
		},
		onLoad(op) {
			if (op.shareMP) {
				this.share = op.shareMP
			}
			this.id = op.id
			this.getInfo()
		},
		methods: {
			confirmPhone() {
				this.showPhone = false;
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
			getStatus(){
				if(this.info&&this.info.endTime){
					return new Date()<new Date(this.info.endTime)
				}
				return  true
			},
			cancelTrainingBtn(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.cancelTraining({
					trainingId: this.id,
				}).then((res) => {
					this.isJoin = false;
					//this.info=res.data.recruitInformationInfo;
					
					uni.hideLoading();
					uni.showToast({
						title: "取消成功！",
						icon: "none"
					})
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			isJoinBtn() {
				if(!this.getStatus()){
					return
				}
				if (this.isJoin) {
					this.cancelTrainingBtn()
					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 (!user) {
					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
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.joinTraining({
						trainingId: 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"
					})
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.trainingDetail({
					trainingId: this.id,
				}).then((res) => {
					uni.hideLoading();
					
					this.isJoin = res.data.isJoin;
					var newsDetail=res.data.trainingInfo;
					if(newsDetail.content){
						var reg=new RegExp('alt','gi');
						newsDetail.content=newsDetail.content.replace(reg,'width="100%" height="100%" /> <p')						
					}
					this.info=newsDetail
					
					this.content=this.info.phone
					
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 120px;
	}
</style>
<style lang="scss" scoped>
	.codeImage{
		background-color: #fff;
		 text-align: center;
		.codeImageView{
			padding: 20rpx 0px 40rpx;
			font-size: 32rpx;
			 
		}
		image{
			 border: 1px dashed;
			width: 700rpx;
			
		}
	}
	.background {
		width: 100%;
		height: 376rpx;

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

	// 内容
	.main {
		padding: 40rpx 32rpx;
		background-color: #fff;

		// 标题
		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
			font-family: 'PingFangSC-medium';
		}

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-family: 'PingFangSC-medium';
			margin-top: 40rpx
		}

		// 图片
		.picture {
			border-radius: 4px;
			width: 100%;
			height: 256rpx;
			margin-top: 50rpx;

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

		// 详细信息
		.details {
			margin-top: 40rpx;
			line-height: 48rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	// 资料
	.data {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 24rpx 32rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.class {
			margin-top: 40rpx;
			border-radius: 5px;
			background-color: rgba(245, 245, 245, 1);
			padding: 28rpx 24rpx;
			color: #101010;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.download {
				display: flex;
				align-items: center;
				color: rgba(22, 119, 255, 1);

				img {
					vertical-align: middle;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	// 报名按钮
	.bottom {
		background-color: #fff;
		padding: 24rpx 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		.btncontact{
			width: 19%;
			font-size: 36rpx;
			height: 96rpx;
			//line-height: 96rpx;
			padding: 0px;
			border-radius: 8px;
			    display: flex;
			    flex-wrap: wrap;
			    justify-content: center;
			.grid-text {
				color: rgba(51, 51, 51, 1);
				margin-top: 8rpx;
				 line-height: 10px;
				     width: 100%;
			}
			
			.icon {
				width: 56rpx;
				height: 56rpx;
			
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.sign-up {
			width: 79%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 8px;
			background-color: rgba(39, 149, 253, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			text-align: center;
		}
		.isJoin {
			background-color: #19be6d;
		}
	}
</style>