开发上传作品时阻止退出当前页面

components/uploadFile/index.js

@@ -41,7 +41,8 @@ Component({
     // 是否上传过
     uploadState: false,
     percent: 0,
-    userReadId: ''
+    userReadId: '',
+    tips: false
   },
   /**
    * 组件的方法列表
@@ -78,8 +79,9 @@ Component({
         }
       })
       uploadTask.onProgressUpdate((res) => {
+        console.log(res.progress, 'ppppp');
         this.setData({
-          percent: res.progress
+          percent: res.progress - 1
         })
       })
       await userEvent({
@@ -121,7 +123,25 @@ Component({
         uploadSuccess: true,
         userReadId: res.id,
       })
-      wx.disableAlertBeforeUnload();
+    },
+    beforeleave() {
+      if (this.data.uploadFlag) {
+        this.setData({
+          uploadFlag: false
+        })
+        wx.showModal({
+          title: '上传作品中',
+          content: '小朋友请耐心等待哦~',
+          showCancel: false,
+          success: (res) => {
+            if (res.confirm) {
+              this.setData({
+                uploadFlag: true
+              })
+            }
+          }
+        })
+      }
     },
     jumpWork() {
       wx.redirectTo({

components/uploadFile/index.less

@@ -1,109 +1,124 @@
 .btn {
-    padding: 16rpx 0rpx;
-    text-align: center;
-    border-radius: 50rpx;
-    width: 220rpx;
-    font-size: 30rpx;
-    color: white;
-    background-color: #F84041;
-    box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+  padding: 16rpx 0rpx;
+  text-align: center;
+  border-radius: 50rpx;
+  width: 220rpx;
+  font-size: 30rpx;
+  color: white;
+  background-color: #F84041;
+  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
 }
 
 .uploadBox {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(255, 255, 255, 0);
-    z-index: 999;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
 
-    .upload {
-        position: absolute;
-        left: 0rpx;
-        right: 0rpx;
-        top: 30%;
-        margin: auto;
-        width: 293rpx;
-        height: 293rpx;
-        border-radius: 30rpx;
-        color: white;
-        background-color: rgba(0, 0, 0, 0.8);
-        text-align: center;
-        padding: 0rpx 38rpx;
-        box-sizing: border-box;
-        font-size: 30rpx;
-        z-index: 998;
+  .upload {
+    position: absolute;
+    left: 0rpx;
+    right: 0rpx;
+    top: 30%;
+    margin: auto;
+    color: white;
+    text-align: center;
+    box-sizing: border-box;
+    font-size: 32rpx;
+    font-weight: bold;
+    z-index: 998;
 
-        .speed {
-            margin-top: 70rpx;
-        }
+    .tipsImg {
+      width: 221rpx;
+      height: 190rpx;
+      margin-right: 30rpx;
+      margin-bottom: 12rpx;
+    }
 
-        .speedProgress {
-            border-radius: 50rpx;
-            overflow: hidden;
-            margin: 18rpx 0rpx 60rpx;
-        }
+    .speed {
+      position: relative;
+      margin: 14rpx auto;
+      text-align: center;
+      font-size: 50rpx;
+      animation: jump 1s ease-out infinite;
     }
+
+    @keyframes jump {
+      0% {
+        opacity: 0;
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+      }
+    }
+  }
 }
 
 .successBox {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-    background-color: rgba(0, 0, 0, 0.438);
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.438);
 
-    .success {
-        background-color: white;
-        width: 558rpx;
-        height: 520rpx;
-        position: absolute;
-        left: 0rpx;
-        right: 0rpx;
-        top: 0rpx;
-        bottom: 0px;
-        margin: auto;
-        border-radius: 30rpx;
-        background-color: white;
-        font-size: 30rpx;
-        padding: 35rpx;
-        box-sizing: border-box;
-        text-align: center;
-        font-size: 36rpx;
+  .success {
+    background-color: white;
+    width: 558rpx;
+    height: 520rpx;
+    position: absolute;
+    left: 0rpx;
+    right: 0rpx;
+    top: 0rpx;
+    bottom: 0px;
+    margin: auto;
+    border-radius: 30rpx;
+    background-color: white;
+    font-size: 30rpx;
+    padding: 35rpx;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 36rpx;
 
-        .icon {
-            width: 100rpx;
-            height: 100rpx;
-        }
+    .icon {
+      width: 100rpx;
+      height: 100rpx;
+    }
 
-        .tips1 {
-            margin: 16rpx 0rpx 34rpx;
-        }
+    .tips1 {
+      margin: 16rpx 0rpx 34rpx;
+    }
 
-        .tips2 {
-            margin-bottom: 15rpx;
-        }
+    .tips2 {
+      margin-bottom: 15rpx;
+    }
 
-        .shareBtn {
-            width: 280rpx;
-            margin: 60rpx auto 0rpx;
-            padding: 14rpx 0rpx;
-            color: white;
-            background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
-            box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
-            border-radius: 40rpx;
-        }
+    .shareBtn {
+      width: 280rpx;
+      margin: 60rpx auto 0rpx;
+      padding: 14rpx 0rpx;
+      color: white;
+      background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
+      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+      border-radius: 40rpx;
     }
+  }
 }
 
 .eeee {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    background-color: rebeccapurple;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rebeccapurple;
 }

components/uploadFile/index.wxml

@@ -2,22 +2,27 @@
 <button class="resetBtn btn" bindtap="jumpWork" wx:else>
   查看作品
 </button>
-<view class="uploadBox" wx:if="{{uploadFlag}}">
-  <view class="upload">
-    <view class="speed">{{percent}}%</view>
-    <progress percent="{{percent}}" class="speedProgress" stroke-width="10" activeColor="#C3F166" />
-    <view>作品上传中</view>
+<page-container show='{{uploadFlag}}' bind:beforeleave='beforeleave'>
+  <view class="uploadBox">
+    <view class="upload">
+      <image src="/static/uploadTips.png" class="tipsImg" />
+      <view>作品上传中,小朋友请耐心等待哦~</view>
+      <view class="speed">
+        {{percent}}%
+      </view>
+    </view>
   </view>
-</view>
-<!-- 上传成功 -->
-<view class="successBox " catchtap="cancelMask" wx:if="{{uploadSuccess}}">
-  <view class="success" catchtap="true">
-    <image src="/static/lan.png" class="icon" mode="" />
-    <view class="tips1">作品上传成功</view>
-    <view class="tips2">快去分享你的作品</view>
-    <view class="tips2">召唤小伙伴点赞评论！</view>
-    <button class="resetBtn shareBtn" open-type="share" catchtap="cancelMask">
-      分享作品
-    </button>
-  </view>
-</view>
+  </page-container>
+
+  <!-- 上传成功 -->
+  <view class="successBox " catchtap="cancelMask" wx:if="{{uploadSuccess}}">
+    <view class="success" catchtap="true">
+      <image src="/static/lan.png" class="icon" mode="" />
+      <view class="tips1">作品上传成功</view>
+      <view class="tips2">快去分享你的作品</view>
+      <view class="tips2">召唤小伙伴点赞评论！</view>
+      <button class="resetBtn shareBtn" open-type="share" catchtap="cancelMask">
+        分享作品
+      </button>
+    </view>
+  </view>

components/uploadFile/index.wxss

@@ -14,7 +14,7 @@
   left: 0px;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(255, 255, 255, 0);
+  background-color: rgba(0, 0, 0, 0.3);
   z-index: 999;
 }
 .uploadBox .upload {
@@ -23,24 +23,36 @@
   right: 0rpx;
   top: 30%;
   margin: auto;
-  width: 293rpx;
-  height: 293rpx;
-  border-radius: 30rpx;
   color: white;
-  background-color: rgba(0, 0, 0, 0.8);
   text-align: center;
-  padding: 0rpx 38rpx;
   box-sizing: border-box;
-  font-size: 30rpx;
+  font-size: 32rpx;
+  font-weight: bold;
   z-index: 998;
 }
+.uploadBox .upload .tipsImg {
+  width: 221rpx;
+  height: 190rpx;
+  margin-right: 30rpx;
+  margin-bottom: 12rpx;
+}
 .uploadBox .upload .speed {
-  margin-top: 70rpx;
+  position: relative;
+  margin: 14rpx auto;
+  text-align: center;
+  font-size: 50rpx;
+  animation: jump 1s ease-out infinite;
 }
-.uploadBox .upload .speedProgress {
-  border-radius: 50rpx;
-  overflow: hidden;
-  margin: 18rpx 0rpx 60rpx;
+@keyframes jump {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 .successBox {
   position: fixed;

pages/score/index.js

@@ -22,15 +22,15 @@ Page({
    */
   async onLoad(options) {
     console.log(options);
-    wx.enableAlertBeforeUnload({
-      message: "未完成上传，是否退出？",
-      success: function (res) {
-        console.log(res)
-      },
-      fail: function (e) {
-        console.log(e)
-      }
-    })
+    /*     wx.enableAlertBeforeUnload({
+          message: "未完成上传，是否退出？",
+          success: function (res) {
+            console.log(res)
+          },
+          fail: function (e) {
+            console.log(e)
+          }
+        }) */
     this.storeBindings = createStoreBindings(this, {
       store,
       fields: {
@@ -74,6 +74,7 @@ Page({
       uploadHide: true
     })
   },
+ 
   creatShare() {
     let video = this.data.readDetail
     return new Promise((resolve, reject) => {

pages/score/index.less

@@ -152,88 +152,4 @@
       box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
     }
   }
-}
-
-.uploadBox {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  z-index: 999;
-
-
-  .upload {
-    position: absolute;
-    left: 0rpx;
-    right: 0rpx;
-    top: 30%;
-    margin: auto;
-    width: 293rpx;
-    height: 293rpx;
-    border-radius: 30rpx;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.8);
-    text-align: center;
-    padding: 0rpx 38rpx;
-    box-sizing: border-box;
-    font-size: 30rpx;
-
-    .speed {
-      margin-top: 70rpx;
-    }
-
-    .speedProgress {
-      border-radius: 50rpx;
-      overflow: hidden;
-      margin: 18rpx 0rpx 60rpx;
-    }
-  }
-}
-
-.successBox {
-  background-color: rgba(0, 0, 0, 0.438);
-
-  .success {
-    background-color: white;
-    width: 558rpx;
-    height: 520rpx;
-    position: absolute;
-    left: 0rpx;
-    right: 0rpx;
-    top: 0rpx;
-    bottom: 0px;
-    margin: auto;
-    border-radius: 30rpx;
-    background-color: white;
-    font-size: 30rpx;
-    padding: 35rpx;
-    box-sizing: border-box;
-    text-align: center;
-    font-size: 36rpx;
-
-    .icon {
-      width: 100rpx;
-      height: 100rpx;
-    }
-
-    .tips1 {
-      margin: 16rpx 0rpx 34rpx;
-    }
-
-    .tips2 {
-      margin-bottom: 15rpx;
-    }
-
-    .shareBtn {
-      width: 280rpx;
-      margin: 60rpx auto 0rpx;
-      padding: 14rpx 0rpx;
-      color: white;
-      background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
-      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
-      border-radius: 40rpx;
-    }
-  }
 }

pages/score/index.wxss

@@ -131,75 +131,3 @@
   background-color: #66C5FF;
   box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
 }
-.uploadBox {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  z-index: 999;
-}
-.uploadBox .upload {
-  position: absolute;
-  left: 0rpx;
-  right: 0rpx;
-  top: 30%;
-  margin: auto;
-  width: 293rpx;
-  height: 293rpx;
-  border-radius: 30rpx;
-  color: white;
-  background-color: rgba(0, 0, 0, 0.8);
-  text-align: center;
-  padding: 0rpx 38rpx;
-  box-sizing: border-box;
-  font-size: 30rpx;
-}
-.uploadBox .upload .speed {
-  margin-top: 70rpx;
-}
-.uploadBox .upload .speedProgress {
-  border-radius: 50rpx;
-  overflow: hidden;
-  margin: 18rpx 0rpx 60rpx;
-}
-.successBox {
-  background-color: rgba(0, 0, 0, 0.438);
-}
-.successBox .success {
-  width: 558rpx;
-  height: 520rpx;
-  position: absolute;
-  left: 0rpx;
-  right: 0rpx;
-  top: 0rpx;
-  bottom: 0px;
-  margin: auto;
-  border-radius: 30rpx;
-  background-color: white;
-  font-size: 30rpx;
-  padding: 35rpx;
-  box-sizing: border-box;
-  text-align: center;
-  font-size: 36rpx;
-}
-.successBox .success .icon {
-  width: 100rpx;
-  height: 100rpx;
-}
-.successBox .success .tips1 {
-  margin: 16rpx 0rpx 34rpx;
-}
-.successBox .success .tips2 {
-  margin-bottom: 15rpx;
-}
-.successBox .success .shareBtn {
-  width: 280rpx;
-  margin: 60rpx auto 0rpx;
-  padding: 14rpx 0rpx;
-  color: white;
-  background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
-  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
-  border-radius: 40rpx;
-}