wifi管理列表获取

src/components/center-modal.ux

@@ -1,11 +1,6 @@
 <template>
   <!-- 使用 stack 组件来实现弹窗的叠加效果 -->
   <stack class="modal-container" if="{{show}}">
-
-    <!-- 半透明背景遮罩 -->
-    <!-- 点击遮罩本身也会关闭弹窗 -->
-    <!-- <div class="modal-mask" @click="closeModal"></div> -->
-
     <!-- 弹窗内容区域 -->
     <div class="modal-content">
       <!-- 弹窗标题栏 -->
@@ -69,6 +64,8 @@
     justify-content: center;
     align-items: center;
     height: 90%;
+    background-color: rgba(0, 0, 0, 0.5);
+
   }
 
   /* 背景遮罩 */

src/pages/book-content/index.ux

@@ -62,7 +62,7 @@
           <image src="https://ytnovels.oss-cn-shanghai.aliyuncs.com/appStatic/images/back.svg" onclick="back"></image>
           <text>{{ bookTitle }}</text>
         </div>
-        <div class="middle" onclick="showOrHidePop">
+        <!-- <div class="middle" onclick="showOrHidePop">
           <div
             class="float-btn"
             onclick="changeNightMode"
@@ -74,10 +74,10 @@
             ></image>
             <image src="https://ytnovels.oss-cn-shanghai.aliyuncs.com/appStatic/images/moon.svg" else></image>
           </div>
-          <!-- <div class="float-btn" style="bottom: 180px;" onclick="text2Audio">
+          <div class="float-btn" style="bottom: 180px;" onclick="text2Audio">
             <image src="https://ytnovels.oss-cn-shanghai.aliyuncs.com/appStatic/images/earphone.svg"></image>
-          </div> -->
-        </div>
+          </div>
+        </div> -->
       </div>
       <div class="pop-layer" if="{{showCategory}}">
         <div class="footer">

src/pages/tools/wifiGuanLi/index.ux

@@ -1,12 +1,20 @@
+<import name="center-modal" src="../../../components/center-modal"></import>
+<import name="loading-progress" src="../../../components/loading-progress"></import>
 <template>
   <div class="content p-rel">
     <div style="padding-top: {{statusBarHeight}}px;"></div>
     <div class="box">
-      <text class="mgb-10">当前连接：YThuwai</text>
+      <text class="mgb-10">当前连接：{{ curWifi }}</text>
       <div class="listbox">
+        <!-- 快应用loading组件 -->
+        <loading-progress if="{{!curWifi}}" 
+            color="#399bfc"
+            style="transform: translateY(50px);">
+        </loading-progress>
         <div class="item"
              for="(index,wifi) in list">
           <div class="flex jc_between w">
+            <text class="iconfont" style="margin-right: 18px;">&#xe76c;</text>
             <text>{{wifi.SSID}}</text>
           </div>
           <text @click="connectedWifi(wifi)" class="{{wifi.status ? 'c_btn' : 'btn'}}">
@@ -15,9 +23,36 @@
         </div>
       </div>
     </div>
+    <center-modal
+      show="{{showModal}}"
+      title="输入密码"
+      @close="closeModal"
+      if="{{showModal}}"
+    >
+      <div class="popup_box">
+        <div>
+          <text class="text-24">请输入</text>
+          <text class="text-24" style="color: #399bfc;">"{{ curInfo.SSID }}"</text>
+          <text class="text-24">的密码</text>
+        </div>
+           <input
+            type="text"
+            id="search-input"
+            class="search-input"
+            placeholder="请输入密码"
+            value="{{wifiPwd}}"
+            onchange="change"
+          />
+          <div class="flex">
+            <div class="btn btn_sure">
+              <text style="color: #fff;" @click="sureConnected">连接WIFI</text> 
+            </div>
+          </div>
+        </div>
+    </center-modal>
     <text class="ADBox">
-    横幅广告
-  </text>
+      横幅广告
+    </text>
   </div>
   
 </template>
@@ -31,48 +66,142 @@ export default {
     return {
       statusBarHeight: 0,
       list: [
-        { "SSID": "YThuwai", "BSSID": "XX:XX:XX:XX:XX:XX", status: true },
-        { "SSID": "YtZhe", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
-        { "SSID": "DIRECT-GQDESKTOP2E4TVT1-msPR", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
-        { "SSID": "4-426", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
-        { "SSID": "Tech_xxx", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
-        { "SSID": "88888888-pZ", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
-        { "SSID": "ChinaNet-bG62", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
-        { "SSID": "GF-1", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
-        { "SSID": "GAIF", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
-        { "SSID": "boss", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
-        { "SSID": "ChinaNet-LJmh", "BSSID": "YY:YY:YY:YY:YY:YY", status: false },
-        { "SSID": "Home_WiFi", "BSSID": "XX:XX:XX:XX:XX:XX", status: false },
-        { "SSID": "Office_WiFi", "BSSID": "YY:YY:YY:YY:YY:YY", status: false }
-      ]
+        // { "SSID": "YThuwai", "BSSID": "XX:XX:XX:XX:XX:XX", status: true,secure:true },
+        // { "SSID": "YtZhe", "BSSID": "XX:XX:XX:XX:XX:XX", status: false,secure:true },
+        // { "SSID": "DIRECT-GQDESKTOP2E4TVT1-msPR", "BSSID": "YY:YY:YY:YY:YY:YY", status: false,secure:true },
+        // { "SSID": "4-426", "BSSID": "XX:XX:XX:XX:XX:XX", status: false,secure:true },
+        // { "SSID": "Tech_xxx", "BSSID": "YY:YY:YY:YY:YY:YY", status: false,secure:true },
+        // { "SSID": "88888888-pZ", "BSSID": "XX:XX:XX:XX:XX:XX", status: false,secure:true },
+        // { "SSID": "ChinaNet-bG62", "BSSID": "YY:YY:YY:YY:YY:YY", status: false,secure:true },
+        // { "SSID": "GF-1", "BSSID": "XX:XX:XX:XX:XX:XX", status: false,secure:true },
+        // { "SSID": "GAIF", "BSSID": "YY:YY:YY:YY:YY:YY", status: false,secure:true },
+        // { "SSID": "boss", "BSSID": "XX:XX:XX:XX:XX:XX", status: false,secure:true },
+        // { "SSID": "ChinaNet-LJmh", "BSSID": "YY:YY:YY:YY:YY:YY", status: false,secure:true },// signalStrength
+        // { "SSID": "Home_WiFi", "BSSID": "XX:XX:XX:XX:XX:XX", status: false,secure:true }
+      ],
+      cLength:0,
+      showModal: false,
+      curInfo:{},//当前选择的wifi信息
+      wifiPwd:'',
+      curConnectedWifi:{},// 当前连接的wifi
+      curWifi:'',// 当前连接的wifi名称
     }
   },
+  closeModal() {
+    this.wifiPwd = ''
+    this.showModal = false
+  },
+  change(e){
+    console.log('e',e)
+    this.wifiPwd = e.text
+  },
   onInit() {
     let that = this
-    wifi.getConnectedWifi({
-      success: function(data) {
-        console.log(`handling success: ${data.SSID}`)
+    wifi.scan({
+      success: function(e) {
+        console.log('scan success',e)
+         wifi.onscanned = function(data) {
+           data.wifiList = data.wifiList.map(item=>{
+             return {
+               status:false,
+               ...item
+             }
+           })
+           data.wifiList = data.wifiList.sort((a, b) => b.signalStrength - a.signalStrength)
+           that.list = data.wifiList.filter(item=>{ return item.SSID })
+           that.cLength = data.wifiList.length
+           wifi.getConnectedWifi({
+            success: function(data) {
+              //当前连接是在
+              that.curWifi = data.SSID
+              let index = that.list.findIndex(item=>{ return item.BSSID == data.BSSID }) 
+              that.curInfo = data
+              that.curConnectedWifi = data
+              that.list[index].status = true
+              console.log(`handling success: ${data.SSID}`)
+            },
+            fail: function(data, code) {
+              console.log(`handling fail, code = ${code}`)
+            }
+          })
+        }
+        // that.content = data
       },
       fail: function(data, code) {
         console.log(`handling fail, code = ${code}`)
       }
     })
   },
-    connectedWifi(wifi) {
-      // prompt.showToast({
-      //   message: '已连接'
-      // })
-      console.log('wifi',wifi)
-      this.list.forEach(item => item.status = false)
-      wifi.status = true
-      this.$set('list', this.list)
+  sureConnected(){
+    if(!this.wifiPwd){
+        prompt.showToast({message: '请输入密码' })
+        return
+      }
+      var that = this
+      prompt.showToast({ message: '连接中' })
+      wifi.connect({
+        SSID: that.curInfo.SSID,
+        BSSID: that.curInfo.BSSID,
+        password:that.wifiPwd,
+        success: function() {
+          console.log('connect wifi success')
+          prompt.showToast({ message: '连接成功' })
+          that.curConnectedWifi = wifi
+          that.list.forEach(item => item.status = false)
+          wifi.status = true
+        },
+        fail: function(data, code) {
+          prompt.showToast({ message: '连接失败' })
+          console.log(`handling fail, code = ${code}`)
+        }
+      })
+  },
+    connectedWifi(wifis) {
+      if(wifis.status){
+         prompt.showToast({ message: '已连接' })
+        return
+      }
+      if(wifis.secure){ // 需要密码
+        this.curInfo = wifis
+        this.curConnectedWifi = wifis
+        this.showModal = true
+      }else{
+          var that = this
+          wifi.connect({
+            SSID: that.curInfo.SSID,
+            BSSID: that.curInfo.BSSID,
+            success: function() {
+              console.log('connect wifi success')
+              prompt.showToast({ message: '连接成功' })
+              that.curConnectedWifi = wifis
+              that.list.forEach(item => item.status = false)
+              wifis.status = true
+            },
+            fail: function(data, code) {
+              prompt.showToast({ message: '连接失败' })
+              console.log(`handling fail, code = ${code}`)
+            }
+          })
+      }
+      // this.list.forEach(item => item.status = false)
+      // wifi.status = true
+      // that.$set('list', this.list)
     }
   }
 </script>
 
 <style lang="less">
+@font-face {
+  font-family: iconfont;
+  src: url("/assets/iconfont/iconfont.ttf");
+}
+.iconfont {
+  font-family: iconfont;
+}
+.text-24{
+  font-size: 24px;
+}
 .content {
-  height: 100%;
   flex-direction: column;
   padding: 28px;
   background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
@@ -80,8 +209,8 @@ export default {
 .box {
   background-color: #fff;
   border-radius: 30px;
-  height: 95%;
-  padding: 30px 28px;
+  min-height: 95%;
+  padding: 30px 28px 100px;
   flex-direction: column;
 }
 .listbox {
@@ -89,7 +218,8 @@ export default {
 }
 .item{
   justify-content: space-between;
-  margin-top: 25px;
+  padding: 25px 0; 
+  border-bottom: 1px solid #ccc;
 }
 .c_btn {
   background-color: #399bfc;
@@ -122,4 +252,29 @@ export default {
   align-items: center;
   justify-content: center;
 }
+.popup_box{
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  .search-input{
+    background-color: #efefef;
+    border-radius: 30px;
+    margin: 30px 0;
+    padding: 20px;
+    width: 500px;
+    font-size: 28px;
+  }
+  .btn{
+    width: 300px;
+    height: 80px;
+    border-radius: 80px;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn_sure{
+    color: #ffffff;
+    background-color: #237bff;
+  }
+}
 </style>