uniapp-shikongwang/pages/bill/bill.vue

<template>
	<view>

		<button class='zfbtn m_l' @tap='formSubmit()'>
			分享
		</button>

		<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
			foreground="#000" pdground="#000" :onval="true" :loadMake="true" />

		<view class="canvas-box">
			<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
		</view>
		
		<view class='imagePathBox' v-if="maskHidden == true">
		      <image :src="imagePath" class='shengcheng'></image>
		      <button class='baocun'@click="baocun()">保存相册，分享到朋友圈</button>
		    </view>
	</view>
</template>

<script>
	const app = getApp()
	import tkiQrcode from "tki-qrcode"; // 二维码生成器
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				base64Img: '', //
				checkArea: '0',


				img: "../../static/images/empty.png",
				wechat: "../../static/images/tabbar/home.png",
				quan: "../../static/images/tabbar/my.png",
				touxiang: "../../static/images/system/payfail.png",
				inputValue: "",
				maskHidden: false,
				name: "kk",
				code: "E7A93C",

				info: {
					avatar: '',
					nickname: '',
					id: '',
					tel: '',
					tags: []
				},
				showLogin: true
			}
		},
		methods: {
			qrR(data) {
				this.base64Img = data;
			},


			verifyUserInfo() {
				let userInfo = uni.getStorageSync('userinfo') || {};
				if (!userInfo.id || !userInfo.nickname || !userInfo.avatar) {
					if (this.showLogin) {
						this.showLogin = false;
						this.$url('/pages/login/index?type=userinfo');
					} else {
						this.showLogin = true;
						this.$url('/pages/index/index', {
							type: 'switch'
						});
					}
				}
			},
			getData() {
				let userinfo = uni.getStorageSync('userinfo') || {};
				if(userinfo) {
					this.info = userinfo
				}else {
					this.$http(this.API.API_USER_CENTER).then(res => {
						this.info = res.data;
						console.log(this.info)
					})
				}
				
				
			},


			createNewImg() {
				var that = this;
				var context = wx.createCanvasContext('mycanvas');
				context.setFillStyle("#ffe200")
				context.fillRect(0, 0, 375, 667)
				var path = "../../static/images/empty.png";
				context.drawImage(path, 0, 0, 375, 183);
				
				that.info.avatar = "../../static/images/system/payfail.png"
				var path1 = that.info.avatar;
				console.log(path1, "path1")
				//定义图片
				var path2 = "../../static/images/system/payfail.png";
				var path3 = "../../static/images/system/paysuccess.png";
				var path4 = "../../static/images/system/paysuccess.png";
				var path5 = "../../static/images/system/refresh.png";
				context.drawImage(path2, 126, 186, 120, 120);
				//不知道是什么原因，手机环境能正常显示
				// context.save(); // 保存当前context的状态

				var name = that.info.nickname;
				//绘制名字
				context.setFontSize(24);
				context.setFillStyle('#333333');
				context.setTextAlign('center');
				context.fillText(name, 185, 340);
				context.stroke();
				//绘制一起吃面标语
				context.setFontSize(14);
				context.setFillStyle('#333333');
				context.setTextAlign('center');
				context.fillText("邀请你一起去吃面", 185, 370);
				context.stroke();
				//绘制验证码背景
				context.drawImage(path3, 48, 390, 280, 84);
				//绘制code码
				context.setFontSize(40);
				context.setFillStyle('#ffe200');
				context.setTextAlign('center');
				context.fillText(that.code, 185, 435);
				context.stroke();
				//绘制左下角文字背景图
				context.drawImage(path4, 25, 520, 184, 82);
				context.setFontSize(12);
				context.setFillStyle('#333');
				context.setTextAlign('left');
				context.fillText("进入小程序输入朋友的邀请", 35, 540);
				context.stroke();
				context.setFontSize(12);
				context.setFillStyle('#333');
				context.setTextAlign('left');
				context.fillText("码，朋友和你各自获得通用", 35, 560);
				context.stroke();
				context.setFontSize(12);
				context.setFillStyle('#333');
				context.setTextAlign('left');
				context.fillText("优惠券1张哦~", 35, 580);
				context.stroke();
				//绘制右下角扫码提示语
				context.drawImage(path5, 248, 578, 90, 25);
				//绘制头像
				context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
				context.strokeStyle = "#ffe200";
				context.clip(); //裁剪上面的圆形
				context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图
				context.draw();
				//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
				setTimeout(function() {
					wx.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: function(res) {
							var tempFilePath = res.tempFilePath;
							that.imagePath = tempFilePath
							that.canvasHidden = true
							console.log('海报生成成功')
							console.log(res)
							console.log(that.imagePath)
						},
						fail: function(res) {
							console.log(res);
						}
					});
				}, 200);
			},
			baocun() {
				var that = this
				wx.saveImageToPhotosAlbum({
					filePath: that.imagePath,
					success(res) {
						wx.showModal({
							content: '图片已保存到相册，赶紧晒一下吧~',
							showCancel: false,
							confirmText: '好的',
							confirmColor: '#333',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									that.maskHidden = false
								}
							},
							fail: function(res) {
								that.maskHidden = false
							}
						})
					}
				})
			},
			formSubmit() {
				var that = this;
				wx.showToast({
					title: '生成海报中...',
					icon: 'loading',
					duration: 1000
				});
				setTimeout(function() {
					wx.hideToast()
					that.createNewImg();
					
					that.maskHidden = true
				}, 1000)
			}
		},
		onLoad(options) {
			this.qrcode = 'dadaa'

			this.verifyUserInfo();
			this.getData();
		}

	}
</script>

<style>
	.bgImg {
		display: block;
		width: 100%;
		height: 366rpx;
	}

	.mine {
		display: block;
		text-align: center;
		color: #333;
		margin-top: 44rpx;
	}

	.code {
		display: block;
		text-align: center;
		color: #333;
		font-size: 76rpx;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.who {
		display: block;
		margin-top: 80rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
	}

	.inputBox {
		text-align: center;
		margin-top: 44rpx;
	}

	.input {
		text-align: center;
		width: 440rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: #f5f5f5;
		font-size: 32rpx;
		display: inline-block;
	}

	.btn {
		width: 160rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1));
		box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5);
		color: #333;
		font-size: 32rpx;
		display: inline-block;
		line-height: 88rpx;
		margin-left: 40rpx;
	}

	button[class="btn"]::after {
		border: 0;
	}

	.tishi {
		display: block;
		text-align: center;
		color: #999;
		margin-top: 30rpx;
	}

	.shareText {
		display: block;
		text-align: center;
		color: #333;
		font-size: 28rpx;
		margin-top: 100rpx;
	}

	.imgBox {
		text-align: center;
		width: 100%;
		margin-top: 60rpx;
		padding-bottom: 120rpx;
	}

	.img {
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	.m_l {
		margin-left: 180rpx;
	}

	.zfbtn {
		display: inline-block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: transparent;
		outline: none;
		border: 0;
		padding: 0;
	}

	button[class="zfbtn"]::after {
		border: 0;
	}

	button[class="zfbtn m_l"]::after {
		border: 0;
	}

	.imagePathBox {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.shengcheng {
		width: 80%;
		height: 80%;
		position: fixed;
		top: 50rpx;
		left: 50%;
		margin-left: -40%;
		z-index: 10;
	}

	.baocun {
		display: block;
		width: 80%;
		height: 80rpx;
		padding: 0;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: 50rpx;
		left: 10%;
		background: #ffe200;
		color: #333;
		font-size: 32rpx;
		border-radius: 44rpx;
	}

	button[class="baocun"]::after {
		border: 0;
	}
</style>
}
</style>