Hfive/pages/index/notification.vue

<template>
	<view class="content">
		<navseat :opacity='false' :title='"绑定通知"' :titleshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
		<!-- 	<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="https://czg-invoicing.oss-cn-beijing.aliyuncs.com/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
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		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: {
			async storeinvoicelist() {
				let res = await this.api.storebindinginvopush({
					store_id: uni.getStorageSync('userId')
				})
				if (res) {
					this.datalsit = res.data.qrcode;
					console.log(this.datalsit)
					// 获取uQRCode实例
					var qr = new uQRCode();
					// 设置二维码内容
					qr.data = res.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();
			},
		}
	}
</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>