383 lines
8.0 KiB
Vue
383 lines
8.0 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',
|
||
text: 'https://kg.chuantewulian.cn/w?s=' + this.deviceNo,
|
||
size: 300,
|
||
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: 700rpx;
|
||
height:700rpx;
|
||
margin: auto;
|
||
margin-top: 104rpx;
|
||
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: 40rpx;
|
||
text{
|
||
margin-top: 16rpx;
|
||
display: block;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
</style> |