reader/mixins/share.js

import {
    isActivityWork
} from '~/api/works'
module.exports = Behavior({
    data: {},
    methods: {
        onShareAppMessage({
            from,
            target
        }) {
            if (from == 'button') {
                let video = target.dataset.info
                const promise = new Promise(resolve => {
                    this.creatShare(video).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'
                }
            }
        },
        creatShare(video) {
            return new Promise(async (resolve, reject) => {
                let isActivity = await isActivityWork(video.userRead.id)
                let context = wx.createSelectorQuery(video.id);
                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.userReadExtend && video.userReadExtend.resourcesType == 1 ? video.userReadExtend.backgroundVirtualImg : 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 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 pl = canvas.createImage();
                                        pl.src = '/static/comment.png'
                                        pl.onload = () => {
                                            ctx.drawImage(pl, 228, 222, 22, 22)
                                            ctx.fillText(video.userRead.commentAmount || 0, 340, 238)
                                            //点赞
                                            let dz = canvas.createImage();
                                            dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
                                            dz.onload = () => {
                                                ctx.drawImage(dz, 318, 222, 22, 22)
                                                ctx.fillText(video.userRead.likeAmount || 0, 254, 238)
                                                if (video.userReadExtend.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.userRead.coverImg;
                                                        coverImg.onload = () => {
                                                            ctx.drawImage( //定位在圆圈范围内便会出现
                                                                coverImg, //图片暂存路径
                                                                129, 42,
                                                                110, 110,
                                                            );
                                                            ctx.restore()
                                                        }
                                                    }
                                                }
                                                setTimeout(() => {
                                                    wx.canvasToTempFilePath({
                                                        canvas: canvas,
                                                        success(res) {
                                                            let path = video.user.profession == '官方' ? '/pages/reading/index' : '/pages/pkPage/index'
                                                            let title = wx.getStorageSync('uid') == video.user.uid ? '我的新作品发布啦，快来捧场点赞！' : video.userRead.type == 'READ' ? '发现一篇宝藏作品，这声音让人爱了！不信你不着迷！' : '我正在听这篇朗读示范，这发音，播音专业水准！你也来听听！'
                                                            if (isActivity) {
                                                                title = '点赞、评论、转发三件套，数据今天就过万！'
                                                            }
                                                            resolve({
                                                                title,
                                                                path: `${path}?videoId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}&isShare=true`,
                                                                imageUrl: res.tempFilePath
                                                            })
                                                        },
                                                        fail(res) {
                                                            reject()
                                                        }
                                                    }, this)
                                                }, 500)
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    })
            })
        },
    }
})