<template>
	<view class="page">
		<u-navbar title="二维码" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='50' id="navbar">
		</u-navbar>
		<view class="tishi">
			<text>微信“扫一扫”使用小程序</text>
			<text>开启您的一天好心情</text>
		</view>
        <view class="img">
        	<!-- <image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uo2AtaJDlN9q2PxlBEDx" mode=""></image> -->
			<!-- 展示二维码 -->
			<view class="imgewm">
				<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
				<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
					SN:{{sn}}
				</view>
			</view>
        </view>
		<view class="anniu" @click="saveCanvas">
			保存二维码
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#DEF1DA",
                },
				sn:''
			}
		},
		onLoad(option) {
			this.sn = option.sn
           this.qrFun()
		},
		mounted() {
			this.drawCanvas()
		},
		methods: {
			drawCanvas() {
				const ctx = uni.createCanvasContext('qrcode', this);
				ctx.setFillStyle('#fff');
				ctx.fillRect(10, 10, 250, 250);
				ctx.draw();
			},
			// 保存二维码
			saveCanvas() {
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: (res) => {
						console.log(res.tempFilePath); // 打印图片路径  
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							}
						});
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			//**生成二维码**//
			qrFun: function() {
				this.wemflag = true
				uQRCode.make({
					canvasId: 'qrcode',
					text: 'https://kg.chuantewulian.cn/w?s=' + this.sn,
					size: 300,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-iconfont,
	/deep/ .u-title{
		padding-bottom: 20rpx;
	}
	.imgewm {
		width: 700rpx;
		height:700rpx;
		margin: auto;
		margin-top: 54rpx;
		z-index: 2;
	}
	.tishi{
		width: 620rpx;
		height: 180rpx;
		background: #F8FFF6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 54rpx;
		text{
			margin-top: 16rpx;
			display: block;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
	page {
		width: 750rpx;
		height: 1624rpx;
		background: #DEF1DA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.name{
		width: 100%;
		text-align: center;
		font-size: 36rpx;
	}
	.img{
		width: 666rpx;
		height: 870rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
    .anniu{
		width: 546rpx;
		height: 88rpx;
		background: #48893B;
		border-radius: 59rpx 59rpx 59rpx 59rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
	}

</style>