smartswrtch-app/pages/shopewm.vue

<template>
	<view class="page">
		<u-navbar title="分享二维码" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='50' id="navbar">
		</u-navbar>
		<view class="imgewm">
			<canvas canvas-id="qrcode" style="height: 100%;position: absolute;top: 290rpx;left: 112rpx;" />
			<canvas canvas-id="qrcodes" style="height: 100%;position: absolute;z-index: -1;" />
		</view>
        <view class="btn"
        	@click="saveCanvas">
        	保存二维码
        </view>
		
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F9F8FF ",
				},
				storeId:''
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
			this.qrFun()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onShow() {

		},
		mounted() {
			this.drawCanvas()
			this.drawCanvass()
		},
		methods: {
			
			
			drawCanvas() {
				const ctx = uni.createCanvasContext('qrcode', this);
				ctx.setFillStyle('#fff');
				ctx.fillRect(10, 10, 250, 250);
				ctx.draw();
			},
			drawCanvass() {
				const ctx = uni.createCanvasContext('qrcodes', this);
				ctx.setFillStyle('#fff');
				ctx.fillRect(10, 10, 250, 250);
				ctx.draw();
			},
			// 保存二维码
			saveCanvas() {
				uni.showLoading({
					title: '保存中'
				})
				this.qrFuns()
			},
			//**生成二维码**//
			qrFun: function() {
				const systemInfo = uni.getSystemInfoSync()
				// 假设我们想要二维码占据屏幕宽度的%和屏幕高度的%
				const screenWidth = systemInfo.screenWidth
				const screenHeight = systemInfo.screenHeight
				const qrWidth = screenWidth * 0.22; 
				const qrHeight = screenHeight * 0.22; 
				const qrSize = Math.min(qrWidth, qrHeight);
				uQRCode.make({
					canvasId: 'qrcode',
					text: 'https://kg.chuantewulian.cn/w?storeId=' + this.storeId,
					size: qrSize,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
			},
			qrFuns: function() {
				const systemInfo = uni.getSystemInfoSync()
				// 假设我们想要二维码占据屏幕宽度的%和屏幕高度的%
				const screenWidth = systemInfo.screenWidth
				const screenHeight = systemInfo.screenHeight
				const qrWidth = screenWidth * 0.8; 
				const qrHeight = screenHeight * 0.8; 
				const qrSize = Math.min(qrWidth, qrHeight);
				uQRCode.make({
					canvasId: 'qrcodes',
					text: 'https://kg.chuantewulian.cn/w?storeId=' + this.storeId,
					size: qrSize,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
				setTimeout(()=>{
					uni.canvasToTempFilePath({
						canvasId: 'qrcodes',
						success: (res) => {
							console.log(res.tempFilePath); // 打印图片路径  
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								}
							});
						},
						fail: (err) => {
							console.error(err)
						}
					})
				},1500)
			},
			
	

		}
	}
</script>

<style lang="scss">
	/deep/ .panel {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99 !important;
		overflow: hidden;
	}
    .btn{
		width:642rpx;
		height: 94rpx;
		background: #8883F0;
		border-radius: 47rpx 47rpx 47rpx 47rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 94rpx;
		margin-top: 184rpx;
		position: fixed;
		bottom: 280rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.imgewmflag {
		width: 750rpx;
		height: 100vh;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
	}

	.imgewm {
		 width: 642rpx;
		  height: 902rpx;
		  margin: auto;
		  margin-top: 104rpx;
		  background-image: url('https://api.ccttiot.com/smartmeter/img/static/u6NdxZVcR9aIYBb1QpRW');
		  background-size: cover; /* 确保背景图片覆盖整个容器 */
		  background-position: center; /* 背景图片居中显示 */
		  background-repeat: no-repeat; /* 防止背景图片重复 */
		  position: relative;
	}
    .tishi{
		width: 620rpx;
		height: 180rpx;
		background: rgba(217,216,255,0.3294);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		padding: 36rpx 92rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 104rpx;
		text{
			margin-top: 16rpx;
			display: block;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
</style>