AiToyCXWx/pages/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="@/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">
				</div>
			</div>
			<div class="b_pre">
				<div class="bp_text">密码:</div>
				<div class="bp_inp">
					<input type="password">
				</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">
				<text>{{'REITH SPAEC（-40 dBm）'}}</text>
				<image src="@/static/lock.png"></image>
			</div>
		</div>
		<u-popup :show="show" mode="center" @close="close">
			<div class="fail_box adffcacjc">
				<image src="@/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 {
				wifi2gList:[1,1,1],
				show:false
			}
		},
		methods:{
			toConnectWiFi(){
				this.show = true;
			},
			toTryAgain(){
				this.show = false;
				uni.showToast({
					icon:'success',
					title:'网络连接成功'
				})
			},
			close(){
				this.show = false;
			},
			toCode(){
				uni.scanCode({
					success: (res) => {
						console.log(res,'res');
						uni.navigateTo({
							url:'/pages/code'
						})
					},
					fail: (err) => {
						console.log(err,'err');
					}
				})
				
			}
		}
	}
</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>