tongchengred/pages/form/certificates.vue

<template>
	<view class="content">
		<view class="team" v-if="!is_over">
			<empty></empty>
		</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 empty from '@/components/empty';
	import {
		userinfo
	} from '@/api/user.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			empty,
			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: '',
				sendtime: ''
			};
		},
		onLoad(option) {
			this.type = option.type;
			// this.id = option.id;
			this.name = decodeURI(option.name)
			this.sendtime = option.sendtime
			this.IndexShare();
			// this.loadData();

		},
		onReady() {
			// 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
			// 	console.log(3, data.add_time)
				let obj = this;
				let name = obj.name
				let signDate = obj.sendtime

				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 ctxBg = '/static/img/graduation.png'; //画布背景
				let src = '/static/icon/erweima.jpg' // 二维码
				let context = uni.createCanvasContext('qrShareBox');
				// 插入背景图片
				context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);

				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('您已完成咸宁市红十字会普及培训的', 160* obj.ratio, 670 * obj.ratio)
				context.fillText('全部课程，特发此证。', 97 * 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();
				// 插入二维码
				context.drawImage(src, codeX, codeY, 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) {
							console.log(res)
							// uni.showModal({
							// 	title:'zhi1'
							// })
							// 在H5平台下，tempFilePath 为 base64
							// console.log(res.tempFilePath)
							obj.showcanvas = false;
							obj.img = res.tempFilePath
			 		}
					})
				})
			// })

		},

		onShow() {
			this.uid = this.userInfo.uid;
			console.log('this.uid', this.uid)
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			// 分享
			IndexShare() {
				let obj = this;
				let item = {
					link: obj.$store.state.baseURL + '/index/#/pages/form/certificates?name=' + encodeURI(obj.name) + '&sendtime=' + obj.sendtime,
					imgUrl: obj.$store.state.baseURL + '/index/static/img/002.png',
					desc: '结业证书',
					title: '咸宁市红十字会',
				};
				console.log('分享加', item)
				weixindata(item);
			},
			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>