smartswrtch-app/page_user/wifijoint/index.vue

<template>
	<view class="">
		<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">
			<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>
	</view>

</template>

<script>
	var xBlufi = require("@/page_components/blufi/xBlufi.js")
	// import { getwifi } from '@/api/index.js'
	export default {
		data() {
			return {
				name: '',
				password: '',
				options: '',
				falg: 0,
				objlist: '',
				statusflag: false,
				status: 'loading',
				bgc: {
					backgroundColor: "#8883f0",
				},
			}

		},
		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
			})

		},
		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 + "pass@" + this.password
                 })
				// 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.navigateTo({
									url:'/pages/index/index'
								})
							}
						});
						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: `连接成功`,
									showCancel: false,
									success: function(res) {
										uni.switchTab({
											url: '/pages/index/index'
										})
										// let ids = that.$store.state.user.deviceId
										wx.closeBLEConnection({
											deviceId: this.objlist.deviceId,
										})
										
										// getwifi(ids).then(res => {
										// 	console.log(res);
										// 	uni.switchTab({
										// 		url:'/pages/index/index'
										// 	})
										// })
									}
								})
							}
						}
						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: #3D3D3D;
			font-size: 32rpx;
			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: #50565a;
		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>