Quellcode durchsuchen

配网最新需求修改

htc vor 2 Tagen
Ursprung
Commit
405ff44b7d
13 geänderte Dateien mit 706 neuen und 419 gelöschten Zeilen
  1. 5 0
      App.vue
  2. 7 1
      pages.json
  3. 5 7
      pagesMy/deviceAdd.vue
  4. 0 226
      pagesMy/wifi.vue
  5. 178 0
      pagesMy/wifiConnect.vue
  6. 304 0
      pagesMy/wifiSearch.vue
  7. 207 185
      pagesMy/wifiSet.vue
  8. BIN
      static/connect.png
  9. BIN
      static/connect_off.png
  10. BIN
      static/pwd_hide.png
  11. BIN
      static/pwd_show.png
  12. BIN
      static/refreash.png
  13. BIN
      static/wifi.png

+ 5 - 0
App.vue

@@ -120,6 +120,11 @@
 	  align-items: center;
 	  justify-content: center;
 	}
+	.adffcac{
+	  display: flex;
+	  flex-direction: column;
+	  align-items: center;
+	}
 	.adffcacjb{
 	  display: flex;
 	  flex-direction: column;

+ 7 - 1
pages.json

@@ -112,7 +112,13 @@
 					}
 				},
 				{
-					"path": "wifi",
+					"path": "wifiSearch",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "wifiConnect",
 					"style": {
 						"navigationStyle": "custom"
 					}

+ 5 - 7
pagesMy/deviceAdd.vue

@@ -16,19 +16,19 @@
 		</div>
 		<div class="steps">
 			<div class="item">
-				<div class="yuan"></div>
+				<image class="yuan" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/7942575f-4288-4109-9a55-2a48c526530c.png"></image>
 				<p>首次开机设备将会自动进入配网模式</p>
 			</div>
 			<div class="item">
-				<div class="yuan"></div>
+				<image class="yuan" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/b6716138-07a5-42f9-86b3-b9517e64ffe8.png"></image>
 				<p>选择<span>"xiaozhi"</span>Wi-Fi热点,连接成功</p>
 			</div>
 			<div class="item">
-				<div class="yuan"></div>
+				<image class="yuan" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/01707d1d-6a11-4001-9db2-6680f5f2b9c9.png"></image>
 				<p>选择网络,输入Wi-Fi密码,设备配网成功</p>
 			</div>
 			<div class="item">
-				<div class="yuan"></div>
+				<image class="yuan" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/42cb08bf-b7a9-4d54-a1b0-eff9e1afca9d.png"></image>
 				<p>扫描设备或说明书上的二维码,绑定设备成功</p>
 			</div>
 		</div>
@@ -46,7 +46,7 @@
 		methods:{
 			startWiFi(){
 				uni.navigateTo({
-					url:'/pagesMy/wifi'
+					url:'/pagesMy/wifiSearch'
 				})
 			},
 			showSetMemo(){
@@ -133,8 +133,6 @@
 					width: 32rpx;
 					height: 32rpx;
 					border-radius: 50%;
-					border: 2rpx solid #C7C7C7;
-					background: #FFFFFF;
 					box-shadow: 0 0 4rpx 4rpx #FFFFFF;
 					position: absolute;
 					left: -48rpx;

+ 0 - 226
pagesMy/wifi.vue

@@ -1,226 +0,0 @@
-<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/06/03/cf1dc7cd-5583-4d10-be10-100f95bdae3f.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>

+ 178 - 0
pagesMy/wifiConnect.vue

@@ -0,0 +1,178 @@
+<template>
+	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='配置网络'></cus-header>
+		<div class="title">设备配网&绑定</div>
+		<div class="tip">服务器需要对设备进行配置,网络不好的情况,可能需要写时间,请耐心等待。</div>
+		<div class="box adffcacjc">
+			<!-- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/22b84dc0-14f7-40eb-94bd-04908bd0db42.png"></image> -->
+			<image src="@/static/connect.png"></image>
+			<div class="text">正在连接设备</div>
+			<div class="memo">连接过程请勿关闭小程序或者设备</div>
+		</div>
+		<u-popup :show="show" :round="56" mode="center" @close="close">
+			<div class="fail_box adffcacjc">
+				<!-- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/3b872bd3-d82f-4f0a-802e-dde0df547f0d.png"></image> -->
+				<image src="@/static/connect_off.png"></image>
+				<text>网络连接失败</text>
+				<p>请检查你的网络连接后重试</p>
+				<div class="btns adfacjb">
+					<div class="qx_btn" @tap="goBack">返回</div>
+					<div class="zt_btn" @tap="toTryAgain">重试</div>
+				</div>
+				
+			</div>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				wifiSSID:'',
+				wifiPWD:'',
+				show:false
+			}
+		},
+		onLoad(option) {
+			this.wifiSSID = option?.wifiSSID;
+			this.wifiPWD = option?.wifiPWD;
+			this.connectWifi();
+		},
+		methods:{
+			connectWifi(){
+				let that = this;
+				wx.request({
+					url:'http://192.168.4.1/submit',
+					method:'POST',
+					data:{
+						ssid:that.wifiSSID,
+						password:that.wifiPWD
+					},
+					success:res=>{
+						if(res.errMsg!=='request:ok'||!res.data.success){
+							that.show = true;
+							return
+						}
+						wx.request({
+							url:'http://192.168.4.1/reboot',
+							method:'POST',
+							success:res2=>{
+								if(res2.errMsg!=='request:ok'){
+									that.$showToast('设备重启失败')
+									return
+								} 
+								setTimeout(()=>{
+									uni.navigateTo({
+										url:'/pagesMy/wifiSuccess'
+									})
+								},1000)
+							},
+							fail:err2=>{
+								that.$showModal("reboot:err:"+JSON.stringify(err2))
+							}
+						})
+					},
+					fail:err=>{
+						that.show = true;
+						that.$showModal("submit:err:"+JSON.stringify(err))
+					}
+				})
+			},
+			goBack(){
+				uni.redirectTo({
+					url:'/pagesMy/wifiSearch'
+				})
+			},
+			toTryAgain(){
+				this.show = false;
+				this.connectWifi();
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.page{
+		padding: 0 40rpx 40rpx;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		.title{
+			font-family: PingFang-SC, PingFang-SC;
+			font-weight: bold;
+			font-size: 36rpx;
+			color: #111111;
+			line-height: 36rpx;
+			margin-top: 64rpx;
+		}
+		.tip{
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 26rpx;
+			color: #111111;
+			line-height: 40rpx;
+			margin-top: 30rpx;
+		}
+		.box{
+			margin-top: 154rpx;
+			image{
+				width: 240rpx;
+				height: 309rpx;
+			}
+			.text{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #111111;
+				line-height: 36rpx;
+				text-align: center;
+				margin-top: 43rpx;
+			}
+			.memo{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #7C8592;
+				line-height: 42rpx;
+				text-align: center;
+				margin-top: 30rpx;
+			}
+		}
+		
+		.fail_box{
+			width: 670rpx;
+			background: #FFFFFF;
+			border-radius: 28rpx;
+			padding: 34rpx 60rpx 54rpx;
+			box-sizing: border-box;
+			image{
+				width: 232rpx;
+				height: 232rpx;
+			}
+			text{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 30rpx;
+				color: #333333;
+				line-height: 42rpx;
+				margin-top: 10rpx;
+			}
+			p{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #A6A6A6;
+				line-height: 24rpx;
+				margin-top: 24rpx;
+				text-align: center;
+			}
+			.btns{
+				width: 100%;
+				margin-top: 40rpx;
+				&>div{
+					width: calc(50% - 15rpx);
+				}
+			}
+		}
+	}
+</style>

+ 304 - 0
pagesMy/wifiSearch.vue

@@ -0,0 +1,304 @@
+<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>

+ 207 - 185
pagesMy/wifiSet.vue

@@ -1,59 +1,88 @@
 <template>
 	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
-		<cus-header title='WiFi配置' bgColor="transparent"></cus-header>
-		<div class="box">
-			<div class="b_top adffcacjc">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/cf1dc7cd-5583-4d10-be10-100f95bdae3f.png"></image>
-				<text>WiFi配置</text>
-			</div>
-			<div class="b_pre">
-				<div class="bp_text">SSID:</div>
-				<div class="bp_inp">
-					<input type="text" v-model="wifiSSID">
+		<cus-header title='配置网络'></cus-header>
+		<div class="title">选择设备要加入的Wi-Fi</div>
+		<div class="tip">设备仅支持使用2.4Hz Wi-Fi连接使用</div>
+		<div class="items">
+			<div class="item adfacjb">
+				<div class="il">
+					<input type="text" v-model="wifiSSID" placeholder="网络名称" placeholder-class="ph">
 				</div>
+				<div class="ir" @tap="toSelectWifi">选择Wi-Fi</div>
 			</div>
-			<div class="b_pre">
-				<div class="bp_text">密码:</div>
-				<div class="bp_inp">
-					<input type="password" v-model="wifiPwd">
+			<div class="item adfacjb">
+				<div class="il">
+					<input :password="isPwd" v-model="wifiPWD" placeholder="请输入Wi-Fi密码" placeholder-class="ph">
+				</div>
+				<div class="iimgs">
+				<!-- 	<image @tap="changePwd" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/a2de3eb1-eb01-4354-bdba-5795ebb42055.png" v-if="isPwd"></image>
+					<image @tap="changePwd" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/b8584b44-b7ba-44b7-b7f6-ed44d9d6ef83.png" v-else></image> -->
+					<image @tap="changePwd" src="@/static/pwd_hide.png" v-if="isPwd"></image>
+					<image @tap="changePwd" src="@/static/pwd_show.png" v-else></image>
 				</div>
 			</div>
-			<div class="zt_btn" @tap="toConnectWiFi">连接</div>
 		</div>
-		<div class="box">
-			<div class="b_title">从下面列表选择2.4GWiFi:</div>
-			<div class="b_wifi adfac" v-for="(item,index) in wifi2gList" :key="index" @tap="toCode(item)">
-				<text>{{item.ssid}}</text>
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/2dc58623-28e0-47ef-96a1-44c735d7b472.png"></image>
-			</div>
+		<div class="zt_btn" @tap="connectWifi">连接</div>
+		<div class="memo">
+			<p>Wi-Fi密码名称和密码输入错误是最常见的失败原因之一,请仔细检查。</p>
+			<p class="tip">密码必须至少包含8个字符</p>
 		</div>
-		<u-popup :show="show" mode="center" @close="close">
-			<div class="fail_box adffcacjc">
-				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/3b872bd3-d82f-4f0a-802e-dde0df547f0d.png"></image>
-				<text>网络连接失败</text>
-				<p>请检查你的网络设置或密码后刷新</p>
-				<div class="zt_btn" @tap="toTryAgain">重试</div>
+		<u-popup :show="show" :round="56" mode="center" @close="show=false">
+			<div class="wifis">
+				<div class="top adfacjb">
+					<div class="tl">选择WiFi</div>
+					<div class="tr adfac" @tap="initWiFi">
+						<!-- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/0ce97fb7-ae7a-4980-8a0f-d75e4b01b6c4.png"></image> -->
+						<image src="@/static/refreash.png"></image>
+						<text>刷新</text>
+					</div>
+				</div>
+				<div class="list" v-if="wifiList.length">
+					<div class="item adfacjb" v-for="(item,index) in wifiList" :key="index">
+						<div class="il adfac">
+							<!-- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/f04db000-0570-42ae-8bf6-97088658fefd.png"></image> -->
+								<image src="@/static/wifi.png"></image>
+							<text>{{item.ssid}}</text>
+						</div>
+						<div class="ir" @tap="selectWifi(item)">选择</div>
+					</div>
+				</div>
+				<template v-else>
+					<page-empty></page-empty>
+				</template>
 			</div>
 		</u-popup>
 	</view>
 </template>
 
 <script>
+	import pageEmpty from '@/components/pageEmpty/index.vue'
 	export default {
+		components:{pageEmpty},
 		data(){
 			return {
 				wifiSSID:'',
-				wifiPwd:'',
-				wifi2gList:[],
+				wifiPWD:'',
+				isPwd:true,
 				show:false,
-				tcp:'',
-				flag:true
+				wifiList:[]
 			}
 		},
-		onLoad() {
-			this.initWiFi();
-		},
 		methods:{
+			changePwd(){
+				this.isPwd = !this.isPwd;
+			},
+			connectWifi(){
+				if(!this.wifiSSID) return this.$showToast('请选择Wi-Fi')
+				if(!this.wifiPWD) return this.$showToast('请输入Wi-Fi密码')
+				uni.navigateTo({
+					url:`/pagesMy/wifiConnect?wifiSSID=${this.wifiSSID}&wifiPWD=${this.wifiPWD}`
+				})
+			},
+			toSelectWifi(){
+				this.show = true;
+				this.initWiFi();
+			},
 			initWiFi(){
 				uni.showLoading({
 					title:'获取WiFi列表中'
@@ -62,7 +91,6 @@
 				wx.request({
 					url:'http://192.168.4.1/scan',
 					success:res=>{
-						console.log(res,'res');
 						uni.hideLoading();
 						if(res.errMsg==='request:ok'){
 							let temp = [];
@@ -73,7 +101,7 @@
 								}
 							})
 							that.$nextTick(()=>{
-								that.wifi2gList = temp;
+								that.wifiList = temp;
 								that.$forceUpdate();
 								uni.hideLoading();
 							})
@@ -84,72 +112,9 @@
 					}
 				})
 			},
-			toConnectWiFi(){
-				if(!this.wifiSSID) return this.$showToast('请从下方选择一个wifi进行连接')
-				if(!this.wifiPwd) return this.$showToast('请输入密码')
-				if(!this.flag) return
-				this.flag  = false;
-				uni.showLoading({
-					title:'联网中...'
-				})
-				let that = this;
-				wx.request({
-					url:'http://192.168.4.1/submit',
-					method:'POST',
-					data:{
-						ssid:this.wifiSSID,
-						password:this.wifiPwd
-					},
-					success:res2=>{
-						console.log(res2,'res2');
-						if(res2.errMsg!=='request:ok'||!res2.data.success){
-							uni.hideLoading();
-							that.show = true;
-							that.flag = true;
-							return
-						}
-						wx.request({
-							url:'http://192.168.4.1/reboot',
-							method:'POST',
-							success:res3=>{
-								if(res3.errMsg!=='request:ok'){
-									that.$showToast('设备重启失败')
-									return
-								} 
-								that.flag = true;
-								uni.hideLoading();
-								setTimeout(()=>{
-									uni.navigateTo({
-										url:'/pagesMy/wifiSuccess'
-									})
-								},2000)
-							},
-							fail:err3=>{
-								console.log(err3,'err3');
-								that.flag = true;
-								that.$showModal(JSON.stringify(err3));
-								uni.hideLoading();
-							}
-						})
-					},
-					fail:err2=>{
-						console.log(err2,'err2');
-						that.flag = true;
-						that.$showModal(JSON.stringify(err2));
-						uni.hideLoading();
-					}
-				})
-			},
-			close(){
-				this.show = false;
-			},
-			toCode(item){
+			selectWifi(item){
 				this.wifiSSID = item.ssid;
-			},
-			toTryAgain(){
 				this.show = false;
-				this.flag = true;
-				this.toConnectWiFi();
 			}
 		}
 	}
@@ -157,109 +122,166 @@
 
 <style scoped lang="less">
 	.page{
-		background: #F7F7F7;
-		padding: 0 30rpx 30rpx;
+		padding: 0 40rpx 250rpx;
 		box-sizing: border-box;
-		.box{
-			background: #FFFFFF;
-			border-radius: 16rpx;
-			padding: 40rpx 30rpx;
-			margin-top: 20rpx;
-			.b_top{
-				image{
-					width: 114rpx;
-					height: 114rpx;
+		background: #FFFFFF;
+		&>.title{
+			font-family: PingFang-SC, PingFang-SC;
+			font-weight: bold;
+			font-size: 36rpx;
+			color: #111111;
+			line-height: 36rpx;
+			margin-top: 64rpx;
+		}
+		&>.tip{
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 26rpx;
+			color: #111111;
+			line-height: 32rpx;
+			margin-top: 36rpx;
+		}
+		.items{
+			margin-top: 96rpx;
+			.item{
+				margin-top: 80rpx;
+				padding-bottom: 30rpx;
+				border-bottom: 1rpx solid #E2E2E2;
+				.il{
+					width: calc(100% - 180rpx);
+					input{
+						border: none;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #333333;
+						line-height: 42rpx;
+					}
 				}
-				text{
+				.ir{
+					width: 160rpx;
+					height: 64rpx;
+					background: #D9F159;
+					border-radius: 32rpx;
 					font-family: PingFang-SC, PingFang-SC;
 					font-weight: bold;
-					font-size: 40rpx;
-					color: #111111;
-					line-height: 40rpx;
+					font-size: 26rpx;
+					color: #252525;
+					line-height: 64rpx;
 					text-align: center;
-					margin-top: 30rpx;
+				}
+				.iimgs{
+					image{
+						width: 36rpx;
+						height: 36rpx;
+					}
 				}
 			}
-			.b_pre{
-				margin-top: 40rpx;
-				.bp_text{
+		}
+		.zt_btn{
+			margin-top: 100rpx;
+		}
+		.memo{
+			width: calc(100% - 80rpx);
+			position: fixed;
+			left: 40rpx;
+			bottom: 100rpx;
+			p{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 600;
+				font-size: 26rpx;
+				color: #111111;
+				line-height: 40rpx;
+				&.tip{
+					font-weight: 400;
+					color: #7C8592;
+					line-height: 42rpx;
+					margin-top: 8rpx;
+				}
+			}
+		}
+		.ph{
+			color: #7C8592;
+		}
+	
+		.wifis{
+			width: 670rpx;
+			max-height: 740rpx;
+			overflow: hidden;
+			.top{
+				margin-top: 14rpx;
+				padding: 40rpx;
+				border-bottom: 1rpx solid #E2E2E2;
+				.tl{
 					font-family: PingFang-SC, PingFang-SC;
 					font-weight: bold;
-					font-size: 30rpx;
+					font-size: 36rpx;
 					color: #111111;
-					line-height: 32rpx;
+					line-height: 36rpx;
 				}
-				.bp_inp{
+				.tr{
+					image{
+						width: 36rpx;
+						height: 36rpx;
+					}
+					text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 32rpx;
+						color: #7C8592;
+						line-height: 36rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
+			.list{
+				height: 609rpx;
+				overflow-y: auto;
+				padding: 30rpx 40rpx;
+				.item{
 					width: 100%;
-					height: 90rpx;
+					height: 120rpx;
 					border-radius: 16rpx;
 					border: 1rpx solid #E2E2E2;
-					margin-top: 24rpx;
-					padding: 24rpx 40rpx;
+					margin-top: 20rpx;
+					padding: 0 24rpx;
 					box-sizing: border-box;
-					input{
-						border: none;
+					&:first-child{
+						margin-top: 0;
+					}
+					.il{
+						width: calc(100% - 134rpx);
+						image{
+							width: 42rpx;
+							height: 42rpx;
+						}
+						text{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 30rpx;
+							color: #252525;
+							line-height: 30rpx;
+							margin-left: 20rpx;
+							width: calc(100% - 62rpx);
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+					.ir{
+						width: 114rpx;
+						height: 60rpx;
+						background: #D9F159;
+						border-radius: 32rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #252525;
+						line-height: 60rpx;
+						text-align: center;
 					}
 				}
 			}
-			.zt_btn{
-				margin-top: 40rpx;
-			}
-		
-			.b_title{
-				font-family: PingFang-SC, PingFang-SC;
-				font-weight: bold;
-				font-size: 32rpx;
-				color: #111111;
-				line-height: 45rpx;
-			}
-			.b_wifi{
-				margin-top: 48rpx;
-				text{
-					font-family: PingFangSC, PingFang SC;
-					font-weight: 400;
-					font-size: 30rpx;
-					color: #0066FE;
-					line-height: 30rpx;
-				}
-				image{
-					width: 36rpx;
-					height: 36rpx;
-					margin-left: 10rpx;
-				}
-			}
-		}
-		
-		.fail_box{
-			width: 570rpx;
-			background: #FFFFFF;
-			border-radius: 28rpx;
-			padding: 34rpx 125rpx 54rpx;
-			box-sizing: border-box;
-			image{
-				width: 232rpx;
-				height: 232rpx;
-			}
-			text{
-				font-family: PingFangSC, PingFang SC;
-				font-weight: 400;
-				font-size: 30rpx;
-				color: #333333;
-				line-height: 42rpx;
-				margin-top: 10rpx;
-			}
-			p{
-				font-family: PingFangSC, PingFang SC;
-				font-weight: 400;
-				font-size: 24rpx;
-				color: #A6A6A6;
-				line-height: 24rpx;
-				margin-top: 24rpx;
-				text-align: center;
-			}
-			.zt_btn{
-				margin-top: 40rpx;
-			}
 		}
 	}
 </style>

BIN
static/connect.png


BIN
static/connect_off.png


BIN
static/pwd_hide.png


BIN
static/pwd_show.png


BIN
static/refreash.png


BIN
static/wifi.png