smartswrtch-app/page_components/wifilist/index.vue

<template>
	<view>
		<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" style="margin-top: 50rpx;">
			<view class="device" style="display: flex;align-items: center;justify-content: space-between;">
				<span class="device-list-title"> <image style="width: 50rpx;height: 50rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uUwOlSoho5fNOXBHVQ8D" mode=""></image></span>
				<view class="text_3 ml-3" style="font-size: 24rpx;color: #1E1D20;">
					<view class="top" style="font-weight: 600;">
						提示
					</view>
					<view class="bot" style="width: 400rpx;flex-wrap: wrap;">
						本设备只支持2.4G-WiFi网络，暂不支持5G-WiFi网络
					</view>
				</view>
				<view class="rt" style="text-align: center;width: 100rpx;" v-if="!lianjieflag">
				   <image style="width: 80rpx;height: 80rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u6akzRBuxxP94XlUcMtV" mode=""></image>	
				   <text>{{ljtxt}}</text>
				</view>
				<view class="rt" style="text-align: center;width: 100rpx;" v-else>
				   <image style="width: 80rpx;height: 80rpx;" src="https://api.ccttiot.com/smartmeter/img/static/usSHAkmok1YIdjsgRECI " mode=""></image>	
				   <text>已连接</text>
				</view>
			</view>
			<!-- wifi列表 v-if="signalStrengthflag" -->
			<view class="wifilist">
				<view class="top">
					 请选择您需要连接的WiFi名称
				</view>
				<view class="bd" v-for="(item,index) in list" :key="index" @click="btnqhwifi(index,item)">
					<view class="bdbox">
						<view class="" style="display: flex;align-items: center;">
							<view class="box" style="margin-right: 10rpx;">
								<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/ucHCSQoAToQAwajScBCs"
											mode="aspectFit"></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/u99d7sacejXaGlsLedNx"
											mode="aspectFit"></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/ueL5rF2AGWamJzGpLMU9"
											mode="aspectFit"></image>
									</li>
									<li
										v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 69">
										<image src="https://api.ccttiot.com/smartmeter/img/static/uCN5HZjWwMqVQkbccAxa"
											mode="aspectFit"></image>
									</li>
								</ul>
							</view>
							<view class="content">
								<view class="bt">{{item.SSID == '' ? 'CMCC-eaca' : item.SSID}}</view>
							</view>
						</view>
						<view class="" style="font-size: 24rpx;color: #8883F0;" v-if="item.SSID == objlist.wifi">
							已连接
						</view>
						<view class="" style="font-size: 24rpx;color: #8883F0;width: 20rpx;" v-else>
							
						</view>
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uLrArPv3OrIodtWZ3gri" mode="aspectFit"
						class="pictwo" v-if="indexs == index">
					</image>
				</view>
			</view>
			<view class="annius" style="display: flex;justify-content: space-between;">
				<view style="width: 246rpx;" @click="btnwifi"> 重新搜索</view>
				<view style="width: 374rpx;" @click="btnsd">未找到手动添加WIFI</view>
			</view>

		</view>
		
		<!-- 蒙层 -->
		<view class="mask" v-if="maskflag"></view>
		<!-- 点击WiFi连接弹窗 -->
		<view class="lianjie" style="height:380rpx;" v-if="maskflag">
			<view class="wifitop">
				连接网络
			</view>
			<view class="wifiname">
				{{ssid}}
			</view>
			<view class="" style="position: relative;color: #000;
				font-size: 30rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				background-color: #efefef;
				border-radius: 10rpx;
				height: 80rpx;width: 100%;" v-if="passmm == true">
				<input class="uni-input" v-model="password" type="text" placeholder="输入WiFi密码" />
				<u-icon name="eye-fill" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = false" size="50"></u-icon>
			</view>
			<view class="" style="position: relative;color: #000;
				font-size: 30rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				background-color: #efefef;
				border-radius: 10rpx;
				height: 80rpx;width: 100%;" v-if="passmm == false">	
				<input class="uni-input" v-model="password" type="password" placeholder="输入WiFi密码" />
				<u-icon name="eye-off" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = true" size="50"></u-icon>
			</view>
			 <view class="butlj" style="border-top: 1px solid #ccc;">
			 	<view class="btnljqx" @click="btnmaskflag" style="border-right: 1px solid #ccc;">
			 		取消
			 	</view>
				<view
				   v-if="textwifi == '连接'"
				  class="btnljqx"   
				  @click="content_wf"   
				  :class="{ 'actives': textwifi === '连接中...' }">  
				    连接
				</view>
				<view v-else class="btnljqx" :class="{ 'actives': textwifi === '连接中...' }" style="display: flex; justify-content: center; align-items: center;">  
				    <text>连接中</text>  
					<view class="" style="width: 36rpx;">
						<text v-for="n in 3" :key="n" v-if="currentIndex >= n">.</text>
					</view>
				  </view>  
			 </view>
		</view>
		
		<!-- 手动输入WiFi -->
		<view class="mask" v-if="sdmaskflag"></view>
		<!-- 点击WiFi连接弹窗 -->
		<view class="lianjie" v-if="sdmaskflag">
			<view class="wifitop">
				手动添加
			</view>
			<view class="" style="margin-top: 30rpx;
				color: #000;
				font-size: 30rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				background-color: #efefef;
				border-radius: 10rpx;
				height: 80rpx;width: 100%;">
				<input class="uni-input" v-model="ssid" type="text" placeholder="输入WiFi名称" />
			</view>
			<view class="" style="position: relative;width: 100%;
				margin-top: 30rpx;
				color: #000;
				font-size: 10rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				background-color: #efefef;
				border-radius: 10rpx;
				height: 80rpx;" v-if="passmm == true">
				<input class="uni-input" v-model="password" type="text" placeholder="输入WiFi密码" />
				<u-icon name="eye-fill" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = false" size="50"></u-icon>
			</view>
			<view class="" style="position: relative;width: 100%;
				margin-top: 30rpx;
				color: #000;
				font-size: 30rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
				background-color: #efefef;
				border-radius: 10rpx;
				height: 80rpx;" v-if="passmm == false">
				<input class="uni-input" v-model="password" type="password" placeholder="输入WiFi密码" />
				<u-icon name="eye-off" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = true" size="50"></u-icon>
			</view>
			 <view class="butlj" style="border-top: 1px solid #ccc;">
			 	<view class="btnljqx" @click="btnsdmaskflag" style="border-right: 1px solid #ccc;">
			 		取消
			 	</view>
				<view   
				   v-if="textwifi == '连接'"
				  class="btnljqx"   
				  @click="content_wf"   
				  :class="{ 'actives': textwifi === '连接中...' }">  
				    连接
				</view>
				<view v-else class="btnljqx" :class="{ 'actives': textwifi === '连接中...' }" style="display: flex; justify-content: center; align-items: center;">  
				    <text>连接中</text>  
					<view class="" style="width: 36rpx;">
						<text v-for="n in 3" :key="n" v-if="currentIndex >= n">.</text>
					</view>
				  </view>  
			 </view>
		</view>
		
		<!-- 没有WiFi -->
		<!-- <view class="bluetoothbox" v-if="list.length == 0">
			 <image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uZH5T5qPm6VjuJbGbCpj" mode="aspectFit"></image>
					 <view class="one">
					 	发现网络失败
					 </view>
					 <view class="two">
					 	请确保你的设备处于局域网范围内
					 </view>
					 <view class="anfour">
					 	<view class="qx" @click="btnsd">
		                  手动添加
					 	</view>
						<view class="cx" @click="btnwifi">
						   重新发现
						</view>
					 </view>
		</view> -->
		<view class="mask" v-if="ljljflag"></view>
 
	</view>
</template>
<script>
	var xBlufi = require("@/page_components/blufi/xBlufi.js")
	export default {
		data() {
			return {
				passmm:false,
				password:'',
				sdmaskflag:false,
				maskflag:false,
				options: {},
				optionsobj: {},
				version: '2.0',
				name: '',
				connectedDeviceId: '',
				connected: true,
				deviceInfo: null,
				isInitOK: false,
				password: '',
				customData: '',
				ble_data: '',
				wifiList: "",
				item: '',
				textwb: '重新扫描',
				list: [],
				picflag: false,
				indexs: -1,
				wififlag: true, //wifi列表flag
				videoflag: false, //视频flag
				ssid: '', //wifi名称
				signalStrengthflag: false,
				objlist: {},
				bgc: {
					backgroundColor: "#8883f0",
				},
				textwifi:'连接',
				
				rotateDegree: 0, // 图片的旋转角度  
				rotationInterval: null, // 定时器的引用  
				isRotating: false, // 标志位，控制是否正在旋转  
					  
				currentIndex: 0, // 控制当前应该显示到哪个点  
				dotShowInterval: null, 
				devicesList:[],
				ver_data:'',
				ljljflag:true,
				timer: null,
				lianjieflag:false,
				ljtxt:'连接中',
				successflag:true,
				deviceId:'',
				devicesarr:[]
			};
		},

		// components: {},
		props: {},
		onShow: function(options) {
			 this.statusflag = false
			// 判断手机是什么型号
			let systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'android') {
				// 当前设备是 Android  
				var that = this
				wx.startWifi({
					success: function() {
						// console.log('Wi-Fi 模块已初始化');
						wx.getWifiList({
							success: function(res) {
								// console.log('获取 Wi-Fi 列表成功:', res);
								wx.onGetWifiList(function(res) {
									// 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
								});
							},
							fail: function(err) {
								console.error('获取 Wi-Fi 列表失败:', err);
							}
						});
					},
					fail: function(err) {
						console.error('Wi-Fi 初始化失败:', err);
					}
				});
			} else if (systemInfo.platform === 'ios') {
				// 当前设备是 iOS  

			}
		},
		onLoad: function(option) {
			xBlufi.notifyStartDiscoverBle({'isStart': true})
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
			
			setTimeout(()=>{
				this.objlist = option
				// 传过来的蓝牙信息
				this.Binddevice()
				console.log(this.objlist,'1212000sjdhjshdjsh');
			},1000)
			
			let that = this
			wx.startWifi({
				success: function() {
					console.log('Wi-Fi 模块已初始化');
					wx.getWifiList({
						success: function(res) {
							// console.log('获取 Wi-Fi 列表成功:', res);
							wx.onGetWifiList(function(res) {
								// 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.filter(item => {  
								    return item.SSID !== '' 
								})
								// 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 () {
		    clearInterval(this.timer);
		    this.timer = null;
		  },
		  // 或者在 onHide 中清除
		  onHide: function () {
		    clearInterval(this.timer);
		    this.timer = null;
		  },
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onUnload: function() {
			console.log("unload返回 ");
			 if (this.dotShowInterval) {  
			      clearInterval(this.dotShowInterval);  
			 }
			 xBlufi.notifyStartDiscoverBle({
			 	'isStart': false
			 })
			 xBlufi.notifyConnectBle({
			 	isStart: false,
			 	deviceId: this.deviceId,
			 	name: this.name
			 })	
		},
		mounted() {  
		    // 开始闪烁动画  
		    this.startDotShow()  
		  },  
		methods: {
			Binddevice() {
					this.ljljflag = false
					this.ljtxt = '连接中'
					this.lianjieflag = false
					let that = this
					// 当前设备是 iOS
						var falg = 0
						console.log("进入这里是IOS",that.devicesarr)
						that.devicesarr.forEach(device => {
							console.log(device.name, that.objlist.deviceId, '111')
							console.log("IOSMAC",device)
							console.log("device.name",device.name)
							console.log("that.objlist.deviceId",that.objlist.deviceId)
							if (device.name.slice(-12) == that.objlist.deviceId.slice(-12)) {
								that.deviceId = device.deviceId
								that.name = device.device
								console.log(that.deviceId, '11221');
								falg = 1;
								xBlufi.notifyStartDiscoverBle({
									'isStart': false
								})
								xBlufi.notifyConnectBle({
								isStart: true,
								deviceId: device.deviceId,
								name: device.name
							})	
						}
					})
					if(falg==0){
							setTimeout(()=>{
								that.devicesarr.forEach(device => {
								console.log(device.name, that.objlist.deviceId, '111')
								console.log("IOSMAC",device)
								console.log("device.name",device.name)
								console.log("that.objlist.deviceId",that.objlist.deviceId)
								if (device.name.slice(-12) == that.objlist.deviceId.slice(-12)) {
									that.deviceId = device.deviceId
									that.name = device.device
									console.log(that.deviceId, '11221');
									falg = 1;
									xBlufi.notifyStartDiscoverBle({
										'isStart': false
									})
									xBlufi.notifyConnectBle({
									isStart: true,
									deviceId: device.deviceId,
									name: device.name
								})	
							  } 
						  })
					   },3000)
					}
						// let systemInfo = uni.getSystemInfoSync()
						// 		if (systemInfo.platform == 'android') {
						// 			that.objlist.deviceId = that.objlist.deviceId.match(/.{2}/g).reverse().join(':')
						// 			let zuih = ''
						// 			if(that.objlist.deviceId.slice(-1) == 8){
						// 				zuih = 'A'
						// 			}else if(that.objlist.deviceId.slice(-1) == 9){
						// 				zuih = 'B'
						// 			}else{
						// 				zuih = Number(that.objlist.deviceId.slice(-1)) + 2
						// 			}
						// 			that.objlist.deviceId = that.objlist.deviceId.slice(0, -1) + zuih
						// 			xBlufi.notifyStartDiscoverBle({
						// 				'isStart': false
						// 			})
						// 			console.log("进入蓝牙连接", that.objlist.deviceId)
						// 			console.log("进入that.objlist.name",that.objlist.name)
						// 			xBlufi.notifyConnectBle({
						// 				isStart: true,
						// 				deviceId: that.objlist.deviceId,
						// 				name: that.objlist.name
						// 			})
						// 			that.deviceId =  that.objlist.deviceId
						// 			that.name = that.objlist.name
						// 		} else if (systemInfo.platform == 'ios') {
						// 			// 当前设备是 iOS  
						// 			var falg = 0
						// 			console.log("进入这里是IOS",that.devicesarr)
						// 			that.devicesarr.forEach(device => {
						// 				console.log(device.name, that.objlist.deviceId, '111')
						// 				console.log("IOSMAC",device)
						// 				console.log("device.name",device.name)
						// 				console.log("that.objlist.deviceId",that.objlist.deviceId)
						// 				if (device.name.slice(-12) == that.objlist.deviceId.slice(-12)) {
						// 					that.deviceId = device.deviceId
						// 					that.name = device.device
						// 					console.log(that.deviceId, '11221');
						// 					falg = 1;
						// 					xBlufi.notifyStartDiscoverBle({
						// 						'isStart': false
						// 					})
						// 					xBlufi.notifyConnectBle({
						// 					isStart: true,
						// 					deviceId: device.deviceId,
						// 					name: device.name
						// 				})	
						// 			}
						// 		})
						// 		if(falg==0){
						// 				setTimeout(()=>{
						// 					that.devicesarr.forEach(device => {
						// 					console.log(device.name, that.objlist.deviceId, '111')
						// 					console.log("IOSMAC",device)
						// 					console.log("device.name",device.name)
						// 					console.log("that.objlist.deviceId",that.objlist.deviceId)
						// 					if (device.name.slice(-12) == that.objlist.deviceId.slice(-12)) {
						// 						that.deviceId = device.deviceId
						// 						that.name = device.device
						// 						console.log(that.deviceId, '11221');
						// 						falg = 1;
						// 						xBlufi.notifyStartDiscoverBle({
						// 							'isStart': false
						// 						})
						// 						xBlufi.notifyConnectBle({
						// 						isStart: true,
						// 						deviceId: device.deviceId,
						// 						name: device.name
						// 					})	
						// 				  } 
						// 			  })
						// 		   },3000)
						// 	    }
						// }
			},
			    // 开始旋转图片  
			   
			    // 模拟异步请求  
			    simulateRequest() {  
			      // 使用setTimeout来模拟异步操作  
			      setTimeout(() => {  
			        // 假设请求完成  
			        console.log('请求完成');  
			        this.stopRotation();  
			      }, 3000); 
			    },  
			    // 停止旋转图片  
			    stopRotation() {  
			      this.isRotating = false;  
			      clearInterval(this.rotationInterval); // 清除定时器  
			    },  
			
			startDotShow() {  
			      this.dotShowInterval = setInterval(() => {  
			        if (this.currentIndex < 3) {  
			          this.currentIndex++;  
			        } else {  
			          // 如果需要循环显示，可以重置currentIndex  
			          this.currentIndex = 0; // 重启动画  
			        }  
			      }, 500); // 每500毫秒更新currentIndex  
			    },  
			
			
			btnmaskflag(){
				this.textwifi = '连接'
				this.maskflag = false
				this.password = ''
			},
			btnsdmaskflag(){
				this.textwifi = '连接'
				this.sdmaskflag = false
				this.password = ''
			},
			// 点击重新获取wifi
			btnwifi(){
				uni.showLoading({
					title: '搜索中...'
				})
				if (!this.isRotating) {
				  this.isRotating = true;  
				  this.rotationInterval = setInterval(() => {  
				    if (this.isRotating) {  
				      this.rotateDegree = (this.rotateDegree + 5) % 360; // 每次增加5度，并循环  
				    }  
				  }, 10); // 每100毫秒旋转一次  
				  // 假设这里发起一个异步请求  
				  this.simulateRequest();  
				}  
				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
									setInterval(()=>{
										uni.hideLoading()
									},2000)
									console.log(that.list, '1010'); //在这里提取列表数据
								});
							},
							fail: function(err) {
								uni.hideLoading()
								// 获取 Wi-Fi 列表失败  
								console.error('获取 Wi-Fi 列表失败:', err);
							}
						});
					},
					fail: function(err) {
						// 初始化失败  
						console.error('Wi-Fi 初始化失败:', err);
					}
				});
			},
			
			// 点击判断索引是否相同显示图片
			btnqhwifi(index, item) {
				// this.indexs = index
				this.ssid = item.SSID
				this.maskflag = true
			},
			// 点击进行下一步
			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: '/page_user/wifijoint/index?ssid=' + JSON.stringify(this.ssid) + '&objlist=' + JSON.stringify(this.objlist)
					})
				}
			},
			btnsd() {
				this.sdmaskflag = true
				this.ssid = ''
			},
			
			
			// 点击连接操作
			content_wf() {
				if (!this.ssid) {
					uni.showToast({
						title: 'WIFI不能为空',
						icon: 'none'
					});
					return;
				}
				this.textwifi = '连接中...'
				
			    xBlufi.notifySendCustomData({
			          customData: "ssid@" + this.ssid + "pass@" + this.password
			     })
				let that = this
				setTimeout(()=>{
					if(that.textwifi != '连接'){
						uni.showModal({
							title: '温馨提示',
							content: '配网失败，请重新操作', 
							showCancel: false,
							success: function(res) {
								uni.reLaunch({
									url:'/page_user/sbdetail?id=' + that.objlist.id
								})
							}
						})
					}
				},20000)
			},
			// 蓝牙回调 
			funListenDeviceMsgEvent: function(options) {
				let that = this;
				switch (options.type) {
					// case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
					// 	console.log('状态', options.result)
					// 	this.textwifi = '连接'
					// 	uni.showModal({
					// 		title: '很抱歉提醒你！',
					// 		content: '蓝牙异常断开，请重新连接…', 
					// 		showCancel: false,
					// 		success: function(res) {
					// 			uni.switchTab({
					// 				url:'/pages/index/index'
					// 			})
					// 		}
					// 	});
					// 	this.statusflag = false
					// 	uni.hideLoading();
					// }
					// break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							this.devicesarr = options.data
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) {
							this.lanyaflag = true
							this.lianjieflag = false
							this.ljtxt = '未连接'
							uni.showToast({
								title: '蓝牙未开启',
								icon: 'none',
								duration: 3000
							})
							return
						} else {
							this.lanyaflag = false
						}
						break
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						console.log("连接回调：" + JSON.stringify(options));
						this.lanyaflag = false
						this.lianjieflag = true
						if (options.result) {
							{
								xBlufi.notifyInitBleEsp32({
									deviceId: options.data.deviceId
								});
							}
						}
						break
                    case xBlufi.XBLUFI_TYPE.TYPE_CONNECT_ROUTER_RESULT:
                        uni.hideLoading();
                        if (this.successflag == true) {
                            this.successflag = false;
                            if (!options.result) {
                                this.textwifi = '连接';
                                this.ssid = '';
                                this.statusflag = false;
                                let that = this;
                                uni.showModal({
                                    title: '温馨提示',
                                    content: '配网失败，请选择2.4GWiFi连接并确保密码正确',
                                    showCancel: false,
                                    success: function(res) {
                                        // that.successflag = true;
                                    }
                                });
                            } else {
                                if (options.data.progress == 100) {
                                    let ssid = options.data.ssid;
                                    that.statusflag = false;
                                    uni.hideLoading();
                                    that.textwifi = '连接';
                                    that.maskflag = false;
                                    that.sdmaskflag = false;
                                    uni.showModal({
                                        title: '温馨提示',
                                        content: `WIFI${that.ssid}配网成功`,
                                        showCancel: false,
                                        success: function(res) {
                                            // that.successflag = true;
                                            uni.reLaunch({
                                                url: '/page_user/sbdetail?id=' + that.objlist.id
                                            });
                                        }
                                    });
                                }
                            }
                        }
                        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:
						if (options.result) {
							console.log('初始化成功');
						} else {
							console.log('初始化失败');
							break;
						}
						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">
	.bluetoothbox{
		width: 100%;
		height: 100vh;
		background-color: #f4f1f6;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 98;
		text-align: center;
		.img{
			margin-top: 400rpx;
		}
		.one{
			font-size: 36rpx;
			color: #000;
			// margin-top: 80rpx;
		}
		.two{
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #ccc;
		}
		.thr{
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #ccc;
		}
		.anfour{
			display: flex;
			margin-top: 30rpx;
			justify-content: space-between;
			padding: 0 160rpx;
			box-sizing: border-box;
			.qx{
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border: 1px solid #3D3D3D;
				border-radius: 10rpx;
			}
			.cx{
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-color: #8883F0;
				color: #fff;
				border-radius: 10rpx;
			}
		}
		.stop{
			font-size: 36rpx;
			color: #000;
			margin-top: 380rpx;
		}
		.xtop{
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #ccc;
		}
		.xqx{
			width: 530rpx;
			height: 90rpx;
			line-height: 90rpx;
			// border: 1px solid #808080;
			border-radius: 20rpx;
			text-align: center;
			background-color: #fff;
			margin: auto;
			margin-top: 200rpx;
		}
		image{
			width: 320rpx;
			height: 320rpx;
			margin-top: 100rpx;
		}
	}
	.actives{
		opacity: .5 !important;
	}
	.sximg{
		width: 34rpx;
		height: 34rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	//wifi信号强度显示 
	.wifiactive {
		background-color: limegreen !important;
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .3;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	* {
		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 {
		image {
			display: inline-block;
			width: 50rpx;
			height: 52rpx;
		}
	}
    .annius{
		// position: fixed;
		align-items: center;
		// left: 50%;
		// transform: translateX(-50%);
		// bottom: 50rpx;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		// font-weight: 700;
		font-size: 28rpx;
		width: 650rpx;
		margin-top: 20rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 62rpx;
		view{
			height: 96rpx;
			border-radius: 50rpx;
			line-height: 96rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: #8883F0 !important;
			color: #fff;
			text-align: center;
		}
	}




     .lianjie{
			width: 620rpx;
			height: 425rpx;
			background-color: #fff;
			border-radius: 30rpx;
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			z-index: 99;
			padding: 30rpx;
			box-sizing: border-box;
			.wifitop{
				font-size: 32rpx;
			}
			.wifiname{
				font-size: 30rpx;
				color: #000;
				margin-top: 30rpx;
			}
			input{
				width: 400rpx;
				margin-top: 30rpx;
				color: #000;
				font-size: 30rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				background-color: #efefef;
				border-radius: 10rpx;
				height: 80rpx;
			}
			.butlj{
                display: flex;
				justify-content: space-between;
				text-align: center;
				box-sizing: border-box;
				margin-top: 30rpx;
				.btnljqx{
					font-size: 32rpx;
					color: #8883F0;
					width: 100%;
					text-align: center;
					height: 95rpx;
					line-height: 95rpx;
				}				
 			}
	 }
	// 点击关闭弹出弹窗提示
	.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;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.wifilist {
		.top{
			image{
				width: 50rpx;
				height: 52rpx;
				margin-right: 20rpx;
			}
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			margin-left: 42rpx;
			font-size: 28rpx;
			color: #77808D;
		}
		// margin-top: 80rpx;
        width: 650rpx;
		margin: auto;
		margin-top: 26rpx;
		height: 960rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 20rpx;
		overflow: scroll;
		.bd {
			display: flex;
			align-items: center;
			    // justify-content: space-between;
			    width: 498rpx;
			    margin: auto;
			    height: 106rpx;
				// line-height: 106rpx;
			    box-sizing: border-box;
			    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
			    /* border-radius: 10rpx; */
			    border-bottom: 1px solid #E5E5E5;
			    // padding: 26rpx 76rpx;
			    box-sizing: border-box;

			.picone {
				width: 58rpx;
				height: 42rpx;
				margin-top: 10rpx;
			}

			.pictwo {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
			}

			.content {
				margin-left: 30rpx;

				view {
					height: 40rpx;
					// margin-top: 20rpx;
				}

				.wz {
					color: rgba(189, 188, 188, 1);
					font-size: 12px;
				}

				.bt {
					color: rgba(80, 86, 90, 1);
					font-size: 16px;
				}
			}
		}
	}



    .device{
		width: 650rpx;
		height: 176rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		margin: auto;
		padding: 28rpx 38rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.device-list-title {
		font-size: 32rpx;
		color: #262B37;
		display: flex;
		align-items: center;
		// margin-bottom: 40rpx;
		image{
			margin-right: 10rpx;
		}
	}

	.text_3 {
		margin-top: 10rpx;
		color: rgba(119, 128, 141, 1);
		font-size: 28rpx;
	}

	.container {
		/* padding-top: 30rpx !important; */
		padding: 0 30rpx 50rpx 30rpx !important;
		align-items: center;
	}

	.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>