yicangzongtai_app_240321/pages/research/myPublicWelfare/share.vue

<template>
	<view>
		<navbar ref="navbar" :config="config" backColor="#999999"></navbar>
		<canvas @longtap="popShow=true" canvas-id="canvasId" id="canvasId"></canvas>
		<view class="ayQrcodeCls">
			<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @result="getCode" :height="125" :width="125" />
		</view>
		<u-modal v-model="popShow" content="确定保存到手机？" show-cancel-button @confirm="shareB()"></u-modal>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
	export default {
		components: {
			ayQrcode
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '分享',
					color: 'black',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black',
				},
				// 捐爱心
				// text:"感谢您于2022年06月15日捐款100颗爱心。我们将按照您的意愿，全部用于公益慈善事业。",
				// 捐钱
				// text:"感谢您于2022年06月15日捐款￥1.00元。我们将按照您的意愿，全部用于公益慈善事业。"
				// 捐物
				text: "感谢您于2022年06月15日捐款100万元的爱心物质。我们将按照您的意愿，全部用于公益慈善事业。",
				imgUrl: "",
				systemInfo: {},
				data: null,
				userInfo: {},
				code: null,
				modal_qr: false,
				url: this.$mConfig.redirect_uri + "/pages/register",
				imgURL:"",
				popShow:false
			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
				}
			})
			this.userInfo = uni.getStorageSync('personal');
			this.data = options.time.replace('-', '年').replace('-', '月') + '日';
			this.code = options.code;
			this.text = `感谢您于${this.data+options.title}。我们将按照您的意愿，全部用于公益慈善事业。`;
			this.showQrcode()
		},
		methods: {
			// 展示二维码
			showQrcode() {
			  let _this = this;
			  this.modal_qr = true;
			  // uni.showLoading()
			  setTimeout(function () {
			    // uni.hideLoading()
			    _this.$refs.qrcode.crtQrCode();
			  }, 50);
			},
			init() {
				let textStr = 0;
				let that = this;
				uni.getImageInfo({
					src: '/static/convenienceService/credentialBg.png',
					success: function(image) {
						let y = 140;
						var context = uni.createCanvasContext('canvasId');
						context.drawImage(image.path, 0, 0, that.systemInfo.screenWidth, 570);
						context.font = "bold 16px Arial";
						context.fillText("亲爱的:", 40, 140);
						context.font = "14px Arial";
						y += 30
						context.fillText("绿马公益" + that.userInfo.real_name, 40, y);
						y += 30;
						for (let i = 0; i < (Math.ceil(that.text.length / 21)); i++) {
							let textX = i !== 0 ? 40 : 68
							let num = i !== 0 ? 21 : 24
							context.fillText(that.text.substr(textStr, num), textX, y);
							y += 20;
							if (i !== 0) {
								textStr += 21
							} else {
								textStr += 24
							}

						}
						y += 5;
						context.fillText("您的善行义举，将点燃更多希望。再次向您", 68, y);
						y += 20;
						context.fillText("致以最诚挚的敬意。", 40, y);
						y += 25;
						context.fillText("特颁此证，深表谢忱。", 40, y);
						context.drawImage(that.imgURL, 130, 350, 104, 104);
						context.font = "13px Arial";
						context.fillText("扫码参与绿马公益", 130, 470);
						context.textAlign = "center"
						context.fillText("记录编号：" + that.code, that.systemInfo.screenWidth / 2, 520);
						context.draw(false, () => {
							// 返回canvas图片信息
							uni.canvasToTempFilePath({
								canvasId: 'canvasId',
								success: (res) => {
									that.imgUrl = res.tempFilePath
								},
								fail: function(err) {
									console.log(err)
								}
							})
						})
					}
				});
			},
			// 保存图片
			shareB() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: _this.imgUrl,
					success() {
						uni.showModal({
							title: "保存成功",
							content: "图片已成功保存到相册",
							showCancel: false
						})
					},
					fail(e) {
						console.log(e)
					}
				})

			},
			getCode(e) {
				this.imgURL=e
				console.log(e)
				this.init()
			}
		}
	}
</script>

<style lang="scss" scoped>
	#canvasId {
		width: 750rpx;
		height: 1200rpx;
	}
	.ayQrcodeCls{
		position: absolute;
		left: -999rpx;
	}
</style>