jzred/pages/joinSuc/certificate.vue

<template>
	<view class="content">
		<view class="box">
			<canvas v-if="showcanvas" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
			<image class="imgbox" v-else :src="img"></image>
		</view>
	</view>
</template>

<script>
	import {
		weixindata
	} from '@/utils/wxAuthorized.js';
	export default {
		data() {
			return {
				money: '',
				url: '',
				img: '',
				showcanvas: true,
				loading: true, //是否载入图片中
				size: 180,
				ratio: 1, //页面比例用于计算
				canHeight: '',
				canWeidth: '',
				playing: true,
				current: {
					src: '../../static/audio/xx.mp3'
				},
				rotateIndex: '',
				animation: {},
				animationData: {},
				audioAction: {
					method: 'pause'
				},
				ran: -1,
				isStop: true,
				demo: 0,
				name: '',
				add_time: '',

			};
		},
		onReady() {
			let query = uni.createSelectorQuery();
			let obj = this;
			console.log(999, obj.money);
			// 获取页面比例
			query
				.select('.box')
				.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 = '/index/static/img/zyzs1.png'; //画布背景
			let src = '/index/static/icon/erweima.jpg'; // 二维码
            let src1 = '/index/static/img/jzyz.png'; // 水印
			let context = uni.createCanvasContext('qrShareBox');
			// 插入背景图片
			console.log('插入背景图片', ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
			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 = 960 * obj.ratio; //二维码所在y轴位置

			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(30 * obj.ratio);
		
			
			// 画横线
			context.moveTo(100 * obj.ratio, 475 * obj.ratio);
			context.lineTo(300 * obj.ratio, 475 * obj.ratio);
			context.stroke();
			context.setTextAlign('center')
			context.fillText(obj.name, 200 * obj.ratio, 465 * obj.ratio);
			context.setTextAlign('left')
			context.fillText('您好！', 310 * obj.ratio, 465 * obj.ratio);
			context.fillText('欢迎您成为荆州市遗体器官捐献志愿登', 160 * obj.ratio, 526 * obj.ratio);
			context.fillText('记者！逝世后捐献遗体器官，服务医疗，造', 100 * obj.ratio, 580 * obj.ratio);
			context.fillText('福社会是大爱奉献精神的体现，是无比高尚', 100 * obj.ratio, 630 * obj.ratio);

			context.fillText('的行为！衷心感谢您对荆州市遗体器官捐献', 100 * obj.ratio, 685 * obj.ratio);
			context.fillText('事业的参与和支持!',100 * obj.ratio, 740 * obj.ratio)
			// context.setTextAlign('right')
			context.fillText('特颁此证。', 120 * obj.ratio, 860 * obj.ratio);
			context.fillText('登记日期:', 350 * obj.ratio, 990 * obj.ratio)
			context.fillText(obj.time, 490 * obj.ratio, 990 * obj.ratio)
			// context.fillText('登记编号:', 350 * obj.ratio, 1030 * obj.ratio)
			context.setFontSize(24 * obj.ratio);
			context.fillText('荆州市红十字会制         咨询电话:   0716-8466465', 120 * obj.ratio, 1210 * obj.ratio);
			// context.fillText(obj.add_time, 450 * obj.ratio, 910 * obj.ratio);
			// 插入二维码
			// console.log(codeX, codeY, codeSize, 999)
			context.drawImage(src, 95 * obj.ratio, 910 * obj.ratio, codeSize, codeSize);
			context.drawImage(src1, 500 * obj.ratio, 910 * obj.ratio, 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(333, res);
						// 在H5平台下，tempFilePath 为 base64
						obj.showcanvas = false;
						obj.img = res.tempFilePath;
					}
				});
			});
		},
		onShow() {
			var animation = uni.createAnimation();
			this.animation = animation;
			
		},
		onLoad(option) {
			this.name = option.name
			this.time = option.time
			this.IndexShare()
		},
		onHide() {
			//在页面隐藏时也要清除定时器
			
		},
		onUnload() {
			//在页面卸载时清除定时器 避免出现多个定时器连续创建动画
			
		},
		methods: {
			// 分享
			IndexShare() {
				let obj = this;
				// let money = obj.money;
				let item = {
					link: 'http://jz.red.igxys.com/index/#/pages/joinSuc/certificate?name=' + obj.name + '&time=' + obj.time, // 分享链接
					imgUrl: 'http://jz.red.igxys.com/index/static/img/002.png',
					desc: '弘扬红十字精神，传播红十字观念，宣传红十字工作，这是一个汇聚爱心、救助之家力量的平台！',
					title: '来自荆州市红十字会的遗体器官志愿登记证书',
					success: console.log('分享加载成功')
				};
				console.log('分享加', item);
				weixindata(item);
			},
			musicClick() {},
			play() {
				this.playing = !this.playing;
				this.ScanAudio(this.playing);
				if (this.playing == true) {
					this.timer = setInterval(() => {
						//创建定时器,3秒执行异一次
						this.scaleAndScale();
						console.log('每1秒执行一次');
					}, 1000);
				} else {
					clearInterval(this.timer);
				}
			},
			// 定义动画内容
			scaleAndScale() {
				// 定义动画内容
				// this.animation.scale(1.2, 1.2).step() //先放大1,2倍
				// this.animation.scale(1, 1).step() //缩小至原来的大小
				// 导出动画数据传递给data层
				// this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画
				this.animation.rotate(this.demo).step({
					duration: 1000
				});
				this.animationData = this.animation.export();
				this.demo += 360;
			},
			noscaleAndScale() {
				this.animation.rotate(0).step({
					duration: 1000
				});
				this.animationData = this.animation.export();
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		position: relative;

		.bgimg {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tki-qrcode-canvas {
			width: 750rpx;
			height: 1350rpx;
			margin: 0 auto;
		}

		.box {
			color: #ffffff;
			width: 100%;
			height: 100vh;

			.music {
				border-radius: 28rpx;
				position: absolute;
				left: 40rpx;
				top: 100rpx;
				z-index: 999;
			}

			.keepgo {
				animation-play-state: paused;
			}

			.imgbox {
				height: 1350rpx;
				width: 750rpx;
			}
		}

		.image {
			width: 100%;
			height: 100%;
		}
	}
</style>