Browse Source

ffeature:优化设备列表、选择模式界面的UI

zeng.chen 8 months ago
parent
commit
b5f6a70410

+ 5 - 0
app.wxss

@@ -8,6 +8,11 @@
   background-color: #A4D099;
 }
 
+.main_black {
+  color: #333333;
+}
+
+
 /* 以前连接设备的 */
 .deviceRoter .roterps {
   padding: 0 66rpx;

+ 35 - 16
pages/connectBle/connectBle.js

@@ -19,10 +19,17 @@ Page({
         })
       }
     },
+    searchTips: "正在搜索设备,请保持设备开机状态",
+    buttonTips: "正在搜索设备"
   },
   async connectDeviceTap() {
+    this.setData({
+      searchTips: "正在搜索设备,请保持设备开机状态",
+      buttonTips: "正在搜索设备"
+    })
     await btHelper.search()
     await this.getConnectedDevices()
+    let _this = this
     btHelper.findDevices(function (devices) {
       devices.forEach(element => {
         console.log('发现设备:', element.deviceId, element.uuid, element.mac);
@@ -34,8 +41,16 @@ Page({
         ) {
           toastUtil.show("开始连接设备")
           btHelper.stopSearch()
+          _this.setData({
+            searchTips: "正在连接设备,请保持设备开机状态",
+            buttonTips: "正在连接设备"
+          })
           btHelper.connect(element, function (data) {
             // console.log("连接成功", data)
+            _this.setData({
+              searchTips: data ? "连接成功" : "连接失败",
+              buttonTips: data ? "连接成功" : "连接失败"
+            })
           })
           return
         }
@@ -44,23 +59,26 @@ Page({
   }, getConnectedDevices: async function () {
     try {
       const connectedDevices = await btHelper.getConnectedDevices()
-      connectedDevices.forEach(element => {
-        if (element.localName != null && element.localName.indexOf("MW") >= 0) {
+      console.log("全部设备", connectedDevices)
+      if (connectedDevices) {
+        connectedDevices.forEach(element => {
           console.log('已连接的蓝牙设备:', element);
-        }
-        // if (element.deviceId.includes("D8:24:07:89:31") ||
-        //   element.deviceId.includes("F5:A5:43:70:C8:F1") ||
-        //   element.deviceId.includes("D1:4D:DA:76:42:50")
-
-        // ) {
-        //   toastUtil.show("开始连接设备")
-        //   btHelper.stopSearch()
-        //   btHelper.connect(element, function (data) {
-        //     // console.log("连接成功", data)
-        //   })
-        // }
-        return;
-      });
+  
+          // if (element.deviceId.includes("D8:24:07:89:31") ||
+          //   element.deviceId.includes("F5:A5:43:70:C8:F1") ||
+          //   element.deviceId.includes("D1:4D:DA:76:42:50")
+  
+          // ) {
+          //   toastUtil.show("开始连接设备")
+          //   btHelper.stopSearch()
+          //   btHelper.connect(element, function (data) {
+          //     // console.log("连接成功", data)
+          //   })
+          // }
+          return;
+        });
+      }
+      
       // console.log('已连接的蓝牙设备:', connectedDevices);
     } catch (error) {
       console.error(error);
@@ -104,6 +122,7 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
+    // todo 要关闭吗
     btHelper.closeBle()
   },
 

+ 2 - 2
pages/connectBle/connectBle.wxml

@@ -2,7 +2,7 @@
 <view class="container">
 				<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" navbar-data='{{nvabarData}}'></nav-bar>
 				<image class="device_pic" src="{{connectDevice.img}}" mode="aspectFill" />
-				<view class="top_tips">正在搜索设备,请保持设备开机状态</view>
+				<view class="top_tips">{{searchTips}}</view>
 				<view style="font-size: 14rpx; color: #666666;">拨动设备-开机</view>
-				<view class="main_bg_green connect_button" bind:tap="connectDeviceTap">正在搜索设备</view>
+				<view class="main_bg_green connect_button" bind:tap="connectDeviceTap">{{buttonTips}}</view>
 </view>

+ 1 - 0
pages/connectBle/connectBle.wxss

@@ -28,5 +28,6 @@
 	text-align: center;
 	padding: 10px 0;
 	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+	border-radius: 16rpx;
 	/* 添加阴影效果 */
 }

+ 9 - 11
pages/deviceConMode/index.js

@@ -14,11 +14,6 @@ Page({
     nvabarData: {
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
       title: '连接配网', //导航栏 中间的标题
-      callback() {
-        wx.navigateBack({
-          delta: 1,
-        })
-      }
     },
     isNotruter: false,
     model: 0,
@@ -27,7 +22,7 @@ Page({
       {
         "icon": "../../images/device/mode_wifi.png",
         "text": "WiFi模式",
-        "type": 3,
+        "type": 2,
       },
       {
         "icon": "../../images/device/mode_ble.png",
@@ -37,7 +32,7 @@ Page({
       {
         "icon": "../../images/device/mode_g4.png",
         "text": "4G模式",
-        "type": 2,
+        "type": 4,
       },
     ],
   },
@@ -55,13 +50,15 @@ Page({
   },
   nextTap(e) {
     let device = this.data.typeList[0];
-    // console.log(e)
     let type = device.type ?? 0;
+    console.log("选择模式", type)
     if (type == 1) {
       let device = e.currentTarget.dataset.data
       routeUtil.jumpParam(route_constant.connectBle, this.data.connectDevice)
     } else if (type == 2) {
-
+      wx.navigateTo({
+        url: './../deviceConnect0/deviceConnect0',
+      });
     } else if (type == 3) {
       // btHelper.stopSearch()
     } else {
@@ -95,8 +92,9 @@ Page({
   },
 
   onLoad: function (options) {
-    console.log(options)
-    let device = options.param;
+    let json = JSON.parse(options.param)
+    console.log(json)
+    let device = json
     this.setData({
       connectDevice: device
     })

+ 1 - 2
pages/deviceConMode/index.wxml

@@ -1,6 +1,5 @@
 <!-- pages/deviceConMode/index.wxml -->
 <!-- pages/deviceRoter0/deviceRoter0.wxml -->
-
 <view class="main">
   <nav-bar class="nav_bar_c" bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'></nav-bar>
   <image class="model_bg" src="../../images/device/mode_bg.png" mode="aspectFill" />
@@ -20,5 +19,5 @@
     </view>
   </view>
   <view class="setDeviceModelTips">开启后点击“下一步”</view>
-  <view class="main_bg_green connect_button" bind:tap="nextTap">正在搜索设备</view>
+  <view class="main_bg_green connect_button" bind:tap="nextTap">连接设备</view>
 </view>

+ 2 - 1
pages/deviceConMode/index.wxss

@@ -7,7 +7,7 @@
 }
 
 .model_bg {
-	top: 0;
+	top: 80;
 	left: 0;
 	position: absolute;
 	width: 100%;
@@ -114,5 +114,6 @@
 	text-align: center;
 	padding: 10px 0;
 	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+	border-radius: 16rpx;
 	/* 添加阴影效果 */
 }

+ 2 - 1
pages/deviceList/devices.js

@@ -24,7 +24,8 @@ Page({
       console.log("设备为空")
       return;
     }
-    routeUtil.jumpParam(route_constant.connectMode, device)
+    let param = JSON.stringify(device)
+    routeUtil.jumpParam(route_constant.connectMode, param)
   },
   /**
    * 生命周期函数--监听页面加载

+ 1 - 1
pages/deviceList/devices.wxml

@@ -4,7 +4,7 @@
     <block wx:for="{{deviceList}}" wx:key="index" wx:for-item="item" wx:for-index="index">
         <view class="cell" bind:tap="deviceTap" data-device="{{item}}">
             <image class="device_img" src="{{item.img}}" mode="aspectFill" />
-            <text class="device_text">{{item.name}}</text>
+            <text class="device_text main_black">{{item.name}}</text>
         </view>
     </block>
 </view>

+ 12 - 7
pages/deviceList/devices.wxss

@@ -6,15 +6,15 @@
 .grid-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 16rpx;
-	padding-inline: 16rpx;
-padding-top: 16rpx;
+    grid-column-gap: 32rpx;
+    /* grid-row: 32rpx; */
+    padding-inline: 32rpx;
+    padding-top: 16rpx;
 }
 
 .cell {
-    border-radius: 10rpx;
     overflow: hidden;
-    margin-bottom: 16rpx;
+    /* margin-bottom: 16rpx; */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -23,11 +23,16 @@ padding-top: 16rpx;
 
 .device_img {
     width: 100%;
-    height: 200rpx;
+    height: 300rpx;
+    border-radius: 16rpx;
+    background-color: #F2F5F7;
 }
 
 .device_text {
-	margin-top: 16rpx;
+    margin-top: 16rpx;
     text-align: center;
     width: 100%;
+    font-size: 28rpx;
+    margin-bottom: 72rpx;
+
 }

+ 7 - 5
pages/index/index.js

@@ -228,6 +228,7 @@ Page({
         wx.hideLoading();
         if (res.data) {
           const resData = JSON.parse(res.data);
+          console.log("本地设备列表", resData)
           _this.setData({
             deviceList: resData
           });
@@ -526,14 +527,15 @@ Page({
   },
 
   goDeviceConnect() {
-    // routeUtil.jump(route_constant.deviceList)
-    // return;
-    wx.navigateTo({
-      url: './../deviceConnect0/deviceConnect0',
-    });
+    routeUtil.jump(route_constant.deviceList)
     this.setData({
       isShowDevicelist: false
     })
+    return;
+    wx.navigateTo({
+      url: './../deviceConnect0/deviceConnect0',
+    });
+
   },
 
   getchannelData(clientType) {