wifiGuanLi.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <view class="content p-rel">
  3. <view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
  4. <view class="box">
  5. <view class="mgb-10">当前连接:YThuwai</view>
  6. <view class="listbox">
  7. <view class="flex jc_between pdy-30 border-bottom" v-for="wifi in list">
  8. <view class="flex">
  9. <i class="fas fa-wifi"></i> &nbsp;
  10. {{ wifi.SSID }}
  11. </view>
  12. <view @click="connectedWifi(wifi)" :class="wifi.status ?'c_btn':'btn'">
  13. {{ wifi.status? '已连接': '连接' }}
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="ADBox">
  20. 横幅广告
  21. </view>
  22. </template>
  23. <script setup>
  24. import { ref, onMounted } from "vue";
  25. import { onShow } from "@dcloudio/uni-app";
  26. var statusBarHeight = uni.getStorageSync('statusBarHeight')
  27. const list = ref([
  28. {
  29. "SSID": "YThuwai",
  30. "BSSID": "XX:XX:XX:XX:XX:XX",
  31. status:true,
  32. },
  33. {
  34. "SSID": "YtZhe",
  35. "BSSID": "XX:XX:XX:XX:XX:XX",
  36. status:false,
  37. },
  38. {
  39. "SSID": "DIRECT-GQDESKTOP2E4TVT1-msPR",
  40. "BSSID": "YY:YY:YY:YY:YY:YY",
  41. status:false,
  42. },
  43. {
  44. "SSID": "4-426",
  45. "BSSID": "XX:XX:XX:XX:XX:XX",
  46. status:false,
  47. },
  48. {
  49. "SSID": "Tech_xxx",
  50. "BSSID": "YY:YY:YY:YY:YY:YY",
  51. status:false,
  52. },
  53. {
  54. "SSID": "88888888-pZ",
  55. "BSSID": "XX:XX:XX:XX:XX:XX",
  56. status:false,
  57. },
  58. {
  59. "SSID": "ChinaNet-bG62",
  60. "BSSID": "YY:YY:YY:YY:YY:YY",
  61. status:false,
  62. },
  63. {
  64. "SSID": "GF-1",
  65. "BSSID": "XX:XX:XX:XX:XX:XX",
  66. status:false,
  67. },
  68. {
  69. "SSID": "GAIF",
  70. "BSSID": "YY:YY:YY:YY:YY:YY",
  71. status:false,
  72. },
  73. {
  74. "SSID": "boss",
  75. "BSSID": "XX:XX:XX:XX:XX:XX",
  76. status:false,
  77. },
  78. {
  79. "SSID": "ChinaNet-LJmh",
  80. "BSSID": "YY:YY:YY:YY:YY:YY",
  81. status:false,
  82. },
  83. {
  84. "SSID": "Home_WiFi",
  85. "BSSID": "XX:XX:XX:XX:XX:XX",
  86. status:false,
  87. },
  88. {
  89. "SSID": "Office_WiFi",
  90. "BSSID": "YY:YY:YY:YY:YY:YY",
  91. status:false,
  92. }
  93. ])
  94. onMounted(()=>{
  95. // uni.getConnectedWifi({
  96. // success:(res)=>{
  97. // console.log('res',res)
  98. // }
  99. // })
  100. // uni.getWifiList({
  101. // success:(res)=>{
  102. // console.log('res',res.wifiList)
  103. // },
  104. // fail: (err) => {
  105. // console.log('err',err)
  106. // }
  107. // })
  108. })
  109. const connectedWifi = (wifi)=>{
  110. uni.showToast({
  111. title:`已连接`
  112. })
  113. list.value.map(item=>{ return item.status = false })
  114. wifi.status = true
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. .content{
  119. height: 100vh;
  120. padding: 28rpx;
  121. background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
  122. }
  123. .box{
  124. background-color: #fff;
  125. border-radius: 30rpx;
  126. height: 95vh;
  127. padding: 30rpx 28rpx;
  128. .listbox{
  129. max-height: 85vh;
  130. overflow-y: scroll;
  131. .c_btn{
  132. background-color: #399bfc;
  133. color: #fff;
  134. font-size: 22rpx;
  135. line-height: 48rpx;
  136. border-radius: 30rpx;
  137. cursor: pointer;
  138. width: 120rpx;
  139. height: 48rpx;
  140. text-align: center;
  141. }
  142. .btn{
  143. width: 120rpx;
  144. height: 48rpx;
  145. line-height: 48rpx;
  146. text-align: center;
  147. background-color: #fff;
  148. color: #399bfc;
  149. border: 1rpx solid #399bfc;
  150. font-size: 22rpx;
  151. border-radius: 30rpx;
  152. cursor: pointer;
  153. }
  154. }
  155. }
  156. .ADBox{
  157. position: fixed;
  158. bottom: 0;
  159. height: 120rpx;
  160. width: 100%;
  161. background-color: #fff;
  162. display: flex;
  163. align-items: center;
  164. justify-content: center;
  165. }
  166. </style>