reader/pages/score/index.js

import {
    createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
    store
} from '~/store/index'
import event from '~/mixins/event'
Page({
    behaviors: [event],
    /**
     * 页面的初始数据
     */
    data: {
        score: {},
        // 目前用来处理区分上传普通作品还是朗读赛作品
        readingType: '',
        uploadHide: '',
        // 朗读赛的id
        activityId: '',
    },

    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
        console.log(options);
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: {
                userInfo: 'userInfo',
                readDetail: 'readDetail'
            },
        })
        this.storeBindings.updateStoreBindings()
        let score = this.data.readDetail
        console.log('score-----', score);
        wx.setNavigationBarTitle({
            title: score.title
        })
        this.setData({
            score,
            readingType: options.readingType ? options.readingType : '',
            activityId: options.activityId
        })
    },
    backReading() {
        let pagesList = getCurrentPages()
        let last = pagesList[pagesList.length - 2]
        if (last.route != 'pages/reading/index') {
            wx.redirectTo({
                url: `/pages/reading/index?videoId=${this.data.score.id}&reset=true&uploadHide=${this.data.uploadHide}&readingType=${this.data.readingType}`,
            })
        } else {
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit('goback', {
                videoId: this.data.score.id,
                reset: true,
                uploadHide: this.data.uploadHide,
                readingType: this.data.readingType
            });
            wx.navigateBack({
                delta: 1
            })
        }
    },
    hideFooter() {
        this.setData({
            uploadHide: true
        })
    },

    creatShare() {
        let video = this.data.readDetail
        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.resourcesType == 1 ? video.aBg : video.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 fx = canvas.createImage();
                            fx.src = '/static/share.png'
                            fx.onload = () => {
                                ctx.drawImage(fx, 12, 220, 20, 20)
                                ctx.fillText('分享', 36, 238)
                                // 收藏，一个一个渲染
                                let sc = canvas.createImage();
                                sc.src = '/static/no_collect.png'
                                sc.onload = () => {
                                    ctx.drawImage(sc, 110, 220, 19, 19)
                                    ctx.fillText('收藏', 134, 238)
                                    //点赞
                                    let dz = canvas.createImage();
                                    dz.src = '/static/heart.png'
                                    dz.onload = () => {
                                        ctx.drawImage(dz, 318, 222, 22, 22)
                                        ctx.fillText(0, 254, 238)
                                        // 评论
                                        let pl = canvas.createImage();
                                        pl.src = '/static/comment.png'
                                        pl.onload = () => {
                                            ctx.drawImage(pl, 228, 222, 22, 22)
                                            ctx.fillText(0, 340, 238)
                                            if (video.resourcesType == 1) {
                                                let aBg = canvas.createImage();
                                                aBg.src = '/static/shareAudioBg.png';
                                                aBg.onload = () => {
                                                    ctx.drawImage(aBg, 127.5, 38, 120, 120);
                                                    let rate = 0.5
                                                    ctx.arc(
                                                        Math.floor(375 * rate),
                                                        98,
                                                        Math.floor(100 * rate),
                                                        0,
                                                        2 * Math.PI
                                                    );
                                                    ctx.clip() //裁剪
                                                    let coverImg = canvas.createImage();
                                                    coverImg.src = video.coverImg;
                                                    coverImg.onload = () => {
                                                        ctx.drawImage( //定位在圆圈范围内便会出现
                                                            coverImg, //图片暂存路径
                                                            129, 42,
                                                            110, 110,
                                                        );
                                                        ctx.restore()
                                                    }
                                                }
                                            }
                                            setTimeout(() => {
                                                console.log(wx.getStorageSync('shareVideoId'), 'reading-wx.score');
                                                wx.canvasToTempFilePath({
                                                    canvas: canvas,
                                                    success(res) {
                                                        resolve({
                                                            title: '我的新作品发布啦，快来捧场点赞！',
                                                            path: `/pages/pkPage/index?videoId=${wx.getStorageSync('shareVideoId')}&uid=${wx.getStorageSync('uid')}&isShare=true`,
                                                            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'
            }
        }
    },
})