298 lines
7.0 KiB
Vue
298 lines
7.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" style="margin-top: 100rpx;">
|
|||
|
|
<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>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var xBlufi = require("@/utils/blufi/xBlufi.js")
|
|||
|
|
// import { getwifi } from '@/api/index.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
name: '',
|
|||
|
|
password: '',
|
|||
|
|
options: '',
|
|||
|
|
falg: 0,
|
|||
|
|
objlist: '',
|
|||
|
|
statusflag: false,
|
|||
|
|
status: 'loading',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// console.log("获取到id",JSON.parse(this.options.objlist.deviceId))
|
|||
|
|
// console.log(this.objlist,"option",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: `连接成功路由器【${options.data.ssid}】`,
|
|||
|
|
content: `连接成功路由器`,
|
|||
|
|
showCancel: false,
|
|||
|
|
success: function (res) {
|
|||
|
|
let ids = that.$store.state.user.deviceId
|
|||
|
|
getwifi(ids).then(res => {
|
|||
|
|
console.log(res);
|
|||
|
|
uni.switchTab({
|
|||
|
|
url:'/pages/index'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 连接成功进行跳转
|
|||
|
|
// setTimeout(()=>{
|
|||
|
|
|
|||
|
|
// },1000)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
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: rgba(189, 188, 188, 1);
|
|||
|
|
font-size: 12px;
|
|||
|
|
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: #999;
|
|||
|
|
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>
|