feature：修改wifi界面的UI

pages/setWifi/setWifi.js

@@ -6,11 +6,26 @@ import store from '../../utils/store';
 import { BtCmd } from '../../devices/bluetooth/bt_cmd';
 Page({
   data: {
+    navbarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '猫王音箱 - WI-FI配置', //导航栏 中间的标题
+      // callback: true,
+    },
     wifiName: '',
     wifiPassword: '',
     _otaUrl: "",
+    eyeIconSrc: '../../img/yj0.png',
+    passwordType: true,
+    _onNavigateBack: false,
+
   },
+  callback() {
+    console.log("返回");
+    wx.navigateBack({
+      delta: 1
+    });
 
+  },
   getConnectedWifi: function () {
     const that = this;
     let wifiDic = store.getStore("wifiInfo")
@@ -62,6 +77,17 @@ Page({
       wifiPassword: e.detail.value
     });
   },
+
+  togglePasswordVisibility: function () {
+    const passwordType = !this.data.passwordType;
+    // const newType = currentType === 'password' ? 'text' : 'password';
+    const newIconSrc = passwordType ? '../../img/yj0.png' : '../../img/yj1.png';
+
+    this.setData({
+      passwordType: passwordType,
+      eyeIconSrc: newIconSrc
+    });
+  },
   sendWiFiInfo(wifiName, pwd) {
     // [0x22, (wifiList.length + pwdList.length + 6), 0x33, (wifiList.length), (wifiList), 0x44, (pwdList)];
 
@@ -72,7 +98,9 @@ Page({
       wx.hideLoading()
       return;
     }
-
+    wx.showLoading({
+      title: 'wifi连接中',
+    })
     let result = BtCmd.sendWiFiInfo(wifiName, pwd)
 
     // _ble.send({ cmd: result });
@@ -112,6 +140,18 @@ Page({
       }
     }, _this)
   },
+  wifiPageSuccess() {
+    this.data._onNavigateBack = true
+  },
+  // 获取保存的 Wi-Fi 账号和密码
+  getSavedWiFiInfo() {
+    const wifiName = wx.getStorageSync('wifiName') || '';
+    const wifiPassword = wx.getStorageSync('wifiPassword') || '';
+    this.setData({
+      wifiName: wifiName,
+      wifiPassword: wifiPassword
+    });
+  },
   onLoad: function (options) {
     let param = options.param ?? "{}";
     let url = JSON.parse(param).url ?? "";
@@ -120,6 +160,9 @@ Page({
     this.addNotification()
   },
   onUnload() {
+    if (!this.data._onNavigateBack) {
+      BtHelper.getInstance().otaCmd(2)
+    }
     EventManager.removeNotification(CmdEvent.eventName)
   },
 });

pages/setWifi/setWifi.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "nav-bar": "./../components/navbar/navbar"
+  }
 }

pages/setWifi/setWifi.wxml

@@ -1,12 +1,24 @@
 <!-- pages/setWifi/setWifi.wxml -->
+<nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" bind:callback="callback" navbarData='{{navbarData}}'></nav-bar>
 <view class="container">
+    <view class="wifi_icon">
+        <image src="../../images/common/wifi.png" mode="aspectFit"></image>
+    </view>
+    <view class="title">配置设备Wi-Fi</view>
     <view class="input-group">
-        <label class="label">Wi-Fi 名称</label>
-        <input class="input" type="text" placeholder="请输入Wi-Fi名称" value="{{wifiName}}" bindinput="onWifiNameInput" />
+        <view class="input-with-icon">
+            <image class="icon" src="../../images/common/wifi_icon.png" mode="aspectFit"></image>
+            <input class="input" type="text" placeholder="请输入Wi-Fi名称" value="{{wifiName}}" bindinput="onWifiNameInput" />
+        </view>
     </view>
     <view class="input-group">
-        <label class="label">密码</label>
-        <input class="input" type="password" placeholder="请输入密码" value="{{wifiPassword}}" bindinput="onWifiPasswordInput" />
+        <view class="input-with-icon">
+            <image class="icon" src="../../images/common/lock.png" mode="aspectFit"></image>
+            <!-- <input class="input" type="{{passwordType}}" placeholder="请输入密码" value="{{wifiPassword}}" bindinput="onWifiPasswordInput" /> -->
+            <input class="input" password="{{passwordType}}" bindinput="onWifiPasswordInput" placeholder="请输入WiFi密码" value="{{wifiPassword}}" />
+            <image class="eye-icon" src="{{eyeIconSrc}}" mode="aspectFit" bindtap="togglePasswordVisibility"></image>
+        </view>
     </view>
-    <button class="confirm-button" bindtap="onConfirm">确认</button>
+    <view class="title_tips">不支持5G、酒店、机场等需要认证的WI-FI网络</view>
+    <view class="confirm-button" bindtap="onConfirm">确认</view>
 </view>

pages/setWifi/setWifi.wxss

@@ -1,32 +1,89 @@
 /* pages/setWifi/setWifi.wxss */
-/* pages/setWifi/setWifi.wxss */
 .container {
-    padding: 20px;
-    margin-top: 88rpx;
+    padding-inline: 20rpx;
+}
+
+
+.wifi_icon {
+    margin-top: 40rpx;
+    width: 100%;
+    height: 200rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.wifi_icon>image {
+    width: 229rpx;
+    height: 200rpx;
+}
+
+.title {
+    margin-top: 20px;
+    font-size: 40rpx;
+    color: #333333;
+    margin-bottom: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
 }
 
 .input-group {
     margin-bottom: 15px;
+    height: 80rpx;
+    border-radius: 40rpx;
 }
 
-.label {
-    display: block;
-    height: 88rpx;
+.input-with-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.icon {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 10px;
+    color: black;
+}
+
+.eye-icon {
+    width: 20px;
+    height: 20px;
+    margin-left: 10px;
 }
 
 .input {
-    border: 1px solid #ccc;
-    padding: 10px;
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+}
+
+.title_tips {
+    margin-top: 40rpx;
     width: 100%;
-    box-sizing: border-box;
-    height: 88rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #333333;
 }
 
 .confirm-button {
-    background-color: #1aad19;
+    margin-top: 60rpx;
+    background-color: rgb(211, 118, 88);
     color: white;
-    padding: 10px;
     border: none;
-    width: 100%;
-    border-radius: 5px;
+    height: 88rpx;
+    margin-inline: 80rpx;
+    border-radius: 44rpx;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
 }