xhlred/pages/train/sign.vue

<template>
	<view class="content">
		<view class="team">
			<image class="top-image" :src="baseURL + list.image"></image>
			<!-- <view class="box">
				<jyf-parser :html="description" ref="article"></jyf-parser>
			</view> -->
			<view class="top-title canten">免费报名</view>
			<view class="sign-tip">完成信息填写，即可参加红十字会救护员培训</view>
			<view class="form-box">
				<view class="label">
					姓名/企业姓名
					<text>*</text>
				</view>
				<input type="text" v-model="name" placeholder="请填写姓名" />
				<view class="label">
					联系方式
					<text>*</text>
				</view>
				<input type="number" v-model="phone" placeholder="请输入联系方式" />
				<view class="label">
					参加培训人数
					<text>*</text>
				</view>
				<input type="number" v-model="num" placeholder="请输入参加培训人数" />
			</view>
			<view class="top-title">免费报名</view>
			<view class="text-box" v-html="description">
				<view class="text">请参训学员在培训当天携带身份证复印件1张，一寸证件照2张。</view>
				<view class="text">报名咨询电话：0716-4163849</view>
			</view>
			<view class="submit" @click="submit">立即报名</view>
		</view>
	</view>
</template>
<script>
import { get_training, sign_training, detail_training } from '@/api/train.js';
import jyfParser from '@/components/jyf-parser/jyf-parser';
import { weixindata, weixinlocation } from '@/utils/wxAuthorized.js';
import { userinfo } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		jyfParser
	},
	data() {
		return {
			id: '',
			description: '',
			list: '',
			//个人
			name: '',
			phone: '',
			//团队
			num: '',
			size: 180
		};
	},
	onLoad(option) {
		this.type = option.type;
		this.id = option.id;
		if (option.uid) {
			this.uid = option.uid;
		} else {
			this.uid = this.userInfo.uid;
		}
		this.loadData();
	},
	onReady() {},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo']),
		...mapState(['baseURL'])
	},
	methods: {
		...mapMutations('user', ['setUserInfo']),
		// 分享
		async loadData() {
			let obj = this;
			get_training({
				id: obj.id
				// uid:uid
			}).then(({ data }) => {
				obj.list = data;
				console.log(9988, obj.list);
				if (obj.list.content != null) {
					obj.description = obj.list.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'");
				}
			});
		},
		submit() {
			let obj = this;
			let data = {};
			if (!obj.name) {
				obj.$api.msg('请填写姓名/企业名！');
				return;
			}
			if (!obj.phone) {
				obj.$api.msg('请输入联系方式！');
				return;
			}
			if (!obj.num) {
				obj.$api.msg('请输入培训人数！');
				return;
			}
			data = {
				training_id:obj.id,
				name: obj.name,
				Phone: obj.phone,
				num:obj.num
			};
			sign_training(data)
				.then(function(e) {
					console.log(data.type);
					let type = data.type;
					uni.setStorageSync('type', type);
					obj.$api.msg(e.msg);
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/train/index'
						});
					}, 1000);
				})
				.catch(e => {
					obj.$api.msg(e.message);
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/train/index'
						});
					}, 1000);
				});
		},
		getRecTime(timestamp, fmt) {
			let d = new Date(timestamp * 1000),
				// f = fmt || 'yyyy/MM/dd',
				f = fmt || 'yyyy.MM.dd hh:mm:ss',
				o = {
					'M+': d.getMonth() + 1, //月份
					'd+': d.getDate(), //日
					'h+': d.getHours(), //小时
					'm+': d.getMinutes(), //分
					's+': d.getSeconds(), //秒
					'q+': Math.floor((d.getMonth() + 3) / 3), //季度
					S: d.getMilliseconds() //毫秒
				};
			if (/(y+)/.test(f)) {
				f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
			}
			for (let k in o) {
				if (new RegExp('(' + k + ')').test(f)) {
					f = f.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
				}
			}
			return f;
			console.log(f);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
	width: 100%;
	height: 100%;
	.content {
		height: 100%;
	}
}
.box {
	padding: 0rpx 25rpx;
	width: 100%;
}
.top-image {
	width: 100%;
	height: 300rpx;
}
.top-title {
	width: 100%;
	text-align: center;
	padding: 25rpx 0rpx;
	font-size: 34rpx;
	border-bottom: 1rpx dashed #b5b5b5;
}
.canten {
	text-align: center !important;
}
.addr {
	color: #222222;
	font-size: 28rpx;
	padding: 25rpx 35rpx;
}
.text-box {
	padding: 25rpx 25rpx;
	padding-bottom: 0rpx !important;
}
.text {
	color: #222222;
	font-size: 28rpx;
	padding-bottom: 15rpx;
}
.weixin-icon {
	width: 100%;
	text-align: center;
	padding-top: 45rpx;
	image {
		width: 248rpx;
		height: 248rpx;
	}
}
.tip {
	color: #222222;
	font-size: 28rpx;
	width: 100%;
	text-align: center;
	padding-bottom: 50rpx;
}
.sign-tip {
	padding: 25rpx 0rpx;
	text-align: center;
	color: #222222;
	font-size: 28rpx;
}
.form-box {
	padding: 0rpx 35rpx;
	.label {
		font-size: 34rpx;
		padding: 25rpx 0rpx;
		text {
			color: #e62129;
			padding-left: 5rpx;
		}
	}
	input {
		font-size: 28rpx;
		color: #222222;
		border: 2rpx solid #979797;
		padding: 0rpx 15rpx;
		border-radius: 15rpx;
		height: 80rpx;
	}
}
.submit {
	width: 70%;
	margin: 0rpx auto;
	margin-top: 80rpx;
	margin-bottom: 80rpx;
	padding: 25rpx 0;
	text-align: center;
	background-color: #e62129;
	color: #ffffff;
	font-size: 32rpx;
	border-radius: 10rpx;
}
.grey {
	background-color: #9b9b9b !important;
}
.certificates {
	// padding: 24rpx;
	width: 100%;
	height: 100vh;
}
.tki-qrcode-canvas {
	// width: 700rpx;
	// height: 1245rpx;
	width: 750rpx;
	// padding: 32rpx;
	height: 1350rpx;
	margin: 0 auto;
}
.bgimg {
	width: 100%;
	height: 100%;
	image {
		width: 100%;
		height: 100%;
	}
}
.box-mian {
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 380rpx 94rpx 200rpx 94rpx;
	color: #333;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	// align-items: center;
	.name {
		display: flex;
		font-size: 32rpx;
		.name-left {
			text-align: center;
			// padding: 0 24rpx;
			width: 150rpx;
			border-bottom: 2rpx solid #333;
		}
	}
	.info {
		margin-top: 68rpx;
		text-indent: 64rpx;
		line-height: 58rpx;
	}
	.signName {
		margin-top: 32rpx;
		display: flex;
		.signName-left {
			line-height: 34rpx;
			.signName-1 {
			}
			.signName-2 {
				font-size: 28rpx;
			}
		}
		.signName-right {
			text-align: left;
			// width: 100%;
			padding: 0 12rpx;
			margin-left: 12rpx;

			// width: 288rpx;
			border-bottom: 2rpx solid #333;
			// margin-bottom: 12rpx;
			.list-input {
				width: 100%;
				padding: 0 12rpx;
				height: 70rpx;
				font-size: 32rpx;
				text-align: left;
			}
			.signDate {
				display: flex;
				align-items: center;
			}
		}
	}
	.signDate {
		margin-top: 22rpx;
		display: flex;
		.signName-left {
			line-height: 34rpx;
			.signName-1 {
			}
			.signName-2 {
				font-size: 28rpx;
			}
		}
		.signName-right {
			text-align: left;
			padding-left: 12rpx;
			margin-left: 12rpx;
			width: 288rpx;
			border-bottom: 2rpx solid #333;
			.list-input {
				height: 70rpx;
				font-size: 32rpx;
				text-align: left;
			}
			// margin-bottom: 12rpx;
		}
	}
	// background-color: pink;
}
.imgbox {
	height: 1350rpx;
	width: 750rpx;
}
</style>