朗读页面

pages/reading/index.js

@@ -1,13 +1,87 @@
 import {
     getreadInfo
 } from '~/api/video'
+let rowHeight = 0
 Page({
     data: {
-        videoInfo: {}
+        videoInfo: {},
+        currentRow: null,
+        state: false,
+        countDown: {
+            state: false,
+            num: 3,
+        },
+        scrollTop: 0,
+        article: [{
+            id: 1,
+            text: '传说在很久很久以前，',
+            time: '0'
+        }, {
+            id: 2,
+            text: '天和地还没有分开，',
+            time: '4010'
+        }, {
+            id: 3,
+            text: '整个宇宙混沌一团，',
+            time: '7080'
+        }, {
+            id: 4,
+            text: '像个大鸡蛋。',
+            time: '10150'
+        }, {
+            id: 5,
+            text: '有个叫盘古的大神，',
+            time: '13150'
+        }, {
+            id: 6,
+            text: '昏睡了一万八千年。',
+            time: '16190'
+        }, {
+            id: 7,
+            text: '一天，大神醒来，睁眼一看，',
+            time: '20030'
+        }, {
+            id: 8,
+            text: '周围黑乎乎一片，',
+            time: '24210'
+        }, {
+            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
         this.getreadInfo(videoId)
+        let data = this.data.article
+        data = data.map((item, index) => {
+            item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
+            return item
+        })
+        this.setData({
+            article: data
+        })
+        var query = wx.createSelectorQuery();
+        query.select('.row').boundingClientRect((rect) => {
+            this.rowHeight = rect.height
+            console.log(rect);
+        }).exec()
     },
     async getreadInfo(videoId) {
         let videoInfo = await getreadInfo(videoId)
@@ -19,6 +93,50 @@ Page({
             videoInfo
         })
     },
+    // 开始录制
+    setCountDown() {
+        // this.setData({
+        //     state: true,
+        //     'countDown.state': true
+        // })
+        // let sto = setInterval(() => {
+        //     if (this.data.countDown.num == 0) {
+        //         clearInterval(sto)
+        //         this.setData({
+        //             countDown: {
+        //                 state: false,
+        //                 num: 3
+        //             }
+        //         })
+        this.startRecording()
+        //     } else {
+        //         this.setData({
+        //             'countDown.num': --this.data.countDown.num
+        //         })
+        //     }
+        // }, 1000)
+    },
+    startRecording() {
+        if (this.data.currentRow == null) {
+            this.setData({
+                currentRow: 0
+            })
+        }
+        let row = this.data.article[this.data.currentRow]
+        if (!row.readTime) {
+            return
+        }
+        let setTimeoutObj = setTimeout(() => {
+                this.setData({
+                    currentRow: ++this.data.currentRow
+                })
+                this.setData({
+                    scrollTop: this.rowHeight * this.data.currentRow
+                })
+                this.startRecording()
+            },
+            row.readTime);
+    },
     /**
      * 生命周期函数--监听页面卸载
      */

pages/reading/index.less

@@ -4,6 +4,7 @@
     width: 100vw;
     display: flex;
     flex-direction: column;
+    background-color: white;
 
 
     #myVideo {
@@ -11,9 +12,46 @@
         height: 422rpx;
     }
 
-    .content {
+
+
+    .contentBox {
         flex: 1;
         width: 100%;
+        overflow: hidden;
+        position: relative;
+
+        .articleMask {
+            position: absolute;
+            top: 0rpx;
+            width: 100%;
+            height: 90rpx;
+            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: 16rpx 0rpx;
+                font-size: 42rpx;
+            }
+
+            .currentRow {
+                font-weight: bold;
+                color: #019e45;
+            }
+
+            .article {
+                height: 2000rpx;
+                background-color: red;
+            }
+        }
     }
 
     .controller {
@@ -59,4 +97,33 @@
         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;
+            }
+        }
+    }
 }

pages/reading/index.wxml

@@ -1,12 +1,25 @@
 <view class="readingBox">
     <video id="myVideo" src="{{videoInfo.userRead.videoPath}}" controls="{{false}}"
         show-center-play-btn="{{false}}"></video>
-    <view class="content">
-
+    <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: 86rpx;"></view>
+            <view class="row {{currentRow==index?'currentRow':''}}" wx:for="{{article}}" wx:key="id">{{item.text}}
+            </view>
+        </scroll-view>
     </view>
-    <view class="controller">
-        <image src="/static/work.png" class="playImg" mode="" />
+    <view class="controller" wx:if="{{!state}}">
+        <image src="/static/work.png" class="playImg" bindtap="setCountDown" />
         <view class="text">开始挑战</view>
     </view>
-    <view class="playImgBg"></view>
+    <view class="playImgBg" wx:if="{{!state}}"></view>
+    <!-- 倒计时 -->
+    <view class="countDownBox" wx:if="{{countDown.state}}">
+        <view class="countDown">
+            <view class="number">{{countDown.num}}</view>
+            <view class="tips">秒后开始</view>
+        </view>
+    </view>
 </view>

pages/reading/index.wxss

@@ -4,14 +4,45 @@
   width: 100vw;
   display: flex;
   flex-direction: column;
+  background-color: white;
 }
 .readingBox #myVideo {
   width: 100%;
   height: 422rpx;
 }
-.readingBox .content {
+.readingBox .contentBox {
   flex: 1;
   width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.readingBox .contentBox .articleMask {
+  position: absolute;
+  top: 0rpx;
+  width: 100%;
+  height: 90rpx;
+  z-index: 10;
+  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.4));
+}
+.readingBox .contentBox .content {
+  width: 100%;
+  height: 100%;
+  padding: 0rpx 30rpx;
+  padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
+  text-align: center;
+  box-sizing: border-box;
+}
+.readingBox .contentBox .content .row {
+  padding: 16rpx 0rpx;
+  font-size: 42rpx;
+}
+.readingBox .contentBox .content .currentRow {
+  font-weight: bold;
+  color: #019e45;
+}
+.readingBox .contentBox .content .article {
+  height: 2000rpx;
+  background-color: red;
 }
 .readingBox .controller {
   width: 100%;
@@ -53,3 +84,29 @@
   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%;
 }
+.readingBox .countDownBox {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  z-index: 999;
+}
+.readingBox .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: 30rpx 0rpx;
+  box-sizing: border-box;
+}
+.readingBox .countDownBox .countDown .number {
+  font-size: 124rpx;
+  margin-bottom: 6rpx;
+}