上传成功样式

pages/score/index.js

@@ -14,6 +14,8 @@ Page({
     tempFilePath: '',
     uploadFlag: false,
     uploadSuccess: false,
+    // 是否上传过
+    uploadState: false,
     percent: 0,
     audioPath: ''
   },
@@ -41,8 +43,12 @@ Page({
     })
   },
   upload() {
+    if (this.data.uploadState) {
+      return
+    }
     this.setData({
-      uploadFlag: true
+      uploadFlag: true,
+      uploadState: true
     })
     const uploadTask = wx.uploadFile({
       url: 'https://reader-api.ai160.com//file/upload',
@@ -54,7 +60,6 @@ Page({
       success: (res) => {
         const formateRes = JSON.parse(res.data);
         let audioPath = formateRes.data;
-        console.log(audioPath);
         this.setData({
           uploadSuccess: true,
           audioPath
@@ -70,11 +75,16 @@ Page({
       this.setData({
         percent: res.progress
       })
-      console.log('上传进度', res.progress)
     })
   },
-
+  cancelMask() {
+    this.setData({
+      uploadSuccess: false
+    })
+  },
   onShareAppMessage() {
-
+    this.setData({
+      uploadSuccess: false
+    })
   }
 })

pages/score/index.less

@@ -159,7 +159,7 @@
   }
 }
 
-.countDownBox {
+.uploadBox {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -169,7 +169,7 @@
   z-index: 999;
 
 
-  .countDown {
+  .upload {
     position: absolute;
     left: 0rpx;
     right: 0rpx;
@@ -195,4 +195,50 @@
       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.wxml

@@ -58,11 +58,23 @@
     <view class="btn">试听</view>
     <view class="btn btn2" bindtap="upload">上传作品</view>
   </view>
-  <view class="countDownBox" wx:if="{{uploadFlag}}">
-    <view class="countDown">
+  <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>
     </view>
   </view>
+  <!-- 上传成功 -->
+  <view class="uploadBox successBox" wx:if="{{uploadSuccess}}" catchtap="cancelMask">
+    <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">
+        分享作品
+      </button>
+    </view>
+  </view>
 </view>

pages/score/index.wxss

@@ -135,7 +135,7 @@
   background-color: #F84041;
   box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
 }
-.countDownBox {
+.uploadBox {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -144,7 +144,7 @@
   background-color: rgba(255, 255, 255, 0);
   z-index: 999;
 }
-.countDownBox .countDown {
+.uploadBox .upload {
   position: absolute;
   left: 0rpx;
   right: 0rpx;
@@ -160,11 +160,50 @@
   box-sizing: border-box;
   font-size: 30rpx;
 }
-.countDownBox .countDown .speed {
+.uploadBox .upload .speed {
   margin-top: 70rpx;
 }
-.countDownBox .countDown .speedProgress {
+.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;
+}