AiToyCXWx/pagesMy/wifiConnect.vue

<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="@/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="@/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>