pk结果上传拦截退出

pages/reading/index.js

@@ -434,6 +434,10 @@ Page({
           "speed": _data.fluency,
           "intonation": _data.tone,
           "score": _data.myOverall
+        }).finally(() => {
+          this.setData({
+            uploadState: false
+          })
         })
         console.log({
           "userReadId": uploadRes.id,
@@ -456,11 +460,7 @@ Page({
           url: `/pages/pkResult/index?id=${result.id}`
         })
       },
-      complete: () => {
-        this.setData({
-          uploadState: false
-        })
-      }
+
     });
     uploadTask.onProgressUpdate((res) => {
       this.setData({
@@ -592,6 +592,26 @@ Page({
       ["silderData.currentTime"]: '00:00'
     })
   },
+  // 阻止作品上传时返回
+  beforeleave() {
+    if (this.data.uploadState) {
+      this.setData({
+        uploadState: false
+      })
+      wx.showModal({
+        title: '上传作品中',
+        content: '小朋友请耐心等待哦~',
+        showCancel: false,
+        success: (res) => {
+          if (res.confirm) {
+            this.setData({
+              uploadState: true
+            })
+          }
+        }
+      })
+    }
+  },
   // 获取设备高度与行高度
   getHeight() {
     var query = wx.createSelectorQuery();
@@ -622,7 +642,6 @@ Page({
     wsEngine.reset()
     this.resetReading()
     this.storeBindings.destroyStoreBindings()
-
   },
   backReading() {
     wx.navigateBack({

pages/reading/index.less

@@ -298,13 +298,13 @@
     }
   }
 
-  .self-uploadBox {
+  .uploadBox {
     position: fixed;
     top: 0px;
     left: 0px;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0);
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
     z-index: 999;
 
     .upload {
@@ -313,25 +313,40 @@
       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;
 
+      .tipsImg {
+        width: 221rpx;
+        height: 190rpx;
+        margin-right: 30rpx;
+        margin-bottom: 12rpx;
+      }
+
       .speed {
-        margin-top: 70rpx;
+        position: relative;
+        margin: 14rpx auto;
+        text-align: center;
+        font-size: 50rpx;
+        animation: jump 1s ease-out infinite;
       }
 
-      .speedProgress {
-        border-radius: 50rpx;
-        overflow: hidden;
-        margin: 18rpx 0rpx 60rpx;
+      @keyframes jump {
+        0% {
+          opacity: 0;
+        }
+
+        50% {
+          opacity: 1;
+        }
+
+        100% {
+          opacity: 0;
+        }
       }
     }
   }

pages/reading/index.wxml

@@ -123,12 +123,16 @@
       <view class="tips">秒后开始</view>
     </view>
   </view>
-  <view class="self-uploadBox" wx:if="{{uploadState}}">
-    <view class="upload">
-      <view class="speed">{{percent}}%</view>
-      <progress percent="{{percent}}" class="speedProgress" stroke-width="10" activeColor="#C3F166" />
-      <view>挑战结算中</view>
+  <page-container show="{{uploadState}}" 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>
+  </page-container>
   <canvas id='share' type="2d"> </canvas>
 </view>

pages/reading/index.wxss

@@ -261,39 +261,51 @@
   font-size: 124rpx;
   margin-bottom: 6rpx;
 }
-.readingBox .self-uploadBox {
+.readingBox .uploadBox {
   position: fixed;
   top: 0px;
   left: 0px;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.3);
   z-index: 999;
 }
-.readingBox .self-uploadBox .upload {
+.readingBox .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;
+  font-size: 32rpx;
+  font-weight: bold;
   z-index: 998;
 }
-.readingBox .self-uploadBox .upload .speed {
-  margin-top: 70rpx;
+.readingBox .uploadBox .upload .tipsImg {
+  width: 221rpx;
+  height: 190rpx;
+  margin-right: 30rpx;
+  margin-bottom: 12rpx;
 }
-.readingBox .self-uploadBox .upload .speedProgress {
-  border-radius: 50rpx;
-  overflow: hidden;
-  margin: 18rpx 0rpx 60rpx;
+.readingBox .uploadBox .upload .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;
+  }
 }
 .scoreBoxC {
   flex: 1;