wifiSearch.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <template>
  2. <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
  3. <cus-header title='配置网络'></cus-header>
  4. <template v-if="!nodevice">
  5. <div class="search adffcac">
  6. <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/379c752c-13f5-4668-9977-e8cad9cd0fa4.gif"></image>
  7. <p>正在搜索可配网设备</p>
  8. </div>
  9. </template>
  10. <template v-else>
  11. <div class="empty adffcac">
  12. <div class="title">搜索超时</div>
  13. <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/5824159f-0bd8-4399-be6c-7d309e2a35dc.png"></image>
  14. <div class="tip">没有找到可用设备?</div>
  15. <div class="warn adfac" @tap="alertShow=true">
  16. <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/19ca1b06-9bfd-4ae6-9c1c-eec45a86f0a0.png"></image>
  17. <span>找不到设备怎么办 ></span>
  18. </div>
  19. </div>
  20. </template>
  21. <div class="zt_btn" v-if="nodevice" @tap="searchAgain">再次搜索</div>
  22. <u-popup :show="alertShow" :round="56" mode="center" @close="alertShow=false">
  23. <div class="alert">
  24. <div class="title">找不到设备怎么办</div>
  25. <p style="margin-top: 53rpx;">1.请确保可配网的设备在手机旁边</p>
  26. <p>2.如果没有开机,请先按住开关键直到指示灯亮起</p>
  27. <p>3.开机状态下,按配网键1次进入配网模式</p>
  28. <div class="btn" @tap="alertShow=false">我知道了</div>
  29. </div>
  30. </u-popup>
  31. <u-popup :show="show" :round="64" mode="bottom" @close="show=false">
  32. <div class="connect adffcac">
  33. <div class="title">找到一个待配网的设备</div>
  34. <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/04/6f06a2de-5d6c-4596-9a0c-77971d6ea230.png"></image>
  35. <div class="tip">序列号:{{lanya.deviceId}}</div>
  36. <div class="btn" @tap="connectWiFi">连接</div>
  37. </div>
  38. </u-popup>
  39. </view>
  40. </template>
  41. <script>
  42. var xBlufi = require("@/utils/blufi/xBlufi.js");
  43. let _this = null;
  44. export default {
  45. data(){
  46. return {
  47. nodevice:false,
  48. show:false,
  49. alertShow:false,
  50. lanya:null,
  51. devicesList: [],
  52. searching: false,
  53. }
  54. },
  55. onShow() {
  56. // this.nodevice = false;
  57. // this.show = false;
  58. // this.Search();
  59. },
  60. onLoad: function() {
  61. _this = this;
  62. this.Search();
  63. // xBlufi.initXBlufi(1);
  64. xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
  65. },
  66. onUnload() {
  67. xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
  68. },
  69. methods:{
  70. initBluetooth() {
  71. let that = this;
  72. try{
  73. wx.openBluetoothAdapter({
  74. success: (res) => {
  75. // 监听连接状态变化
  76. wx.onBLEConnectionStateChange((res2) => {
  77. console.log(res2,'onBLEConnectionStateChange');
  78. });
  79. wx.startBluetoothDevicesDiscovery({
  80. services: ['0000FFFF-0000-1000-8000-00805F9B34FB'], // Blufi服务UUID
  81. success: (res3) => {
  82. // 监听发现新设备
  83. wx.onBluetoothDeviceFound((resu) => {
  84. let ly = resu.devices.find(d=>d.name.indexOf('cx-')>-1);
  85. if(ly){
  86. that.lanya = ly;
  87. that.nodevice = false;
  88. that.show = true;
  89. }
  90. });
  91. },
  92. fail: (err2) => {
  93. console.log(err2,'err2');
  94. }
  95. });
  96. },
  97. fail: (err) => {
  98. console.log(err,'初始化失败');
  99. }
  100. });
  101. }catch(e){
  102. console.log(e,'e');
  103. }
  104. },
  105. funListenDeviceMsgEvent: function(options) {
  106. switch (options.type) {
  107. case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
  108. console.log(options)
  109. break;
  110. case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
  111. if (options.result)
  112. _this.devicesList = options.data;
  113. let ly = _this.devicesList.find(d=>d.name.indexOf('cx-')>-1);
  114. if(!ly) ly = _this.devicesList.find(d=>d.name.indexOf('BLUFI_DEVICE')>-1);
  115. if(ly){
  116. _this.lanya = ly;
  117. _this.nodevice = false;
  118. _this.show = true;
  119. }
  120. break;
  121. case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
  122. if (options.result) {
  123. wx.hideLoading()
  124. wx.showToast({
  125. title: '连接成功',
  126. icon: 'none'
  127. })
  128. wx.navigateTo({
  129. url: '/pagesMy/wifiSet?deviceId=' + options.data.deviceId + '&name=' + options
  130. .data.name,
  131. });
  132. } else {
  133. wx.hideLoading()
  134. wx.showModal({
  135. title: '提示',
  136. content: '连接失败',
  137. showCancel: false
  138. });
  139. }
  140. break;
  141. case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
  142. if (!options.result) {
  143. wx.showToast({
  144. title: '蓝牙未开启',
  145. icon: 'none'
  146. })
  147. } else {
  148. //蓝牙搜索开始
  149. _this.searching = true;
  150. }
  151. break;
  152. case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
  153. if (options.result) {
  154. //蓝牙停止搜索ok
  155. console.log('蓝牙停止搜索ok')
  156. } else {
  157. //蓝牙停止搜索失败
  158. console.log('蓝牙停止搜索失败')
  159. }
  160. _this.searching = false;
  161. break;
  162. }
  163. },
  164. Search: function() {
  165. if (this.searching) {
  166. xBlufi.notifyStartDiscoverBle({
  167. 'isStart': false
  168. })
  169. } else {
  170. xBlufi.notifyStartDiscoverBle({
  171. 'isStart': true
  172. })
  173. }
  174. },
  175. connectWiFi: function() {
  176. // let that = this;
  177. // wx.createBLEConnection({
  178. // deviceId: that.lanya.deviceId,
  179. // success: (res) => {
  180. // wx.navigateTo({
  181. // url: '/pagesMy/wifiSet?deviceId=' + that.lanya.deviceId + '&name=' + that.lanya.name
  182. // })
  183. // },
  184. // fail: (err) => {
  185. // console.log(err,'createBLEConnection-err');
  186. // }
  187. // });
  188. // return
  189. //停止搜索
  190. xBlufi.notifyStartDiscoverBle({
  191. 'isStart': false
  192. })
  193. xBlufi.notifyConnectBle({
  194. isStart: true,
  195. deviceId: _this.lanya.deviceId,
  196. name:_this.lanya.name
  197. });
  198. wx.showLoading({
  199. title: '连接蓝牙设备中...',
  200. })
  201. }
  202. }
  203. }
  204. </script>
  205. <style scoped lang="less">
  206. .page{
  207. width: 100%;
  208. padding: 0 0 300rpx;
  209. background: #FFFFFF;
  210. box-sizing: border-box;
  211. .search{
  212. image{
  213. width: 620rpx;
  214. height: 620rpx;
  215. margin-top: 120rpx;
  216. }
  217. p{
  218. font-family: PingFang-SC, PingFang-SC;
  219. font-weight: bold;
  220. font-size: 36rpx;
  221. color: #111111;
  222. line-height: 36rpx;
  223. text-align: center;
  224. margin-top: 80rpx;
  225. }
  226. }
  227. .empty{
  228. .title{
  229. font-family: PingFang-SC, PingFang-SC;
  230. font-weight: bold;
  231. font-size: 36rpx;
  232. color: #111111;
  233. line-height: 36rpx;
  234. text-align: center;
  235. margin-top: 158rpx;
  236. }
  237. &>image{
  238. width: 400rpx;
  239. height: 366rpx;
  240. margin-top: 48rpx;
  241. }
  242. .tip{
  243. font-family: PingFang-SC, PingFang-SC;
  244. font-weight: bold;
  245. font-size: 32rpx;
  246. color: #111111;
  247. line-height: 36rpx;
  248. text-align: center;
  249. margin-top: 53rpx;
  250. }
  251. .warn{
  252. background: rgba(27,80,255,0.06);
  253. border-radius: 28rpx;
  254. padding: 10rpx 24rpx;
  255. margin-top: 48rpx;
  256. image{
  257. width: 26rpx;
  258. height: 26rpx;
  259. }
  260. span{
  261. font-family: PingFangSC, PingFang SC;
  262. font-weight: 400;
  263. font-size: 26rpx;
  264. color: #1B50FF;
  265. line-height: 37rpx;
  266. margin-left: 8rpx;
  267. }
  268. }
  269. }
  270. .zt_btn{
  271. width: calc(100% - 120rpx);
  272. position: fixed;
  273. left: 60rpx;
  274. bottom: 201rpx;
  275. }
  276. .alert{
  277. padding: 54rpx 40rpx 0;
  278. .title{
  279. font-family: PingFang-SC, PingFang-SC;
  280. font-weight: bold;
  281. font-size: 36rpx;
  282. color: #111111;
  283. line-height: 36rpx;
  284. text-align: center;
  285. margin-bottom: 19rpx;
  286. }
  287. p{
  288. font-family: PingFangSC, PingFang SC;
  289. font-weight: 400;
  290. font-size: 30rpx;
  291. color: #111111;
  292. line-height: 65rpx;
  293. text-align: left;
  294. margin-top: 24rpx;
  295. }
  296. .btn{
  297. width: calc(100% - 108rpx);
  298. height: 90rpx;
  299. background: #D9F159;
  300. border-radius: 16rpx;
  301. font-family: PingFang-SC, PingFang-SC;
  302. font-weight: bold;
  303. font-size: 32rpx;
  304. color: #252525;
  305. line-height: 90rpx;
  306. text-align: center;
  307. margin: 113rpx 54rpx 0;
  308. letter-spacing: 2rpx;
  309. }
  310. }
  311. .connect{
  312. padding: 66rpx 40rpx 30rpx;
  313. .title{
  314. font-family: PingFangSC, PingFang SC;
  315. font-weight: 600;
  316. font-size: 36rpx;
  317. color: #111111;
  318. line-height: 36rpx;
  319. text-align: center;
  320. }
  321. image{
  322. width: 504rpx;
  323. height: 254rpx;
  324. margin-top: 37rpx;
  325. }
  326. .tip{
  327. font-family: PingFangSC, PingFang SC;
  328. font-weight: 400;
  329. font-size: 30rpx;
  330. color: #111111;
  331. line-height: 36rpx;
  332. margin-top: 40rpx;
  333. }
  334. .btn{
  335. width: 100%;
  336. height: 90rpx;
  337. background: #D9F159;
  338. border-radius: 16rpx;
  339. font-family: PingFang-SC, PingFang-SC;
  340. font-weight: bold;
  341. font-size: 32rpx;
  342. color: #252525;
  343. line-height: 90rpx;
  344. text-align: center;
  345. margin-top: 101rpx;
  346. letter-spacing: 2rpx;
  347. }
  348. }
  349. }
  350. </style>