reader/pages/myworks/myworks.js

// pages/user/myworks/myworks.js
import APIClient from '../../utils/APIClient.js'
import {
    formatDate
} from '../../utils/util.js'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        wareCards: {},
        pageNo: 1,
        totalNo: 0,
        uid: '',
        videoList: [],
        isFans: false,
        isMyself: false,
        commentId: '',
        pageSize: 3,
        statusbarobj: {
            isshowbtn: false, //是否显示按钮
            title: "小学语文朗读配音", //标题
        },

    },
    // 打开评论
    openComment: function(e) {
        console.log('id', e.detail.activeId)
        this.setData({
            commentShow: !this.data.commentShow,
            commentId: e.detail.activeId,
            commentIndex: e.detail.activeIndex
        });
    },
    toMyWorks: function(e) {
        let id = e.currentTarget.dataset.readid;
        let title = e.currentTarget.dataset.title;
        wx.navigateTo({
            url: `../../social/works/works?id=${id}&title=${title}`
        });
    },
    // 评论区点击
    commentTap: function(e) {
        console.log('点击评论区', e)
        if (e.target.dataset.type === 'blank') {
            if (this.data.commentShow && this.data.commentId) {
                APIClient.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
            })
        }
    },
    touchMove: function(e) {
        return
    },
    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}`
        });
    },
    // 关注用户
    follow: function() {
        let followUid = this.data.uid;
        const uid = wx.getStorageSync('uid');
        if (this.data.isFans) {
            APIClient.cancerFollow(uid, followUid).success((res) => {
                this.setData({
                    isFans: false
                })
                wx.showToast({
                    title: '取消关注',
                    icon: 'success',
                    duration: 1000
                })
            });
        } else {
            APIClient.followUser(uid, followUid).success((res) => {
                this.setData({
                    isFans: true
                })
                wx.showToast({
                    title: '关注啦',
                    icon: 'success',
                    duration: 1000
                })
            });
        }
    },
    getResults() {
        let pageNo = this.data.pageNo;
        let pageSize = 3;
        let uid = this.data.uid;
        console.log('用户身份', uid);
        APIClient.getUserMsg(uid, pageNo, pageSize).success(res => {
            console.log(res)
            res.data.data.user.birthday = formatDate(res.data.data.user.birthday, 4)
            this.setData({
                wareCards: res.data.data,
                isFans: res.data.data.like
            });
            console.log(this.data.wareCards)
                // wx.hideToast();
            this.getUserWorks(uid, pageNo, pageSize)
        }).fail(err => {
            console.log(err);
        });

    },



    getUserWorks(uid, pageNo, pageSize) {
        APIClient.userWorks(this.data.uid, this.data.pageNo, this.data.pageSize).success(res => {
            console.log(res)
            const recommendRes = res.data.data.list;
            if (recommendRes.length === 0) return;
            recommendRes.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.avatar = item.user.avatar;
                temp.nickName = item.user.nickName;
                temp.isLike = item.isLike;
                temp.isFavorite = item.isFavorites;
                temp.isFans = true;
                temp.videoShow = false;
                temp.coverImg = item.userRead.coverImg;
                temp.shareImg = item.userRead.shareImg;
                item.isActivity && (temp.activity = true);
                // recommendWorks.push(temp);
                this.data.videoList.push(temp);

            });
            this.setData({
                videoList: this.data.videoList,
                totalNo: res.data.data.totalNo
            })
            console.log('dangqian', this.data.videoList)
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        // if (options.uid === wx.getStorageSync('uid') || options.uid === 'c7f0a8fdd3a549ea9109a7b7486775f2') {
        if (options.uid === wx.getStorageSync('uid')) {
            this.setData({
                isMyself: true
            })
        }
        this.setData({
            uid: options.uid
        }, () => {
            console.log(options.uid);
        });
        // wx.showToast({
        //   title: '加载中...',
        //   icon: 'loading'
        // });
        this.getResults();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

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

    },

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

    },

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

    },

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

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        this.setData({
            pageNo: this.data.pageNo + 1
        }, () => {
            if (this.data.pageNo <= this.data.totalNo) {
                this.getUserWorks();
            }
        })
    },
    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
            console.log(target);
            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) {
        console.log('+++++1', e)
        let str = `videoList[${e.detail.index}].shareAmount`;
        this.setData({
            [str]: this.data.videoList[e.detail.index].shareAmount + 1
        })
    }
})