reader/pages/mycollection/mycollection.js

import httpRequestApi from '../../utils/APIClient';
import {
    formatDate
} from '../../utils/util';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        collection_data: [],
        line1: '您还没有收藏过哦',
        line2: '快去收藏自己喜欢的吧',
        videoList: [],
        commentShow: false,
        statusbarobj: {
            isshowbtn: false, //是否显示按钮
            title: "朗读小咖秀", //标题
        },
    },

    toClass: function(e) {
        let targetCode = e.currentTarget.dataset.targetcode;
        let title = e.currentTarget.dataset.title;
        // wx.navigateTo({
        //   url: `../../main/class/class?id=${targetCode}&title=${title}`
        // });
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(option) {
        console.log(option.title);
        if (option.title) {
            wx.setNavigationBarTitle({
                title: '我的收藏' //页面标题为路由参数
            });
            this.setData({
                title: option.title
            });
        }
        httpRequestApi.myFavorites().success(res => {
            this.formatWorksList(res.data.data.list)
        });
    },
    formatWorksList(list) {
        list.forEach(item => {
            const temp = {};
            temp.title = item.userRead.title;
            temp.summary = item.userRead.summary;
            temp.img = item.userRead.iconImg;
            temp.plays = item.userRead.playAmount ? item.userRead.playAmount : 0;
            temp.likes = item.userRead.likeAmount ? item.userRead.likeAmount : 0;
            temp.commentAmount = item.userRead.commentAmount ? item.userRead.commentAmount : 0;
            temp.shareAmount = item.userRead.shareAmount;
            temp.favoritesAmount = item.userRead.favoritesAmount;
            temp.classId = item.userRead.exampleId ? item.userRead.exampleId : 1605097720036046;
            temp.time = formatDate(item.userRead.gmtCreated, 3);
            temp.avatar = item.user.avatar;
            temp.profession = item.user.profession;
            temp.uid = item.user.uid;
            temp.url = item.userRead.videoPath ? item.userRead.videoPath : item.userRead.originVideo;
            temp.id = item.userRead.id;
            temp.type = item.userRead.type;
            temp.nickName = item.user.nickName;
            temp.isLike = item.isLike;
            temp.isFans = true;
            temp.isFavorite = true;
            temp.coverImg = item.userRead.coverImg;
            temp.shareImg = item.userRead.shareImg;
            temp.grade = item.userRead.grade;
            temp.videoShow = false;
            item.isActivity && (temp.activity = true);
            this.data.videoList.push(temp);
        });
        this.setData({
            videoList: this.data.videoList
        }, () => {
            console.log(this.data.videoList)
        })

    },
    goToReading: function(e) {
        console.log('去朗读', e)
        const id = e.detail.activeId ? e.detail.activeId : e.currentTarget.dataset.id;
        wx.navigateTo({
            url: `../../pages/reading/reading?id=${id}`
        });
    },
    // 评论区点击
    commentTap: function(e) {
        console.log('点击评论区', e)
        if (e.target.dataset.type === 'blank') {
            if (this.data.commentShow && this.data.commentId) {
                httpRequestApi.getClassDetail(this.data.commentId).success(res => {
                    console.log('评论回显', res.data.data.userRead.commentAmount)
                    let str = `videoList[${this.data.commentIndex}].commentAmount`;
                    this.setData({
                        [str]: res.data.data.userRead.commentAmount
                    })
                })
            }
            this.setData({
                commentShow: false
            })
        }
    },
    // 打开评论
    openComment: function(e) {
        // 
        console.log('id', e.detail.activeId)
        this.setData({
            commentShow: !this.data.commentShow,
            commentId: e.detail.activeId,
            commentIndex: e.detail.activeIndex
                // commentList: []
        });
        // this.getReply(e.detail.activeId);
    },

    // 发布回复
    sendReply: function(e) {
        console.log('triger', e.detail.content);
        let data = {
            columnId: this.data.commentId,
            colunmNames: 'what',
            detailDesc: e.detail.content,
            // productId: this.data.productId
        }
        httpRequestApi.postReply(this.uid, data).success(res => {
            console.log(res)
            this.setData({
                pageNo: 1,
                commentList: []
            }, () => {
                this.getReply(this.data.commentId);
            })
        });
    },
    commentTouchMove: function(e) {
        return;
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },


    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {

    },
    collectTap: function(e) {
        const index = e.detail.index;
        let str = `videoList[${index}].isFavorite`;
        let str2 = `videoList[${index}].favoritesAmount`;
        let favoritesAmount = e.detail.isCollect ? this.data.videoList[index].favoritesAmount + 1 : this.data.videoList[index].favoritesAmount - 1
        this.setData({
            [str]: e.detail.isCollect,
            [str2]: favoritesAmount
        })
    },
    likeTap: function(e) {
        console.log('点赞', e)
        const index = e.detail.index;
        let likeStr = `videoList[${index}].isLike`;
        let likeNumStr = `videoList[${index}].likes`;
        this.setData({
            [likeStr]: true,
            [likeNumStr]: this.data.videoList[index].likes + 1
        })
    },
    openShare: function(e) {
        console.log('用户点击分享按钮', e)
        this.setData({
            shareTitle: e.detail.currentTarget.dataset.title,
            shareId: e.detail.currentTarget.dataset.id,
            shareImg: e.detail.currentTarget.dataset.shareimg,
            ifTapActivity: e.detail.currentTarget.dataset.activity
        })
    },
    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.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, 258, 222, 22, 22)
                                    ctx.fillText(video.likes, 284, 238)
                                        //评论
                                    let pl = canvas.createImage();
                                    pl.src = '/static/index/comment.png'
                                    pl.onload = () => {
                                        ctx.drawImage(pl, 318, 222, 22, 22)
                                        ctx.fillText(video.commentAmount, 340, 238)
                                        setTimeout(() => {
                                            wx.canvasToTempFilePath({
                                                canvas: canvas,
                                                success(res) {
                                                    resolve({
                                                        title: '请欣赏我的课文朗读作品，点赞+评论。',
                                                        path: `/pages/index/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
                                                        imageUrl: res.tempFilePath
                                                    })
                                                },
                                                fail(res) {
                                                    reject()
                                                }
                                            }, this)
                                        }, 500)
                                    }
                                }
                            }
                        }
                    }
                })
        })
    },
    /**
     * 用户点击右上角分享
     */
    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?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
                imageUrl: video.coverImg,
                promise
            }
        } else {
            return {
                title: '课文朗读，从未如此有趣。',
                path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
            }
        }
    },
    addShareAmount: function(e) {
        let str = `videoList[${e.detail.index}].shareAmount`;
        this.setData({
            [str]: this.data.videoList[e.detail.index].shareAmount + 1
        })
    }
})