Hfive/pages/index/notification.vue

<template>
	<view class="content">
	<!-- 	<view class="content_boxtop flex-between">
			<view class="content_boxtopone">
				{{datalsit.type}}
			</view>
			
		</view> -->
		<view class="content_boxt_tow">
			<view class="content_boxt_towtext">
				扫码绑定公众号，将会收到通知
			</view>
			<view class="content_boxt_towrelative" style="242px;height: 242px;">
				<canvas id="qrcode" style="242px;height: 242px;" ref="qrcode" canvas-id="qrcode"></canvas>
				<image class="content_boxt_towabsolute" src="@/static/icons.png" mode=""></image>
			</view>
			<!-- <view class="content_boxt_towtexts" style="color: blue; " @click="savealbum">
				已完成
			</view> -->
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; // npm install uqrcodejs
	export default {
		data() {
			return {
				text: 'uQRCode',
				size: 242,
				datalsit: {},
				ID: '',
				resurl: ''
			};
		},
		onLoad(e) {
			this.ID = e.id
			this.status = e.status

		},
		onReady() {
			setTimeout(() => {
				uni.$u.debounce(this.storeinvoicelist(), 500)
			}, 500)
		},
		methods: {
			storeinvoicelist() {
				uni.request({
					url: uni.conf.baseUrl + 'store/bindinginvopush',
					data: {
						//参数
						store_id: uni.getStorageSync('userId')
					},
					method: 'POST', //请求方式，必须为大写
					success: res => {
						this.datalsit = res.data.data.qrcode;
						console.log(this.datalsit)
						// 获取uQRCode实例
						var qr = new uQRCode();
						// 设置二维码内容
						qr.data = res.data.data.qrcode;
						// 设置二维码大小，必须与canvas设置的宽高一致
						qr.size = this.size;
						// 调用制作二维码方法
						qr.make();
						// 获取canvas上下文
						var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
						// 设置uQRCode实例的canvas上下文
						qr.canvasContext = canvasContext;
						// 调用绘制方法将二维码图案绘制到canvas上
						qr.drawCanvas();
					}
				});
			},
			savealbum(e) {
				uni.pro.navigateBack();
			},
			// savealbum(e) {
			// 	// #ifdef APP
			// 	uni.showLoading({
			// 		//加载框
			// 		title: '保存中...',
			// 		mask: true
			// 	});
			// 	var pages = getCurrentPages();
			// 	var page = pages[pages.length - 1];
			// 	console.log('当前页' + pages.length - 1);
			// 	var bitmap = null;
			// 	var currentWebview = page.$getAppWebview();
			// 	bitmap = new plus.nativeObj.Bitmap('amway_img');
			// 	// 将webview内容绘制到Bitmap对象中
			// 	currentWebview.draw(
			// 		bitmap,
			// 		function() {
			// 			console.log('截屏绘制图片成功');
			// 			bitmap.save(
			// 				'_doc/a.jpg', {},
			// 				function(i) {
			// 					console.log('保存图片成功：' + JSON.stringify(i));
			// 					uni.saveImageToPhotosAlbum({
			// 						filePath: i.target,
			// 						success: function() {
			// 							bitmap.clear(); //销毁Bitmap图片
			// 							uni.showToast({
			// 								title: '保存图片成功',
			// 								mask: false,
			// 								duration: 1500
			// 							});
			// 							uni.hideLoading();
			// 						}
			// 					});
			// 				},
			// 				function(e) {
			// 					console.log('保存图片失败：' + JSON.stringify(e));
			// 				}
			// 			);
			// 		},
			// 		function(e) {
			// 			console.log('截屏绘制图片失败：' + JSON.stringify(e));
			// 		}
			// 	);
			// 	// #endif
			// },
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 32rpx 28rpx;

		.content_boxtop {
			padding: 22rpx 16rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.content_boxtopone {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.content_boxtoptow {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.content_boxt_one {
			margin-top: 32rpx;
			padding: 32rpx;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			background: #FFFFFF;

			.content_boxt_oneone {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF6565;
			}

			.classvie_item {
				margin-top: 16rpx;

				.classvie_itemone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
					text-transform: none;
				}

				.classvie_itemtow {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #999999;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		.content_boxt_tow {
			margin: 32rpx 0;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding-bottom: 50rpx;

			.content_boxt_towtext {
				padding-top: 32rpx;
				text-align: center;
				width: 100%;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}

			.content_boxt_towtexts {
				margin: 50rpx auto 0 auto;
				width: 558rpx;
				height: 84rpx;
				background: #288EFB;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				font-style: normal;

			}

			.content_boxt_towrelative {
				position: relative;
				width: 242px;
				height: 242px;
				margin: 32rpx auto;

				.content_boxt_towabsolute {
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -50rpx;
					margin-left: -50rpx;
					border-radius: 16rpx;
					// transform: translate(-50% -50%);
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
</style>