AiToyCXWx/pagesMy/wifi.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='无线局域网' bgColor="transparent"></cus-header>
		<div class="box">
			<div class="info adffcacjc">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/f1cc6aee-2d47-46f0-ae29-3ef4923777cb.png"></image>
				<text>无线局域网</text>
				<p>接入无线局域网、查看可用网络，并管理加入网络及附近热点设置。</p>
			</div>
			<div class="pre adfacjb">
				<div class="p_l">无线局域网</div>
				<div class="p_r">
					<u-switch v-model="openWifi" size="46" activeColor="#5AC725"></u-switch>
				</div>
			</div>
			<div class="pre adfacjb" v-for="(item,index) in wifiList" :key="index" @tap="toSet(item)">
				<div class="p_l">
					<p>{{item.SSID}}</p>
					<span>{{item.secure?'高安全性':'低安全性'}}</span>
				</div>
				<div class="p_r"></div>
			</div>
		</div>
		<div class="box" v-if="myWifi">
			<div class="title">我的网络</div>
			<div class="pre adfacjb">
				<div class="p_l">{{myWifi}}</div>
				<div class="p_r"></div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				openWifi:true,
				wifiList:[],
				myWifi:'',
				platform:'',
				flag:true
			}
		},
		watch:{
			openWifi:{
				handler(newval,oldval){
					if(newval!==oldval){
						this.dealWifi(newval)
					}
				}
			}
		},
		onLoad() {
			this.getCurrentWifi();
			let sysInfo = wx.getSystemInfoSync();
			this.platform = sysInfo?.platform;
			if(this.platform=='ios'){
				uni.showModal({
					title:'温馨提示',
					content:'检测到您的手机为ios系统，即将自动跳转设置-微信，需要您在设置中打开无线局域网，等待获取到WiFi列表后返回小程序选择“Xiaozhi”开头的热点进行连接。',
					success: (res) => {
						if(res.confirm){
							this.dealWifi(true)
						}
					}
				})
			}else{
				this.dealWifi(true)
			}
		},
		onShow() {
			let sysInfo = wx.getSystemInfoSync();
			this.platform = sysInfo?.platform;
		},
		methods:{
			getCurrentWifi(){
				let that = this;
				wx.startWifi({
					success(res){
						wx.getConnectedWifi({
							success(res){
								if(res.errCode===0){
									that.myWifi = res.wifi?.SSID;
								}
							},
							fail: (err) => {
								if(err.errMsg.indexOf('getConnectedWifi:fail:wifi is disable')>-1) that.$showToast('WiFi未开启')
							}
						})
					}
				})
			},
			dealWifi(flag){
				let that = this;
				if(flag){
					uni.showLoading({
						title:'获取WiFi列表中'
					})
					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(()=>{
											that.wifiList = temp;
											that.$forceUpdate();
											uni.hideLoading();
										})
									})
								},
								fail: (err2) => {
									console.log(err2,'err2');
								}
							})
						},
						fail: (err) => {
							console.log(err,'err');
						}
					})
				}else{
					this.wifiList = [];
				} 
			},
			toSet(item){
				let that = this;
				if(item.SSID.indexOf('Xiaozhi-')>-1){
					if(!this.flag) return
					this.flag = false;
					uni.showLoading({
						title:'热点连接中'
					})
					wx.connectWifi({
						SSID: item.SSID,
						password: '',
						success: (resu) => {
							uni.hideLoading();
							this.flag = true;
							// if(resu.errCode===0||resu.errMsg==='connectWifi:ok'){
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pagesMy/wifiSet'
									})
								},2000)
							// }
						},
						fail: (err) => {
							uni.hideLoading();
							this.flag = true;
							console.log(err,'err:connectWifi');
						}
					});
				}else this.$showToast('请选择Xiaozhi开头的热点')
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #FFFFFF;
		padding: 0 31rpx 30rpx;
		box-sizing: border-box;
		
		.box{
			width: 100%;
			padding: 50rpx 30rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			
			.info{
				margin-bottom: 60rpx;
				image{
					width: 114rpx;
					height: 114rpx;
				}
				text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #111111;
					line-height: 40rpx;
					margin-top: 20rpx;
				}
				p{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					font-size: 34rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			
			.pre{
				padding: 20rpx 30rpx;
				border-top:1rpx solid #E5E5E5;
				.p_l{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #111111;
					line-height: 40rpx;
					display: flex;
					flex-direction: column;
					span{
						font-size: 26rpx;
					}
				}
			}
		
			.title{
				color: #666666;
				margin-bottom: 40rpx;
			}
		}
	}
</style>