ezred/pages/train/sign.vue

<template>
	<view class="content">
		<view class="team" v-if="!is_over">
			<image class="top-image" :src="list.img"></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" v-if="type == 0">
				<view class="label">
					姓名
					<text>*</text>
				</view>
				<input type="text" v-model="name" placeholder="请填写姓名" />
				<view class="label">
					性别
					<text>*</text>
				</view>
				<picker @change="bindPickerSex" :value="sex" :range="array" class="box-right">
					<view class="placeholder" v-if="sex === ''">请输入您的性别</view>
					<text>{{ sex }}</text>
				</picker>
				<view class="label">
					身份证
					<text>*</text>
				</view>
				<input type="text" v-model="card_id" placeholder="请填写身份证号" />
				<view class="label">
					联系方式
					<text>*</text>
				</view>
				<input type="number" v-model="phone" placeholder="请输入联系方式" />
				<view class="label">工作单位（选填）</view>
				<input type="text" v-model="work" placeholder="请输入工作单位" />
				<view class="label">
					地址
					<text>*</text>
				</view>
				<input type="text" v-model="addr" placeholder="请输入联系地址" />
				<view class="upload-box">
					<view class="label">
						照片
						<text>*</text>
					</view>
					<view class="upload-right">
						<image :src="image" mode="" class="upload-img" @click.stop="imgsub" v-if="image"></image>
						<image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!image" @click.stop="imgsub"></image>
					</view>
				</view>
			</view>
			<view class="form-box" v-if="type == 1">
				<view class="label">
					企业名称
					<text>*</text>
				</view>
				<input type="text" v-model="company" placeholder="请填写企业名称" />
				<view class="label">
					企业地址
					<text>*</text>
				</view>
				<input type="text" v-model="address" placeholder="请填写企业地址" />
				<view class="label">
					负责人姓名
					<text>*</text>
				</view>
				<input type="text" v-model="companyName" placeholder="请填写负责人姓名" />
				<view class="label">
					性别
					<text>*</text>
				</view>
				<picker @change="bindPickerSex" :value="sex" :range="array" class="box-right">
					<view class="placeholder" v-if="sex === ''">请输入负责人的性别</view>
					<text>{{ sex }}</text>
				</picker>
				<view class="label">
					身份证
					<text>*</text>
				</view>
				<input type="text" v-model="card_id" placeholder="请填写负责人的身份证号" />
				<view class="label">
					联系方式
					<text>*</text>
				</view>
				<input type="number" v-model="companyphone" placeholder="请输入联系方式" />
				<view class="label">
					参加培训人数
					<text>*</text>
				</view>
				<input type="number" v-model="num" placeholder="请输入参加培训人数" />
				<view class="upload-box">
					<view class="label">
						照片
						<text>*</text>
					</view>
					<view class="upload-right">
						<image :src="image" mode="" class="upload-img" @click.stop="imgsub" v-if="image"></image>
						<image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!image" @click.stop="imgsub"></image>
					</view>
				</view>
			</view>
			<view class="top-title">报名</view>
			<view class="text-box">
				<view class="text">请参训学员在培训当天携带身份证复印件1张，一寸证件照2张。</view>
				<view class="text">报名咨询电话：027-60229380</view>
			</view>
			<view class="submit" @click="submit">立即报名</view>
		</view>
		<view class="certificates" v-if="is_over">
			<canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
			<image class="imgbox" v-else :src="img" mode=" aspectFill"></image>
		</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';
import { upload } from '@/api/ask.js';
export default {
	components: {
		jyfParser
	},
	data() {
		return {
			array: ['男', '女'],
			is_over: 1,
			type: '', //0是个人报名，1是团体报名
			id: '',
			description: '',
			list: '',
			//个人
			name: '',
			phone: '',
			addr: '',
			work: '',
			//团队
			company: '',
			address: '',
			companyName: '',
			companyphone: '',
			num: '',
			people: '鄂州市红十字会',
			signDate: '',
			loading: true, //是否载入图片中
			size: 180,
			ratio: 1, //页面比例用于计算
			canHeight: '',
			canWeidth: '',
			url: '',
			img: '',
			showcanvas: true,
			uid: '',
			sex: '',
			card_id: '',
			image: '',
			cardId: '',
			no:'',
		};
	},
	onLoad(option) {
		this.type = option.type;
		this.id = option.id;
		if (option.uid) {
			this.uid = option.uid;
		} else {
			this.uid = this.userInfo.uid;
		}
		this.IndexShare();
		this.loadData();
		detail_training({
				id:this.id,
			}).then(({data}) => {
				console.log(999,data)
				this.name = data.name
				this.signDate = data.add_time
				this.is_over = data.is_over
				this.cardId = data.card_id
				this.no = data.no
				if (data.sex == 0){
					this.sex = '男'
				}else if (data.sex == 1){
					this.sex == '女'
				}
				this.image = data.img
			console.log(3,data.add_time)
			let obj = this;
			let name = obj.name
			let signDate = getRecTime(obj.signDate,'yyyy-MM-dd')
		
			function getRecTime(timestamp, fmt) {
				let d = new Date(timestamp * 1000)
					// f = fmt || 'yyyy/MM/dd', 
				let	f = fmt || 'yyyy.MM.dd'
				let	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)
			}
			let m = getRecTime(signDate)
			let query = uni.createSelectorQuery();
			// this.loadData();
			// 获取页面比例
			query
				.select('.certificates')
				.fields({
						size: true
					},
					e => {
						console.log('获取页面比例',e)
						// 保存比例
						this.ratio = e.width / 750;
					}
				)
				.exec();
			// 获取画布宽高信息
			query
				.select('#qrShareBox')
				.fields({
						size: true
					},
					e => {
						console.log('获取画布宽高信息',e)
						obj.canHeight = e.height;
						obj.canWeidth = e.width;
					}
				)
				.exec();
			let ctxBg1 = '/index/static/img/graduation.jpg'
			let ctxBg = '/index/static/img/graduationB.jpg'; //画布背景
			let context = uni.createCanvasContext('qrShareBox');
			// 插入背景图片
			context.drawImage(ctxBg1, 0, 0, obj.canWeidth , 500*obj.ratio);
			context.drawImage(obj.image, 60 * obj.ratio, 205 * obj.ratio,150*obj.ratio , 200*obj.ratio);
			context.drawImage(ctxBg, 0, 640*obj.ratio, obj.canWeidth , 500*obj.ratio);
			// // 插入文字
			context.setFontSize(22 * obj.ratio);
			context.fillText(obj.name,340 * obj.ratio,205 * obj.ratio)
			context.fillText(obj.sex,540 * obj.ratio,205 * obj.ratio)
			context.fillText(obj.cardId,370 * obj.ratio,280 * obj.ratio)
			context.fillText(obj.no,370 * obj.ratio,345 * obj.ratio)
			context.fillText(signDate,370 * obj.ratio,410 * obj.ratio)
			context.fillText("三 年",560 * obj.ratio,410 * obj.ratio)
			context.draw(false,(e) => {
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: obj.canWeidth,
				  height: obj.canHeight,
				  destWidth: obj.canWeidth,
				  destHeight: obj.canHeight,
				  canvasId: 'qrShareBox',
				  success: function(res) {
					  console.log(res)
						// uni.showModal({
						// 	title:'zhi1'
						// })
				    // 在H5平台下，tempFilePath 为 base64
						// console.log(res.tempFilePath)
						obj.showcanvas = false;
						obj.img = res.tempFilePath
				  } 
				})
			})
			})
		
		},
	onReady() {},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations('user', ['setUserInfo']),
		// 分享
		IndexShare() {
			let obj = this;
			let item = {
				link: 'http://ez.igxys.com/index/#/pages/train/sign?type=' + obj.type + '&id=' + obj.id + '&uid=' + obj.userInfo.uid, // 分享链接
				imgUrl: 'http://ez.igxys.com/index/static/img/002.png',
				desc: '结业证书',
				title: '鄂州市红十字会'
			};
			console.log('分享加', item);
			weixindata(item);
		},
		async loadData() {
			let obj = this;
			console.log('当前is_over', obj.is_over);
			if (obj.is_over == 1) {
				let uid = obj.userInfo.uid;
				console.log(9090, uid);
			}
			get_training({
				id: obj.id
				// uid:uid
			}).then(({ data }) => {
				obj.list = data;
				console.log(9988, data);
				if (obj.list.content != null) {
					obj.description = obj.list.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'");
				}
			});
		},
		imgsub() {
			console.log('imgsub');
			upload({
				filename: ''
			}).then(data => {
				this.image = data[0].url;
			});
		},
		// 选择性别
		bindPickerSex: function(e) {
			console.log(this.array[e.target.value]);
			this.sex = this.array[e.target.value];
			this.index = e.target.value + 1;
		},
		submit() {
			let obj = this;
			let data = {};
			if (obj.type == 0) {
				if (!obj.name) {
					obj.$api.msg('请填写姓名！');
					return;
				}
				if (!obj.sex){
					obj.$api.msg('请选择性别！');
					return;
				}
				if (!obj.card_id){
					obj.$api.msg('请输入身份证号！');
					return;
				}
				let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
				if (!reg1.test(obj.card_id)) {
					obj.$api.msg('请填写正确的身份证信息');
					return;
				}
				if (!obj.phone) {
					obj.$api.msg('请输入联系方式！');
					return;
				}
				if (!obj.addr) {
					obj.$api.msg('请输入联系地址！');
					return;
				}
				if (!obj.image){
					obj.$api.msg('请上传照片！');
					return;
				}
				if( obj.sex == '男'){
					obj.sex = 0
				}else {
					obj.sex = 1
				}
				data = {
					name: obj.name,
					work: obj.addr,
					phone: obj.phone,
					card_id: obj.card_id,
					img: obj.image,
					sex: obj.sex,
					tid: obj.id,
					type: 0
				};
			}
			if (obj.type == 1) {
				if (!obj.company) {
					obj.$api.msg('请填写企业名称！');
					return;
				}
				if (!obj.address) {
					obj.$api.msg('请填写企业地址！');
					return;
				}
				if (!obj.companyName) {
					obj.$api.msg('请填写负责人姓名！');
					return;
				}
				if (!obj.sex){
					obj.$api.msg('请选择负责人性别！');
					return;
				}
				if (!obj.card_id){
					obj.$api.msg('请输入负责人身份证号！');
					return;
				}
				let reg1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
				if (!reg1.test(obj.card_id)) {
					obj.$api.msg('请填写正确的身份证信息');
					return;
				}
				if (!obj.companyphone) {
					obj.$api.msg('请输入联系方式！');
					return;
				}
				if (!obj.num) {
					obj.$api.msg('请输入参加培训人数！');
					return;
				}
				if (!obj.image){
					obj.$api.msg('请上传照片！');
					return;
				}
				data = {
					company: obj.company,
					address: obj.address,
					name: obj.companyName,
					phone: obj.companyphone,
					num: obj.num,
					card_id: obj.card_id,
					img: obj.image,
					sex: obj.sex,
					tid: obj.id,
					type: 1
				};
			}
			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;
}
.upload-right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		.upload-img {
			width: 160rpx;
			height: 160rpx;
			margin-top: 24rpx;
		}
	}
	.box-right{
		font-size: 28rpx;
		color: #222222;
		border: 2rpx solid #979797;
		padding: 0rpx 15rpx;
		border-radius: 15rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>