开发试听重录页面，并拆分作品上传组件

components/uploadFile/index.js

@@ -0,0 +1,71 @@
+import {
+  createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+  store
+} from '~/store/index'
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    tempFilePath: '',
+    uploadFlag: false,
+    uploadSuccess: false,
+    // 是否上传过
+    uploadState: false,
+    percent: 0,
+    audioPath: ''
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    upload() {
+      if (this.data.uploadState) {
+        return
+      }
+      this.setData({
+        uploadFlag: true,
+        uploadState: true
+      })
+      const uploadTask = wx.uploadFile({
+        url: 'https://reader-api.ai160.com//file/upload',
+        filePath: this.data.readDetail.tempFilePath,
+        name: '朗读录音',
+        header: {
+          uid: wx.getStorageSync('uid')
+        },
+        success: (res) => {
+          const formateRes = JSON.parse(res.data);
+          let audioPath = formateRes.data;
+          this.setData({
+            uploadSuccess: true,
+            audioPath
+          })
+        },
+        complete: () => {
+          this.setData({
+            uploadFlag: false
+          })
+        }
+      })
+      uploadTask.onProgressUpdate((res) => {
+        this.setData({
+          percent: res.progress
+        })
+      })
+    },
+    cancelMask() {
+      this.setData({
+        uploadSuccess: false
+      })
+    },
+  }
+})

components/uploadFile/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {},
+  "styleIsolation": "apply-shared"
+}

components/uploadFile/index.less

@@ -0,0 +1,94 @@
+.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);
+}
+
+.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;
+    z-index: 998;
+
+    .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;
+    }
+  }
+}

components/uploadFile/index.wxml

@@ -0,0 +1,20 @@
+<view class="btn" bindtap="upload">上传作品</view>
+<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" catchtap="cancelMask">
+      分享作品
+    </button>
+  </view>
+</view>

components/uploadFile/index.wxss

@@ -0,0 +1,83 @@
+.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);
+}
+.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;
+  z-index: 998;
+}
+.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;
+}

pages/index/index.wxml

@@ -14,7 +14,7 @@
   <!-- 滚动定位 -->
   <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
     <!-- 一级分类区域 -->
-    <scroll-view class="firstClassify" scroll-x="true">
+    <scroll-view class="firstClassify" scroll-x="true" enhanced show-scrollbar="{{false}}">
       <view class="firstBox" wx:for="{{10}}" wx:key="index">
         <image class="icon" src="/static/header.png" mode="" />
         <view class="name">书香美文</view>

pages/reading/index.js

@@ -1,6 +1,12 @@
 import {
   getreadInfo
 } from '~/api/video'
+import {
+  createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+  store
+} from '~/store/index'
 const aiengine = require('~/utils/ChivoxAiEngine')
 const sha1 = require('~/utils/sha1');
 let rowH = 0
@@ -22,6 +28,8 @@ Page({
     },
     contentH: 0,
     scrollTop: 0,
+    //如果readingReset为true就是重读
+    readingReset: false,
     article: [{
       id: 1,
       text: '传说在很久很久以前，',
@@ -58,23 +66,7 @@ Page({
       id: 9,
       text: '什么也看不见。',
       time: '27300'
-    }, {
-      id: 10,
-      text: '他一使劲翻身坐了起来，',
-      time: '29210'
-    }, {
-      id: 11,
-      text: '只听“咔嚓”一声，',
-      time: '32700'
-    }, {
-      id: 12,
-      text: '“大鸡蛋”裂开了一条缝，',
-      time: '35320'
-    }, {
-      id: 13,
-      text: '一丝微光透了进来。',
-      time: '38270'
-    }, ]
+    }]
   },
   onLoad(options) {
     let videoId = options.videoId
@@ -85,17 +77,30 @@ Page({
       return item
     })
     this.setData({
-      article: data
+      article: data,
+      readingReset: options.reset || false
     })
-    var query = wx.createSelectorQuery();
-    query.select('.content').boundingClientRect((rect) => {
-      this.setData({
-        contentH: rect.height
-      })
-    }).exec()
-    query.select('.row').boundingClientRect((rect) => {
-      this.rowH = rect.height
-    }).exec()
+    // 手工绑定 
+    this.storeBindings = createStoreBindings(this, {
+      store,
+      fields: {
+        readDetail: 'readDetail'
+      },
+      actions: {
+        setReadDetail: 'setReadDetail'
+      }
+    })
+    if (!options.reset) {
+      var query = wx.createSelectorQuery();
+      query.select('.content').boundingClientRect((rect) => {
+        this.setData({
+          contentH: rect.height
+        })
+      }).exec()
+      query.select('.row').boundingClientRect((rect) => {
+        this.rowH = rect.height
+      }).exec()
+    }
     this.videoContext = wx.createVideoContext('myVideo')
     // 录音授权
     wx.getSetting({
@@ -213,8 +218,6 @@ Page({
       this.setData({
         tempFilePath: res.tempFilePath,
       });
-      // 长度过长，不用url传输
-      wx.setStorageSync('tempFilePath', res.tempFilePath)
       //录音机结束后，驰声引擎执行结束操作，等待评测返回结果
       wsEngine.stop({
         success: () => {
@@ -305,16 +308,19 @@ Page({
     const accuracy = Math.floor(result.overall); // 准确度 发音分
     const fluency = Math.floor(result.fluency.overall); //流利度
     let myOverall = Math.floor(integrity * 0.3 + accuracy * 0.5 + fluency * 0.1 + tone * 0.1);
-    let detail = JSON.stringify({
+    let detail = {
       integrity,
       tone,
       accuracy,
       fluency,
       myOverall,
+      tempFilePath: this.data.tempFilePath,
       title: this.data.videoInfo.userRead.title,
-    })
+      id: this.data.videoInfo.userRead.exampleId,
+    }
+    this.setReadDetail(detail)
     wx.redirectTo({
-      url: `/pages/score/index?detail=${detail}`,
+      url: `/pages/score/index`,
     })
   },
   /**

pages/reading/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "uploadFile": "/components/uploadFile/index"
+  }
 }

pages/reading/index.less

@@ -12,7 +12,7 @@
     position: absolute;
     width: 100%;
     height: 422rpx;
-    z-index: 99;
+    z-index: 10;
   }
 
   #myVideo {
@@ -91,6 +91,12 @@
       top: 60rpx;
       font-size: 28rpx;
     }
+
+    .btnPosition {
+      position: absolute;
+      right: 30rpx;
+      top: 20rpx;
+    }
   }
 
   .playImgBg {

pages/reading/index.wxml

@@ -2,7 +2,7 @@
   <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state}}" />
   <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="contentBox" wx:if="{{!readingReset}}">
     <view class="articleMask"></view>
     <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
       scroll-with-animation>
@@ -13,8 +13,9 @@
     </scroll-view>
   </view>
   <view class="controller">
-    <image src="{{state?'/static/readingNow.gif':'/static/work.png'}}" class="playImg" bindtap="setCountDown" />
-    <view class="text">{{state?'完成录制':'开始挑战'}}</view>
+    <image src="{{state?'/static/readingNow.gif':'/static/work.png'}}" class="playImg" bindtap="getRecordScore" />
+    <view class="text">{{state?'完成录制':readingReset?'点击重录':'开始挑战'}}</view>
+    <uploadFile wx:if="{{readingReset}}" class="btnPosition"/>
   </view>
   <view class="playImgBg"></view>
   <!-- 倒计时 -->

pages/reading/index.wxss

@@ -12,7 +12,7 @@
   position: absolute;
   width: 100%;
   height: 422rpx;
-  z-index: 99;
+  z-index: 10;
 }
 .readingBox #myVideo {
   width: 100%;
@@ -80,6 +80,11 @@
   top: 60rpx;
   font-size: 28rpx;
 }
+.readingBox .controller .btnPosition {
+  position: absolute;
+  right: 30rpx;
+  top: 20rpx;
+}
 .readingBox .playImgBg {
   position: absolute;
   width: 134rpx;

pages/score/index.js

@@ -27,19 +27,17 @@ Page({
     this.storeBindings = createStoreBindings(this, {
       store,
       fields: {
-        userInfo: 'userInfo'
+        userInfo: 'userInfo',
+        readDetail: 'readDetail'
       },
     })
     this.storeBindings.updateStoreBindings()
-
-    let score = JSON.parse(options.detail)
+    let score = this.data.readDetail
     wx.setNavigationBarTitle({
       title: score.title
     })
-    let tempFilePath = wx.getStorageSync('tempFilePath')
     this.setData({
       score,
-      tempFilePath
     })
   },
   upload() {
@@ -52,7 +50,7 @@ Page({
     })
     const uploadTask = wx.uploadFile({
       url: 'https://reader-api.ai160.com//file/upload',
-      filePath: this.data.tempFilePath,
+      filePath: this.data.score.tempFilePath,
       name: '朗读录音',
       header: {
         uid: wx.getStorageSync('uid')
@@ -77,6 +75,11 @@ Page({
       })
     })
   },
+  backReading() {
+    wx.redirectTo({
+      url: `/pages/reading/index?videoId=${this.data.score.id}&reset=true`,
+    })
+  },
   cancelMask() {
     this.setData({
       uploadSuccess: false

pages/score/index.wxml

@@ -55,18 +55,18 @@
   </view>
   <!-- 底部 -->
   <view class="footer">
-    <view class="btn">试听</view>
-    <view class="btn btn2" bindtap="upload">上传作品</view>
+    <view class="btn" bindtap="backReading">试听</view>
+    <!-- <view class="btn btn2" bindtap="upload">上传作品</view> -->
   </view>
-  <view class="uploadBox" wx:if="{{uploadFlag}}">
+<!--   <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> -->
   <!-- 上传成功 -->
-  <view class="uploadBox successBox" wx:if="{{uploadSuccess}}" catchtap="cancelMask">
+  <!-- <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>
@@ -76,5 +76,5 @@
         分享作品
       </button>
     </view>
-  </view>
+  </view> -->
 </view>

project.private.config.json

@@ -12,7 +12,7 @@
         {
           "name": "",
           "pathName": "pages/reading/index",
-          "query": "videoId=10312700101",
+          "query": "videoId=10312700101&reset=true",
           "launchMode": "default",
           "scene": null
         },

store/index.js

@@ -7,6 +7,8 @@ import {
 export const store = observable({
   // 数据字段
   userInfo: {},
+  // 阅读结果
+  readDetail: {},
   // 计算属性
   get sum() {
     return this.numA + this.numB
@@ -23,5 +25,9 @@ export const store = observable({
     }
     step.gradeName = grade ? gradeObj[grade] : '请选择'
     this.userInfo = step
+  }, ),
+  setReadDetail: action(function (detail) {
+    console.log('store中的', detail);
+    this.readDetail = detail
   })
 })