feature: 添加固件升级弹窗

pages/piano/firmware/firmware.js

@@ -19,6 +19,10 @@ Page({
       title: "MAC地址",
       name: "4b:45:12:5a:9y:3g",
     }, ],
+    isUpdated: true,
+    showModal: false, // 控制模态框显示隐藏
+    progress: 0, // 进度条初始值
+    showInfo: true
   },
 
   /**
@@ -42,6 +46,52 @@ Page({
 
   },
 
+  // 在需要弹窗的地方调用该函数
+  toUpdate() {
+    var that = this;
+    wx.showModal({
+      title: '有新固件可升级',
+      content: '提升体验，操作更流畅',
+      showCancel: true,
+      cancelText: '取消',
+      confirmText: '确定',
+      success: function (res) {
+        if (res.confirm) {
+          console.log('用户点击确定');
+          that.showUpgradeProgress();
+        } else if (res.cancel) {
+          console.log('用户点击取消');
+        }
+      }
+    });
+  },
+
+  // 显示升级进度条模态框
+  showProgressModal: function () {
+    var that = this;
+    that.setData({
+      showModal: true
+    });
+
+    // 模拟更新进度
+    let interval = setInterval(() => {
+      var progress = that.data.progress;
+      if (progress < 100) {
+        console.log("gassdfadfasdfaf====" + progress);
+        that.setData({
+          progress: progress + 1,
+        });
+      } else {
+        clearInterval(interval);
+        // 更新完成后关闭模态框
+        that.setData({
+          showModal: false,
+          progress: 0
+        });
+      }
+    }, 100);
+  },
+
   /**
    * 生命周期函数--监听页面隐藏
    */

pages/piano/firmware/firmware.wxml

@@ -12,7 +12,32 @@
   </view>
 
   <view class="update">
-    <view bindtap="toUpdate" class="{{!islogin ? 'action' : ''}}">固件更新</view>
+    <view bindtap="toUpdate" class="{{isUpdated ? 'action' : ''}}">固件更新</view>
   </view>
 
+  <!-- <view class="container"> -->
+  <!-- 点击按钮显示升级进度条弹窗 -->
+  <!-- <button bindtap="showUpgradeProgress">升级应用</button> -->
+
+
+  <!-- </view> -->
+
+
+
+  <view class="container">
+    <!-- 点击按钮显示带背景黑蒙版的弹窗 -->
+    <button bindtap="showProgressModal">显示带背景黑蒙版的弹窗</button>
+
+    <!-- 背景黑蒙版 -->
+    <view class="mask" wx:if="{{showModal}}"></view>
+
+    <!-- 自定义模态框，用于显示带进度条的弹窗 -->
+    <view class="modal" wx:if="{{showModal}}">
+      <text>正在升级中</text>
+      <progress percent="{{progress}}" stroke-width="4" />
+    </view>
+  </view>
+
+
+
 </view>

pages/piano/firmware/firmware.wxss

@@ -33,4 +33,38 @@
 
 .update>view.action {
   background: #6547A3;
+}
+
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20rpx;
+  z-index: 1000;
+}
+
+
+progress {
+  width: 100%;
+  margin: 10rpx auto;
 }