调整动画样式

pages/reading/index.js

@@ -3,7 +3,7 @@ import {
 } from '~/api/video'
 const aiengine = require('~/utils/ChivoxAiEngine')
 const sha1 = require('~/utils/sha1');
-let rowHeight = 0
+let rowH = 0
 let videoContext = null
 let stl = null
 let setTimeoutObj = null
@@ -20,6 +20,7 @@ Page({
       state: false,
       num: 3,
     },
+    contentH: 0,
     scrollTop: 0,
     article: [{
       id: 1,
@@ -87,8 +88,13 @@ Page({
       article: data
     })
     var query = wx.createSelectorQuery();
+    query.select('.content').boundingClientRect((rect) => {
+      this.setData({
+        contentH: rect.height
+      })
+    }).exec()
     query.select('.row').boundingClientRect((rect) => {
-      this.rowHeight = rect.height
+      this.rowH = rect.height
     }).exec()
     this.videoContext = wx.createVideoContext('myVideo')
     // 录音授权
@@ -207,6 +213,8 @@ Page({
       this.setData({
         tempFilePath: res.tempFilePath,
       });
+      // 长度过长，不用url传输
+      wx.setStorageSync('tempFilePath', res.tempFilePath)
       //录音机结束后，驰声引擎执行结束操作，等待评测返回结果
       wsEngine.stop({
         success: () => {
@@ -263,7 +271,7 @@ Page({
           currentRow: ++this.data.currentRow
         })
         this.setData({
-          scrollTop: this.rowHeight * this.data.currentRow
+          scrollTop: this.rowH * this.data.currentRow
         })
         this.startRecording()
       },
@@ -303,7 +311,7 @@ Page({
       accuracy,
       fluency,
       myOverall,
-      title: this.data.videoInfo.userRead.title
+      title: this.data.videoInfo.userRead.title,
     })
     wx.redirectTo({
       url: `/pages/score/index?detail=${detail}`,

pages/reading/index.wxml

@@ -1,18 +1,19 @@
 <view class="readingBox">
   <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state}}" />
-  <video id="myVideo" src="{{videoInfo.userRead.videoPath}}" bindended='videoEnd' controls="{{false}}"
+  <video id="myVideo" src="{{videoInfo.userRead.originVideo}}" bindended='videoEnd' controls="{{false}}"
     show-center-play-btn="{{false}}" poster="{{videoInfoCopy.userRead.coverImg}}"></video>
   <view class="contentBox">
     <view class="articleMask"></view>
     <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
       scroll-with-animation>
-      <view style="height: 60rpx;"></view>
+      <view style="height: 180rpx;"></view>
       <view class="row {{currentRow==index?'currentRow':''}}" wx:for="{{article}}" wx:key="id">{{item.text}}
       </view>
+      <view style="height: {{contentH}}rpx;"></view>
     </scroll-view>
   </view>
   <view class="controller">
-    <image src="{{state?'/static/readingNow.gif':'/static/work.png'}}" class="playImg" bindtap="getRecordScore" />
+    <image src="{{state?'/static/readingNow.gif':'/static/work.png'}}" class="playImg" bindtap="setCountDown" />
     <view class="text">{{state?'完成录制':'开始挑战'}}</view>
   </view>
   <view class="playImgBg"></view>

pages/score/index.js

@@ -10,7 +10,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    score: {}
+    score: {},
+    tempFilePath: ''
   },
 
   /**
@@ -24,61 +25,36 @@ Page({
       },
     })
     this.storeBindings.updateStoreBindings()
+
     let score = JSON.parse(options.detail)
     wx.setNavigationBarTitle({
       title: score.title
     })
-    console.log(score);
+    let tempFilePath = wx.getStorageSync('tempFilePath')
     this.setData({
-      score
+      score,
+      tempFilePath
     })
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
+  upload() {
+    const uploadTask = wx.uploadFile({
+      url: 'https://reader-api.ai160.com//file/upload',
+      filePath: this.data.tempFilePath,
+      name: '朗读录音',
+      header: {
+        uid: wx.getStorageSync('uid')
+      },
+      success: (res) => {
+        const formateRes = JSON.parse(res.data);
+        let audioPath = formateRes.data;
+        console.log(audioPath);
+      }
+    })
+    uploadTask.onProgressUpdate((res) => {
+      console.log('上传进度', res.progress)
+    })
   },
 
-  /**
-   * 用户点击右上角分享
-   */
   onShareAppMessage() {
 
   }

pages/score/index.less

@@ -157,4 +157,42 @@
       box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
     }
   }
+}
+
+.countDownBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  z-index: 999;
+
+
+  .countDown {
+    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;
+    }
+  }
 }

pages/score/index.wxml

@@ -24,28 +24,28 @@
       <view class="progressBox">
         <view class="row">
           <view class="name">完整度</view>
-          <progress class="progress" percent='{{score.integrity}}' stroke-width="18" activeColor="#70D9FF" />
+          <progress class="progress" active percent='{{score.integrity}}' stroke-width="18" activeColor="#70D9FF" />
           <view class="scoreInfo">
             {{score.integrity}}/100
           </view>
         </view>
         <view class="row">
           <view class="name">正确率</view>
-          <progress class="progress" percent='{{score.accuracy}}' stroke-width="18" activeColor="#918EFD" />
+          <progress class="progress" active percent='{{score.accuracy}}' stroke-width="18" activeColor="#918EFD" />
           <view class="scoreInfo">
             {{score.accuracy}}/100
           </view>
         </view>
         <view class="row">
           <view class="name">流利度</view>
-          <progress class="progress" percent='{{score.fluency}}' stroke-width="18" activeColor="#FE9500" />
+          <progress class="progress" active percent='{{score.fluency}}' stroke-width="18" activeColor="#FE9500" />
           <view class="scoreInfo">
             {{score.fluency}}/100
           </view>
         </view>
         <view class="row">
           <view class="name">语调</view>
-          <progress class="progress" percent='{{score.tone}}' stroke-width="18" activeColor="#9BE74B " />
+          <progress class="progress" active percent='{{score.tone}}' stroke-width="18" activeColor="#9BE74B " />
           <view class="scoreInfo">
             {{score.tone}}/100
           </view>
@@ -56,6 +56,13 @@
   <!-- 底部 -->
   <view class="footer">
     <view class="btn">试听</view>
-    <view class="btn btn2">上传作品</view>
+    <view class="btn btn2" bindtap="upload">上传作品</view>
+  </view>
+  <view class="countDownBox">
+    <view class="countDown">
+      <view class="speed">50%</view>
+      <progress percent="60" class="speedProgress" stroke-width="10" activeColor="#C3F166" />
+      <view>作品上传中</view>
+    </view>
   </view>
 </view>

pages/score/index.wxss

@@ -135,3 +135,36 @@
   background-color: #F84041;
   box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
 }
+.countDownBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  z-index: 999;
+}
+.countDownBox .countDown {
+  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;
+}
+.countDownBox .countDown .speed {
+  margin-top: 70rpx;
+}
+.countDownBox .countDown .speedProgress {
+  border-radius: 50rpx;
+  overflow: hidden;
+  margin: 18rpx 0rpx 60rpx;
+}