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'
import share from '~/mixins/share'
let innerAudioContext
Page({
    behaviors: [share, event],
    /**
     * 页面的初始数据
     */
    data: {
        pkId: '',
        pkRecord: {},
        vState: false,
        vStart: '00:00',
        vEnd: '00:00',
        dState: false,
        dStart: '00:00',
        dEnd: '00:00',
        currentType: '',
        victory: {},
        defeated: {},
        equal: false,
        win: false,
        // 是否是分享进来的
        isPlayback: false
    },
    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
        let {
            pkRecord,
            pkRecordVOS
        } = await getPkResult(options.id)
        this.setData({
            pkId: options.id,
            pkRecord,
            isplayback: options.playback || false
        })
        this.innerAudioContext = wx.createInnerAudioContext()
        this.innerAudioContext.onEnded(res => {
            let label = this.data.currentType == 'victory' ? 'vStart' : 'dStart'
            this.setData({
                [label]: '00:00',
                vState: false,
                dState: false,
            })
        })
        // this.compareScore()
        this.compareScore(pkRecordVOS)

        await userEvent({
            action: 'WXPKSCORE',
        })
    },
    compareScore(resultData) {
        let first = resultData[0]
        let second = resultData[1]
        /* let first = {
            "readMaskTemplate": null,
            "user": {
                "avatar": "http://reader-wx.ai160.com/images/reader/v3/boy.png",
                "birthday": null,
                "channel": "3001",
                "eid": "100511330001627",
                "gender": 1,
                "gmtCreated": 1676011831000,
                "gmtModified": 1695283827000,
                "grade": "PRIMARY_SENIOR_GRADE",
                "loginDay": 0,
                "logoutDate": null,
                "mCount": null,
                "messageCount": null,
                "mobile": "",
                "myCount": null,
                "nickName": "",
                "openId": "oWMml5LoKweewL78KYbkPoWL3taQ",
                "profession": "学生",
                "recOsType": null,
                "recStatus": null,
                "recUid": "",
                "saleShareUid": "",
                "saleUserId": null,
                "schoolCity": "",
                "schoolName": "",
                "schoolProvince": "",
                "shareUid": "",
                "sourceType": "",
                "statusEnum": "NORMAL",
                "uid": "95d8d8f0815f44cfa9b9245b52eff5c4",
                "unionId": "o8sgct5tbZfWQBv3Dd595sLS_ZZ4",
                "userId": "",
                "vipType": 0,
                "wechatName": ""
            },
            "userRead": {
                "activityId": null,
                "audioPath": "https://reader-wx.ai160.com/reader/resource/20230215/1676453639830669.mp3",
                "backgroundVideoNumber": "",
                "backgroundVirtualImg": "",
                "businessType": null,
                "channel": "3001",
                "commentAmount": 13,
                "courseWareNumber": "",
                "coverImg": "http://reader-wx.ai160.com/images/reader/v3/readIcon/SCJX.jpg",
                "day": "2023-02-15",
                "demoVideoNumber": "",
                "duration": 20,
                "eid": "",
                "exampleId": 1675912836219052,
                "favoritesAmount": 0,
                "gmtCreated": 1676453641000,
                "gmtModified": 1702345703000,
                "grade": null,
                "iconImg": "",
                "id": 1676453641062792,
                "lessonText": "",
                "lessonText2": "",
                "likeAmount": 2,
                "markPath": "https://reader-wx.ai160.com/reader/resource/markVideo/1676453641062792.mp4",
                "nickName": "",
                "originVideo": "http://reader-wx.ai160.com/audio/reader/001/LD00103248/LD00103248005-2.mp3",
                "playAmount": 358,
                "resourcesType": null,
                "score": 19,
                "shareAmount": 0,
                "shareImg": "",
                "sort": 0,
                "status": "NORMAL",
                "summary": "",
                "tag": "",
                "title": "一剪梅\n[ 宋 ] 李清照",
                "traceId": "3c6eb4c15961d904812cd2dccf422b12",
                "type": "READ",
                "uid": "95d8d8f0815f44cfa9b9245b52eff5c4",
                "videoPath": "https://reader-wx.ai160.com/reader/resource/video/1676453641062792.mp4"
            },
            "userReadExtend": {
                "backgroundVideoNumber": "LD00103248005-2",
                "backgroundVirtualImg": "http://reader-wx.ai160.com/images/reader/v3/readIcon/SCJXBJ.jpg",
                "businessType": 0,
                "courseWareNumber": "LD00103248005",
                "demoVideoNumber": "LD00103248005-1",
                "id": 1675912836252266,
                "readMaskId": 1,
                "resourcesType": 1,
                "userReadId": 1675912836219052
            }
        }
        let second = {
            "readMaskTemplate": null,
            "user": {
                "avatar": "http://reader-wx.ai160.com/images/reader/v3/boy.png",
                "birthday": 1388505600000,
                "channel": "3001",
                "eid": "110010060125671",
                "gender": 1,
                "gmtCreated": 1699323582000,
                "gmtModified": 1702023595000,
                "grade": "PRIMARY_FIRST_GRADE",
                "loginDay": 0,
                "logoutDate": null,
                "mCount": null,
                "messageCount": null,
                "mobile": "",
                "myCount": null,
                "nickName": "测试",
                "openId": "oWMml5GGONTsOiIDIW-kTvdNIZjI",
                "profession": "老师",
                "recOsType": null,
                "recStatus": null,
                "recUid": "",
                "saleShareUid": "",
                "saleUserId": null,
                "schoolCity": "",
                "schoolName": "",
                "schoolProvince": "",
                "shareUid": "",
                "sourceType": "",
                "statusEnum": "NORMAL",
                "uid": "d83d947655f6455a96f4197d31afa6d4",
                "unionId": "o8sgct3D71o7iS8V-CvuDOsT_0kQ",
                "userId": "",
                "vipType": 0,
                "wechatName": ""
            },
            "userRead": {
                "activityId": null,
                "audioPath": "https://reader-wx.ai160.com/reader/resource/20231212/1702345717581444.mp3",
                "backgroundVideoNumber": "",
                "backgroundVirtualImg": "",
                "businessType": null,
                "channel": "3001",
                "commentAmount": 0,
                "courseWareNumber": "",
                "coverImg": "http://reader-wx.ai160.com/images/reader/v3/readIcon/SCJX.jpg",
                "day": "2023-12-12",
                "demoVideoNumber": "",
                "duration": 3,
                "eid": "",
                "exampleId": 1675912836219052,
                "favoritesAmount": 0,
                "gmtCreated": 1702345717000,
                "gmtModified": 1702345717000,
                "grade": null,
                "iconImg": "",
                "id": 1702345717919478,
                "lessonText": "",
                "lessonText2": "",
                "likeAmount": 0,
                "markPath": "https://reader-wx.ai160.com/reader/resource/markVideo/1702345717919478.mp4",
                "nickName": "",
                "originVideo": "http://reader-wx.ai160.com/audio/reader/001/LD00103248/LD00103248005-2.mp3",
                "playAmount": 0,
                "resourcesType": null,
                "score": 100,
                "shareAmount": 0,
                "shareImg": "",
                "sort": 0,
                "status": "CHECK",
                "summary": "",
                "tag": "",
                "title": "一剪梅\n[ 宋 ] 李清照",
                "traceId": "396d30110403fd2d8ee5b73f9b7853bc",
                "type": "READ",
                "uid": "9db2bedb2b9b47c5b0358bb9bec39145",
                "videoPath": "https://reader-wx.ai160.com/reader/resource/video/1702345717919478.mp4"
            },
            "userReadExtend": {
                "backgroundVideoNumber": "LD00103248005-2",
                "backgroundVirtualImg": "http://reader-wx.ai160.com/images/reader/v3/readIcon/SCJXBJ.jpg",
                "businessType": 0,
                "courseWareNumber": "LD00103248005",
                "demoVideoNumber": "LD00103248005-1",
                "id": 1675912836252266,
                "readMaskId": 1,
                "resourcesType": 1,
                "userReadId": 1675912836219052
            }
        } */
        let victory = first.userRead.score > second.userRead.score ? first : second
        let defeated = second.userRead.score < first.userRead.score ? second : first
        let uid = wx.getStorageSync('uid')
        let equal = first.userReadExtend.businessType != 2 ? first.userRead.score == second.userRead.score : true
        let win = !equal && victory.userRead.uid == uid
        this.setData({
            victory,
            defeated,
            equal,
            win,
            vEnd: setDuration(victory.userRead.duration),
            dEnd: setDuration(defeated.userRead.duration),
        })
        if (!this.data.isplayback) {
            this.innerAudioContext.src = win || equal ? '/static/music/win.mp3' : '/static/music/lose.mp3'
            this.innerAudioContext.play();
        }
    },
    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'
            this.setData({
                [label]: setDuration(this.innerAudioContext.currentTime),
            })
        })
    },
    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');
                    // #if MP
                    const dpr = wx.getSystemInfoSync().pixelRatio;
                    // #elif ANDROID
                    const dpr = 0.84
                    // #endif
                    canvas.width = res[0].width * dpr;
                    canvas.height = res[0].height * dpr;
                    ctx.scale(dpr, dpr);
                    ctx.font = '16px PingFang';
                    ctx.fillStyle = '#F2F6FC';
                    let bgImg = canvas.createImage();
                    bgImg.src = this.data.win ? 'https://reader-wx.ai160.com/images/reader/v3/win-share.jpg' : this.data.equal ? 'https://reader-wx.ai160.com/images/reader/v3/equal-share.jpg' : 'https://reader-wx.ai160.com/images/reader/v3/lose-share.jpg'
                    bgImg.onload = () => {
                        ctx.drawImage(bgImg, 0, 0, 375, 300);
                        ctx.textAlign = "center";
                        var lnamex = 100,
                            lnamey = 205;
                        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 = 280,
                            rnamey = 205;
                        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 = '20px PingFang';
                        if (this.data.victory.userReadExtend.businessType != 2) {
                            var lnumx = 100,
                                lnumy = 230;
                            ctx.fillText(this.data.victory.userRead.score + '分', lnumx, lnumy)
                            var rnumx = 280,
                                rnumy = 230;
                            ctx.fillText(this.data.defeated.userRead.score + '分', rnumx, rnumy)
                        }
                        ctx.font = '15px PingFang';
                        var ltimex = 88,
                            ltimey = 288;
                        ctx.fillText(`${this.data.vStart}/${this.data.vEnd}`, ltimex, ltimey)
                        var rtimex = 280,
                            rtimey = 288;
                        ctx.fillText(`${this.data.dStart}/${this.data.dEnd}`, rtimex, rtimey)
                        // 圆形位置 大小
                        var size = 62;
                        var lx = this.data.equal ? 71 : 72,
                            ly = 120;
                        var rx = this.data.equal ? 252 : 247,
                            ry = 120;
                        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) + '...'
                                            }
                                            // #if MP
                                            resolve({
                                                title: `我挑战了${userName}的作品，这场比拼真精彩！点击加入战局！`,
                                                path: `/pages/pkResult/index?id=${this.data.pkId}&uid=${wx.getStorageSync('uid')}&playback=true`,
                                                imageUrl: res.tempFilePath
                                            })
                                            // #elif ANDROID
                                            resolve({
                                                title: `我挑战了${userName}的作品，这场比拼真精彩！点击加入战局！`,
                                                userName: 'gh_50f61361ad1d',
                                                path: `/pages/pkResult/index?id=${this.data.pkId}&uid=${wx.getStorageSync('uid')}&playback=true`,
                                                imagePath: res.tempFilePath,
                                                webpageUrl: 'http://www.efunbox.cn',
                                                withShareTicket: true,
                                                miniprogramType: 1,
                                                scene: 0,
                                            })
                                            // #endif
                                        },
                                        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)
                            }
                        }
                    }
                })
        })
    },
})