AiToyCXWx/pagesMy/wifiSearch.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='配置网络'></cus-header>
		<template v-if="!nodevice">
			<div class="search adffcac">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/379c752c-13f5-4668-9977-e8cad9cd0fa4.gif"></image>
				<p>正在搜索可配网设备</p>
			</div>
		</template>
		<template v-else>
			<div class="empty adffcac">
				<div class="title">搜索超时</div>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/5824159f-0bd8-4399-be6c-7d309e2a35dc.png"></image>
				<div class="tip">没有找到可用设备？</div>
				<div class="warn adfac" @tap="alertShow=true">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/19ca1b06-9bfd-4ae6-9c1c-eec45a86f0a0.png"></image>
					<span>找不到设备怎么办 ></span>
				</div>
			</div>
		</template>
		<div class="zt_btn" v-if="nodevice" @tap="searchAgain">再次搜索</div>
		<u-popup :show="alertShow" :round="56" mode="center" @close="alertShow=false">
			<div class="alert">
				<div class="title">找不到设备怎么办</div>
				<p style="margin-top: 53rpx;">1.请确保可配网的设备在手机旁边</p>
				<p>2.如果没有开机，请先按住开关键直到指示灯亮起</p>
				<p>3.开机状态下，按配网键1次进入配网模式</p>
				<div class="btn" @tap="alertShow=false">我知道了</div>
			</div>
		</u-popup>
		<u-popup :show="show" :round="64" mode="bottom" @close="show=false">
			<div class="connect adffcac">
				<div class="title">找到一个待配网的设备</div>
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/6f06a2de-5d6c-4596-9a0c-77971d6ea230.png"></image>
				<div class="tip">序列号：{{lanya.deviceId}}</div>
				<div class="btn" @tap="connectWiFi">连接</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	var xBlufi = require("@/utils/blufi/xBlufi.js");
	let _this = null;
	export default {
		data(){
			return {
				nodevice:false,
				show:false,
				alertShow:false,
				lanya:null,
				devicesList: [],
				searching: false,
			}
		},
		onLoad: function() {
			this.Search();
			_this = this;
			xBlufi.initXBlufi(1);
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
		},
		onUnload() {
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
		},
		methods:{
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result)
							_this.devicesList = options.data;
							let ly = _this.devicesList.find(d=>d.name=='BLUFI_DEVICE');
							if(ly){
								_this.lanya = ly;
								_this.nodevice = false;
								_this.show = true;
							}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						if (options.result) {
							wx.hideLoading()
							wx.showToast({
								title: '连接成功',
								icon: 'none'
							})
							wx.navigateTo({
								url: '/pagesMy/wifiSet?deviceId=' + options.data.deviceId + '&name=' + options
									.data.name,
							});
						} else {
							wx.hideLoading()
							wx.showModal({
							  title: '提示',
							  content: '连接失败',
							  showCancel: false
							});
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) {
							wx.showToast({
								title: '蓝牙未开启',
								icon: 'none'
							})
						} else {
							//蓝牙搜索开始
							_this.searching = true;
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							//蓝牙停止搜索ok
							console.log('蓝牙停止搜索ok')
						} else {
							//蓝牙停止搜索失败
							console.log('蓝牙停止搜索失败')
						}
						_this.searching = false;
						break;
				}
			},
			Search: function() {
				if (this.searching) {
					xBlufi.notifyStartDiscoverBle({
						'isStart': false
					})
				} else {
					xBlufi.notifyStartDiscoverBle({
						'isStart': true
					})
				}
			},
			connectWiFi: function() {
				//停止搜索
				xBlufi.notifyStartDiscoverBle({
					'isStart': false
				})
				xBlufi.notifyConnectBle({
					isStart: true,
					deviceId: _this.lanya.deviceId,
					name:_this.lanya.name
				});
				wx.showLoading({
					title: '连接蓝牙设备中...',
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		padding: 0 0 300rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		.search{
			image{
				width: 620rpx;
				height: 620rpx;
				margin-top: 120rpx;
			}
			p{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				line-height: 36rpx;
				text-align: center;
				margin-top: 80rpx;
			}
		}
		.empty{
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				line-height: 36rpx;
				text-align: center;
				margin-top: 158rpx;
			}
			&>image{
				width: 400rpx;
				height: 366rpx;
				margin-top: 48rpx;
			}
			.tip{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				line-height: 36rpx;
				text-align: center;
				margin-top: 53rpx;
			}
			.warn{
				background: rgba(27,80,255,0.06);
				border-radius: 28rpx;
				padding: 10rpx 24rpx;
				margin-top: 48rpx;
				image{
					width: 26rpx;
					height: 26rpx;
				}
				span{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #1B50FF;
					line-height: 37rpx;
					margin-left: 8rpx;
				}
			}
		}
		.zt_btn{
			width: calc(100% - 120rpx);
			position: fixed;
			left: 60rpx;
			bottom: 201rpx;
		}
		
		.alert{
			padding: 54rpx 40rpx 0;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				line-height: 36rpx;
				text-align: center;
				margin-bottom: 19rpx;
			}
			p{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				line-height: 65rpx;
				text-align: left;
				margin-top: 24rpx;
			}
			.btn{
				width: calc(100% - 108rpx);
				height: 90rpx;
				background: #D9F159;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #252525;
				line-height: 90rpx;
				text-align: center;
				margin: 113rpx 54rpx 0;
				letter-spacing: 2rpx;
			}
		}
		.connect{
			padding: 66rpx 40rpx 30rpx;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #111111;
				line-height: 36rpx;
				text-align: center;
			}
			image{
				width: 504rpx;
				height: 254rpx;
				margin-top: 37rpx;
			}
			.tip{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				line-height: 36rpx;
				margin-top: 40rpx;
			}
			.btn{
				width: 100%;
				height: 90rpx;
				background: #D9F159;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #252525;
				line-height: 90rpx;
				text-align: center;
				margin-top: 101rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>