<template>
<view class="">
<u-navbar title="WIFI连接" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
height='50'></u-navbar>
<view class="container">
<view class="device">
<span class="device-list-title">WIFI连接</span>
</view>
<view class="flex-row items-center flex-1 group">
<text class="text_3 ml-3">请选择您的WiFi网络详细信息</text>
</view>
<!-- wifi信息 -->
<view class="wifibd">
<view class="name">
<text>您的WiFi网络名称</text>
<input type="text" v-model="name" placeholder="请输入您的WiFi网络名称" />
</view>
<view class="pwd">
<text>密码</text>
<input type="text" v-model="password" placeholder="请输入您的WiFi密码" />
</view>
</view>
<!-- 点击连接 -->
<view class="button" @click="content_wf">连接</view>
<!-- 加载状态 -->
<view class="containers" v-show="statusflag">
<uni-section>
<uni-load-more :status="status"/>
</uni-section>
</view>
</view>
</view>
</template>
<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js")
// import { getwifi } from '@/api/index.js'
export default {
data() {
return {
name: '',
password: '',
options: '',
falg: 0,
objlist: '',
statusflag: false,
status: 'loading',
bgc: {
backgroundColor: "#8883f0",
},
}
},
onLoad(options) {
this.name = JSON.parse(options.ssid)
this.options = options
this.objlist = JSON.parse(options.objlist)
// console.log("获取到id",JSON.parse(this.options.objlist.deviceId))
console.log("this.objlist.deviceId", this.objlist.deviceId)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyInitBleEsp32({
deviceId: this.objlist.deviceId
})
},
onReady() {},
onUnload() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
// wx.closeBLEConnection({
// deviceId: this.objlist.deviceId,
// })
},
methods: {
content_wf() {
if (!this.name) {
uni.showToast({
title: 'SSID不能为空',
icon: 'none'
});
return;
}
if (!this.password) {
uni.showToast({
title: '密码不能为空',
icon: 'none'
});
return;
}
uni.showLoading({
title: '正在配网',
mask: true
})
xBlufi.notifySendCustomData({
customData: "ssid@" + this.name
})
xBlufi.notifySendCustomData({
customData: "pass@" + this.password
})
},
funListenDeviceMsgEvent: function(options) {
let that = this;
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
console.log('状态', options.result)
uni.showModal({
title: '很抱歉提醒你！',
content: '小程序与设备异常断开',
showCancel: false,
success: function(res) {
// uni.navigateBack({
// url: '../search/search'
// });
}
});
this.statusflag = false
uni.hideLoading();
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECT_ROUTER_RESULT:
uni.hideLoading();
if (!options.result)
this.statusflag = false,
uni.hideLoading(),
uni.showModal({
title: '温馨提示',
content: '配网失败，请重试',
showCancel: false //是否显示取消按钮
});
else {
if (options.data.progress == 100) {
let ssid = options.data.ssid;
this.statusflag = false
uni.hideLoading();
uni.showModal({
title: '温馨提示',
content: `连接成功`,
showCancel: false,
success: function(res) {
uni.switchTab({
url: '/pages/index/index'
})
// let ids = that.$store.state.user.deviceId
wx.closeBLEConnection({
deviceId: this.objlist.deviceId,
})
// getwifi(ids).then(res => {
// console.log(res);
// uni.switchTab({
// url:'/pages/index/index'
// })
// })
}
})
}
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
this.loadPercent = options.data;
this.loadText = '文件读取中'
console.log("文件读取中", options.data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
this.ver_data = this.parseCustomData(options.data)
console.log("1收到设备发来的自定义数据结果：", this.ver_data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
uni.hideLoading();
if (options.result) {
console.log('初始化成功');
} else {
console.log('初始化失败');
uni.showModal({
title: '温馨提示',
content: `设备初始化失败`,
showCancel: false,
//是否显示取消按钮
success: function(res) {
// uni.redirectTo({
// url: '../search/search'
// });
}
});
}
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(3); // 去除前缀 "SET"
// 返回解析后的数据对象
return {
voltage,
switchState,
current,
power,
remainingPower,
setMode
};
}
}
}
</script>
<style lang="less">
.containers {
width: 100%;
height: 100vh;
position: fixed;
top: 220rpx;
left: 0;
z-index: 999 !important;
}
.pwd,
.name {
text {
color: #3D3D3D;
font-size: 32rpx;
margin-top: 30rpx;
display: block;
line-height: 30rpx;
}
input {
margin-top: 10rpx;
color: rgba(80, 86, 90, 1);
font-size: 14px;
border-bottom: 1px solid #ccc;
height: 60rpx;
line-height: 60rpx;
}
input::placeholder {
font-size: 14px;
}
}
.wifibd {
margin-top: 182rpx;
}
.device-list-title {
color: #50565a;
font-size: 96rpx;
font-family: SourceHanSansCN;
// margin-top: 100rpx;
}
.text_3 {
margin-top: 10rpx;
color: rgba(119, 128, 141, 1);
font-size: 28rpx;
}
.container {
/* padding-top: 30rpx !important; */
padding: 40rpx 30rpx 0 30rpx !important;
box-sizing: border-box;
align-items: center;
}
.button {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
bottom: 50rpx;
height: 96rpx;
//margin-top: -100rpx;
padding: 10rpx 0;
box-sizing: border-box;
background-color: #8883F0 !important;
border-radius: 52rpx 52rpx 52rpx 52rpx;
font-weight: 700;
font-size: 20px;
width: 622rpx;
color: #FFFFFF;
}
</style>