925 lines
24 KiB
Vue
925 lines
24 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- <u-navbar :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
|
||
title-size='36' height='50'></u-navbar> -->
|
||
<view class="title">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uyr6T0Vfkefty2blkDmU" mode="" style="width: 52rpx;height: 52rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;" @click="btnshouye"></image>
|
||
{{deviceobj.deviceName == undefined ? '--' : deviceobj.deviceName}}
|
||
<view class="wz">
|
||
<!-- 该设备还剩余时长：{{expireTimeStr}}分钟 -->
|
||
</view>
|
||
<view class="wz" v-if="deviceobj.storeContactMobile == null">
|
||
联系客服：<text @click="call">{{deviceobj.userMobile == undefined ? '--' : deviceobj.userMobile}}</text>
|
||
</view>
|
||
<view class="wz" v-else>
|
||
联系客服：<text @click="call">{{deviceobj.storeContactMobile == undefined ? '--' : deviceobj.storeContactMobile}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 检测蓝牙未开启 -->
|
||
<view class="shibai" v-if="lanyaflag">
|
||
<view class="top">
|
||
设备未联网
|
||
</view>
|
||
<view class="tishi">
|
||
检测到该设备未联网,请打开蓝牙进行蓝牙模式
|
||
</view>
|
||
<view class="li">
|
||
<view class="wz">
|
||
第一：检查手机蓝牙是否打开
|
||
</view>
|
||
<image style="width: 386rpx;height: 263rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uM4DY4Ee9AgFHLv4bIDR" mode=""></image>
|
||
</view>
|
||
<view class="li">
|
||
<view class="wz">
|
||
第二：设置小程序蓝牙授权
|
||
</view>
|
||
<image style="width: 368rpx;height: 151rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uAj06uo9qysixLrcFHBn" mode=""></image>
|
||
<image style="width: 386rpx;height: 301rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/ugFSKFZn4mzJJHQx3K2Z" mode=""></image>
|
||
<image style="width: 386rpx;height: 330rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uZ4XoCI2KNQzcPKbwGLN" mode=""></image>
|
||
</view>
|
||
<view class="jxcz" @click="btnjxcz">
|
||
我已知晓
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box" v-else>
|
||
<view class="tit">
|
||
选择服务
|
||
</view>
|
||
<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
|
||
<view :class="indexactive == item.suitId ? 'active':''"
|
||
style="width: 304rpx;height: 122rpx;background: #fff;box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);border-radius: 30rpx;display: flex;justify-content: space-between;padding: 20rpx 34rpx;box-sizing: border-box;margin-top: 20rpx;"
|
||
v-for="(item,index) in deviceobj.suitList" :key="index" @click="btnactive(item)">
|
||
<view class="lt">
|
||
<view class="tc">
|
||
{{item.name.length > 5 ? item.name.substring(0,5) + '...' : item.name}}
|
||
</view>
|
||
<view class="date">
|
||
{{item.value}} <text v-if="item.timeUnit == 1">日</text> <text v-if="item.timeUnit == 2">时</text> <text v-if="item.timeUnit == 3">分钟</text> <text v-if="item.timeUnit == 4">秒</text>
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
￥{{item.price}}
|
||
</view>
|
||
</view>
|
||
<view v-if="deviceobj.suitList == null" class="" style="color: #ccc;font-size: 36rpx;">
|
||
该设备暂无套餐...
|
||
</view>
|
||
</view>
|
||
|
||
<view class="shuom" v-for="(item,index) in deviceobj.suitList" :key="index"
|
||
v-if="indexactive == item.suitId">
|
||
<view class="tits" style="margin-top: 10rpx;">
|
||
套餐说明
|
||
</view>
|
||
|
||
<view class="" style="margin-top: 30rpx;">
|
||
<textarea :readonly="isReadOnly" v-model="item.description == null ? '无' : item.description"
|
||
id="myTextarea" cols="30" rows="10" style="pointer-events: none;"></textarea>
|
||
<!-- <textarea name="" v-model="item.description == null ? '无' : item.description" id="" cols="30" rows="10"></textarea> -->
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="tongyi" v-if="deviceobj.suitList != null">
|
||
<u-checkbox-group>
|
||
<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
|
||
</u-checkbox><text>《用户服务协议》</text>
|
||
</u-checkbox-group>
|
||
<view class="zf" @click="btnzhifu">
|
||
立即支付
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mask" v-if="czflag"></view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/page_components/blufi/xBlufi.js");
|
||
export default {
|
||
data() {
|
||
return {
|
||
indexactive: -1,
|
||
checked: false,
|
||
lanyaflag: false,
|
||
deviceobj: {},
|
||
timer: null,
|
||
expireTimeStr: '',
|
||
zfobj: {},
|
||
orderno: '',
|
||
id: '',
|
||
czflag: false,
|
||
sytime: 0,
|
||
datetime: 0,
|
||
mac: '',
|
||
deviceId: '',
|
||
name: '',
|
||
ver_data: '',
|
||
devicesList: [],
|
||
onlineStatus: '',
|
||
jine: '',
|
||
dingobj: {},
|
||
suitTimeUnit:'',
|
||
zfflag:true
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if (option.q) {
|
||
function getQueryParam(url, paramName) {
|
||
let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
|
||
let results = regex.exec(url);
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
|
||
}
|
||
let sceneValue = option.q
|
||
let decodedValue = decodeURIComponent(sceneValue);
|
||
this.id = getQueryParam(decodedValue, 's')
|
||
this.startTimer()
|
||
this.gettaoc()
|
||
this.getmac()
|
||
if (this.onlineStatus == 0) {
|
||
// 一开始搜索设备
|
||
xBlufi.initXBlufi(1)
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': true
|
||
})
|
||
setTimeout(() => {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
if (this.devicesList.length > 0) {
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: this.deviceId,
|
||
name: this.name
|
||
})
|
||
}
|
||
}, 2000)
|
||
}
|
||
} else {
|
||
this.id = option.id
|
||
this.startTimer()
|
||
this.gettaoc()
|
||
this.getmac()
|
||
if (this.onlineStatus == 0) {
|
||
// 一开始搜索设备
|
||
xBlufi.initXBlufi(1)
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': true
|
||
})
|
||
setTimeout(() => {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
if (this.devicesList.length > 0) {
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: this.deviceId,
|
||
name: this.name
|
||
})
|
||
}
|
||
}, 2000)
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function () {
|
||
return {
|
||
title: '创想物联',
|
||
path: '/pages/shouye/index'
|
||
}
|
||
},
|
||
|
||
// 分享到朋友圈
|
||
onShareTimeline: function () {
|
||
return {
|
||
title: '创想物联',
|
||
query: '',
|
||
path: '/pages/shouye/index'
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getuserinfo()
|
||
if (this.orderno) {
|
||
// this.gethuidaio()
|
||
}
|
||
},
|
||
onUnload: function() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
}
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
},
|
||
onHide() {
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
});
|
||
},
|
||
onBeforeUnmount() {
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
});
|
||
},
|
||
methods: {
|
||
btnshouye(){
|
||
uni.reLaunch({
|
||
url:'/pages/shouye/index'
|
||
})
|
||
},
|
||
btnjxcz() {
|
||
xBlufi.initXBlufi(1)
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': true
|
||
})
|
||
setTimeout(() => {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
if (this.devicesList.length > 0) {
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: this.deviceId,
|
||
name: this.name
|
||
})
|
||
}
|
||
}, 2000)
|
||
},
|
||
|
||
call() {
|
||
let phoneNumber = ''
|
||
if (this.deviceobj.storeContactMobile == null) {
|
||
phoneNumber = this.deviceobj.userMobile
|
||
} else {
|
||
phoneNumber = this.deviceobj.storeContactMobile
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res);
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err);
|
||
uni.showToast({
|
||
title: '拨打电话失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
|
||
gettrue() {
|
||
this.$u.get("/app/device/isBind?deviceNo=" + this.id).then((res) => {
|
||
if (res.data == false) {
|
||
uni.navigateTo({
|
||
url: '/pages/shouye/index?flag=' + true + '&id=' + this.id
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getuserinfo() {
|
||
this.$u.get("/app/user/userInfo").then((res) => {
|
||
if (res.code == 200) {
|
||
this.gettrue()
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login?id=' + 1
|
||
})
|
||
}
|
||
})
|
||
},
|
||
startTimer() {
|
||
this.timer = setInterval(() => {
|
||
this.gettaoc();
|
||
}, 30000);
|
||
},
|
||
getmac() {
|
||
this.$u.get(`/app/device/${this.id}/bySn`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.mac = 'CTKG-' + res.data.mac
|
||
this.onlineStatus = res.data.onlineStatus
|
||
// console.log(this.mac,'期初');
|
||
}
|
||
})
|
||
},
|
||
gettaoc() {
|
||
this.$u.get(`/app/device/${this.id}/withSuitList`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.deviceobj = res.data;
|
||
// this.indexactive = res.data.suitList[0].suitId;
|
||
this.zfobj = res.data.suitList[0]
|
||
// let targetDateStr = this.deviceobj.expireTime
|
||
// let targetParts = targetDateStr.split(/[- :]/);
|
||
// let targetDate = new Date(targetParts[0], targetParts[1] - 1, targetParts[2], targetParts[3], targetParts[4], targetParts[5]);
|
||
// let now = new Date();
|
||
// let differenceInMs = targetDate - now;
|
||
// let differenceInMinutes = Math.floor(differenceInMs / (1000 * 60));
|
||
// this.expireTimeStr = parseInt(differenceInMinutes) <= 0 ? '0' : differenceInMinutes
|
||
let targetDateStr = this.deviceobj.expireTime;
|
||
let targetParts = targetDateStr.split(/[- :]/);
|
||
let targetDate = new Date(targetParts[0], targetParts[1] - 1, targetParts[2], targetParts[
|
||
3], targetParts[4], targetParts[5]);
|
||
let now = new Date();
|
||
let differenceInMs = targetDate - now;
|
||
if (differenceInMs <= 0) {
|
||
this.expireTimeStr = '0';
|
||
} else {
|
||
this.expireTimeStr = '1'
|
||
}
|
||
}
|
||
})
|
||
},
|
||
btnzhifu() {
|
||
if (this.checked == false) {
|
||
uni.showToast({
|
||
title: '请勾选用户服务协议 !',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
} else if (this.indexactive == -1) {
|
||
uni.showToast({
|
||
title: '请选择套餐 !',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
} else if (this.onlineStatus == 1) {
|
||
let that = this
|
||
let data = {
|
||
deviceNo: that.id,
|
||
suitId: that.zfobj.suitId,
|
||
money: that.zfobj.price,
|
||
suitTime: that.zfobj.value,
|
||
suitTimeUnit:that.suitTimeUnit
|
||
}
|
||
that.$u.post('/app/bill/recharge', data).then((res) => {
|
||
if (res.code == 200) {
|
||
that.orderno = res.data
|
||
that.$u.get(`/app/pay/wx/${that.orderno}`).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.timeStamp,
|
||
nonceStr: res.data.nonceStr,
|
||
package: res.data.packageVal,
|
||
signType: res.data.signType,
|
||
paySign: res.data.paySign,
|
||
success: (res) => {
|
||
console.log(res, '支付成功');
|
||
if (that.timer) {
|
||
clearInterval(this.timer);
|
||
that.timer = null;
|
||
}
|
||
that.$u.put(`/app/bill/${that.orderno}/refreshPayResult`).then(res => {})
|
||
// 支付成功逻辑
|
||
uni.reLaunch({
|
||
url: '/pages/shouye/index'
|
||
})
|
||
uni.setStorageSync('time', that.expireTimeStr)
|
||
},
|
||
fail(err) {
|
||
// 支付失败逻辑
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else if (res.code == 401) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
if (this.ver_data == '') {
|
||
this.czflag = true
|
||
uni.showLoading({
|
||
title: '切换中'
|
||
})
|
||
let that = this
|
||
xBlufi.initXBlufi(1);
|
||
xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': true
|
||
})
|
||
setTimeout(() => {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
if (that.devicesList.length > 0) {
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: that.deviceId,
|
||
name: that.name
|
||
})
|
||
}
|
||
}, 2000)
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '检测到该设备未联网,为您切换为蓝牙模式,支付的时候靠近该设备,并打开蓝牙',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
|
||
} else if (res.cancel) {
|
||
console.log('用户点击了取消');
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
|
||
let that = this
|
||
let data = {
|
||
deviceNo: that.id,
|
||
suitId: that.zfobj.suitId,
|
||
money: that.zfobj.price,
|
||
suitTime: that.zfobj.value,
|
||
suitTimeUnit:that.suitTimeUnit
|
||
}
|
||
that.$u.post('/app/bill/recharge', data).then((res) => {
|
||
if (res.code == 200) {
|
||
that.orderno = res.data
|
||
that.$u.get(`/app/pay/wx/${that.orderno}`).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.timeStamp,
|
||
nonceStr: res.data.nonceStr,
|
||
package: res.data.packageVal,
|
||
signType: res.data.signType,
|
||
paySign: res.data.paySign,
|
||
success: (res) => {
|
||
// console.log(res, '支付成功');
|
||
if (that.timer) {
|
||
clearInterval(this.timer);
|
||
that.timer = null;
|
||
}
|
||
|
||
// 111111111111111111111111
|
||
that.$u.get('/app/bill/recharge/device/fail/list').then(res => {
|
||
if (res.code == 200) {
|
||
console.log('获取订单状态',res);
|
||
let dingobj = res.data[0].billNo
|
||
console.log(dingobj,'订单号');
|
||
uni.getNetworkType({
|
||
success(res) {
|
||
if (res.networkType !== 'none') {
|
||
uni.getConnectedBluetoothDevices({
|
||
success(res) {
|
||
xBlufi.notifySendCustomData({
|
||
customData: "time@" + that.jine
|
||
})
|
||
},
|
||
fail(err) {
|
||
console.error('获取已连接蓝牙设备信息失败：',err)
|
||
}
|
||
})
|
||
that.$u.get(`/app/bill/recharge/${dingobj}/bluetoothSuccess`).then(res => {
|
||
if (res.code == 200) {
|
||
console.log('蓝牙离线充值成功')
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/shouye/index'
|
||
})
|
||
},1000)
|
||
}
|
||
})
|
||
} else {
|
||
console.log('手机未连接网络')
|
||
// this.baiflag = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
// 11111111111111111111111
|
||
|
||
// 支付成功逻辑
|
||
uni.setStorageSync('time', that.expireTimeStr)
|
||
},
|
||
fail(err) {
|
||
setTimeout(() => {
|
||
this.czflag = false
|
||
uni.hideLoading()
|
||
}, 500)
|
||
// 支付失败逻辑
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else if (res.code == 401) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
} else {
|
||
this.czflag = false
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
},
|
||
//选择套餐
|
||
btnactive(item) {
|
||
this.sytime = item.value
|
||
this.zfobj = item
|
||
this.indexactive = item.suitId
|
||
this.suitTimeUnit = item.timeUnit
|
||
if(item.timeUnit == 1){
|
||
this.jine = item.value * 24 * 60 * 60
|
||
}else if(item.timeUnit == 2){
|
||
this.jine = item.value * 60 * 60
|
||
}else if(item.timeUnit == 3){
|
||
this.jine = item.value * 60
|
||
}else if(item.timeUnit == 4){
|
||
this.jine = item.value
|
||
}
|
||
console.log(this.jine);
|
||
},
|
||
checkboxChange(e) {
|
||
this.checked = e.value
|
||
},
|
||
|
||
// 获取附近蓝牙设备列表
|
||
funListenDeviceMsgEvent: function(options) {
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
|
||
if (options.result) {
|
||
let devicesarr = options.data
|
||
devicesarr.forEach(device => {
|
||
const mac = device.name.substring(4);
|
||
// console.log(device.name,this.mac,'111');
|
||
if (device.name == this.mac) {
|
||
this.deviceId = device.deviceId
|
||
this.name = device.name
|
||
// console.log(device.name,this.mac,'222');
|
||
this.devicesList.push(device);
|
||
let uniqueDevicesList = Array.from(new Set(this.devicesList));
|
||
// 将去重后的数组重新赋值给 this.devicesList
|
||
this.devicesList = uniqueDevicesList;
|
||
} else {
|
||
// uni.showToast({
|
||
// title: '未找到该设备，请确认该设备在附近',
|
||
// icon: 'none',
|
||
// duration: 3000
|
||
// })
|
||
}
|
||
})
|
||
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
|
||
console.log("连接回调：" + JSON.stringify(options));
|
||
if (options.result) {
|
||
// console.log('125451245')
|
||
{
|
||
xBlufi.notifyInitBleEsp32({
|
||
deviceId: this.deviceId
|
||
});
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);
|
||
this.deviceIds = options.data.deviceId
|
||
this.name = this.name
|
||
}
|
||
}else{
|
||
|
||
}
|
||
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
|
||
this.ver_data = this.parseCustomData(options.data)
|
||
console.log("1收到设备发来的自定义数据结果：", this.ver_data);
|
||
setTimeout(()=>{
|
||
this.czflag = false
|
||
uni.hideLoading()
|
||
},1000)
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
|
||
if (options.result) {
|
||
let uniqueDevicesList = Array.from(new Set(this.devicesList));
|
||
let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) === "CTKG");
|
||
// 将过滤后的数组重新赋值给 this.devicesList
|
||
this.devicesList = filteredDevices;
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
|
||
if (!options.result) {
|
||
this.lanyaflag = true
|
||
uni.showToast({
|
||
title: '蓝牙未开启',
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
return
|
||
} else {
|
||
this.lanyaflag = false
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
// 从蓝牙拿到数据进行解析
|
||
parseCustomData(data) {
|
||
// 将字符串按照 "@" 分割成数组
|
||
const dataArray = data.split('@');
|
||
const voltage = parseFloat(dataArray[0].substring(1)); // 去除前缀 "V"，并将字符串转换为浮点数
|
||
const switchState = dataArray[1].substring(1); // 去除前缀 "S"
|
||
const current = parseFloat(dataArray[2].substring(1)); // 去除前缀 "A"，并将字符串转换为浮点数
|
||
const power = parseFloat(dataArray[4].substring(1)); // 去除前缀 "P"，并将字符串转换为浮点数
|
||
const remainingPower = parseFloat(dataArray[5].substring(1)); // 去除前缀 "M"，并将字符串转换为浮点数
|
||
const setMode = dataArray[6].substring(1); // 去除前缀 "T"
|
||
// 返回解析后的数据对象
|
||
return {
|
||
voltage,
|
||
switchState,
|
||
current,
|
||
power,
|
||
remainingPower,
|
||
setMode
|
||
};
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.u-icon__icon{
|
||
// margin-right: 20rpx;
|
||
}
|
||
.mask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-color: #000;
|
||
opacity: .6;
|
||
}
|
||
|
||
.shibai {
|
||
margin-top: 50rpx;
|
||
text-align: center;
|
||
padding-bottom: 600rpx;
|
||
height: 100vh;
|
||
overflow: scroll;
|
||
|
||
.jxcz {
|
||
width: 563rpx;
|
||
height: 100rpx;
|
||
background: #8883F0;
|
||
border-radius: 60rpx 60rpx 60rpx 60rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-size: 45rpx;
|
||
color: #FFFFFF;
|
||
position: fixed;
|
||
bottom: 62rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.top {
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.tishi {
|
||
font-size: 31rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.li {
|
||
margin-top: 50rpx;
|
||
font-size: 31rpx;
|
||
color: #3D3D3D;
|
||
|
||
image {
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .u-title {
|
||
padding-bottom: 22rpx;
|
||
}
|
||
|
||
/deep/ .u-checkbox__label {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
// /deep/ .u-icon__icon{
|
||
// padding-bottom: 41rpx;
|
||
// }
|
||
page {
|
||
background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
|
||
}
|
||
|
||
.active {
|
||
background-color: #8883F0 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
// position: fixed;
|
||
// top: 0;
|
||
// left: 0;
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
|
||
.tip_box {
|
||
position: fixed;
|
||
left: 72rpx;
|
||
top: 700rpx;
|
||
width: 610rpx;
|
||
// height: 282rpx;
|
||
background: #F7FAFE;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
z-index: 10000000;
|
||
|
||
.top {
|
||
padding: 52rpx 38rpx 42rpx 36rpx;
|
||
|
||
.txt {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.bot {
|
||
border-top: 2rpx solid #D8D8D8;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
height: 100%;
|
||
|
||
.bot_left {
|
||
width: 50%;
|
||
height: 98rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.bot_right {
|
||
width: 50%;
|
||
height: 98rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
border-left: 2rpx solid #D8D8D8;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #8883F0;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin-top: 40rpx;
|
||
padding-left: 32rpx;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #fff;
|
||
margin-bottom: 30rpx;
|
||
margin-top: 110rpx;
|
||
height: 200rpx;
|
||
|
||
.wz {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
width: 750rpx;
|
||
height: 1440rpx;
|
||
background: #F4F5F7;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
padding: 36rpx 54rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
|
||
.tongyi {
|
||
width: 590rpx;
|
||
position: fixed;
|
||
bottom: 50rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
text {
|
||
color: #638DFF;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.zf {
|
||
width: 590rpx;
|
||
height: 84rpx;
|
||
background: #8883F0;
|
||
filter: blur(0px);
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 84rpx;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.shuom {
|
||
width: 648rpx;
|
||
max-height: 100%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
filter: blur(0px);
|
||
border-radius: 30rpx;
|
||
margin: auto;
|
||
margin-top: 36rpx;
|
||
padding: 20rpx 36rpx;
|
||
box-sizing: border-box;
|
||
|
||
.tits {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.wz {
|
||
font-size: 28rpx;
|
||
color: #ccc;
|
||
margin-top: 30rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.list_val {
|
||
.tc {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #525252;
|
||
}
|
||
|
||
.date {
|
||
font-size: 26rpx;
|
||
color: #525252;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.rt {
|
||
font-size: 40rpx;
|
||
color: #525252;
|
||
padding-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.tit {
|
||
font-size: 40rpx;
|
||
color: #383838;
|
||
font-weight: 600;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |