reader/pages/userWorks/index.js

import {
    getSelfRead
} from '~/api/user'
let videoContext = null
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: null,
        currentId: '',
        videoState: true,
        canvasHidden: false, //设置画板的显示与隐藏
        shareImgPath: '' //用于储存canvas生成的图片
    },
    onLoad(options) {
        this.getSelfRead()
    },
    //获取自己作品列表
    async getSelfRead() {
        let list = await getSelfRead()
        console.log(list);
        this.setData({
            list
        })
    },
    creatShare(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/image/peiyin.jpg';
                    peiyin.onload = () => {
                        ctx.drawImage(peiyin, 0, 211, 375, 89);
                        // 收藏，一个一个渲染
                        let sc = canvas.createImage();
                        sc.src = '/static/image/no_collect.png'
                        sc.onload = () => {
                            ctx.drawImage(sc, 12, 220, 20, 20)
                            ctx.fillText('收藏', 36, 238)
                            //分享
                            let fx = canvas.createImage();
                            fx.src = '/static/index/share.png'
                            fx.onload = () => {
                                ctx.drawImage(fx, 78, 220, 22, 22)
                                ctx.fillText('分享', 104, 238)
                                //点赞
                                let dz = canvas.createImage();
                                dz.src = video.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'
                                dz.onload = () => {
                                    ctx.drawImage(dz, 268, 222, 22, 22)
                                    ctx.fillText(video.userRead.likeAmount, 294, 238)
                                    //评论
                                    let pl = canvas.createImage();
                                    pl.src = '/static/index/comment.png'
                                    pl.onload = () => {
                                        ctx.drawImage(pl, 318, 222, 22, 22)
                                        ctx.fillText(video.userRead.commentAmount, 340, 238)
                                        setTimeout(() => {
                                            wx.canvasToTempFilePath({
                                                canvas: canvas,
                                                success(res) {
                                                    resolve({
                                                        title: video.userRead.title,
                                                        path: `/pages/index/index?readId=${video.userRead.id}`,
                                                        imageUrl: res.tempFilePath
                                                    })
                                                },
                                                fail(res) {
                                                    reject()
                                                }
                                            }, this)
                                        }, 500)
                                    }
                                }
                            }
                        }
                    }

                })
        })

    },
    // 改变视频状态
    changStatus({
        detail
    }) {
        this.setData(detail)
    },
    // 开始播放
    playVideo({
        currentTarget
    }) {
        this.setData({
            videoState: true,
            currentId: currentTarget.dataset.id
        })
    },
    /* 改变视频播放状态 ,暂时先不用*/
    changeVideoState() {
        this.videoContext = wx.createVideoContext('myVideo')
        let videoState = this.data.videoState
        if (videoState) {
            this.videoContext.pause()
        } else {
            this.videoContext.play()
        }
        this.setData({
            videoState: !videoState
        })
    },

    onShareAppMessage({
        target
    }) {
        let video = target.dataset.info
        const promise = new Promise(resolve => {
            this.creatShare(video).then(res => {
                resolve(res)
            })
        })
        console.log(video);
        return {
            title: video.userRead.title,
            path: `/pages/index/index?readId=${video.userRead.id}`,
            imageUrl: video.userRead.coverImg,
            promise
        }
    }
})