<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="tishi">
<text>微信“扫一扫” 使用小程序</text>
<text>选择您所需要的用电套餐</text>
</view>
<!-- 展示二维码 -->
<view class="imgewm" @longpress="saveCanvas">
<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
SN:{{deviceNo}}
</view>
<view class="btn"
@click="saveCanvas">
保存二维码
</view>
</view>
</view>
</template>
<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js")
import uQRCode from '@/common/uqrcode.js'
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
suitSurplus:'',
showflag: false,
imgflag: false,
wemflag: false,
btnmsk: false,
bluetoothflag: false,
shibaiflag: false,
danwei: '',
listdanwei: [{
value: 2,
label: '小时'
}, {
value: 3,
label: '分钟'
}, {
value: 4,
label: '秒钟'
}, {
value: 0,
label: '度'
}],
bgc: {
backgroundColor: "#F9F8FF ",
},
ec: {
lazyLoad: true
},
deviceInfo: {},
loadings: false,
info: '',
checked: false,
tittxt: "设备详情",
titlist: [],
tdtxt: '开启',
curtitidx: 0,
id: '',
focus: false,
timeday: '',
imglist: '',
token: '',
userImgs: '',
imgflag: true,
mac: "",
name: '',
deviceId: '',
storeId: '',
qrResult: '',
devicesList: [],
setMode: null,
vipflag: false,
cztime: '',
opflag: true,
timer: null,
url: "",
deviceNo: '',
modelId: [],
damweiid: '',
intervalId: null,
sklist:{},
sklistflag:false,
}
},
onLoad(option) {
this.deviceNo = option.id
this.qrFun()
},
// 分享到好友（会话）
onShareAppMessage: function() {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
onShow() {
},
mounted() {
this.drawCanvas()
},
methods: {
capture() {
var pages = getCurrentPages(); //获取当前页面信息
var page = pages[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('截屏绘制图片成功');
//这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题
let rand = Math.floor(Math.random() * 10000)
let saveUrl = '_doc/' + rand + 'a.jpg'
bitmap.save(saveUrl, {}, function(i) {
// console.log('保存图片成功：' + JSON.stringify(i));
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function() {
// bitmap.clear(); //销毁Bitmap图片
uni.showToast({
title: '保存图片成功',
mask: false,
duration: 1500
});
}
});
}, function(e) {
console.log('保存图片失败：' + JSON.stringify(e));
});
}, function(e) {
console.log('截屏绘制图片失败：' + JSON.stringify(e));
});
//currentWebview.append(amway_bit);
},
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',
// componentInstance: this,
text: 'https://kg.chuantewulian.cn/w?s=' + this.deviceNo,
size: 250,
margin: 0,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
})
},
ewmyc() {
this.wemflag = false
},
btnlyqx() {
this.shibaiflag = false
this.bluetoothflag = false
},
getQiniuToken() {
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
if (res.code == 200) {
this.token = res.token
}
});
},
btnpic() {
uni.chooseImage({
count: 1,
success: (rst) => {
this.url = rst.tempFilePaths[0]
}
})
},
onok(ev) {
this.url = ""
this.path = ev.path;
let _this = this
let math = 'static/' + _this.$u.guid(20)
wx.uploadFile({
url: 'https://up-z2.qiniup.com',
name: 'file',
filePath: _this.path,
formData: {
token: _this.token,
key: 'smartmeter/img/' + math
},
success: function(res) {
// console.log(res);
let str = JSON.parse(res.data)
_this.userImgs = 'https://api.ccttiot.com/' + str.key
_this.imglist = _this.userImgs
// console.log(_this.imglist,'_this.imglist_this.imglist')
let data = {
deviceId: _this.id,
customPicture: _this.imglist
}
_this.putdevice(data)
}
})
},
oncancel() {
// url设置为空，隐藏控件
this.url = ""
},
putdevice(data) {
this.$u.put('/app/device', data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '修改成功',
icon: 'success',
duration: 2000
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
})
},
opendevice() {
let stause = 0
if (this.deviceInfo.powerStatus == 1) {
stause = 0
} else {
stause = 1
}
// console.log(stause, 'stausestause');
this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
if (res.code == 200) {
// this.groupList=res.rows
setTimeout(() => {
this.getDevice(this.id)
}, 2000)
// this.loadings=true
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
},
opendevices() {
},
swiperchange(e) {
this.curtitidx = e.detail.current
// console.log(e, 'aaaa');
},
changeidx(index) {
this.curtitidx = index
},
toydfx() {
uni.navigateTo({
url: "/page_components/eletj?id=" + this.id
})
},
}
}
</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:100%;
height: 94rpx;
background: #8883F0;
border-radius: 47rpx 47rpx 47rpx 47rpx;
font-size: 36rpx;
color: #FFFFFF;
text-align: center;
line-height: 94rpx;
margin-top: 184rpx;
}
.imgewmflag {
width: 750rpx;
height: 100vh;
background: #fff;
border-radius: 0rpx 0rpx 0rpx 0rpx;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
.imgewm {
width: 250px;
height:250px;
margin: auto;
margin-top: 104rpx;
// position: fixed;
// top:400rpx;
// left: 50%;
// transform: translateX(-50%);
z-index: 2;
}
.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>