Przeglądaj źródła

feature:增加壁纸的进度条

zeng.chen 8 miesięcy temu
rodzic
commit
4f885dd791

+ 67 - 5
pages/piano/wallpaper/wallpaper.js

@@ -31,12 +31,36 @@ Page({
     nvabarData: {
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
       title: '壁纸设置', //导航栏 中间的标题
+      callback() {
+        if (_imageBuffer) {
+          wx.showModal({
+            title: '保存图片中,确定要中断退出吗?',
+            content: '',
+            complete: (res) => {
+              if (res.cancel) {
+
+              }
+
+              if (res.confirm) {
+                BtHelper.getInstance().endImage(0)
+              }
+            }
+          })
+        } else {
+          wx.navigateBack({
+            delta: 1,
+          })
+        }
+
+      }
     },
     src: '',
     showCrop: false,
     width: 250,//宽度
     height: 250,//高度
     _imageBuffer: null,
+    progressPercent: 60,
+    intervalId: 60,
 
   }, footerTap() {
     const that = this;
@@ -50,10 +74,29 @@ Page({
         console.log(res.tempFiles[0].tempFilePath)
         console.log(res.tempFiles[0].size)
 
-        that.setData({
-          imageSrc: res.tempFiles[0].tempFilePath, // 图片路径
-          showCrop: true
+        // that.setData({
+        //   imageSrc: res.tempFiles[0].tempFilePath, // 图片路径
+        //   showCrop: true
+        // })
+
+        // wx.editImage({
+        //   src: res.tempFiles[0].tempFilePath, // 图片路径
+        // })
+
+        wx.getImageInfo({
+          src: res.tempFiles[0].tempFilePath,
+          success(res) {
+            console.log(res)
+            wx.cropImage({
+              src: res.path,// 图片路径
+              cropScale: '1:1', // 裁剪比例
+              success(res) {
+                console.log(res)
+              }
+            })
+          }
         })
+
       }
     })
 
@@ -145,9 +188,28 @@ Page({
   },
   sendImage(imageBuffer) {
     let chunkSize = 20;
+    let _this = this
+    let progress = 0;
+
+    _this.setData({
+      progress: 0,
+      progressPercent: 0
+    });
+
+    // 定时器,每100毫秒执行一次
+    _this.intervalId = setInterval(function () {
+      if (progress >= 100) {
+        clearInterval(_this.intervalId); // 停止定时器
+      } else {
+        progress += 1; // 每次增加1%
+        _this.setData({
+          progressPercent: progress
+        });
+      }
+    }, 100);
+
     for (let i = 0; i < imageBuffer.length; i += chunkSize) {
       const chunk = imageBuffer.slice(i, i + chunkSize);
-      // this.sendImage(chunk);
       BtHelper.wallPaperData(chunk)
     }
   },
@@ -172,7 +234,7 @@ Page({
           let kind = event.kind;
           if (otaCmd === 1 && kind == 1) {
             // 开始发送
-            _this.sendOtaData()
+            _this.sendImage()
           } else if (otaCmd === 0 && kind == 1) {
             // 发送结束
             _this.endEnd()

+ 4 - 0
pages/piano/wallpaper/wallpaper.wxml

@@ -20,4 +20,8 @@
         <button type="primary" bindtap='submit'>确定裁剪</button>
     </view> -->
     <image-cropper bind:close="hideCut" cutRatio="1" wx:if="{{showCrop}}" imageSrc="{{imageSrc}}" />
+    <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>
+    </view>
 </view>

+ 21 - 0
pages/piano/wallpaper/wallpaper.wxss

@@ -73,6 +73,27 @@
 
 }
 
+.progress-container {
+    position: relative;
+    margin-inline: 56rpx;
+    margin-top: 615rpx;
+}
+
+.progress {
+    width: 100%;
+}
+
+.progress-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 24rpx;
+    z-index: 1;
+    font-weight: 500;
+}
+
 /* 
 .bottom {
     display: flex;