<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>