reader/pages/reading/index.js

import {
    getreadInfo
} from '~/api/video'
let rowHeight = 0
let videoContext = null
let stl = null
let setTimeoutObj = null
Page({
    data: {
        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()
        this.videoContext = wx.createVideoContext('myVideo')
    },
    async getreadInfo(videoId) {
        let videoInfo = await getreadInfo(videoId)
        console.log(videoInfo);
        wx.setNavigationBarTitle({
            title: videoInfo.userRead.title
        })
        this.setData({
            videoInfo
        })
    },
    // 开始录制
    setCountDown() {
        if (this.data.state) {
            return
        }
        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
                    }
                })
                this.videoContext.play()
                this.startRecording()
            } else {
                this.setData({
                    'countDown.num': --this.data.countDown.num
                })
            }
        }, 1000)
    },
    startRecording() {
        console.log('递归');
        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.rowHeight * this.data.currentRow
                })
                this.startRecording()
            },
            row.readTime);
    },
    // 视频播放结束
    videoEnd() {
        this.setData({
            currentRow: null,
            state: false,
            scrollTop: 0,
        })
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        clearTimeout(this.setTimeoutObj)
        clearInterval(this.stl)
    },
    onShareAppMessage() {

    }
})