feature：优化蓝牙连接页的UI

pages/bluConnect/bleconnect.js

@@ -8,7 +8,6 @@ Page(
      */
     data: {
       scopeBluetooth: false,
-      isScaning: false,
       connectStatus: 0,
       connectText: "连接中",
       connectPic: "",
@@ -34,58 +33,59 @@ Page(
     },
     updateBleStatus() {
       var _this = this;
-      switch (_this.connectStatus) {
+      var deviceDic;
+      switch (_this.data.connectStatus) {
         case 1:
           // 搜索中
-          _this.connectTips = "正在搜索设备，请保持开机状态...";
+          deviceDic = { connectTips: "正在搜索设备，请保持开机状态..." }
+
           break;
         case 2:
           // 连接中
-          _this.connectText = "连接中...";
-          _this.connectPic = "";
+          deviceDic = { connectText: "连接中...", connectPic: "" }
+
           break;
         case 3:
           // 连接失败
-          _this.connectText = "连接失败";
-          _this.connectPic = "../../img/i.png";
+          deviceDic = { connectText: "连接失败", connectPic: "../../img/i.png" }
+
           break;
         case 4:
           // 连接成功
-          _this.connectText = "连接成功";
-          _this.connectPic = "../../img/h.png";
+          deviceDic = { connectText: "连接成功", connectPic: "../../img/h.png", connectTips:"" }
 
           break;
         case 5:
-          // 搜索成功
-          _this.deviceItem = {
+          // 搜索到设备
+          var deviceItem = {
             "pic": "../../img/g.png",
-            "address": "xxxxxx",
+            "address": "xxxxxx"+Math.random()
+            ,
             "name": "猫王钢琴音箱",
-            "devName": "名称1", "state": "online", "power": 40
-          };
-          _this.connectTips = "搜索到" + _this.deviceItem.name;
-          _this.buttonTips = "连接设备";
-          _this.isScaning = false;
-          _this.connectText = "搜索成功";
-
+            "devName": "猫王钢琴音箱", "state": "online", "power": 40
+          }
+          deviceDic = {
+            connectTips: "搜索到" + deviceItem.name,
+            buttonTips: "连接设备",
+            connectText: "搜索成功",
+            deviceItem: deviceItem
+          }
+          break;
+        default:
           break;
       }
-      _this.setData({
-        buttonTips: _this.buttonTips,
-        connectTips: _this.connectTips,
-        isScaning: _this.isScaning,
-        connectPic: _this.connectPic,
-        connectText: _this.connectText,
-        deviceItem: _this.deviceItem,
-        connectStatus: _this.connectStatus
-      })
+      if (deviceDic != null) {
+        Object.assign(deviceDic, {"connectStatus": _this.data.connectStatus})
+        _this.setData(deviceDic)
+      }
+
     },
     getBluetoothStatusCallck(v) {
-      this.connectStatus = 1;
       this.updateBleStatus();
 
       this.setData({
         scopeBluetooth: v,
+        connectStatus: v ? 1 : 0
       })
       if (v) {
         this.scanDevice();
@@ -100,20 +100,18 @@ Page(
     }, connectDeviceTap() {
       const _this = this;
 
-      if (_this.isScaning) {
-        console.log("连接中2");
+      if (_this.data.connectStatus === 1) {
         return;
       }
 
       // todo 测试
-      console.log("连接中");
-      this.connectStatus = 4;
+      this.data.connectStatus = 4;
       this.updateBleStatus();
 
       setTimeout(() => {
         const eventChannel = _this.getOpenerEventChannel();
         eventChannel.emit('getBackData', {
-          backData: _this.deviceItem
+          backData: _this.data.deviceItem
         });
         wx.navigateBack();
       }, 1000);
@@ -148,13 +146,11 @@ Page(
       });
 
     }, scanDevice() {
-      this.setData({
-        isScaning: true,
-      });
+
+      //todo 扫描代码
 
       setTimeout(() => {
-        console.log("2324");
-        this.connectStatus = 5;
+        this.data.connectStatus = 5;
         this.updateBleStatus();
       }, 3000);
 

pages/bluConnect/bleconnect.wxml

@@ -3,14 +3,14 @@
   <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>
   <!-- <scroll-view class="scrollClass" scroll-y="true"> -->
   <image class="device_pic_class" src="{{deviceItem.pic}}" mode="scaleToFill" />
-    <text class="scanDeviceClass">{{connectTips}}</text>
-    <view class="connect_tips" wx:if="{{isScaning}}">确认手机蓝牙已经打开</view>
-    <span wx:if="{{connectStatus > 1}}" class="scan_device_status_class">
-      <image class="scan_device_status_img_class" src="{{connectPic}}" mode="scaleToFill" />
-      <text class="scan_device_status_text_class">{{connectText}}</text>
-    </span>
+  <view class="scanDeviceClass">{{connectTips}}</view>
+  <view class="connect_tips" wx:if="{{connectStatus === 1}}">确认手机蓝牙已经打开</view>
+  <span wx:if="{{connectStatus > 1}}" class="scan_device_status">
+    <image src="{{connectPic}}" mode="scaleToFill" />
+    <text>{{connectText}}</text>
+  </span>
   <view style="flex: 1;  "></view>
-<view bind:tap="connectDeviceTap" >  <button class="connect_btn_class">{{buttonTips}}</button>
-</view>
+  <view bind:tap="connectDeviceTap"> <button class="connect_btn_class">{{buttonTips}}</button>
+  </view>
   <!-- </scroll-view> -->
 </view>

pages/bluConnect/bleconnect.wxss

@@ -1,13 +1,12 @@
 /* pages/bluConnect/bleconnect.wxss */
 
-.container {
-  /* background: red; */
+/* .container {
   position: fixed;  
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-}
+} */
 
 .container .device_pic_class {
   height: 300rpx;
@@ -28,10 +27,10 @@
   margin-top: 60rpx;
   margin-left: 16rpx;
   margin-right: 16rpx;
-text-align: center;
+  text-align: center;
 }
 
-.container .connect_tips {
+.connect_tips {
   margin-top: 16rpx;
   margin-left: 16rpx;
   margin-right: 16rpx;
@@ -39,7 +38,7 @@ text-align: center;
 }
 
 
-.container .scan_device_status_class {
+.container .scan_device_status {
   /* align-items: center; */
   margin-top: 16rpx;
   display: flex;
@@ -48,18 +47,19 @@ text-align: center;
 }
 
 
-.container .scan_device_status_class .scan_device_status_img_class {
+.container .scan_device_status image {
   width: 32rpx;
   height: 32rpx;
 }
 
-.container .scan_device_status_class .scan_device_status_text_class {
+.container .scan_device_status text {
   margin-left: 16rpx;
+  color: red;
 }
 
 .container .connect_btn_class {
-  padding-left: 56rpx;
-  padding-right: 56rpx;
+  /* padding-left: 56rpx;
+  padding-right: 56rpx; */
   /* padding-bottom: 56rpx; */
   margin-bottom: 56rpx;
   margin-top: 70rpx;