1088 lines
27 KiB
Vue
1088 lines
27 KiB
Vue
<template>
|
||
<view class="pages">
|
||
<view class="title">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ux6MC6FBl41qHB3f2SZh" mode=""
|
||
style="width: 54rpx;height: 56rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;"
|
||
@click="btnshouye"></image>
|
||
<text style="width: 80%;text-align: center;display: inline-block;">{{obj.deviceName}}</text>
|
||
<view class="wz" @click="call" style="text-align: right;padding-right: 50rpx;"
|
||
v-if="obj.storeContactMobile == null">
|
||
<image style="width: 48rpx;height: 50rpx;vertical-align: middle;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode="aspectFit"></image>
|
||
<!-- <text>客服</text> -->
|
||
</view>
|
||
<view class="wz" @click="call" style="text-align: right;padding-right: 50rpx;" v-else>
|
||
<image style="width: 60rpx;height: 64rpx;vertical-align: middle;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode=""></image>
|
||
<!-- <text>客服</text> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<!-- 套餐 @scrolltolower="onScrollToLower"-->
|
||
<scroll-view class="list" scroll-y="true" @scroll="handleScroll" :scroll-top="scrollTop" scroll-with-animation="true">
|
||
<view class="list_item" :class="activeindex == item.suitId ? 'active' : ''" v-for="(item,index) in list"
|
||
:key="index" @click="btnactive(item)">
|
||
<view class="tit">
|
||
<text class="tc" :class="activeindex == item.suitId ? 'active' : ''">{{item.name}}</text> <text
|
||
class="yh"
|
||
:class="activeindex == item.suitId ? 'actives' : ''">{{item.usePoint}}%用户选择</text>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="price" :class="activeindex == item.suitId ? 'active' : ''">
|
||
￥{{item.price}}
|
||
</view>
|
||
<view class="time" :class="activeindex == item.suitId ? 'active' : ''">
|
||
可使用{{item.value}} {{item.timeUnit == 3 ? '分钟' : '小时'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image v-if="picimg" class="picdh" @click="btnscrll"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uDdjuHcC2h79pEBoQdTh" mode=""></image>
|
||
</scroll-view>
|
||
<!-- 说明 -->
|
||
<view class="shuom">
|
||
<view class="shuomtit">
|
||
功能介绍
|
||
</view>
|
||
<view class="cont" style="height: 208rpx;" v-html="obj.funcInfo">
|
||
<!-- {{obj.funcInfo == undefined ? '暂无介绍...'}} -->
|
||
</view>
|
||
</view>
|
||
<view class="shuom" style="max-height: 220rpx;margin-top: 30rpx;">
|
||
<view class="shuomtit">
|
||
设备地址
|
||
</view>
|
||
<view class="shuomwz">
|
||
<image style="width: 30rpx;height: 30rpx;margin-right: 6rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/umUFE9oFeYo2Q7atp3jv" mode=""></image>
|
||
{{obj.storeName == undefined ? '' : obj.storeName}} {{obj.room == undefined ? '--' : obj.room}}室
|
||
</view>
|
||
<view class="shuomwz">
|
||
<image style="width: 30rpx;height: 30rpx;margin-right: 6rpx;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uHHgD7nRON3WTmomzKVE" mode=""></image>
|
||
{{obj.storeAddress ? (obj.storeAddress.length > 18 ? obj.storeAddress.substring(0, 18) + '...' : obj.storeAddress) : '' }}
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 支付 -->
|
||
<view class="tongyi">
|
||
<u-checkbox-group>
|
||
<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
|
||
</u-checkbox><text @click="btnxieyi">《用户服务协议》</text>
|
||
</u-checkbox-group>
|
||
<view class="zf" v-if="zhifuflag" @click="btnzhifu">
|
||
立即支付
|
||
</view>
|
||
<view class="zf" v-else>
|
||
立即支付
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="mask" v-if="zfflag"></view> -->
|
||
|
||
<!-- 背景 -->
|
||
<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
|
||
<image style="width: 100%;height: 100vh;"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uOiCQSDjukktdvbx5oPw" mode=""></image>
|
||
</view>
|
||
|
||
<!-- 客服列表 -->
|
||
<view class="kflist" v-if="kfflag">
|
||
<view class="kftit">
|
||
请选择您要联系的客服
|
||
</view>
|
||
<view class="kfwz">
|
||
我们根据选择为您提供服务
|
||
</view>
|
||
<view class="kfshuzu">
|
||
<view class="item_val" v-for="(item,index) in kefulist" :key="index" @click="btncall(item.mobile)">
|
||
<view class="lt">
|
||
<image v-if="item.type == 2"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/urCSQTavLmUje5oTIsE6" mode=""></image>
|
||
<image v-if="item.type == 3"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uE5rZZvVutxxUj9I06m5" mode=""></image>
|
||
<image v-if="item.type == 4"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uruHLe3W460sdXr2lcxF" mode=""></image>
|
||
</view>
|
||
<view class="rt">
|
||
<view class="" v-if="item.type == 2">{{item.name}}</view>
|
||
<view class="" v-if="item.type == 3">运维人员：{{item.name}}</view>
|
||
<view class="" v-if="item.type == 4">酒店客服：{{item.name}}</view>
|
||
<view class="" style="margin-top: 10rpx;">{{item.mobile}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="qx" @click="btnkfflag" v-if="kfflag">
|
||
×
|
||
</view>
|
||
<view class="mask" v-if="kfflag"></view>
|
||
|
||
<!-- 蓝牙充值动画 -->
|
||
<view class="czdh" v-if="jzflag">
|
||
<view class="bj">
|
||
<view class="tittop">
|
||
正在充值中,请稍后
|
||
</view>
|
||
<view class="bfb">
|
||
{{progress}} %
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/components/blufi/xBlufi.js");
|
||
export default {
|
||
data() {
|
||
return {
|
||
picimg: false,
|
||
jine: '',
|
||
zfflag: false,
|
||
jzflag: false,
|
||
progress: 0,
|
||
mac: '',
|
||
deviceId: '',
|
||
name: '',
|
||
czflag: false,
|
||
lanyaflag: false,
|
||
ver_data: '',
|
||
devicesList: [],
|
||
bgc: {
|
||
// backgroundColor: "#8883f0",
|
||
},
|
||
checked: false,
|
||
zhifuflag: true,
|
||
activeindex: -1,
|
||
id: '',
|
||
list: [],
|
||
obj: {},
|
||
orderno: '',
|
||
payNo: '',
|
||
prices: '',
|
||
sytime: '',
|
||
zfobj: {},
|
||
suitTimeUnit: '',
|
||
suitPrice: '',
|
||
suitGearAmount: '',
|
||
suitGearTime: '',
|
||
suitFeeMode: '',
|
||
suitFeeType: '',
|
||
title: '',
|
||
sbobj: {},
|
||
onlineStatus: '',
|
||
kfflag: false,
|
||
timer: null,
|
||
titflag: false,
|
||
kefulist: [],
|
||
scrollTop:0,
|
||
billId:''
|
||
}
|
||
},
|
||
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
|
||
}
|
||
this.sceneValue = option.q
|
||
let decodedValue = decodeURIComponent(this.sceneValue)
|
||
this.id = getQueryParam(decodedValue, 's')
|
||
this.$u.get(`/app/user/userInfo`).then(res => {
|
||
if (res.code == 200) {
|
||
this.getlist()
|
||
} else if (res.code == 401) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login?id=' + this.id
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.id = option.id
|
||
this.$u.get(`/app/user/userInfo`).then(res => {
|
||
if (res.code == 200) {
|
||
this.getlist()
|
||
} else if (res.code == 401) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login?id=' + this.id
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onUnload: function() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
this.timer = null;
|
||
}
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '创亿康',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '创亿康',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
methods: {
|
||
// 点击协议跳转
|
||
btnxieyi() {
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/shiyong?tit=' + '用户服务协议' + '&type=' + 'user'
|
||
})
|
||
},
|
||
// 获取设备客服
|
||
getkefu() {
|
||
this.$u.get(`/app/device/${this.obj.deviceId}/service`).then(res => {
|
||
if (res.code == 200) {
|
||
this.kefulist = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取设备套餐列表
|
||
getlist() {
|
||
this.$u.get(`app/device/${this.id}/withSuitList`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.data.suitList
|
||
if (this.list.length <= 3) {
|
||
this.picimg = false
|
||
} else {
|
||
this.picimg = true
|
||
}
|
||
this.obj = res.data
|
||
this.onlineStatus = res.data.onlineStatus
|
||
this.mac = 'CCYK:' + res.data.mac
|
||
this.getkefu()
|
||
} else if (res.code == 401) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 滚动到底部
|
||
handleScroll(e) {
|
||
if (e.detail.deltaY <= 0) {
|
||
this.picimg = false
|
||
} else {
|
||
setTimeout(()=>{
|
||
this.scrollTop = 0
|
||
if(this.list.length <= 3){
|
||
this.picimg = false
|
||
}else{
|
||
this.picimg = true
|
||
}
|
||
},100)
|
||
}
|
||
},
|
||
btnscrll() {
|
||
this.scrollTop = 99999
|
||
},
|
||
// 点击支付
|
||
btnzhifu() {
|
||
if (this.onlineStatus == 0) {
|
||
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: `检测到该设备未联网,为您切换为蓝牙模式,支付的时候靠近该设备,并打开蓝牙`,
|
||
showCancel: false,
|
||
})
|
||
setTimeout(() => {
|
||
if (that.ver_data == '') {
|
||
uni.showToast({
|
||
title: '未连接成功，如多次失败请点击右上角联系客服咨询',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
that.czflag = false
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 5000)
|
||
}
|
||
}, 18000)
|
||
} else {
|
||
this.zhifuflag = false
|
||
let that = this
|
||
let data = {
|
||
deviceNo: that.id,
|
||
suitId: that.zfobj.suitId,
|
||
money: that.zfobj.price,
|
||
suitTime: that.zfobj.value,
|
||
suitTimeUnit: that.suitTimeUnit,
|
||
suitFeeMode: that.suitFeeMode,
|
||
suitFeeType: that.suitFeeType,
|
||
suitGearAmount: that.suitGearAmount,
|
||
suitGearTime: that.suitGearTime,
|
||
suitPrice: that.suitPrice
|
||
}
|
||
that.$u.post('/app/bill/recharge', data).then(res => {
|
||
if (res.code == 200) {
|
||
that.orderno = res.data.billNo
|
||
that.billId = res.data.billId
|
||
that.$u.get(`/app/pay/wx/${that.orderno}`).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.payParams.timeStamp,
|
||
nonceStr: res.data.payParams.nonceStr,
|
||
package: res.data.payParams.packageVal,
|
||
signType: res.data.payParams.signType,
|
||
paySign: res.data.payParams.paySign,
|
||
success: (res) => {
|
||
if (that.timer) {
|
||
clearInterval(this.timer);
|
||
that.timer = null;
|
||
}
|
||
that.$u.put(`/app/bill/${that.orderno}/refreshPayResult`).then(res => {
|
||
// if(res.code == 200){
|
||
that.$u.get('/app/bill/recharge/device/fail/list').then(res => {
|
||
if (res.code == 200) {
|
||
if (res.data.length != 0) {
|
||
let dingobj = res.data[0].billNo
|
||
uni.getNetworkType({
|
||
success(res) {
|
||
if (res.networkType !== 'none') {
|
||
uni.getConnectedBluetoothDevices({
|
||
success(res) {
|
||
that.jzflag =true
|
||
that.startLoading()
|
||
setTimeout(() => {
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11time@" + that.jine
|
||
})
|
||
},1500)
|
||
},
|
||
fail(err) {
|
||
console.error('获取已连接蓝牙设备信息失败：',err)
|
||
}
|
||
})
|
||
that.$u.get(`/app/bill/recharge/${dingobj}/bluetoothSuccess`).then(res => {
|
||
if (res.code == 200) {
|
||
that.zhifuflag = true
|
||
console.log('蓝牙离线充值成功11')
|
||
setTimeout
|
||
(() => {
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/dingdan?billId=' + that.billId
|
||
})
|
||
},
|
||
1000
|
||
)
|
||
}
|
||
}
|
||
)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.getNetworkType({
|
||
success(res) {
|
||
if (res.networkType !== 'none') {
|
||
uni.getConnectedBluetoothDevices({
|
||
success(res) {
|
||
that.jzflag = true
|
||
that.startLoading()
|
||
setTimeout(() => {
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11time@" + that.jine
|
||
})
|
||
},1500)
|
||
},
|
||
fail(err) {
|
||
console.error('获取已连接蓝牙设备信息失败：',err)
|
||
}
|
||
})
|
||
that.zhifuflag = true
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/dingdan?billId=' + that.billId
|
||
})
|
||
},1000)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
// }
|
||
})
|
||
// 支付成功逻辑
|
||
uni.setStorageSync('time', that.expireTimeStr)
|
||
},
|
||
fail(err) {
|
||
this.zhifuflag = true
|
||
setTimeout(() => {
|
||
this.czflag = false
|
||
uni.hideLoading()
|
||
}, 500)
|
||
// 支付失败逻辑
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
this.zhifuflag = true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
if (this.checked == false) {
|
||
uni.showToast({
|
||
title: '请勾选用户服务协议 !',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
} else if (this.activeindex == -1) {
|
||
uni.showToast({
|
||
title: '请选择套餐 !',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
} else {
|
||
// 不允许一直点击支付
|
||
this.zhifuflag = false
|
||
let that = this
|
||
let data = {
|
||
deviceNo: that.id,
|
||
suitId: that.zfobj.suitId,
|
||
money: that.zfobj.price,
|
||
suitTime: that.zfobj.value,
|
||
suitTimeUnit: that.suitTimeUnit,
|
||
suitFeeMode: that.suitFeeMode,
|
||
suitFeeType: that.suitFeeType,
|
||
suitGearAmount: that.suitGearAmount,
|
||
suitGearTime: that.suitGearTime,
|
||
suitPrice: that.suitPrice
|
||
}
|
||
that.$u.post('/app/bill/recharge', data).then(res => {
|
||
if (res.code == 200) {
|
||
that.orderno = res.data.billNo
|
||
that.billId = res.data.billId
|
||
let data = {
|
||
billNo: that.orderno,
|
||
channelId: 1
|
||
}
|
||
that.$u.get(`app/pay/wx/${that.orderno}`).then(res => {
|
||
if (res.code == 200) {
|
||
that.payNo = res.data.payBill.payNo
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.payParams.timeStamp,
|
||
nonceStr: res.data.payParams.nonceStr,
|
||
package: res.data.payParams.packageVal,
|
||
signType: res.data.payParams.signType,
|
||
paySign: res.data.payParams.paySign,
|
||
success: (res) => {
|
||
that.zhifuflag = true
|
||
that.$u.put(`/app/bill/${that.payNo}/refreshPayResult`).then(res => {
|
||
// 支付成功逻辑
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/dingdan?billId=' + that.billId
|
||
})
|
||
})
|
||
},
|
||
fail(err) {
|
||
that.zhifuflag = true
|
||
// 支付失败逻辑
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
setTimeout(() => {
|
||
this.zhifuflag = true
|
||
}, 2000)
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
setTimeout(() => {
|
||
this.zhifuflag = true
|
||
}, 2000)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
// 蓝牙充值动画
|
||
startLoading() {
|
||
this.isLoading = true;
|
||
const intervalId = setInterval(() => {
|
||
this.progress += 100 / 100; // 每次增加 1
|
||
if (this.progress >= 99) {
|
||
clearInterval(intervalId);
|
||
this.isLoading = false;
|
||
this.progress = 98; // 确保进度条最终达到98
|
||
}
|
||
}, 15);
|
||
},
|
||
// 获取附近蓝牙设备列表
|
||
funListenDeviceMsgEvent: function(options) {
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
|
||
if (options.result) {
|
||
let devicesarr = options.data
|
||
console.log(devicesarr, this.mac, '111');
|
||
devicesarr.forEach(device => {
|
||
const mac = device.name.substring(4);
|
||
if (device.name.slice(5, 17) == this.mac.slice(5, 17)) {
|
||
this.deviceId = device.deviceId
|
||
this.name = device.name
|
||
this.devicesList.push(device);
|
||
let uniqueDevicesList = Array.from(new Set(this.devicesList));
|
||
// 将去重后的数组重新赋值给 this.devicesList
|
||
this.devicesList = uniqueDevicesList;
|
||
}
|
||
})
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
|
||
console.log("连接回调：" + JSON.stringify(options));
|
||
uni.showToast({
|
||
title: '连接成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
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) ===
|
||
"CCYK");
|
||
// 将过滤后的数组重新赋值给 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
|
||
};
|
||
},
|
||
|
||
btnactive(item) {
|
||
this.activeindex = item.suitId
|
||
this.prices = item.price
|
||
this.sytime = item.value
|
||
this.zfobj = item
|
||
this.suitTimeUnit = item.timeUnit
|
||
this.suitPrice = item.price
|
||
this.suitGearAmount = item.gearAmount
|
||
this.suitGearTime = item.gearTime
|
||
this.suitFeeMode = item.feeMode
|
||
this.suitFeeType = item.feeType
|
||
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
|
||
}
|
||
},
|
||
|
||
btnshouye() {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
checkboxChange(e) {
|
||
this.checked = e.value
|
||
},
|
||
// 联系客服
|
||
call() {
|
||
this.kfflag = true
|
||
this.picimg = false
|
||
},
|
||
btnkfflag(){
|
||
this.kfflag = false
|
||
this.picimg = true
|
||
},
|
||
// 拨打客服电话
|
||
btncall(mobile) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: mobile,
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
uni.showToast({
|
||
title: '拨打电话失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.active {
|
||
background-color: #918CFF !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.actives {
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
/deep/ .u-title {
|
||
padding-bottom: 15rpx;
|
||
}
|
||
|
||
.czdh {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, .5);
|
||
padding-top: 700rpx;
|
||
|
||
.bj {
|
||
width: 500rpx;
|
||
height: 300rpx;
|
||
background-color: #fff;
|
||
margin: auto;
|
||
border-radius: 20rpx;
|
||
|
||
.tittop {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding-top: 50rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bfb {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding-top: 50rpx;
|
||
box-sizing: border-box;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qx {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 68rpx;
|
||
font-size: 50rpx;
|
||
color: #3D3D3D;
|
||
margin: auto;
|
||
bottom: 420rpx;
|
||
z-index: 1;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.kflist {
|
||
width: 590rpx;
|
||
height: 778rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||
position: fixed;
|
||
top: 326rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 1;
|
||
padding-top: 48rpx;
|
||
box-sizing: border-box;
|
||
|
||
.kftit {
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.kfwz {
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 16rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.kfshuzu {
|
||
height: 580rpx;
|
||
overflow: scroll;
|
||
|
||
.item_val {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
width: 528rpx;
|
||
height: 144rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin: auto;
|
||
margin-top: 42rpx;
|
||
|
||
.lt {
|
||
margin-right: 34rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 78rpx;
|
||
}
|
||
}
|
||
|
||
.rt {
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.picdh {
|
||
width: 40rpx;
|
||
height: 35rpx;
|
||
position: fixed;
|
||
top: 53%;
|
||
right: 76rpx;
|
||
z-index: 99;
|
||
opacity: .5;
|
||
animation: moveUpDown 1.5s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes moveUpDown {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-10rpx);
|
||
/* 控制上下跳动的幅度 */
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
opacity: .5;
|
||
}
|
||
|
||
page {
|
||
background-color: #F7FAFE;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pages {
|
||
width: 750rpx;
|
||
box-sizing: border-box;
|
||
|
||
.shuom {
|
||
width: 650rpx;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
filter: blur(0px);
|
||
margin: auto;
|
||
margin-top: 60rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.cont {
|
||
margin-top: 10rpx;
|
||
max-height: 120rpx;
|
||
overflow: scroll;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.shuomtit {
|
||
font-weight: 700;
|
||
font-size: 34rpx;
|
||
color: #383838;
|
||
}
|
||
|
||
.shuomwz {
|
||
font-size: 28rpx;
|
||
color: #383838;
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
width: 648rpx;
|
||
margin: auto;
|
||
height: 42vh;
|
||
overflow: scroll;
|
||
|
||
.list_item {
|
||
width: 648rpx;
|
||
height: 192rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
filter: blur(0px);
|
||
border-radius: 20rpx;
|
||
margin-top: 30rpx;
|
||
padding-left: 36rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
.tit {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.tc {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
color: #3D3D3D;
|
||
padding-top: 26rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.yh {
|
||
width: 213rpx;
|
||
height: 67rpx;
|
||
background: #DCDBFF;
|
||
border-radius: 0 0 0 20rpx;
|
||
font-size: 28rpx;
|
||
color: #918CFF;
|
||
text-align: center;
|
||
line-height: 67rpx;
|
||
}
|
||
}
|
||
|
||
.bot {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
|
||
.price {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
margin-right: 46rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 20rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin-top: 40rpx;
|
||
padding-left: 32rpx;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 100rpx;
|
||
height: 126rpx;
|
||
|
||
.wz {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |