wifiGuanLi.vue 3.0 KB

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