reader/mixins/video.js

module.exports = Behavior({
    data: {
        currentId: '',
    },
    properties: {},
    pageLifetimes: {
        hide() {
            this.resetAudio()
        },
    },
    methods: {
        // 开始播放
        playVideo({
            currentTarget
        }) {
            this.setData({
                currentId: currentTarget.dataset.id
            })
        },
        // 播放音频
        playAudio({
            currentTarget
        }) {
            if (this.data.currentId == currentTarget.dataset.id) {
                return this.resetAudio()
            }
            if (this.innerAudioContext) {
                this.resetAudio()
            } else {
                this.innerAudioContext = wx.createInnerAudioContext()
                this.innerAudioContext.onEnded(res => {
                    this.resetAudio()
                })
            }
            this.innerAudioContext.src = currentTarget.dataset.audio
            this.innerAudioContext.play();
            this.setData({
                currentId: currentTarget.dataset.id
            })
        },
        // 重置音频
        resetAudio() {
            if (this.innerAudioContext) {
                this.innerAudioContext.stop();
            }
            this.setData({
                currentId: ''
            })
        },
        // 打开评论
        openComment({
            target
        }) {
            this.selectComponent('#comment').open(target.dataset.id)
        },
        // 分享
        creatShare(video) {
            console.log(video);
            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.userRead.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 sc = canvas.createImage();
                            sc.src = '/static/no_collect.png'
                            sc.onload = () => {
                                ctx.drawImage(sc, 12, 220, 20, 20)
                                ctx.fillText('收藏', 36, 238)
                                //分享
                                let fx = canvas.createImage();
                                fx.src = '/static/share.png'
                                fx.onload = () => {
                                    ctx.drawImage(fx, 78, 220, 22, 22)
                                    ctx.fillText('分享', 104, 238)
                                    //点赞
                                    let dz = canvas.createImage();
                                    dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
                                    dz.onload = () => {
                                        ctx.drawImage(dz, 258, 222, 22, 22)
                                        ctx.fillText(video.likes, 284, 238)
                                        //评论
                                        let pl = canvas.createImage();
                                        pl.src = '/static/comment.png'
                                        pl.onload = () => {
                                            ctx.drawImage(pl, 318, 222, 22, 22)
                                            ctx.fillText(video.commentAmount, 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)
                                        }
                                    }
                                }
                            }
                        }
                    })
            })
        },
    }
})