smartmeter-app/pages/wifijoint/index.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:
					{
						if( options.result==false){
							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) { 
									uni.switchTab({
										url:'/pages/index/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>