feature：优化OTA，壁纸的进度条UI

pages/deviceDetail/detail.js

@@ -14,7 +14,6 @@ Page({
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
       title: '设备详情', //导航栏 中间的标题
     },
-    hasNew: false,
     // 页面数据
     device: {},
     btHelper: null,
@@ -24,13 +23,13 @@ Page({
   },
   checkOtaVersion(device) {
     let _this = this;
-    console.log("OTA：", device);
+    console.log("OTA1：", device);
     deviceVersion(device.clientType, device.connectType, device.version).then(res => {
-      console.log("OTA：", res);
+      console.log("OTA2：", res);
       let updateData = res.data ?? {};
       let hasNewVersion = updateData.isEnforcement === 1 || updateData.isEnforcement === 2;
+      updateData.hasNewVersion = hasNewVersion;
       _this.setData({
-        hasNew: hasNewVersion,
         updateData: updateData
       });
     })
@@ -43,21 +42,15 @@ Page({
   },
 
   goToOta: function () {
-    if (this.data.hasNew) {
-      let param = {
-        "device": this.data.device,
-        "otaData": this.data.updateData,
-      }
-      let newParam = JSON.stringify(param);
-      // wx.navigateTo({
-      //   url: '/pages/ota/ota' + "?param=" + param
-      // });
-      route_util.jumpParam('/pages/ota/ota', newParam)
-    } else {
-      wx.showToast({
-        title: '没有新版本',
-      })
+    let param = {
+      "device": this.data.device,
+      "otaData": this.data.updateData,
     }
+    let newParam = JSON.stringify(param);
+    // wx.navigateTo({
+    //   url: '/pages/ota/ota' + "?param=" + param
+    // });
+    route_util.jumpParam('/pages/ota/ota', newParam)
   },
   powerTap(e) {
     console.log(e)

pages/deviceDetail/detail.wxml

@@ -21,7 +21,7 @@
         <view class="item" bindtap="goToOta">
             <view class="left-content">
                 <text class="label">固件信息</text>
-                <view wx:if="{{hasNew}}" class="red"></view>
+                <view wx:if="{{updateData.hasNewVersion}}" class="red"></view>
             </view>
             <image class="arrow" src="../../images/common/icon_arrow.png"></image>
         </view>

pages/ota/ota.js

@@ -1,5 +1,5 @@
 const { BtHelper } = require("../../devices/bt_helper");
-import { EnumCmdEvent } from '../../devices/cmd_key_event';
+import { EnumCmdEvent, CmdEvent } from '../../devices/cmd_key_event';
 import EventManager from '../../utils/event_bus'
 // pages/OTA/ota.js
 Page({
@@ -8,7 +8,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-    nvabarData: {
+    navbarData: {
       showCapsule: 1, //
       title: '固件信息',
     },
@@ -19,6 +19,10 @@ Page({
     otaStatus: 0,
     buttonTips: "固件更新",
     _chunks: [],
+    progressPercent: 0,
+    progress: 0,
+    progressTextLeft: "0%",
+    _timer: null,
   },
   setOtaStatus(status) {
     switch (status) {
@@ -45,6 +49,7 @@ Page({
           otaStatus: 3,
           buttonTips: "更新中..."
         });
+        this.startProgress();
         break;
 
       case 4:
@@ -66,6 +71,15 @@ Page({
       })
       return;
     }
+
+    let hasNewVersion = this.data.otaData.hasNewVersion ?? false
+    if (!hasNewVersion) {
+      wx.showToast({
+        title: '没有可升级的固件',
+      })
+      return;
+    }
+
     let _this = this
     wx.showModal({
       title: '有新固件可升级',
@@ -204,6 +218,7 @@ Page({
     this.data._chunks.forEach(element => {
       btHelper.otaData(element)
     });
+    this.startProgress()
   },
   endEnd() {
     const btHelper = BtHelper.getInstance();
@@ -231,6 +246,34 @@ Page({
       }
     }, 500);
   },
+  startProgress: function () {
+    const _this = this;
+    let progress = 0;
+    // 定时器，每100毫秒执行一次
+    _this._timer = setInterval(function () {
+      if (progress >= 100) {
+        clearInterval(_this._timer); // 停止定时器
+        _this.setData({
+          progress: 0,
+          progressPercent: 0,
+          showProgress: false,
+        });
+        _this.data.otaData.hasNewVersion = false;
+        _this.setOtaStatus(0)
+        wx.showToast({
+          title: '数据上传成功',
+        })
+      } else {
+        progress += 1; // 每次增加1%
+        let ptl = (progress / 2) + "%"
+        _this.setData({
+          progress: progress,
+          progressPercent: progress,
+          progressTextLeft:ptl  // 文字位置跟随进度     
+        });
+      }
+    }, 100);
+  },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -268,52 +311,4 @@ Page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-    EventManager.removeNotification(CmdEvent.eventName, this);
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
-  }
 })

pages/ota/ota.wxml

@@ -1,6 +1,6 @@
 <!-- pages/OTA/ota.wxml -->
 <view class="section">
-    <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>
+    <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='{{navbarData}}'></nav-bar>
     <view style="height: 32rpx;"></view>
     <view class="item">
         <text class="label">制造商</text>
@@ -16,13 +16,14 @@
     </view>
     <view class="button main_color" bind:tap="startOtaTap">{{buttonTips}}</view>
 </view>
-<view wx:if="{{otaStatus === 3}}" class="container">
-    <view class="background"></view>
+<view wx:if="{{otaStatus === 3}}" class="background">
     <view class="content">
         <view class="pro_title">正在升级</view>
         <view class="progress-container">
-            <progress class="progress" percent="{{progress}}" duration="100" activeColor="#6546A3" backgroundColor="rgba(0,0,0,0.4)" stroke-width="26" border-radius="13" />
-            <view class="progress-text">保存壁纸中…{{progressPercent}}%</view>
+            <progress class="progress" percent="{{progress}}" activeColor="#6546A3" backgroundColor="rgba(101,70,163,0.16)" stroke-width="26" border-radius="13" />
+            <view class="progress-text" style="left: {{progressTextLeft}};">
+                {{progressPercent}}%
+            </view>
         </view>
         <view class="pro_tips">升级过程中请勿离开当前页面
 建议保持设备电量20%已上进行升级操作</view>

pages/ota/ota.wxss

@@ -39,30 +39,25 @@
 
 
 .background {
-	position: absolute;
+	position: fixed;
 	top: 0;
 	left: 0;
-	width: 100%;
-	height: 100%;
+	right: 0;
+	bottom: 0;
 	background-color: rgba(0, 0, 0, 0.7);
-	/* 半透明黑色背景 */
-}
-
-.content {
-	width: 558rpx;
-	height: 404rpx;
-	background-color: white;
-	border-radius: 24rpx;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
+	z-index: 1000;
 }
 
-.progress-container {
-	position: relative;
-	margin-inline: 56rpx;
-	margin-top: 615rpx;
+.content {
+	background-color: white;
+	padding-inline: 20px;
+	border-radius: 10px;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+	width: 558rpx;
+	height: 404rpx;
 }
 
 .pro_title {
@@ -71,27 +66,36 @@
 	color: #333333;
 	text-align: center;
 	font-style: normal;
+	margin-top: 64rpx;
 }
 
-.pro_tips {
-	margin-inline: 34rpx;
-	font-size: 28rpx;
-	color: #666666;
-	text-align: center;
-	font-style: normal;
+.progress-container {
+	position: relative;
+	margin-inline: 32rpx;
+	margin-top: 46rpx;
+	/* 根据需要调整 */
 }
 
 .progress {
 	width: 100%;
+	height: 32rpx;
 }
 
 .progress-text {
 	position: absolute;
 	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
+	transform: translateY(-50%);
 	color: white;
-	font-size: 24rpx;
+	font-size: 16px;
 	z-index: 1;
-	font-weight: 500;
+	white-space: nowrap;
+}
+
+.pro_tips {
+	margin-top: 48rpx;
+	margin-inline: 34rpx;
+	font-size: 28rpx;
+	color: #666666;
+	text-align: center;
+	font-style: normal;
 }

pages/piano/wallpaper/wallpaper.js

@@ -28,11 +28,29 @@ Page({
 
     ],
     selectIndex: 0,
-    nvabarData: {
+    navbarData: {
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
       title: '壁纸设置', //导航栏 中间的标题
       callback() {
-        this.closePage()
+        if (this._imageBuffer) {
+          wx.showModal({
+            title: '保存图片中，确定要中断退出吗？',
+            content: '',
+            complete: (res) => {
+              if (res.cancel) {
+
+              }
+
+              if (res.confirm) {
+                BtHelper.getInstance().endImage(0)
+              }
+            }
+          })
+        } else {
+          wx.navigateBack({
+            delta: 1,
+          })
+        }
       }
     },
     src: '',
@@ -43,27 +61,9 @@ Page({
     progressPercent: 0,
     _timer: null,
 
-  }, 
-  closePage(){
-    if (_imageBuffer) {
-      wx.showModal({
-        title: '保存图片中，确定要中断退出吗？',
-        content: '',
-        complete: (res) => {
-          if (res.cancel) {
-
-          }
+  },
+  closePage() {
 
-          if (res.confirm) {
-            BtHelper.getInstance().endImage(0)
-          }
-        }
-      })
-    } else {
-      wx.navigateBack({
-        delta: 1,
-      })
-    }
 
   },
   footerTap() {
@@ -193,14 +193,29 @@ Page({
   sendImage(imageBuffer) {
     let chunkSize = 20;
     let _this = this
-    let progress = 0;
 
     _this.setData({
       progress: 0,
       progressPercent: 0
     });
 
+
+
+    for (let i = 0; i < imageBuffer.length; i += chunkSize) {
+      const chunk = imageBuffer.slice(i, i + chunkSize);
+      BtHelper.wallPaperData(chunk)
+    }
+  },
+  endImage() {
+    BtHelper.sendData(BtCmd.wallPaper(0));
+  },
+  startProgress() {
+    let _this = this;
+    this.setData({
+      showProgress: true
+    })
     // 定时器，每100毫秒执行一次
+    let progress = 0;
     _this._timer = setInterval(function () {
       if (progress >= 100) {
         clearInterval(_this._timer); // 停止定时器
@@ -215,18 +230,11 @@ Page({
       } else {
         progress += 1; // 每次增加1%
         _this.setData({
+          progress:progress,
           progressPercent: progress
         });
       }
     }, 100);
-
-    for (let i = 0; i < imageBuffer.length; i += chunkSize) {
-      const chunk = imageBuffer.slice(i, i + chunkSize);
-      BtHelper.wallPaperData(chunk)
-    }
-  },
-  endImage() {
-    BtHelper.sendData(BtCmd.wallPaper(0));
   },
   /**
    * 生命周期函数--监听页面加载

pages/piano/wallpaper/wallpaper.wxml

@@ -21,7 +21,7 @@
     </view> -->
     <!-- <image-cropper bind:close="hideCut" cutRatio="1" wx:if="{{showCrop}}" imageSrc="{{imageSrc}}" /> -->
     <view wx:if="{{showProgress}}" class="progress-container">
-        <progress class="progress" percent="{{progress}}" duration="100" activeColor="#6546A3" backgroundColor="rgba(0,0,0,0.4)" stroke-width="26" border-radius="13" />
+        <progress class="progress"  percent="{{progress}}" activeColor="#6546A3" backgroundColor="rgba(0,0,0,0.4)" stroke-width="26" border-radius="13" />
         <view class="progress-text">保存壁纸中…{{progressPercent}}%</view>
     </view>
 </view>