<template> <view> <!-- 样式 --> <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> <view class="sdBtn" @click="btnsd"> 手动输入wifi </view> <!-- wifi列表 --> <view class="wifilist"> <!-- <view class="bd" v-for="(item,index) in 10" :key="index" @click="btnqhwifi(index,item)" > --> <view class="bd" v-for="(item,index) in list" :key="index" @click="btnqhwifi(index,item)" v-if="signalStrengthflag"> <view class="bdbox"> <view class="box"> <ul> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 1 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 30"> <image src="https://api.ccttiot.com/smartmeter/img/static/uTBgGAjg5gwOWZIMiJ7t" mode=""></image> </li> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 29 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 51"> <image src="https://api.ccttiot.com/smartmeter/img/static/uOFXqCb5bV3UphtNzHlK" mode=""></image> </li> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 50 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 70"> <image src="https://api.ccttiot.com/smartmeter/img/static/u7aly53QTyguSgi4XOM0" mode=""></image> </li> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 69"> <image src="https://api.ccttiot.com/smartmeter/img/static/uX8LRnCF7Uaxm4Kyv38D" mode=""></image> </li> </ul> </view> <view class="content"> <view class="bt">{{item.SSID}}</view> <view class="wz" style="color: #8883F0 ;">{{item.BSSID}}</view> </view> </view> <image src="https://api.ccttiot.com/smartmeter/img/static/uZbSY9nf5XYfPXkzb5W9" mode="" class="pictwo" v-if="indexs == index"> </image> </view> </view> <view class="btnbox"> <view class="btns" @click="search"> 重新扫描 </view> <view class="btns" @click="btnxyb"> 下一步 </view> </view> <!-- <view class="button" @click="btnxyb">下一步</view> --> <!-- <view class="buttons">手动输入WIFI</view> --> </view> </view> </template> <script> // import jpSelect from '@/components/jp-select/jp-select.vue'; // var xBlufi = require("../../../utils/blufi/xBlufi.js"); export default { // components: { // jpSelect // },nin data() { return { options: {}, optionsobj: {}, version: '2.0', name: '', connectedDeviceId: '', connected: true, deviceInfo: null, isInitOK: false, password: '', customData: '', ble_data: '', wifiList: "", item: '', textwb: '重新扫描', list: [{ BSSID: '', SSID: '' }], picflag: false, indexs: -1, wififlag: true, //wifi列表flag videoflag: false, //视频flag ssid: '', //wifi名称 signalStrengthflag: false, objlist: {} }; }, // components: {}, props: {}, onShow: function(options) { // 判断手机是什么型号 let systemInfo = uni.getSystemInfoSync(); if (systemInfo.platform === 'android') { // 当前设备是 Android var that = this wx.startWifi({ success: function() { // Wi-Fi 模块初始化成功 console.log('Wi-Fi 模块已初始化'); // 在这里可以调用 wx.getWifiList wx.getWifiList({ success: function(res) { // 获取 Wi-Fi 列表成功 console.log('获取 Wi-Fi 列表成功:', res); // 在这里可以处理 Wi-Fi 列表数据 wx.onGetWifiList(function(res) { // 这里是监听获取到 Wi-Fi 列表后的回调函数 console.log('监听到获取到 Wi-Fi 列表:', res.wifiList); that.wifiList = res.wifiList // 升序排序 that.wifiList.sort(function(a, b) { return b.signalStrength - a .signalStrength; }); // 去重 for (var i = 0; i < that.wifiList.length; i++) { for (var j = i + 1; j < that.wifiList .length; j++) { if (that.wifiList[i].SSID == that.wifiList[ j] .SSID) { that.wifiList.splice(j, 1); j-- } } } that.signalStrengthflag = true that.list = that.wifiList console.log(that.list, '1010'); //在这里提取列表数据 }); }, fail: function(err) { // 获取 Wi-Fi 列表失败 console.error('获取 Wi-Fi 列表失败:', err); } }); }, fail: function(err) { // 初始化失败 console.error('Wi-Fi 初始化失败:', err); } }); } else if (systemInfo.platform === 'ios') { // 当前设备是 iOS } }, onLoad: function(option) { // 传过来的蓝牙信息 this.objlist = option console.log(this.objlist,'listlist') var that = this wx.startWifi({ success: function() { // Wi-Fi 模块初始化成功 console.log('Wi-Fi 模块已初始化'); // 在这里可以调用 wx.getWifiList wx.getWifiList({ success: function(res) { // 获取 Wi-Fi 列表成功 console.log('获取 Wi-Fi 列表成功:', res); // 在这里可以处理 Wi-Fi 列表数据 wx.onGetWifiList(function(res) { // 这里是监听获取到 Wi-Fi 列表后的回调函数 console.log('ios监听到获取到 Wi-Fi 列表:', res.wifiList); that.wifiList = res.wifiList // 降序排序 that.wifiList.sort(function(a, b) { return b.signalStrength - a.signalStrength; }); // 去重 for (var i = 0; i < that.wifiList.length; i++) { for (var j = i + 1; j < that.wifiList .length; j++) { if (that.wifiList[i].SSID == that.wifiList[j] .SSID) { that.wifiList.splice(j, 1); j-- } } } that.signalStrengthflag = true that.list = that.wifiList console.log(that.list, '1010'); //在这里提取列表数据 }); }, fail: function(err) { // 获取 Wi-Fi 列表失败 console.error('获取 Wi-Fi 列表失败:', err); } }); }, fail: function(err) { // 初始化失败 console.error('Wi-Fi 初始化失败:', err); } }); }, onUnload: function() { console.log("unload返回 "); let that = this; }, methods: { search(){ var that = this wx.startWifi({ success: function() { // Wi-Fi 模块初始化成功 console.log('Wi-Fi 模块已初始化'); // 在这里可以调用 wx.getWifiList wx.getWifiList({ success: function(res) { // 获取 Wi-Fi 列表成功 console.log('获取 Wi-Fi 列表成功:', res); // 在这里可以处理 Wi-Fi 列表数据 wx.onGetWifiList(function(res) { // 这里是监听获取到 Wi-Fi 列表后的回调函数 console.log('ios监听到获取到 Wi-Fi 列表:', res.wifiList); that.wifiList = res.wifiList // 降序排序 that.wifiList.sort(function(a, b) { return b.signalStrength - a.signalStrength; }); // 去重 for (var i = 0; i < that.wifiList.length; i++) { for (var j = i + 1; j < that.wifiList .length; j++) { if (that.wifiList[i].SSID == that.wifiList[j] .SSID) { that.wifiList.splice(j, 1); j-- } } } that.signalStrengthflag = true that.list = that.wifiList console.log(that.list, '1010'); //在这里提取列表数据 }); }, fail: function(err) { // 获取 Wi-Fi 列表失败 console.error('获取 Wi-Fi 列表失败:', err); } }); }, fail: function(err) { // 初始化失败 console.error('Wi-Fi 初始化失败:', err); } }); }, // 点击判断索引是否相同显示图片 btnqhwifi(index, item) { this.indexs = index // console.log(item.SSID) this.ssid = item.SSID }, // 点击进行下一步 btnxyb() { console.log('panduan1',this.indexs); if (this.indexs == -1) { uni.showToast({ title: '请选择需要连接的wifi', icon: 'none', duration: 3000 }); } else { console.log('panduan2'); uni.navigateTo({ url: '/pages/wifijoint/index?ssid=' + JSON.stringify(this.ssid) + '&objlist=' + JSON.stringify(this.objlist) }) } }, btnsd() { this.ssid = '' uni.navigateTo({ url: '/pages/wifijoint/index?objlist=' + JSON.stringify(this.objlist) + '&ssid=' + JSON.stringify(this.ssid) }) }, }, }; </script> <style lang="less"> .btnbox{ position: fixed; width: 580rpx; bottom: 108rpx; left: 82rpx; display: flex; flex-wrap: nowrap; justify-content: space-between; .btns{ display: flex; align-items: center; justify-content: center; width: 264rpx; height: 96rpx; background: #8883F0; border-radius: 52rpx 52rpx 52rpx 52rpx; font-weight: 500; font-size: 36rpx; color: #FFFFFF; } } //wifi信号强度显示 .wifiactive { background-color: limegreen !important; } * { margin: 0; padding: 0; list-style: none; } .box { margin-right: 30rpx; height: 100%; padding-bottom: 40rpx; box-sizing: border-box; } ul { position: relative; width: 100%; height: 100%; } li { // width: 8rpx; // position: absolute; // bottom: 0; // border-radius: 10px; // background: rgba(0, 0, 0, .5); image { display: inline-block; margin-top: 10rpx; // padding-left: 30rpx; // box-sizing: border-box; width: 50rpx; height: 46rpx; } } // ul li:nth-child(1) { // height: 10rpx; // left: 0px; // } // ul li:nth-child(2) { // height: 20rpx; // left: 10px; // } // ul li:nth-child(3) { // height: 30rpx; // left: 20px; // } // ul li:nth-child(4) { // height: 40rpx; // left: 30px; // } // ul li:nth-child(5) { // height: 50rpx; // left: 40px; // } // ul li:nth-child(6) { // height: 60rpx; // left: 50px; // } // 点击关闭弹出弹窗提示 .tanctitle { width: 500rpx; background-color: #fff; margin: auto; position: fixed; top: 35%; left: 50%; transform: translateX(-50%); border-radius: 30rpx; padding: 20rpx; box-sizing: border-box; border: 1px solid #ccc; .title { margin-top: 20rpx; font-size: 16px; font-weight: 700; } .anniu { margin-top: 50rpx; display: flex; border-top: 1px solid #ccc; height: 60rpx; line-height: 60rpx; .btnqx { width: 50%; text-align: center; border-right: 1px solid #ccc; } .btnqd { width: 50%; text-align: center; } } } .page { width: 100%; padding: 0 20rpx; box-sizing: border-box; .wz { display: flex; justify-content: space-between; margin-top: 30rpx; margin-bottom: 10rpx; .title { font-size: 18px; font-weight: 700; } .bg { display: inline-block; border-radius: 10rpx; padding: 5rpx 10rpx; box-sizing: border-box; background-color: red; color: #fff; } } .wifivideo { width: 100%; video { width: 100%; height: 90vh; } } } .active { background: rgba(240, 252, 251, 1); } .bdbox { display: flex; } .wifilist { margin-top: 80rpx; .bd { display: flex; justify-content: space-between; width: 100%; height: 148rpx; // line-height: 148rpx; padding-top: 45rpx; box-sizing: border-box; padding-left: 60rpx; padding-right: 60rpx; background: #FFFFFF; box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08); border-radius: 10rpx; margin-top: 50rpx; .picone { width: 58rpx; height: 42rpx; margin-top: 10rpx; } .pictwo { width: 40rpx; height: 40rpx; margin-top: 10rpx; } .content { margin-left: 30rpx; view { height: 40rpx; } .wz { color: rgba(189, 188, 188, 1); font-size: 12px; } .bt { color: rgba(80, 86, 90, 1); font-size: 16px; } } } } .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-weight: 400; font-size: 36rpx; color: #77808D; } .container { /* padding-top: 30rpx !important; */ padding: 0 30rpx 380rpx 30rpx !important; align-items: center; } .sdBtn{ margin-top: 24rpx; display: flex; align-items: center; justify-content: center; width: 212rpx; height: 48rpx; border-radius: 40rpx 40rpx 40rpx 40rpx; border: 4rpx solid #8883F0; font-weight: 400; font-size: 28rpx; color: #8883F0; } .button { position: fixed; display: flex; align-items: center; justify-content: center; left: 50%; transform: translateX(-50%); bottom: 50rpx; padding: 10rpx 0; height: 96rpx; box-sizing: border-box; background-color: #8883F0 !important; border-radius: 52rpx 52rpx 52rpx 52rpx; font-weight: 700; font-size: 20px; width: 90%; color: #FFFFFF; } .buttons { display: flex; align-items: center; justify-content: center; position: fixed; left: 50%; transform: translateX(-50%); bottom: 200rpx; height: 96rpx; padding: 10rpx 0; box-sizing: border-box; background-color: #8883F0 !important; border-radius: 52rpx 52rpx 52rpx 52rpx; font-weight: 700; font-size: 20px; width: 90%; color: #FFFFFF; } </style>