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.开机状态下，按住开关键3秒进入配网模式</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="btn" @tap="connectWiFi">连接</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				nodevice:false,
				show:false,
				alertShow:false,
				flag:true,
				deviceWifi:null
			}
		},
		onReady() {
			this.checkWifi();
		},
		methods:{
			checkWifi(){
				let that = this;
				wx.startWifi({
					success(res){
						wx.getConnectedWifi({
							success(res2){
								if(res2.errCode===0){
									that.nodevice = false;
									that.deviceModelDeal();
								} 
							},
							fail: (err2) => {
								if(err2.errMsg.indexOf('getConnectedWifi:fail:wifi is disable')>-1){
									that.$showModal('当前WiFi未开启，请先开启WiFi后再进行设备搜索。');
									that.nodevice = true;
								}
							}
						})
					},
					fail: (err) => {
						that.nodevice = true;
					}
				})
			},
			deviceModelDeal(){
				let sysInfo = wx.getSystemInfoSync();
				this.platform = sysInfo?.platform;
				if(this.platform=='ios'){
					uni.showModal({
						title:'温馨提示',
						content:'检测到您的手机为ios系统，即将自动跳转设置-微信，需要您在设置中打开无线局域网，等待获取到WiFi列表后再返回小程序进行设备搜索。',
						success: (res) => {
							if(res.confirm){
								this.searchWifi()
							}
						}
					})
				}else{
					this.searchWifi()
				}
			},
			searchWifi(){
				let that = this;
				wx.startWifi({
					success (res) {
						wx.getWifiList({
							success(res2) {
								wx.onGetWifiList(res3 => {
									let temp = [];
									res3.wifiList.forEach(w=>{
										if(w.SSID){
											let exit = temp.find(t=>t.SSID===w.SSID);
											if(!exit) temp = [...temp,w]
										}
									})
									that.$nextTick(()=>{
										let wifi = temp.find(t=>t.SSID.indexOf('Xiaozhi')>-1)
										if(wifi){
											that.deviceWifi = wifi;
											that.show = true;
										}else{
											that.nodevice = true;
										}
									})
								})
							},
							fail: (err2) => {
								that.$showModal("getWifiList:err:"+JSON.stringify(err2))
							}
						})
					},
					fail: (err) => {
						that.$showModal("startWifi:err:"+JSON.stringify(err))
					}
				})
			},
			searchAgain(){
				this.nodevice = false;
				this.deviceModelDeal();
			},
			connectWiFi(){
				if(!this.flag) return
				this.flag = false;
				uni.showLoading({
					title:'热点连接中'
				})
				let that = this;
				wx.connectWifi({
					SSID: this.deviceWifi.SSID,
					password: '',
					success: (res) => {
						uni.hideLoading();
						that.flag = true;
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pagesMy/wifiSet'
							})
						},2000)
					},
					fail: (err) => {
						uni.hideLoading();
						that.flag = true;
						that.$showModal("connectWifi:err:"+JSON.stringify(err))
					}
				});
			}
		}
	}
</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: 104rpx;
			}
			.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: 110rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>