<template> <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}"> <cus-header title='配置网络'></cus-header> <div class="title">设置Wi-Fi信息</div> <div class="items"> <div class="item adfacjb"> <div class="il"> <input type="text" v-model="wifiSSID" placeholder="网络名称" placeholder-class="ph"> </div> <div class="ir" @tap="toSelectWifi">选择Wi-Fi</div> </div> <div class="item adfacjb"> <div class="il"> <input :password="isPwd" v-model="wifiPWD" placeholder="请输入Wi-Fi密码" placeholder-class="ph"> </div> <div class="iimgs"> <image @tap="changePwd" src="@/static/pwd_hide.png" v-if="isPwd"></image> <image @tap="changePwd" src="@/static/pwd_show.png" v-else></image> </div> </div> </div> <div class="zt_btn" @tap="connectWifi">连接</div> <div class="memo"> <div class="m_title">配网说明</div> <div class="m_p"> 1、请注意设备仅支持2.4G的WiFi<br> 2、不支持无密码的WiFi连接<br> 3、不支持二次授权或者需要网页二次登录的WiFi<br> 4、如果使用手机热点连接,请确保手机热点正常开启<br> 5、如果使用iPhone热点,请确保热点开启了最大兼容模式<br> 6、iPhone热点因为低功耗,一段时间不使用,热点将会自动关闭,如果无法连接,请重新打开热点 </div> </div> <u-popup :show="show" :round="56" mode="center" @close="show=false"> <div class="wifis"> <div class="top adfacjb"> <div class="tl">选择WiFi</div> <div class="tr adfac" @tap="initWiFi"> <!-- <image src="@/static/refreash.png"></image> <text>刷新</text> --> </div> </div> <div class="list" v-if="wifiList.length"> <div class="item adfacjb" v-for="(item,index) in wifiList" :key="index"> <div class="il adfac"> <image src="@/static/wifi.png"></image> <text>{{item}}</text> </div> <div class="ir" @tap="selectWifi(item)">选择</div> </div> </div> <template v-else> <page-empty></page-empty> </template> </div> </u-popup> </view> </template> <script> var xBlufi = require("@/utils/blufi/xBlufi.js"); import pageEmpty from '@/components/pageEmpty/index.vue' export default { components:{pageEmpty}, data(){ return { name: '', connectedDeviceId: '', connected: true, isInitOK: false, wifiSSID:'', wifiPWD:'', isPwd:true, show:false, wifiList:[] } }, onLoad: function(options) { var that = this this.name = options.name; this.connectedDeviceId = options.deviceId; xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent); xBlufi.notifyInitBleEsp32({ deviceId: options.deviceId, }) wx.showLoading({ title: '设备初始化中', }) }, // onUnload: function() { // let that = this // xBlufi.notifyConnectBle({ // isStart: false, // deviceId: that.connectedDeviceId, // name: that.name, // }); // xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent); // }, methods:{ funListenDeviceMsgEvent: function(options) { let that = this let ssid_arry = this.wifiList; switch (options.type) { // case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: // that.connected = options.result // if (!options.result) { // wx.showModal({ // title: '很抱歉提醒你!', // content: '小程序与设备异常断开', // showCancel: false, //是否显示取消按钮 // }) // } // break; case xBlufi.XBLUFI_TYPE.TYPE_CONNECT_ROUTER_RESULT: wx.hideLoading(); if (!options.result) wx.showModal({ title: '温馨提示', content: '配网失败,请重试', showCancel: false, }) else { if (options.data.progress == 100) { uni.setStorageSync(that.wifiSSID,that.wifiPWD) uni.navigateTo({ url:'/pagesMy/wifiSuccess' }) } } break; // case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA: // wx.showModal({ // title: '收到自定义设备数据', // content: `【${options.data}】`, // showCancel: false, // }) // break; case xBlufi.XBLUFI_TYPE.TYPE_CONNECT_NEAR_ROUTER_LISTS: wx.hideLoading(); if ('' === options.data.SSID) break; if(!ssid_arry.includes(options.data.SSID)) ssid_arry.push(options.data.SSID) that.wifiList = ssid_arry; that.wifiSSID = that.wifiList[0]; that.wifiPWD = uni.getStorageSync(that.wifiSSID)||''; that.isInitOK = true break; case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT: wx.hideLoading(); if (options.result) { xBlufi.notifySendGetNearRouterSsid() wx.showLoading({ title: '获取周围WiFi列表...', }) } else { that.connected = false wx.showModal({ title: '温馨提示', content: `设备初始化失败`, showCancel: false, //是否显示取消按钮 }) } break; } }, changePwd(){ this.isPwd = !this.isPwd; }, initWiFi(){ // let that = this; // xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent); // xBlufi.notifyInitBleEsp32({ // deviceId: that.connectedDeviceId // }) }, connectWifi(){ let that = this; if(!this.wifiSSID) return this.$showToast('请选择Wi-Fi') if(!this.wifiPWD) return this.$showToast('请输入Wi-Fi密码') wx.showLoading({ title: '正在配网...', mask: true }) xBlufi.notifySendRouterSsidAndPassword({ ssid: that.wifiSSID, password: that.wifiPWD }) }, toSelectWifi(){ this.show = true; }, selectWifi(item){ this.wifiSSID = item; this.wifiPWD = uni.getStorageSync(item) || ''; this.show = false; this.isInitOK = true } } } </script> <style scoped lang="less"> .page{ padding: 0 40rpx 250rpx; box-sizing: border-box; background: #FFFFFF; &>.title{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 36rpx; color: #111111; line-height: 36rpx; margin-top: 64rpx; } .items{ margin-top: 188rpx; .item{ margin-top: 80rpx; padding-bottom: 30rpx; border-bottom: 1rpx solid #E2E2E2; .il{ width: calc(100% - 180rpx); input{ border: none; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #333333; line-height: 42rpx; } } .ir{ width: 160rpx; height: 64rpx; background: #D9F159; border-radius: 32rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 26rpx; color: #252525; line-height: 64rpx; text-align: center; } .iimgs{ image{ width: 36rpx; height: 36rpx; } } } } .zt_btn{ margin-top: 100rpx; } .memo{ margin-top: 100rpx; .m_title{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 40rpx; } .m_p{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #7C8592; line-height: 54rpx; margin-top: 10rpx; } } .ph{ color: #7C8592; } .wifis{ width: 670rpx; max-height: 720rpx; overflow: hidden; padding-bottom: 20rpx; .top{ margin-top: 14rpx; padding: 40rpx; border-bottom: 1rpx solid #E2E2E2; .tl{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 36rpx; color: #111111; line-height: 36rpx; } .tr{ image{ width: 36rpx; height: 36rpx; } text{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 32rpx; color: #7C8592; line-height: 36rpx; margin-left: 10rpx; } } } .list{ height: 609rpx; overflow-y: auto; padding: 30rpx 40rpx; box-sizing: border-box; .item{ width: 100%; height: 120rpx; border-radius: 16rpx; border: 1rpx solid #E2E2E2; margin-top: 20rpx; padding: 0 24rpx; box-sizing: border-box; &:first-child{ margin-top: 0; } .il{ width: calc(100% - 134rpx); image{ width: 42rpx; height: 42rpx; } text{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 30rpx; color: #252525; line-height: 30rpx; margin-left: 20rpx; width: calc(100% - 62rpx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .ir{ width: 114rpx; height: 60rpx; background: #D9F159; border-radius: 32rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #252525; line-height: 60rpx; text-align: center; } } } } } </style>