reader/pages/pkResult/index.js

import {
    getPkResult
} from '~/api/works'
import {
    setDuration
} from '~/utils/util'
import {
    userEvent
} from '~/api/global'
import event from '~/mixins/event'
let innerAudioContext
Page({
    behaviors: [event],
    /**
     * 页面的初始数据
     */
    data: {
        pkId: '',
        pkRecord: {},
        vState: false,
        vStart: '00:00',
        vEnd: '00:00',
        vProgress: 0,
        dState: false,
        dStart: '00:00',
        dEnd: '00:00',
        dProgress: 0,
        currentType: '',
        victory: {},
        defeated: {},
        equal: false,
        // 是否是分享进来的
        isPlayback: false
    },
    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
        let {
            pkRecord,
            pkRecordVOS
        } = await getPkResult(options.id)
        this.setData({
            pkId: options.id,
            pkRecord,
            isplayback: options.playback || false
        })
        this.compareScore(pkRecordVOS)
        this.innerAudioContext = wx.createInnerAudioContext()
        await userEvent({
            action: 'WXPKSCORE',
        })
    },
    compareScore(resultData) {
        let first = resultData[0]
        let second = resultData[1]
        let victory = first.userRead.score > second.userRead.score ? first : second
        let defeated = second.userRead.score < first.userRead.score ? second : first
        this.setData({
            equal: first.userReadExtend.businessType != 2 ? first.userRead.score == second.userRead.score : true,
            victory: first.userRead.score > second.userRead.score ? first : second,
            defeated,
            vEnd: setDuration(victory.userRead.duration),
            dEnd: setDuration(defeated.userRead.duration),
        })
    },
    playAudio({
        currentTarget
    }) {
        let type = currentTarget.dataset.type
        // 重置音频对象
        if (type != this.data.currentType) {
            this.innerAudioContext.stop();
        }
        // 处理音频播放
        if (type == 'victory' && !this.data.vState) {
            if (this.data.currentType != 'victory') {
                this.innerAudioContext.src = this.data.victory.userRead.audioPath
            }
            this.setData({
                vState: true,
                dState: false
            })
        } else if (type == 'victory' && this.data.vState) {
            this.innerAudioContext.pause();
            return this.setData({
                vState: false
            })
        } else if (type == 'defeated' && !this.data.dState) {
            if (this.data.currentType != 'defeated') {
                this.innerAudioContext.src = this.data.defeated.userRead.audioPath;
            }
            this.setData({
                dState: true,
                vState: false
            })
        } else if (type == 'defeated' && this.data.dState) {
            this.innerAudioContext.pause();
            return this.setData({
                dState: false
            })
        }
        this.setData({
            currentType: type
        })
        // this.innerAudioContext.onCanplay(() => {
        this.innerAudioContext.play();
        // })
        this.innerAudioContext.onTimeUpdate(() => {
            let label = this.data.currentType == 'victory' ? 'vStart' : 'dStart'
            let progressV = this.data.currentType == 'victory' ? 'vProgress' : 'dProgress'
            this.setData({
                [label]: setDuration(this.innerAudioContext.currentTime),
                [progressV]: Math.round((this.innerAudioContext.currentTime / this.innerAudioContext.duration) * 100)
            })
        })
    },
    result({
        currentTarget
    }) {
        if (currentTarget.dataset.type == 'reading') {
            wx.redirectTo({
                url: `/pages/reading/index?videoId=${this.data.victory.userRead.exampleId}&readingType=pk`,
            })
        } else if (currentTarget.dataset.type == 'index') {
            wx.switchTab({
                url: '/pages/index/index',
            })
        } else {
            wx.redirectTo({
                url: `/pages/pkPage/index?videoId=${this.data.pkRecord.challengerUserReadId}&isShare=true`,
            })
        }
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        this.innerAudioContext.destroy()
    },
    creatShare() {
        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 = '16px PingFang';
                    let bgImg = canvas.createImage();
                    bgImg.src = this.data.equal ? 'https://reader-wx.ai160.com/images/reader/v3/equal.png' : 'https://reader-wx.ai160.com/images/reader/v3/victory.png'
                    bgImg.onload = () => {
                        ctx.drawImage(bgImg, 0, 0, 375, 300);
                        ctx.textAlign = "center";
                        var lnamex = this.data.equal ? 100 : 100,
                            lnamey = this.data.equal ? 125 : 115;
                        var vName = this.data.victory.user.nickName || this.data.victory.user.eid
                        if (vName.length > 4) {
                            vName = vName.slice(0, 4) + '...'
                        }
                        ctx.fillText(vName, lnamex, lnamey)
                        var rnamex = this.data.equal ? 280 : 280,
                            rnamey = this.data.equal ? 125 : 140;
                        var dName = this.data.defeated.user.nickName || this.data.defeated.user.eid
                        if (dName.length > 4) {
                            dName = dName.slice(0, 4) + '...'
                        }
                        ctx.fillText(dName, rnamex, rnamey)
                        ctx.font = '19px PingFang';
                        if (this.data.victory.userReadExtend.businessType != 2) {
                            var lnumx = this.data.equal ? 100 : 100,
                                lnumy = this.data.equal ? 150 : 140;
                            ctx.fillText(this.data.victory.userRead.score + '分', lnumx, lnumy)
                            var rnumx = this.data.equal ? 280 : 280,
                                rnumy = this.data.equal ? 150 : 165;
                            ctx.fillText(this.data.defeated.userRead.score + '分', rnumx, rnumy)
                        }
                        ctx.font = '13px PingFang';
                        var ltimex = this.data.equal ? 136 : 136,
                            ltimey = this.data.equal ? 252.5 : 239.5;
                        ctx.fillText(this.data.vEnd, ltimex, ltimey)
                        var rtimex = this.data.equal ? 320 : 320,
                            rtimey = this.data.equal ? 253 : 267;
                        ctx.fillText(this.data.dEnd, rtimex, rtimey)
                        // 圆形位置 大小
                        var size = 55;
                        var lx = this.data.equal ? 71 : 72,
                            ly = this.data.equal ? 45 : 38;
                        var rx = this.data.equal ? 252 : 247,
                            ry = this.data.equal ? 45 : 60;
                        ctx.save(); // 保存
                        ctx.arc(size / 2 + lx, size / 2 + ly, size / 2, 0, Math.PI * 2, false);
                        ctx.arc(size / 2 + rx, size / 2 + ry, size / 2, 0, Math.PI * 2, false);
                        ctx.clip();
                        let leftImg = canvas.createImage();
                        leftImg.src = this.data.victory.user.avatar
                        leftImg.onerror = () => {
                            loadRightImg()
                        }
                        leftImg.onload = () => {
                            ctx.drawImage(leftImg, lx, ly, size, size)
                            loadRightImg()
                        }
                        let loadRightImg = () => {
                            let rightImg = canvas.createImage();
                            rightImg.src = this.data.defeated.user.avatar
                            rightImg.onload = () => {
                                ctx.drawImage(rightImg, rx, ry, size, size)
                                setTimeout(() => {
                                    wx.canvasToTempFilePath({
                                        canvas: canvas,
                                        success: (res) => {
                                            let userName = this.data.pkRecord.userReadId == this.data.victory.userRead.id ? this.data.victory.user.nickName || this.data.victory.user.eid : this.data.defeated.user.nickName || this.data.defeated.user.eid
                                            if (userName.length > 4) {
                                                userName = userName.slice(0, 4) + '...'
                                            }
                                            resolve({
                                                title: `我挑战了${userName}的作品，这场比拼真精彩！点击加入战局！`,
                                                path: `/pages/pkResult/index?id=${this.data.pkId}&uid=${wx.getStorageSync('uid')}&playback=true`,
                                                imageUrl: res.tempFilePath
                                            })
                                        },
                                        fail(res) {
                                            reject()
                                        }
                                    }, this)
                                }, 500)
                            }
                            rightImg.onerror = () => {
                                setTimeout(() => {
                                    wx.canvasToTempFilePath({
                                        canvas: canvas,
                                        success(res) {
                                            resolve({
                                                title: '我的新作品发布啦，快来捧场点赞！',
                                                path: `/pages/pkResult/index?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/375-300-1.jpg',
                promise
            }
        } else {
            return {
                title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
                path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
            }
        }
    },
})