jzred/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>
				<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>
			<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>
				<input type="number" v-model="companyphone" placeholder="请输入联系方式" />
				<view class="label">参加培训人数<text>*</text></view>
				<input type="number" v-model="num" placeholder="请输入参加培训人数" />
			</view>
			<view class="top-title">免费报名</view>
			<view class="text-box">
				<view class="text">请参训学员在培训当天携带身份证复印件1张，一寸证件照2张。</view>
				<view class="text"> 报名咨询电话：0716-4163849</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';
export default {
	components: {
	   jyfParser
	 },
	data() {
		return {
			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:''
		};
	},
	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,
			uid:this.uid
		}).then(({data}) => {
			console.log(999,data)
			this.name = data.name
			this.signDate = data.add_time
			this.is_over = data.is_over
		console.log(3,data.add_time)
		let obj = this;
		let name = obj.name
		let signDate = obj.signDate
			
		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();
		console.log("---query---",query)
		// 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();
			console.log('obj.canHeight',obj.canHeight)
			console.log('obj.canWeidth',obj.canWeidth)
		let ctxBg = '/index/static/img/graduation.png'; //画布背景
		let src = '/index/static/icon/erweima.jpg' // 二维码
		let src1 = '/index/static/img/jzyz.png'
		let context = uni.createCanvasContext('qrShareBox');
		// 插入背景图片
		context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
		console.log('123',obj.ratio)
		const codeSize = obj.size * obj.ratio; //计算二维码大小
		const codeX = ((750 - obj.size) * obj.ratio) / 2; //二维码所在x轴位置
		const codeY = 999 * obj.ratio; //二维码所在y轴位置
		// console.log('二维码大小',codeSize)
		// console.log('二维码所在x轴位置',codeX)
		// console.log('二维码所在y轴位置',codeY)
		const codeBoxColor = '#FFFFFF'; //包裹框颜色
		const codeBoxWidht = 0; //包裹边框宽度
		const codeBoxSize = (codeBoxWidht / 2) * obj.ratio; //计算二维码白色包裹框大小
		const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
		const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
		const codeBoxEnd = codeSize + codeBoxWidht * obj.ratio; //计算包裹框大小
		const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * obj.ratio; //文字距离上边距高度
		const fontSize = 24 * obj.ratio; //文字大小
		const fontText = ''; //文字内容
		const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
		// // 插入文字
		context.setFontSize(32 * obj.ratio)
		// 画横线
		context.moveTo(90 * obj.ratio, 586 * obj.ratio)
		context.lineTo(250 * obj.ratio, 586 * obj.ratio)
		context.stroke();
		context.setTextAlign('center')
		context.fillText(name, 170 * obj.ratio, 574 * obj.ratio)
		context.setTextAlign('left')
		context.fillText('先生/女士', 260 * obj.ratio, 580 * obj.ratio)
		
		context.setFontSize(31 * obj.ratio)
		
		context.fillText('您已完成荆州市红十字会普及培训', 105 * obj.ratio, 670 * obj.ratio)
		context.fillText('的全部课程，特发此证。', 105 * obj.ratio, 720 * obj.ratio)
		context.setFontSize(22 * obj.ratio)
		context.fillText('签发人:', 300 * obj.ratio, 800 * obj.ratio)
		context.fillText('Siger:', 300 * obj.ratio, 830 * obj.ratio)
		// 画横线
		context.moveTo(380 * obj.ratio, 830 * obj.ratio)
		context.lineTo(660 * obj.ratio, 830 * obj.ratio)
		context.stroke()
		context.fillText('签发日期:', 300 * obj.ratio, 880 * obj.ratio)
		context.fillText('Issuer Date:', 300 * obj.ratio, 910 * obj.ratio)
		context.setFontSize(26 * obj.ratio)
		context.fillText(m, 475 * obj.ratio, 908 * obj.ratio)
		context.fillText('荆州市红十字会', 440 * obj.ratio, 820 * obj.ratio)
		// 画横线
		context.moveTo(430 * obj.ratio, 915 * obj.ratio)
		context.lineTo(660 * obj.ratio, 915 * obj.ratio)
		context.stroke()
		// context.setFontSize(fontSize);
		// context.fillText(fontText, fontLeft, fontTop);
		
		// 插入边框
		context.beginPath();
		context.setLineJoin('round'); //边框类型
		context.setLineWidth(codeBoxWidht * obj.ratio);
		context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
		context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
		context.stroke();
		// 插入二维码
		console.log('插入二维码src',src)
		context.drawImage(src, codeX, codeY, codeSize, codeSize);
		context.drawImage(src1, 480 * obj.ratio - codeSize/2, 810 * obj.ratio - codeSize/2, codeSize, codeSize);
		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) {
					// 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://jz.red.igxys.com/index/#/pages/train/sign?type=' + obj.type + '&id=' + obj.id + '&uid=' + obj.userInfo.uid,// 分享链接
				imgUrl: 'http://jz.red.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;'");
				}
			});
		
		},		
		submit(){
			let obj = this;
			let data = {};
			if(obj.type==0){
				if(!obj.name){
					obj.$api.msg('请填写姓名！');
					return;
				}
				if(!obj.phone){
					obj.$api.msg('请输入联系方式！');
					return;
				}
				if(!obj.addr){
					obj.$api.msg('请输入联系方式！');
					return;
				}
				data={
					name:obj.name,
					work:obj.addr,
					phone:obj.phone,
					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.companyphone){
					obj.$api.msg('请输入联系方式！');
					return;
				}
				if(!obj.num){
					obj.$api.msg('请输入参加培训人数！');
					return;
				}
				data={
					company:obj.company,
					address:obj.address,
					name:obj.companyName,
					phone:obj.companyphone,
					num:obj.num,
					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;
	}
</style>