jzred/pages/user/thank.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,
			userName: '荆州XXX公司',
			time: 0,
			itemName: '',
			pid: 0
		};
	},
	computed: {
		showtime() {
			let date = new Date(this.time * 1000);
			let Y = date.getFullYear();
			let M = date.getMonth()+1
			let D = date.getDate()
			return Y + '年' + M + '月' + D + '日';
		}
	},
	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.canHeight = 650
					obj.canWeidth = e.width;
				}
			)
			.exec();
		let ctxBg = '/index/static/img/zs.png'; //画布背景
		let src = '/index/static/icon/erweima.jpg'; // 二维码

		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(38* obj.ratio);
		context.setFillStyle('#F5D0A2');
		// context.fillText('感谢信', ((750 - obj.size) * obj.ratio) / 2, 260 * obj.ratio)
		context.setFontSize(30 * obj.ratio);
		
		if(obj.userName.length<=10){
			context.fillText('感谢 ' , 273 * obj.ratio, 500 * obj.ratio);
			context.fillText(obj.userName , 340 * obj.ratio, 500 * obj.ratio);
			context.fillText('您的爱心捐赠和善心！' , 273 * obj.ratio, 540 * obj.ratio);
		}else if(10< obj.userName.length && obj.userName.length <= 20){
			let center = Math.floor(obj.userName.length/2)
			let str1 = obj.userName.slice(0,center)
			let str2 = obj.userName.slice(center,)
			let des = 5*(20-obj.userName.length)
			context.fillText('感谢 ' , 260 * obj.ratio, 500 * obj.ratio);
			context.setTextAlign('center')
			context.fillText(str1 , (490 - des) * obj.ratio, 480 * obj.ratio);
			
			
			context.fillText(str2 , (490 - des) * obj.ratio, 520 * obj.ratio);
			context.setTextAlign('left')
			context.fillText('您的爱心捐赠和善心！' , 260 * obj.ratio, 560 * obj.ratio);
		}else if(20< obj.userName.length && obj.userName.length <= 30){
			
			let str1 = obj.userName.slice(0,10)
			let str2 = obj.userName.slice(10,20)
			let str3 = obj.userName.slice(20,)
			context.fillText('感谢 ' , 260 * obj.ratio, 500 * obj.ratio);
			context.setFontSize(24* obj.ratio)
			context.fillText(str1 , 340 * obj.ratio, 460 * obj.ratio);
			
			context.fillText(str2 , 340 * obj.ratio, 490 * obj.ratio);
			context.setTextAlign('center')
			context.fillText(str3 , 460 * obj.ratio, 520 * obj.ratio);
			context.setFontSize(38* obj.ratio)
			context.setTextAlign('left')
			context.fillText('您的爱心捐赠和善心！' , 260 * obj.ratio, 565 * obj.ratio);
		}
		context.setTextAlign('center')
		context.setFontSize(40* obj.ratio);
		context.setFillStyle('#321C0A');
		if(obj.userName.length <= 10){
			context.fillText(obj.userName , (750/2)* obj.ratio, 700 * obj.ratio);
		}else if(obj.userName.length <= 20){
			if(obj.userName.length <= 13){
				context.setFontSize(28* obj.ratio)
				context.fillText(obj.userName , (750/2)* obj.ratio, 700 * obj.ratio);
			}else {
				let center = Math.floor(obj.userName.length/2)
				console.log(center,'this.obj.userName.length.center')
				let str5 = obj.userName.slice(0,center)
				let str6 = obj.userName.slice(center,)
				context.setFontSize(28* obj.ratio)
				context.fillText(str5 , (750/2)* obj.ratio, 675 * obj.ratio);
				context.fillText(str6 , (750/2)* obj.ratio, 710 * obj.ratio);
				context.setFontSize(38* obj.ratio)
			}
			
		}else if(obj.userName.length <= 30){
			let str5 = obj.userName.slice(0,15)
			let str6 = obj.userName.slice(15,)
			context.setFontSize(24* obj.ratio)
			context.fillText(str5 , (750/2)* obj.ratio, 675 * obj.ratio);
			context.fillText(str6 , (750/2)* obj.ratio, 710 * obj.ratio);
			context.setFontSize(38* obj.ratio)
		}
		
		//感谢您于2021年1月1日对于“关爱关心留守儿童”的爱心捐赠。特发此证书，以示感谢！红会博爱送温暖 爱康关怀暖人心
		context.setTextAlign('left')
		context.setFillStyle('#533113');
		context.setFontSize(30* obj.ratio);
		
		if(this.pid != 0){
			if(obj.itemName.length <= 6){
				context.fillText('感谢您于 ' + obj.showtime , 198* obj.ratio, 940 * obj.ratio);
				context.setTextAlign('center')
				context.fillText('对'+'"'+obj.itemName+'"'+ '的爱心捐赠。',(750/2+20)* obj.ratio,980 * obj.ratio)
				context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,1025 * obj.ratio)
			}else if(obj.itemName.length > 6 && obj.itemName.length <= 20){
				let str1 = obj.itemName.slice(0,13)
				let str2 = obj.itemName.slice(13,)
				context.setFontSize(24* obj.ratio)
				context.setTextAlign('center')
				context.fillText('感谢您于 ' + obj.showtime + '对于', (750/2)* obj.ratio, 940 * obj.ratio);
				context.fillText('"'+str1,(750/2)* obj.ratio,970 * obj.ratio)
				context.fillText(str2+'"' + '的爱心捐赠。',(750/2)* obj.ratio,1000 * obj.ratio)
				context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,1030 * obj.ratio)
				
			}else if(obj.itemName.length > 20 && obj.itemName.length <= 30){
				let str1 = obj.itemName.slice(0,18)
				let str2 = obj.itemName.slice(18,)
				context.setFontSize(22* obj.ratio)
				context.setTextAlign('center')
				context.fillText('感谢您于 ' + obj.showtime + '对于', (750/2)* obj.ratio, 940 * obj.ratio);
				context.fillText('"'+str1,(750/2)* obj.ratio,970 * obj.ratio)
				context.fillText(str2+'"'+'的爱心捐赠。',(750/2)* obj.ratio,1000 * obj.ratio)
				context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,1030 * obj.ratio)
			}
			
		}else {
			context.fillText('感谢您于 ' + obj.showtime , 198* obj.ratio, 940 * obj.ratio);
			context.setTextAlign('left')
			context.fillText('的爱心捐赠。',198* obj.ratio,980 * obj.ratio)
			context.setTextAlign('center')
			context.fillText('特发此证书，以示感谢！',(750/2)* obj.ratio,1025 * obj.ratio)
		}
		
		
		// context.fillText('衷心感谢您对荆州市红十字事业的信任与支持', 155 * obj.ratio, 460 * obj.ratio);
		// context.fillText('！我们已收到您的捐款', 40 * obj.ratio, 515 * obj.ratio);
		// // 画横线
		// context.moveTo(340 * obj.ratio, 520 * obj.ratio);
		// context.lineTo(500 * obj.ratio, 520 * obj.ratio);
		// context.stroke();
		// context.fillText('￥' + obj.money, 355 * obj.ratio, 512 * obj.ratio);
		// context.fillText('元。我们承诺，', 500 * obj.ratio, 515 * obj.ratio);
		// context.fillText('绝不辜负大家的信任，遵照您的意愿，将捐款全部', 40 * obj.ratio, 570 * obj.ratio);
		// context.fillText('用于相关救助项目。您的善举将给受助人带去温暖', 40 * obj.ratio, 625 * obj.ratio);
		// context.fillText('！', 40 * obj.ratio, 680 * obj.ratio);
		// context.fillText('爱心无界，情义无价。谨以此信表达谢意，我', 100 * obj.ratio, 730 * obj.ratio);

		// context.fillText('们因您更有力量，因您倍感温暖！', 40 * obj.ratio, 785 * obj.ratio);
		// // context.fillText('谨表谢意', (580 * obj.ratio), 680 * obj.ratio)
		// context.fillText('荆州市红十字会', 450 * obj.ratio, 900 * obj.ratio);
		// context.fillText('识别右边二维码', 108 * obj.ratio, 1090 * obj.ratio);
		// context.fillText('关注荆州市红十字会', 108 * obj.ratio, 1150 * obj.ratio);

		// 插入二维码
		// console.log(codeX, codeY, codeSize, 999)
		context.drawImage(src, 490 * obj.ratio, 1140 * 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;
		// if (this.isStop) {
		// 	// 使用动画
		// 	this.scaleAndScale();
		// 	this.timer = setInterval(() => {
		// 		//创建定时器,3秒执行异一次
		// 		this.scaleAndScale();
		// 		// console.log('每三秒执行一次 , 达到往复运动的效果')
		// 	}, 1000);
		// } else {
		// 	this.noscaleAndScale();
		// }
	},
	onLoad(option) {
		// console.log(333, option);
		// this.money = option.money;
		// this.IndexShare();
		// this.ScanAudio(true);
		this.pid = option.project_id
		this.userName = option.name
		this.time = option.time
		this.itemName = option.title
	},
	onHide() {
		//在页面隐藏时也要清除定时器
		if (this.timer) {
			// console.log('清除定时器-' + this.timer)
			clearInterval(this.timer);
		}
	},
	onUnload() {
		//在页面卸载时清除定时器 避免出现多个定时器连续创建动画
		// if (this.timer) {
		// 	console.log('清除定时器-' + this.timer);
		// 	clearInterval(this.timer);
		// }
	},
	methods: {
		// 分享
		IndexShare() {
			let obj = this;
			// let money = obj.money;
			let item = {
				link: 'http://http://jz.red.igxys.com/index/#/pages/form/donaSuccess?money=' + obj.money, // 分享链接
				imgUrl: 'http://http://jz.red.igxys.com/index/#/static/img/thinks.png',
				desc: '感谢信',
				title: '荆州市红十字会',
				success: console.log('分享加载成功')
			};
			console.log('分享加', item);
			weixindata(item);
		},
		musicClick() {
			// if (this.isRoate) {
			// 	this.isRoate = false
			// 	this.stopScanAudio()
			// } else {
			// 	this.isRoate = true
			// 	this.ScanAudio()
			// }
		},
		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);
			}
			// var music = uni.createInnerAudioContext();
			// music.src= "../../static/audio/xx.mp3"; //选择播放的音频
			//   music.onPause(); //暂停播放
			// 	console.log('暂停播放')
			// console.log('dianjizanting')
			// this.stopAudio()
			// this.playing = !this.playing; //背景音乐点击，暂停或继续
		},
		// 定义动画内容
		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();
		}
		// ScanAudio(){
		// 	this.$api.music.play(); //执行播放
		// 				console.log('执行播放')
		// }
	}
};
</script>

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

.content {
	// background-color: pink;
	width: 100%;
	height: 100vh;
	position: relative;
	// overflow: hidden;
	.image {
		width: 100%;
		height: 100%;
	}
	.bgimg {
		width: 100%;
		height: 100%;

		// background-color: pink;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.tki-qrcode-canvas {
		width: 750rpx;
		height: 100vh;
		margin: 0 auto;
		// background-color: pink;
	}

	.box {

		color: #ffffff;
		width: 100%;
		height: 100vh;
		// background-color: pink;

		// .music {
		// 	// width: 55rpx;
		// 	// height: 55rpx;
		// 	border-radius: 28rpx;
		// 	// background-color: pink;
		// 	position: absolute;
		// 	left: 12rpx;
		// 	top: 250rpx;
		// 	z-index: 999;
		// }
	}

	.imgbox {
		height: 1334rpx;
		width: 750rpx;
	}
}
.image {
	width: 100%;
	height: 100%;
}
</style>