347 lines
6.8 KiB
Vue
347 lines
6.8 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: 600rpx;margin: 0 auto;" /> -->
|
||
<image :src="imgpic" mode="aspectFit"></image>
|
||
<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: '',
|
||
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,
|
||
imgpic: ''
|
||
}
|
||
},
|
||
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() {
|
||
|
||
},
|
||
methods: {
|
||
// 保存二维码
|
||
saveCanvas() {
|
||
let that = this
|
||
if (that.imgpic) {
|
||
my.saveImageToPhotosAlbum({
|
||
filePath: that.imgpic, // 要保存的图片的文件路径
|
||
success: () => {
|
||
my.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.log(err);
|
||
my.showToast({
|
||
title: '保存失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
});
|
||
} else {
|
||
my.showToast({
|
||
title: '请先生成二维码',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
//**生成二维码**//
|
||
qrFun() {
|
||
my.generateImageFromCode({
|
||
code: 'https://kg.chuantewulian.cn/w?s=' + this.deviceNo, // 替换为有效的二维码内容
|
||
format: 'QRCODE',
|
||
width: 200,
|
||
correctLevel: 'H',
|
||
codeColor: '#8883F0',
|
||
backgroundColor: '#ffffff',
|
||
success: (res) => { // 使用箭头函数来保持this的上下文
|
||
console.log(res)
|
||
this.imgpic = res.image
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
|
||
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: 300px;
|
||
height: 300px;
|
||
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 72rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 104rpx;
|
||
|
||
text {
|
||
margin-top: 16rpx;
|
||
display: block;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
</style> |