AiToyCXWx/pagesMy/wifiSet.vue

<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="http://106.54.209.120:8188/static/wifi.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">
				</div>
			</div>
			<div class="b_pre">
				<div class="bp_text">密码:</div>
				<div class="bp_inp">
					<input type="password" v-model="wifiPwd">
				</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="http://106.54.209.120:8188/static/lock.png"></image>
			</div>
		</div>
		<u-popup :show="show" mode="center" @close="close">
			<div class="fail_box adffcacjc">
				<image src="http://106.54.209.120:8188/static/connect_off.png"></image>
				<text>网络连接失败</text>
				<p>请检查你的网络设置后刷新</p>
				<div class="zt_btn" @tap="toTryAgain">重试</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				wifiSSID:'',
				wifiPwd:'',
				wifi2gList:[],
				show:false,
				tcp:'',
				flag:true
			}
		},
		onLoad() {
			this.initWiFi();
		},
		methods:{
			initWiFi(){
				uni.showLoading({
					title:'获取WiFi列表中'
				})
				let that = this;
				wx.request({
					url:'http://192.168.4.1/scan',
					success:res=>{
						uni.hideLoading();
						if(res.errMsg==='request:ok'){
							let temp = [];
							res.data.forEach(w=>{
								if(w.ssid&&w.ssid.indexOf('Xiaozhi')<0){
									let exit = temp.find(t=>t.ssid===w.ssid);
									if(!exit) temp = [...temp,w]
								}
							})
							that.$nextTick(()=>{
								that.wifi2gList = temp;
								that.$forceUpdate();
								uni.hideLoading();
							})
						}
					},
					fail:err=>{
						uni.hideLoading();
					}
				})
			},
			toConnectWiFi(){
				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=>{
						if(res2.errMsg!=='request:ok'){
							that.show = true;
							return
						}
						wx.request({
							url:'http://192.168.4.1/reboot',
							method:'POST',
							success:res3=>{
								if(res3.errMsg!=='request:ok') return that.$showToast('设备重启失败')
								that.flag = true;
								uni.hideLoading();
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pagesMy/wifiSuccess'
									})
								},2000)
							},
							fail:err3=>{
								that.flag = true;
								uni.hideLoading();
							}
						})
					},
					fail:err2=>{
						that.flag = true;
						uni.hideLoading();
					}
				})
			},
			close(){
				this.show = false;
			},
			toCode(item){
				this.wifiSSID = item.ssid;
			},
			toTryAgain(){
				this.show = false;
				this.toConnectWiFi();
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F7F7F7;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		.box{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;
			.b_top{
				image{
					width: 114rpx;
					height: 114rpx;
				}
				text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: center;
					margin-top: 30rpx;
				}
			}
			.b_pre{
				margin-top: 40rpx;
				.bp_text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					line-height: 32rpx;
				}
				.bp_inp{
					width: 100%;
					height: 90rpx;
					border-radius: 16rpx;
					border: 1rpx solid #E2E2E2;
					margin-top: 24rpx;
					padding: 24rpx 40rpx;
					box-sizing: border-box;
					input{
						border: none;
					}
				}
			}
			.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;
			}
			.zt_btn{
				margin-top: 40rpx;
			}
		}
	}
</style>