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

<template>
	<view>
		<u-navbar :back-text="info.title" 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>

		<!-- 资料 -->
	<!-- 	<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>
				
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				id: "",
				isJoin: false,
				info: {

				},
			}
		},
		onLoad(op) {
			this.id = op.id
			this.getInfo()
		},
		methods: {
			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){
						newsDetail.content=newsDetail.content.replaceAll('alt','width="100%" height="100%" /> <p')
					}
					this.info=newsDetail
					
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 120px;
	}
</style>
<style lang="scss" scoped>
	.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;
		
		
		.sign-up {

			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>