reader/pages/match/index.js

import {
    getSelfRead
} from '~/api/user'
import {
    isActivityWork
} from '~/api/works'
import {
    getModelTexts,
    getReadRanking,
    getSelfReadRanking
} from '~/api/global'
import {
    store
} from '~/store/index'
import {
    createStoreBindings
} from 'mobx-miniprogram-bindings'
import share from '~/mixins/share'
Page({
    // behaviors: [share],
    /**
     * 页面的初始数据
     */
    data: {
        list: [],
        // true是人气榜，false是参赛作品
        currentType: true,
        activityUserList: [],
        modelList: [],
        myActivityUser: {},
        activityId: '',
        bannerList: []
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // console.log(decodeURIComponent(options.scene));
        this.setData({
            activityId: options.activityId
        })
        this.getLocUserInfo()
        if (Object.keys(this.data.userInfo).length > 0) {
            this.reload()
        } else {
            getApp().callBack = (res) => {
                this.getLocUserInfo()
                this.reload()
            }
        }
    },
    getLocUserInfo() {
        this.storeBindings = createStoreBindings(this, {
            store,
            fields: {
                userInfo: 'userInfo'
            },
            actions: {
                setUser: 'setUser'
            }
        })
        this.storeBindings.updateStoreBindings()
    },
    reload() {
        this.getModelTexts()
        this.getReadRanking()
    },
    // 获取范文
    async getModelTexts() {
        let modelList = await getModelTexts({
            grade: this.data.userInfo.grade,
            activityId: this.data.activityId
        })
        this.setData({
            modelList
        })
    },
    async getReadRanking() {
        let {
            activityUserList,
            myActivityUser,
            activity
        } = await getReadRanking({
            activityId: this.data.activityId
        })
        console.log(activity);
        this.setData({
            activityUserList,
            myActivityUser,
            bannerList: activity.bannerList
        })
    },
    async getSelfReadRanking() {
        let list = await getSelfReadRanking({
            activityId: this.data.activityId
        })
        this.setData({
            list
        })
    },
    bannelEvent({
        target
    }) {
        wx.navigateTo({
            url: `/pages/reading/index?videoId=${target.dataset.id}&activityId=${this.data.activityId}&readingType=readMatch&autoPlay=true&free=true`
        })
    },
    jumpUserInfo({
        currentTarget
    }) {
        wx.navigateTo({
            url: `/pages/personal/index?uid=${currentTarget.dataset.uid}`,
        })
    },
    selectType({
        target
    }) {
        if (target.dataset.type) {
            let currentType = JSON.parse(target.dataset.type)
            if (!currentType) {
                this.getSelfReadRanking()
            }
            this.setData({
                currentType
            })
        }
    },
    jumpIntro() {
        wx.navigateTo({
            url: `/pages/rankIntro/index?title=活动规则&img=${this.data.explain}`,
        })
    },
    onShareAppMessage({
        from,
        target
    }) {
        console.log(this.data.activityId);
        if (from == 'button') {
            let video = target.dataset.info
            console.log(video);
            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.png',
                promise
            }
        } else {
            return {
                title: '这个小程序太赞了！孩子朗读能力蹭蹭上涨，推荐你试试！',
                path: `/pages/match/index?uid=${wx.getStorageSync('uid')}&activityId=${this.data.activityId}`,
                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300.png'
            }
        }
    },
    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)
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
        })
    },
})