bayi před 2 roky
rodič
revize
400af29a8f

+ 1 - 1
app.json

@@ -35,7 +35,7 @@
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#F2F6FC",
-    "navigationBarTitleText": "小学语文朗读配音",
+    "navigationBarTitleText": "朗读小咖秀",
     "navigationBarTextStyle": "black",
     "onReachBottomDistance": 50,
     "enablePullDownRefresh": false

+ 91 - 76
components/uploadFile/index.less

@@ -1,94 +1,109 @@
 .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: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  z-index: 999;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    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;
+    .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;
-    }
+        .speed {
+            margin-top: 70rpx;
+        }
 
-    .speedProgress {
-      border-radius: 50rpx;
-      overflow: hidden;
-      margin: 18rpx 0rpx 60rpx;
+        .speedProgress {
+            border-radius: 50rpx;
+            overflow: hidden;
+            margin: 18rpx 0rpx 60rpx;
+        }
     }
-  }
 }
 
 .successBox {
-  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;
 }

+ 15 - 15
components/uploadFile/index.wxml

@@ -1,20 +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 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 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>

+ 16 - 2
components/uploadFile/index.wxss

@@ -12,8 +12,8 @@
   position: fixed;
   top: 0px;
   left: 0px;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: rgba(255, 255, 255, 0);
   z-index: 999;
 }
@@ -43,6 +43,12 @@
   margin: 18rpx 0rpx 60rpx;
 }
 .successBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
   background-color: rgba(0, 0, 0, 0.438);
 }
 .successBox .success {
@@ -81,3 +87,11 @@
   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;
+}

+ 384 - 388
pages/reading/index.js

@@ -1,15 +1,15 @@
 import {
-  getreadInfo
+    getreadInfo
 } from '~/api/video'
 import {
-  publishWorks,
-  uploadPk
+    publishWorks,
+    uploadPk
 } from '~/api/works'
 import {
-  createStoreBindings
+    createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 const aiengine = require('~/utils/ChivoxAiEngine')
 const sha1 = require('~/utils/sha1');
@@ -28,403 +28,399 @@ let wsEngine = aiengine.createWsEngine({});
 /*微信录音*/
 let recorderManager = wx.getRecorderManager();
 Page({
-  data: {
-    videoInfo: {},
-    currentRow: null,
-    state: false,
-    countDown: {
-      state: false,
-      num: 3,
+    data: {
+        videoInfo: {},
+        currentRow: null,
+        state: false,
+        countDown: {
+            state: false,
+            num: 3,
+        },
+        contentH: 0,
+        scrollTop: 0,
+        //如果readingReset为true就是重读
+        readingReset: false,
+        //readingType为public是普通阅读,为pk是pk逻辑,readMatch为朗读赛
+        readingType: 'public',
+        percent: 0,
+        uploadState: false,
+        article: []
     },
-    contentH: 0,
-    scrollTop: 0,
-    //如果readingReset为true就是重读
-    readingReset: false,
-    //readingType为public是普通阅读,为pk是pk逻辑,readMatch为朗读赛
-    readingType: 'public',
-    percent: 0,
-    uploadState: false,
-    article: []
-  },
-  onLoad(options) {
-    let videoId = options.videoId
-    this.getreadInfo(videoId, options.reset)
-    console.log(options, 'options');
-    this.setData({
-      readingReset: options.reset || false,
-      readingType: options.readingType || 'public'
-    })
-    // 手工绑定 
-    this.storeBindings = createStoreBindings(this, {
-      store,
-      fields: {
-        userInfo: 'userInfo',
-        readDetail: 'readDetail',
-        pkData: 'pkData'
-      },
-      actions: {
-        setReadDetail: 'setReadDetail'
-      }
-    })
+    onLoad(options) {
+        let videoId = options.videoId
+        this.getreadInfo(videoId, options.reset)
+        console.log(options, 'options');
+        this.setData({
+            readingReset: options.reset || false,
+            readingType: options.readingType || 'public'
+        })
+        // 手工绑定 
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo',
+                readDetail: 'readDetail',
+                pkData: 'pkData'
+            },
+            actions: {
+                setReadDetail: 'setReadDetail'
+            }
+        })
 
-    // 录音授权
-    wx.getSetting({
-      success(res) {
-        if (!res.authSetting['scope.record']) {
-          wx.authorize({
-            scope: 'scope.record',
-            success() {
-              // 用户已经同意小程序使用录音功能,后续调用接口不会弹窗询问
-              wx.getRecorderManager()
+        // 录音授权
+        wx.getSetting({
+            success(res) {
+                if (!res.authSetting['scope.record']) {
+                    wx.authorize({
+                        scope: 'scope.record',
+                        success() {
+                            // 用户已经同意小程序使用录音功能,后续调用接口不会弹窗询问
+                            wx.getRecorderManager()
+                        }
+                    })
+                }
             }
-          })
-        }
-      }
-    })
-    /*监听评测结果:必须在基础引擎创建后,调用任何评测接口前设置监听,否则有可能收不到相关事件。*/
-    wsEngine.onResult((res) => {
-      this.getRecordScore(res)
-    });
-    wsEngine.onErrorResult((res) => {
-      console.log("===收到错误结果=============", res)
-    });
-  },
-  // 获取阅读内容
-  async getreadInfo(videoId, reset = false) {
-    let videoInfo = await getreadInfo(videoId)
-    wx.setNavigationBarTitle({
-      title: videoInfo.userRead.title
-    })
-    let data
-    console.log(videoInfo);
-    if (videoInfo.userReadExtend) {
-      data = JSON.parse(videoInfo.userReadExtend.lessonText)
-      data = data.map((item, index) => {
-        item.time = Number(item.time)
-        item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
-        return item
-      })
-    } else {
-      data = videoInfo.userRead.lessonText.split('\n'),
-      console.log(data);
-    }
-    this.setData({
-      article: data,
-      videoInfo
-    })
-    if (!reset) {
-      this.getHeight()
-    }
-    if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
-      this.videoContext = wx.createVideoContext('myVideo')
-    } else {
-      this.innerAudioContext = wx.createInnerAudioContext();
-      this.innerAudioContext.src = videoInfo.userRead.audioPath
-      this.innerAudioContext.onEnded(res => {
-        this.finishRecord()
-      })
-      this.innerAudioContext.onStop((res) => {
-        this.finishRecord()
-      });
-    }
+        })
+        /*监听评测结果:必须在基础引擎创建后,调用任何评测接口前设置监听,否则有可能收不到相关事件。*/
+        wsEngine.onResult((res) => {
+            this.getRecordScore(res)
+        });
+        wsEngine.onErrorResult((res) => {
+            console.log("===收到错误结果=============", res)
+        });
+    },
+    // 获取阅读内容
+    async getreadInfo(videoId, reset = false) {
+        let videoInfo = await getreadInfo(videoId)
+        wx.setNavigationBarTitle({
+            title: videoInfo.userRead.title
+        })
+        let data = JSON.parse(videoInfo.userReadExtend.lessonText)
+        data = data.map((item, index) => {
+            item.time = Number(item.time)
+            item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
+            return item
+        })
 
-  },
-  // 开始录制
-  setCountDown() {
-    let child = this.selectComponent('#readingTips').data
-    // 判断是否有权限朗读 不是vip并且没有朗读机会
-    const isVip = child.vipTime ? true : false
-    if (!isVip && child.userInfo.experienceAmount == 0) {
-      return this.selectComponent('#readingTips').showModal();
-    }
-    if (this.data.state) {
-      this.finishRecord()
-      return
-    }
-    if (this.data.readingReset) {
-      this.clearReset()
-      this.getHeight()
-    }
-    this.setData({
-      'countDown.state': true
-    })
-    this.stl = setInterval(() => {
-      if (this.data.countDown.num == 0) {
-        clearInterval(this.stl)
         this.setData({
-          state: true,
-          countDown: {
-            state: false,
-            num: 3
-          }
+            article: data,
+            videoInfo
         })
-        this.soundRecording()
-        this.playMediaState()
-        this.startRecording()
-      } else {
+        if (!reset) {
+            this.getHeight()
+        }
+        if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
+            this.videoContext = wx.createVideoContext('myVideo')
+        } else {
+            this.innerAudioContext = wx.createInnerAudioContext();
+            this.innerAudioContext.src = videoInfo.userRead.audioPath
+            this.innerAudioContext.onEnded(res => {
+                this.finishRecord()
+            })
+            this.innerAudioContext.onStop((res) => {
+                this.finishRecord()
+            });
+        }
+
+    },
+    // 开始录制
+    setCountDown() {
+        let child = this.selectComponent('#readingTips').data
+        // 判断是否有权限朗读 不是vip并且没有朗读机会
+        const isVip = child.vipTime ? true : false
+        if (!isVip && child.userInfo.experienceAmount == 0) {
+            return this.selectComponent('#readingTips').showModal();
+        }
+        if (this.data.state) {
+            this.finishRecord()
+            return
+        }
+        if (this.data.readingReset) {
+            this.clearReset()
+            this.getHeight()
+        }
         this.setData({
-          'countDown.num': --this.data.countDown.num
+            'countDown.state': true
         })
-      }
-    }, 1000)
-  },
-  // 录音
-  soundRecording() {
-    /*调用微信开始录音接口,并启动语音评测*/
-    let timeStamp = new Date().getTime()
-    let sig = sha1(`16075689600000da${timeStamp}caa8e60da6042731c230fe431ac9c7fd`)
-    let app = {
-      applicationId: '16075689600000da',
-      sig, //签名字符串 
-      alg: 'sha1',
-      timestamp: timeStamp + '',
-      userId: wx.getStorageSync('uid')
-    }
-    let lessonText = this.data.videoInfo.userRead.lessonText;
-    wsEngine.start({
-      request: {
-        coreType: "cn.pred.raw",
-        refText: lessonText,
-        rank: 100,
-        attachAudioUrl: 1,
-        result: {
-          details: {
-            gop_adjust: 1
-          }
+        this.stl = setInterval(() => {
+            if (this.data.countDown.num == 0) {
+                clearInterval(this.stl)
+                this.setData({
+                    state: true,
+                    countDown: {
+                        state: false,
+                        num: 3
+                    }
+                })
+                this.soundRecording()
+                this.playMediaState()
+                this.startRecording()
+            } else {
+                this.setData({
+                    'countDown.num': --this.data.countDown.num
+                })
+            }
+        }, 1000)
+    },
+    // 录音
+    soundRecording() {
+        /*调用微信开始录音接口,并启动语音评测*/
+        let timeStamp = new Date().getTime()
+        let sig = sha1(`16075689600000da${timeStamp}caa8e60da6042731c230fe431ac9c7fd`)
+        let app = {
+            applicationId: '16075689600000da',
+            sig, //签名字符串 
+            alg: 'sha1',
+            timestamp: timeStamp + '',
+            userId: wx.getStorageSync('uid')
         }
-      },
-      app,
-      audio: {
-        audioType: "mp3",
-        channel: 1,
-        sampleBytes: 2,
-        sampleRate: 16000
-      },
-      success: (res) => {
-        /*引擎启动成功,可以启动录音机开始录音,并将音频片传给引擎*/
-        const options = {
-          sampleRate: 44100, //采样率
-          numberOfChannels: 1, //录音通道数
-          encodeBitRate: 192000, //编码码率
-          format: 'mp3', //音频格式,有效值aac/mp3
-          frameSize: 50 //指定帧大小,单位 KB
-        };
-        //开始录音,在开始录音回调中feed音频片
-        recorderManager.start(options);
-      },
-      fail: (res) => {
-        console.log("fail=============  " + res);
-      },
-    });
-    //监听录音开始事件
-    recorderManager.onStart(() => {});
-    //监听录音结束事件
-    recorderManager.onStop((res) => {
-      console.log('录音结束', res);
-      this.setData({
-        tempFilePath: res.tempFilePath,
-      });
-      //录音机结束后,驰声引擎执行结束操作,等待评测返回结果
-      wsEngine.stop({
-        success: () => {
-          console.log('====== wsEngine stop success ======');
-        },
-        fail: (res) => {
-          console.log('录音结束报错', res);
-        },
-      });
-    });
-    //监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
-    recorderManager.onFrameRecorded((res) => {
-      const {
-        frameBuffer
-      } = res
-      //TODO 调用feed接口传递音频片给驰声评测引擎
-      wsEngine.feed({
-        data: frameBuffer, // frameBuffer为微信录音机回调的音频数据
-        success: () => {
-          console.log('feed success.监听已录制完指定帧大小的文件事件')
-        },
-        fail: (res) => {
-          console.log('监听已录制完指定帧大小报错', res)
-        },
-      });
-    });
-  },
-  // 结束录制
-  finishRecord() {
-    recorderManager.stop();
-    this.stopMediaState()
-    clearTimeout(this.setTimeoutObj)
-    clearInterval(this.stl)
-    this.setData({
-      state: false,
-      currentRow: null,
-      scrollTop: 0
-    })
-  },
-  // 获取测评结果
-  getRecordScore(res) {
-    console.log('获取评测结果');
-    const result = res.result;
-    const integrity = Math.floor(result.integrity); //完成度
-    const tone = Math.floor(result.tone); // 语调声调
-    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 = {
-      integrity,
-      tone,
-      accuracy,
-      fluency,
-      myOverall,
-      tempFilePath: this.data.tempFilePath,
-      title: this.data.videoInfo.userRead.title,
-      id: this.data.videoInfo.userRead.exampleId,
-      coverImg: this.data.videoInfo.userRead.coverImg,
-      originVideo: this.data.videoInfo.userRead.originVideo
-    }
-    this.setReadDetail(detail)
-    if (this.data.readingType == 'public' || this.data.readingType == 'readMatch') {
-      wx.redirectTo({
-        url: `/pages/score/index?readingType=${this.data.readingType}`
-      })
-    } else {
-      this.uploadAudio(detail)
-    }
-  },
-  // 挑战录音上传
-  uploadAudio(detail) {
-    this.setData({
-      uploadState: true
-    })
-    const uploadTask = wx.uploadFile({
-      url: 'https://reader-api.ai160.com//file/upload',
-      filePath: this.data.tempFilePath,
-      name: '朗读录音',
-      header: {
-        uid: wx.getStorageSync('uid')
-      },
-      success: async (res) => {
-        const formateRes = JSON.parse(res.data);
-        let audioPath = formateRes.data;
-        let uploadRes = await publishWorks({
-          exampleId: this.data.pkData.exampleId,
-          audioPath
+        let lessonText = JSON.parse(this.data.videoInfo.userReadExtend.lessonText).map((item) => {
+            return item.text
+        }).join('\n')
+        wsEngine.start({
+            request: {
+                coreType: "cn.pred.raw",
+                refText: lessonText,
+                rank: 100,
+                attachAudioUrl: 1,
+                result: {
+                    details: {
+                        gop_adjust: 1
+                    }
+                }
+            },
+            app,
+            audio: {
+                audioType: "mp3",
+                channel: 1,
+                sampleBytes: 2,
+                sampleRate: 16000
+            },
+            success: (res) => {
+                /*引擎启动成功,可以启动录音机开始录音,并将音频片传给引擎*/
+                const options = {
+                    sampleRate: 44100, //采样率
+                    numberOfChannels: 1, //录音通道数
+                    encodeBitRate: 192000, //编码码率
+                    format: 'mp3', //音频格式,有效值aac/mp3
+                    frameSize: 50 //指定帧大小,单位 KB
+                };
+                //开始录音,在开始录音回调中feed音频片
+                recorderManager.start(options);
+            },
+            fail: (res) => {
+                console.log("fail=============  " + res);
+            },
+        });
+        //监听录音开始事件
+        recorderManager.onStart(() => {});
+        //监听录音结束事件
+        recorderManager.onStop((res) => {
+            console.log('录音结束', res);
+            this.setData({
+                tempFilePath: res.tempFilePath,
+            });
+            //录音机结束后,驰声引擎执行结束操作,等待评测返回结果
+            wsEngine.stop({
+                success: () => {
+                    console.log('====== wsEngine stop success ======');
+                },
+                fail: (res) => {
+                    console.log('录音结束报错', res);
+                },
+            });
+        });
+        //监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
+        recorderManager.onFrameRecorded((res) => {
+            const {
+                frameBuffer
+            } = res
+            //TODO 调用feed接口传递音频片给驰声评测引擎
+            wsEngine.feed({
+                data: frameBuffer, // frameBuffer为微信录音机回调的音频数据
+                success: () => {
+                    console.log('feed success.监听已录制完指定帧大小的文件事件')
+                },
+                fail: (res) => {
+                    console.log('监听已录制完指定帧大小报错', res)
+                },
+            });
+        });
+    },
+    // 结束录制
+    finishRecord() {
+        recorderManager.stop();
+        this.stopMediaState()
+        clearTimeout(this.setTimeoutObj)
+        clearInterval(this.stl)
+        this.setData({
+            state: false,
+            currentRow: null,
+            scrollTop: 0
         })
-        console.log('uploadRes', uploadRes);
-        /*  let winnerUId = this.data.pkData > detail.myOverall ? this.data.pkData.exampleId : this.data.pkData < detail.myOverall ? detail.id : '' */
-        let data = {
-          challengerUserReadId: uploadRes.id,
-          userReadId: this.data.pkData.id,
+    },
+    // 获取测评结果
+    getRecordScore(res) {
+        console.log('获取评测结果');
+        const result = res.result;
+        const integrity = Math.floor(result.integrity); //完成度
+        const tone = Math.floor(result.tone); // 语调声调
+        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 = {
+            integrity,
+            tone,
+            accuracy,
+            fluency,
+            myOverall,
+            tempFilePath: this.data.tempFilePath,
+            title: this.data.videoInfo.userRead.title,
+            id: this.data.videoInfo.userRead.exampleId,
+            coverImg: this.data.videoInfo.userRead.coverImg,
+            originVideo: this.data.videoInfo.userRead.originVideo
         }
-        await uploadPk(data)
-        wx.redirectTo({
-          url: '/pages/pkResult/index'
-        })
-      },
-      complete: () => {
+        this.setReadDetail(detail)
+        if (this.data.readingType == 'public' || this.data.readingType == 'readMatch') {
+            wx.redirectTo({
+                url: `/pages/score/index?readingType=${this.data.readingType}`
+            })
+        } else {
+            this.uploadAudio(detail)
+        }
+    },
+    // 挑战录音上传
+    uploadAudio(detail) {
         this.setData({
-          uploadState: false
+            uploadState: true
         })
-      }
-    });
-    uploadTask.onProgressUpdate((res) => {
-      this.setData({
-        percent: res.progress
-      })
-    })
-  },
-  // 测试的
-  pkResult() {
-    wx.redirectTo({
-      url: `/pages/score/index?readingType=${this.data.readingType}`
-    })
-    /* wx.redirectTo({
-      url: `/pages/pkResult/index`,
-    }) */
-  },
-  // 字体换行
-  startRecording() {
-    if (this.data.currentRow == null) {
-      this.setData({
-        currentRow: 0
-      })
-    }
-    let row = this.data.article[this.data.currentRow]
-    if (!row.readTime) {
-      return
-    }
-    this.setTimeoutObj = setTimeout(() => {
-        this.setData({
-          currentRow: ++this.data.currentRow
+        const uploadTask = wx.uploadFile({
+            url: 'https://reader-api.ai160.com//file/upload',
+            filePath: this.data.tempFilePath,
+            name: '朗读录音',
+            header: {
+                uid: wx.getStorageSync('uid')
+            },
+            success: async (res) => {
+                const formateRes = JSON.parse(res.data);
+                let audioPath = formateRes.data;
+                let uploadRes = await publishWorks({
+                    exampleId: this.data.pkData.exampleId,
+                    audioPath
+                })
+                console.log('uploadRes', uploadRes);
+                /*  let winnerUId = this.data.pkData > detail.myOverall ? this.data.pkData.exampleId : this.data.pkData < detail.myOverall ? detail.id : '' */
+                let data = {
+                    challengerUserReadId: uploadRes.id,
+                    userReadId: this.data.pkData.id,
+                }
+                await uploadPk(data)
+                wx.redirectTo({
+                    url: '/pages/pkResult/index'
+                })
+            },
+            complete: () => {
+                this.setData({
+                    uploadState: false
+                })
+            }
+        });
+        uploadTask.onProgressUpdate((res) => {
+            this.setData({
+                percent: res.progress
+            })
+        })
+    },
+    // 测试的
+    pkResult() {
+        wx.redirectTo({
+            url: `/pages/score/index?readingType=${this.data.readingType}`
         })
+        /* wx.redirectTo({
+          url: `/pages/pkResult/index`,
+        }) */
+    },
+    // 字体换行
+    startRecording() {
+        if (this.data.currentRow == null) {
+            this.setData({
+                currentRow: 0
+            })
+        }
+        let row = this.data.article[this.data.currentRow]
+        if (!row.readTime) {
+            return
+        }
+        this.setTimeoutObj = setTimeout(() => {
+                this.setData({
+                    currentRow: ++this.data.currentRow
+                })
+                this.setData({
+                    scrollTop: this.rowH * this.data.currentRow
+                })
+                this.startRecording()
+            },
+            row.readTime);
+    },
+    // 视频播放结束
+    videoEnd() {
+        this.finishRecord()
+    },
+    videoPlay() {
+        if (this.data.readingReset) {
+            this.resultAudioContext = wx.createInnerAudioContext();
+            this.resultAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
+            this.resultAudioContext.play();
+        }
+    },
+    // 清除试听状态
+    clearReset() {
+        if (this.resultAudioContext) {
+            this.resultAudioContext.stop()
+        }
         this.setData({
-          scrollTop: this.rowH * this.data.currentRow
+            readingReset: false
         })
-        this.startRecording()
-      },
-      row.readTime);
-  },
-  // 视频播放结束
-  videoEnd() {
-    this.finishRecord()
-  },
-  videoPlay() {
-    if (this.data.readingReset) {
-      this.resultAudioContext = wx.createInnerAudioContext();
-      this.resultAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
-      this.resultAudioContext.play();
-    }
-  },
-  // 清除试听状态
-  clearReset() {
-    if (this.resultAudioContext) {
-      this.resultAudioContext.stop()
-    }
-    this.setData({
-      readingReset: false
-    })
-  },
-  // 控制视频或音频的播放状态
-  playMediaState() {
-    if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
-      this.videoContext.play()
-    } else {
-      this.innerAudioContext.play();
-    }
-  },
-  // 控制视频或音频的暂停状态
-  stopMediaState() {
-    if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
-      this.videoContext.stop()
-      this.videoContext.seek(0)
-    } else {
-      this.innerAudioContext.stop()
-    }
-  },
-  // 获取设备高度与行高度
-  getHeight() {
-    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()
-  },
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-    wsEngine.reset()
-    recorderManager.stop();
-    if (this.innerAudioContext) {
-      this.innerAudioContext.stop()
-    }
-    clearTimeout(this.setTimeoutObj)
-    clearInterval(this.stl)
-  },
+    },
+    // 控制视频或音频的播放状态
+    playMediaState() {
+        if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
+            this.videoContext.play()
+        } else {
+            this.innerAudioContext.play();
+        }
+    },
+    // 控制视频或音频的暂停状态
+    stopMediaState() {
+        if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
+            this.videoContext.stop()
+            this.videoContext.seek(0)
+        } else {
+            this.innerAudioContext.stop()
+        }
+    },
+    // 获取设备高度与行高度
+    getHeight() {
+        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()
+    },
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+        wsEngine.reset()
+        recorderManager.stop();
+        if (this.innerAudioContext) {
+            this.innerAudioContext.stop()
+        }
+        clearTimeout(this.setTimeoutObj)
+        clearInterval(this.stl)
+    },
 })

+ 341 - 341
pages/reading/index.less

@@ -1,375 +1,375 @@
 .readingBox {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-
-  .poster {
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    width: 100%;
-    height: 422rpx;
-    z-index: 10;
-  }
-
-  #myVideo {
-    width: 100%;
-    height: 422rpx;
-  }
-
-  .audio {
-    position: relative;
-    width: 100%;
-    height: 422rpx;
-
-    .mask {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0px;
-      top: 0px;
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-
-    .audioBg {
-      width: 100%;
-      height: 100%;
-      filter: blur(12px);
-    }
-
-    .audioPlay {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      border-radius: 20rpx;
-      background-size: cover;
-      background-color: rgba(0, 0, 0, 0.3);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .audioPlayBg {
-        width: 200rpx;
-        height: 200rpx;
-      }
-
-      .audioPlayZhen {
-        position: absolute;
-        right: 270rpx;
-        top: 118rpx;
-        width: 42rpx;
-        height: 50rpx;
-      }
-
-      .cover {
-        position: absolute;
-        width: 180rpx;
-        height: 180rpx;
-        border-radius: 50%;
-      }
-
-      .circle {
-        animation: identifier 12s infinite linear;
-      }
-    }
-  }
-
-  .contentBox {
-    flex: 1;
-    width: 100%;
-    overflow: hidden;
     position: relative;
-
-    .articleMask {
-      position: absolute;
-      top: 0rpx;
-      width: 100%;
-      height: 80rpx;
-      z-index: 10;
-      background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.4))
-    }
-
-    .content {
-      width: 100%;
-      height: 100%;
-      padding: 0rpx 30rpx;
-      padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
-      text-align: center;
-      box-sizing: border-box;
-
-      .row {
-        padding: 18rpx 0rpx;
-        font-size: 40rpx;
-      }
-
-      .currentRow {
-        font-weight: bold;
-        color: #019e45;
-      }
-
-      .article {
-        height: 2000rpx;
-        background-color: red;
-      }
-    }
-  }
-
-  .controller {
-    width: 100%;
-    height: 110rpx;
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
+    height: 100vh;
+    width: 100vw;
     display: flex;
-    align-items: center;
     flex-direction: column;
-    padding-bottom: env(safe-area-inset-bottom);
-    box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
     background-color: white;
-    z-index: 10;
-
-    .playImg {
-      position: absolute;
-      top: -62rpx;
-      border-radius: 50%;
-      width: 114rpx;
-      height: 114rpx;
-      box-shadow: #4EC4FF 0px 0rpx 14rpx;
-      background-color: #4EC4FF;
-    }
 
-    .text {
-      position: absolute;
-      top: 60rpx;
-      font-size: 28rpx;
+    .poster {
+        top: 0px;
+        left: 0px;
+        position: absolute;
+        width: 100%;
+        height: 422rpx;
+        z-index: 10;
     }
 
-    .btnPosition {
-      position: absolute;
-      right: 30rpx;
-      top: 20rpx;
+    #myVideo {
+        width: 100%;
+        height: 422rpx;
     }
-  }
-
-  .playImgBg {
-    position: absolute;
-    width: 134rpx;
-    height: 124rpx;
-    z-index: 1;
-    left: -1rpx;
-    right: 0px;
-    margin: auto;
-    bottom: calc(56rpx + env(safe-area-inset-bottom));
-    background-color: white;
-    box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
-    border-radius: 50%;
-  }
 
-  .countDownBox {
-    position: fixed;
-    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: 30rpx 0rpx;
-      box-sizing: border-box;
-
-      .number {
-        font-size: 124rpx;
-        margin-bottom: 6rpx;
-      }
-    }
-  }
+    .audio {
+        position: relative;
+        width: 100%;
+        height: 422rpx;
+
+        .mask {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0px;
+            top: 0px;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
 
-  
-  .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;
-      }
-    }
-  }
-}
+        .audioBg {
+            width: 100%;
+            height: 100%;
+            filter: blur(12px);
+        }
 
-.scoreBoxC {
-  flex: 1;
-  width: 100%;
-  overflow: auto;
-  position: relative;
-  padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+        .audioPlay {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+            border-radius: 20rpx;
+            background-size: cover;
+            background-color: rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .audioPlayBg {
+                width: 200rpx;
+                height: 200rpx;
+            }
+
+            .audioPlayZhen {
+                position: absolute;
+                right: 270rpx;
+                top: 118rpx;
+                width: 42rpx;
+                height: 50rpx;
+            }
+
+            .cover {
+                position: absolute;
+                width: 180rpx;
+                height: 180rpx;
+                border-radius: 50%;
+            }
+
+            .circle {
+                animation: identifier 12s infinite linear;
+            }
+        }
+    }
 
-  .scoreBox {
-    width: 610rpx;
-    margin: 80rpx auto 0rpx;
+    .contentBox {
+        flex: 1;
+        width: 100%;
+        overflow: hidden;
+        position: relative;
+
+        .articleMask {
+            position: absolute;
+            top: 0rpx;
+            width: 100%;
+            height: 80rpx;
+            z-index: 10;
+            background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.4))
+        }
 
-    .lightBox {
-      position: relative;
-      height: 180rpx;
+        .content {
+            width: 100%;
+            height: 100%;
+            padding: 0rpx 30rpx;
+            padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+            text-align: center;
+            box-sizing: border-box;
+
+            .row {
+                padding: 18rpx 0rpx;
+                font-size: 40rpx;
+            }
+
+            .currentRow {
+                font-weight: bold;
+                color: #019e45;
+            }
+
+            .article {
+                height: 2000rpx;
+                background-color: red;
+            }
+        }
+    }
 
-      .light {
+    .controller {
+        width: 100%;
+        height: 110rpx;
         position: absolute;
-        width: 360rpx;
-        height: 180rpx;
+        bottom: 0px;
         left: 0px;
-        right: 0px;
-        margin: auto;
-      }
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding-bottom: env(safe-area-inset-bottom);
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+        background-color: white;
+        z-index: 10;
+
+        .playImg {
+            position: absolute;
+            top: -62rpx;
+            border-radius: 50%;
+            width: 114rpx;
+            height: 114rpx;
+            box-shadow: #4EC4FF 0px 0rpx 14rpx;
+            background-color: #4EC4FF;
+        }
 
-      .stars {
-        position: absolute;
-        width: 62rpx;
-        height: 62rpx;
-      }
-
-      .stars-1 {
-        top: 64rpx;
-        left: 132rpx;
-      }
-
-      .stars-2 {
-        top: 25rpx;
-        left: 198rpx;
-      }
-
-      .stars-3 {
-        top: 6rpx;
-        left: 276rpx;
-      }
-
-      .stars-4 {
-        top: 25rpx;
-        right: 198rpx;
-      }
-
-      .stars-5 {
-        top: 62rpx;
-        right: 132rpx;
-      }
-    }
+        .text {
+            position: absolute;
+            top: 60rpx;
+            font-size: 28rpx;
+        }
 
-    .score {
-      position: relative;
-      width: 100%;
-      box-sizing: border-box;
-      padding: 70rpx 40rpx 32rpx;
-      border-radius: 18rpx;
-      background-color: white;
-      box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
+        .btnPosition {
+            position: absolute;
+            right: 30rpx;
+            top: 20rpx;
+        }
+    }
 
-      .avatarBox {
+    .playImgBg {
         position: absolute;
-        top: -72rpx;
-        left: 0px;
+        width: 134rpx;
+        height: 124rpx;
+        z-index: 1;
+        left: -1rpx;
         right: 0px;
-        margin: 0 auto;
-        width: 100rpx;
-        height: 100rpx;
-        padding: 16rpx;
-        border-radius: 50%;
+        margin: auto;
+        bottom: calc(56rpx + env(safe-area-inset-bottom));
         background-color: white;
-        font-size: 0px;
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
+        border-radius: 50%;
+    }
 
-        .avatar {
-          width: 100%;
-          height: 100%;
-          border-radius: 50%;
+    .countDownBox {
+        position: fixed;
+        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: 30rpx 0rpx;
+            box-sizing: border-box;
+
+            .number {
+                font-size: 124rpx;
+                margin-bottom: 6rpx;
+            }
         }
-      }
-
-      .nickName {
-        font-size: 36rpx;
-        text-align: center;
-      }
+    }
 
-      .totalScore {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 26rpx;
-        font-size: 42rpx;
 
-        .num {
-          color: #58C5FF;
-          font-size: 42rpx;
+    .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;
+            }
         }
-      }
-
-      .progressBox {
-        margin-top: 50rpx;
-
-        .row {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 42rpx;
-
-          .name {
-            font-size: 32rpx;
-            width: 96rpx;
-          }
+    }
+}
 
-          .progress {
-            width: 306rpx;
-            border-radius: 20rpx;
-            overflow: hidden;
-          }
+.scoreBoxC {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+    position: relative;
+    padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+
+    .scoreBox {
+        width: 610rpx;
+        margin: 80rpx auto 0rpx;
+
+        .lightBox {
+            position: relative;
+            height: 180rpx;
+
+            .light {
+                position: absolute;
+                width: 360rpx;
+                height: 180rpx;
+                left: 0px;
+                right: 0px;
+                margin: auto;
+            }
+
+            .stars {
+                position: absolute;
+                width: 62rpx;
+                height: 62rpx;
+            }
+
+            .stars-1 {
+                top: 64rpx;
+                left: 132rpx;
+            }
+
+            .stars-2 {
+                top: 25rpx;
+                left: 198rpx;
+            }
+
+            .stars-3 {
+                top: 6rpx;
+                left: 276rpx;
+            }
+
+            .stars-4 {
+                top: 25rpx;
+                right: 198rpx;
+            }
+
+            .stars-5 {
+                top: 62rpx;
+                right: 132rpx;
+            }
+        }
 
-          .scoreInfo {
-            font-size: 27rpx;
-            color: #666666;
-          }
+        .score {
+            position: relative;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 70rpx 40rpx 32rpx;
+            border-radius: 18rpx;
+            background-color: white;
+            box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
+
+            .avatarBox {
+                position: absolute;
+                top: -72rpx;
+                left: 0px;
+                right: 0px;
+                margin: 0 auto;
+                width: 100rpx;
+                height: 100rpx;
+                padding: 16rpx;
+                border-radius: 50%;
+                background-color: white;
+                font-size: 0px;
+
+                .avatar {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 50%;
+                }
+            }
+
+            .nickName {
+                font-size: 36rpx;
+                text-align: center;
+            }
+
+            .totalScore {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-top: 26rpx;
+                font-size: 42rpx;
+
+                .num {
+                    color: #58C5FF;
+                    font-size: 42rpx;
+                }
+            }
+
+            .progressBox {
+                margin-top: 50rpx;
+
+                .row {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 42rpx;
+
+                    .name {
+                        font-size: 32rpx;
+                        width: 96rpx;
+                    }
+
+                    .progress {
+                        width: 306rpx;
+                        border-radius: 20rpx;
+                        overflow: hidden;
+                    }
+
+                    .scoreInfo {
+                        font-size: 27rpx;
+                        color: #666666;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
 }

+ 137 - 138
pages/score/index.js

@@ -1,147 +1,146 @@
 import {
-  createStoreBindings
+    createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-  store
+    store
 } from '~/store/index'
 Page({
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    score: {},
-    // 目前用来处理区分上传普通作品还是朗读赛作品
-    readingType: ''
-  },
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        score: {},
+        // 目前用来处理区分上传普通作品还是朗读赛作品
+        readingType: '',
+        hide: false
+    },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-    this.storeBindings = createStoreBindings(this, {
-      store,
-      fields: {
-        userInfo: 'userInfo',
-        readDetail: 'readDetail'
-      },
-    })
-    this.storeBindings.updateStoreBindings()
-    let score = this.data.readDetail
-    wx.setNavigationBarTitle({
-      title: score.title
-    })
-    this.setData({
-      score,
-      readingType: options.readingType ? options.readingType : ''
-    })
-  },
-  backReading() {
-    wx.redirectTo({
-      url: `/pages/reading/index?videoId=${this.data.score.id}&reset=true`,
-    })
-  },
-  creatShare() {
-    let video = this.data.readDetail
-    return new Promise((resolve, reject) => {
-      let context = wx.createSelectorQuery();
-      context
-        .select('#share')
-        .fields({
-          node: true,
-          size: true
-        }).exec((res) => {
-          const canvas = res[0].node;
-          const ctx = canvas.getContext('2d');
-          const dpr = wx.getSystemInfoSync().pixelRatio;
-          canvas.width = res[0].width * dpr;
-          canvas.height = res[0].height * dpr;
-          ctx.scale(dpr, dpr);
-          ctx.font = '14px PingFang';
-          let pic = canvas.createImage();
-          pic.src = video.coverImg; //可以是本地,也可以是网络图片
-          pic.onload = () => {
-            ctx.drawImage(pic, 0, 0, 375, 211);
-            let peiyin = canvas.createImage();
-            peiyin.src = '/static/peiyin.jpg';
-            peiyin.onload = () => {
-              ctx.drawImage(peiyin, 0, 211, 375, 89);
-              //分享
-              let fx = canvas.createImage();
-              fx.src = '/static/share.png'
-              fx.onload = () => {
-                ctx.drawImage(fx, 12, 220, 20, 20)
-                ctx.fillText('分享', 36, 238)
-                // 收藏,一个一个渲染
-                let sc = canvas.createImage();
-                sc.src = '/static/no_collect.png'
-                sc.onload = () => {
-                  ctx.drawImage(sc, 110, 220, 19, 19)
-                  ctx.fillText('收藏', 134, 238)
-                  //点赞
-                  let dz = canvas.createImage();
-                  dz.src = '/static/heart.png'
-                  dz.onload = () => {
-                    ctx.drawImage(dz, 228, 222, 22, 22)
-                    ctx.fillText(0, 254, 238)
-                    // 评论
-                    let pl = canvas.createImage();
-                    pl.src = '/static/comment.png'
-                    pl.onload = () => {
-                      ctx.drawImage(pl, 318, 222, 22, 22)
-                      ctx.fillText(0, 340, 238)
-                      setTimeout(() => {
-                        wx.canvasToTempFilePath({
-                          canvas: canvas,
-                          success(res) {
-                            resolve({
-                              title: '请欣赏我的课文朗读作品,点赞+评论。',
-                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-                              imageUrl: res.tempFilePath
-                            })
-                          },
-                          fail(res) {
-                            reject()
-                          }
-                        }, this)
-                      }, 500)
-                    }
-                  }
-                }
-              }
-            }
-          }
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo',
+                readDetail: 'readDetail'
+            },
+        })
+        this.storeBindings.updateStoreBindings()
+        let score = this.data.readDetail
+        wx.setNavigationBarTitle({
+            title: score.title
+        })
+        this.setData({
+            score,
+            readingType: options.readingType ? options.readingType : ''
+        })
+    },
+    backReading() {
+        wx.redirectTo({
+            url: `/pages/reading/index?videoId=${this.data.score.id}&reset=true`,
         })
-    })
-  },
-  onShareAppMessage({
-    from,
-    target
-  }) {
-    if (from == 'button') {
-      const promise = new Promise(resolve => {
-        this.creatShare().then(res => {
-          resolve(res)
+    },
+    hideFooter() {
+        this.setData({
+            hide: true
         })
-      })
-      return {
-        title: '请欣赏我的课文朗读作品,点赞+评论。',
-        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
-        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png',
-        promise
-      }
-    } else {
-      return {
-        title: '课文朗读,从未如此有趣。',
-        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
-        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
-      }
-    }
-  },
-  /*   onShareAppMessage() {
-      return {
-        title: '课文朗读,从未如此有趣。',
-        path: `/pages/pkPage/index?uid=${wx.getStorageSync('uid')}&videoId=${this.data.readDetail.id}`,
-        imageUrl: this.data.readDetail.coverImg
-      }
-    }, */
+    },
+    creatShare() {
+        let video = this.data.readDetail
+        return new Promise((resolve, reject) => {
+            let context = wx.createSelectorQuery();
+            context
+                .select('#share')
+                .fields({
+                    node: true,
+                    size: true
+                }).exec((res) => {
+                    const canvas = res[0].node;
+                    const ctx = canvas.getContext('2d');
+                    const dpr = wx.getSystemInfoSync().pixelRatio;
+                    canvas.width = res[0].width * dpr;
+                    canvas.height = res[0].height * dpr;
+                    ctx.scale(dpr, dpr);
+                    ctx.font = '14px PingFang';
+                    let pic = canvas.createImage();
+                    pic.src = video.coverImg; //可以是本地,也可以是网络图片
+                    pic.onload = () => {
+                        ctx.drawImage(pic, 0, 0, 375, 211);
+                        let peiyin = canvas.createImage();
+                        peiyin.src = '/static/peiyin.jpg';
+                        peiyin.onload = () => {
+                            ctx.drawImage(peiyin, 0, 211, 375, 89);
+                            //分享
+                            let fx = canvas.createImage();
+                            fx.src = '/static/share.png'
+                            fx.onload = () => {
+                                ctx.drawImage(fx, 12, 220, 20, 20)
+                                ctx.fillText('分享', 36, 238)
+                                // 收藏,一个一个渲染
+                                let sc = canvas.createImage();
+                                sc.src = '/static/no_collect.png'
+                                sc.onload = () => {
+                                    ctx.drawImage(sc, 110, 220, 19, 19)
+                                    ctx.fillText('收藏', 134, 238)
+                                    //点赞
+                                    let dz = canvas.createImage();
+                                    dz.src = '/static/heart.png'
+                                    dz.onload = () => {
+                                        ctx.drawImage(dz, 228, 222, 22, 22)
+                                        ctx.fillText(0, 254, 238)
+                                        // 评论
+                                        let pl = canvas.createImage();
+                                        pl.src = '/static/comment.png'
+                                        pl.onload = () => {
+                                            ctx.drawImage(pl, 318, 222, 22, 22)
+                                            ctx.fillText(0, 340, 238)
+                                            setTimeout(() => {
+                                                wx.canvasToTempFilePath({
+                                                    canvas: canvas,
+                                                    success(res) {
+                                                        resolve({
+                                                            title: '请欣赏我的课文朗读作品,点赞+评论。',
+                                                            path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
+                                                            imageUrl: res.tempFilePath
+                                                        })
+                                                    },
+                                                    fail(res) {
+                                                        reject()
+                                                    }
+                                                }, this)
+                                            }, 500)
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                })
+        })
+    },
+    onShareAppMessage({
+        from,
+        target
+    }) {
+        if (from == 'button') {
+            const promise = new Promise(resolve => {
+                this.creatShare().then(res => {
+                    resolve(res)
+                })
+            })
+            return {
+                title: '请欣赏我的课文朗读作品,点赞+评论。',
+                path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png',
+                promise
+            }
+        } else {
+            return {
+                title: '课文朗读,从未如此有趣。',
+                path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+            }
+        }
+    },
 })

+ 61 - 57
pages/score/index.wxml

@@ -1,62 +1,66 @@
 <view class="container">
-  <view class="scoreBox">
-    <!-- 星星区域 -->
-    <view class="lightBox">
-      <image src="/static/{{score.myOverall>=10?'stars-1.png':'stars-2.png'}}" class="stars stars-1" mode="" />
-      <image src="/static/{{score.myOverall>=30?'stars-1.png':'stars-2.png'}}" class="stars stars-2" mode="" />
-      <image src="/static/{{score.myOverall>=50?'stars-1.png':'stars-2.png'}}" class="stars stars-3" mode="" />
-      <image src="/static/{{score.myOverall>=70?'stars-1.png':'stars-2.png'}}" class="stars stars-4" mode="" />
-      <image src="/static/{{score.myOverall>=90?'stars-1.png':'stars-2.png'}}" class="stars stars-5" mode="" />
-      <image src="/static/light.png" class="light" mode="" />
-    </view>
-    <!-- 主体得分区域 -->
-    <view class="score">
-      <view class="avatarBox">
-        <image src="{{userInfo.avatar}}" class="avatar" mode="" />
-      </view>
-      <view class="nickName">
-        {{userInfo.nickName||userInfo.eid}}
-      </view>
-      <view class="totalScore">
-        <text>综合得分:</text>
-        <text class="num">{{score.myOverall}}</text>
-      </view>
-      <view class="progressBox">
-        <view class="row">
-          <view class="name">完整度</view>
-          <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" active percent='{{score.accuracy}}' stroke-width="18" activeColor="#918EFD" />
-          <view class="scoreInfo">
-            {{score.accuracy}}/100
-          </view>
+    <view class="scoreBox">
+        <!-- 星星区域 -->
+        <view class="lightBox">
+            <image src="/static/{{score.myOverall>=10?'stars-1.png':'stars-2.png'}}" class="stars stars-1" mode="" />
+            <image src="/static/{{score.myOverall>=30?'stars-1.png':'stars-2.png'}}" class="stars stars-2" mode="" />
+            <image src="/static/{{score.myOverall>=50?'stars-1.png':'stars-2.png'}}" class="stars stars-3" mode="" />
+            <image src="/static/{{score.myOverall>=70?'stars-1.png':'stars-2.png'}}" class="stars stars-4" mode="" />
+            <image src="/static/{{score.myOverall>=90?'stars-1.png':'stars-2.png'}}" class="stars stars-5" mode="" />
+            <image src="/static/light.png" class="light" mode="" />
         </view>
-        <view class="row">
-          <view class="name">流利度</view>
-          <progress class="progress" active percent='{{score.fluency}}' stroke-width="18" activeColor="#FE9500" />
-          <view class="scoreInfo">
-            {{score.fluency}}/100
-          </view>
+        <!-- 主体得分区域 -->
+        <view class="score">
+            <view class="avatarBox">
+                <image src="{{userInfo.avatar}}" class="avatar" mode="" />
+            </view>
+            <view class="nickName">
+                {{userInfo.nickName||userInfo.eid}}
+            </view>
+            <view class="totalScore">
+                <text>综合得分:</text>
+                <text class="num">{{score.myOverall}}</text>
+            </view>
+            <view class="progressBox">
+                <view class="row">
+                    <view class="name">完整度</view>
+                    <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" 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" 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" active percent='{{score.tone}}' stroke-width="18"
+                        activeColor="#9BE74B " />
+                    <view class="scoreInfo">
+                        {{score.tone}}/100
+                    </view>
+                </view>
+            </view>
         </view>
-        <view class="row">
-          <view class="name">语调</view>
-          <progress class="progress" active percent='{{score.tone}}' stroke-width="18" activeColor="#9BE74B " />
-          <view class="scoreInfo">
-            {{score.tone}}/100
-          </view>
-        </view>
-      </view>
     </view>
-  </view>
-  <!-- 底部 -->
-  <view class="footer">
-    <view class="stBtn" bindtap="backReading">试听</view>
-    <uploadFile readingType='{{readingType}}' />
-  </view>
-  <canvas id='share' type="2d"> </canvas>
+    <!-- 底部 -->
+    <view class="footer">
+        <view class="stBtn" bindtap="backReading">试听</view>
+        <uploadFile readingType='{{readingType}}' bindtap="hideFooter" />
+    </view>
+    <canvas id='share' type="2d"> </canvas>
 </view>