388 lines
8.1 KiB
Vue
388 lines
8.1 KiB
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="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>
|