|
@@ -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>
|