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:'',
			}
		},
		onLoad() {
			this.initWiFi();
		},
		methods:{
			initWiFi(){
				uni.showLoading({
					title:'获取WiFi列表中'
				})
				try{
					// wx.request({
					// 	url:'http://192.168.4.1/scan',
					// 	success:res=>{
					// 		console.log(res,'res');
					// 		uni.hideLoading();
					// 	},
					// 	fail:err=>{
					// 		console.log(err,'err');
					// 		uni.hideLoading();
					// 	}
					// })
				}catch(e){
					console.log(e,'e');
					uni.hideLoading();
				}
				// let that = this;
				// wx.startWifi({
				// 	complete (res) {
				// 		wx.getWifiList({
				// 			success(res2) {
				// 				wx.onGetWifiList(res3=> {
				// 					let temp = [];
				// 					res3.wifiList.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) {
				// 				console.log(err,'err')
				// 			}
				// 		})
				// 	}
				// })
			},
			toConnectWiFi(){
				uni.navigateTo({
					url:'/pagesMy/wifiSuccess'
				})
				return
				
				console.log(111);
				console.log(this.wifiSSID,'this.wifiSSID');
				console.log(this.wifiPwd,'this.wifiPwd');
				uni.connectWifi({
					SSID: this.wifiSSID,
					password: this.wifiPwd,
					success: (res) => { 
						console.log(res,'res');
						this.show = false;
						this.$showToast('网络连接成功,开始TCP链接');
						this.connectTCP();
					},
					fail: (err) => { 
						console.log(err,'err');
						this.show = true;
					}
				});
			},
			toTryAgain(){
				this.toConnectWiFi();
			},
			// 链接TCP
			connectTCP() {
				console.log(222);
				try{
					this.tcp = wx.createTCPSocket();
					this.tcp.connect({
					  address: '192.168.4.1',
					  // port: 8266,
					});
					this.$nextTick(()=>{
						this.sendDataTCP();
					})
				}catch(e){
					console.log(e,'e');
					this.$showModal(JSON.stringify(e))
				}
			},
			// 发送命令-账号密码
			sendDataTCP() {
				console.log(333);
				this.tcp.write(`AT+CJWAP=${this.wifiSSID},${this.wifiPwd}`);
				this.$nextTick(()=>{
					this.sendRST();
				})
			},
			// 发送命令-重启
			sendRST(){
				console.log(444);
				this.tcp.write('AT+RST');
				this.$showToast('配置成功，设备已重启')
			},
			close(){
				this.show = false;
			},
			toCode(item){
				this.wifiSSID = item.SSID;
			}
		}
	}
</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>