reader/component/comment/comment.js

// component/comment.js
import httpRequestApi from '../../utils/APIClient';
import {
    formatDate
} from '../../utils/util';

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        commentId: {
            type: Number,
            observer: function observer(id) {
                this.getReply(id)
            }
        }

    },

    /**
     * 组件的初始数据
     */
    data: {
        inputValue: '',
        showControl: 0,
        commentNum: 0,
        commentList: [],
        ifGetFocus: false,
        replyType: 'works', // 回复类型，works是回复作品，comment是回复评论
        isScroll: true,
        adjustPosition: true
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 获取评论信息
        getReply: function(columnId) {
            httpRequestApi.getReply(this.uid, columnId, 1, 10).success((res) => {
                console.log('reply', res)
                const commentList = res.data.data.list;
                const commentNum = res.data.data.totalSize;
                console.log('评论数量', commentNum)
                commentList.forEach((item) => {
                    const temp = {};
                    temp.nickName = item.user.nickName;
                    temp.avatar = item.user.avatar;
                    temp.uid = item.user.uid;
                    temp.text = item.detailDesc;
                    temp.id = item.id;
                    temp.replyCount = item.replyCount;
                    temp.time = formatDate(item.gmtCreated, 3);
                    temp.likes = item.likeCount || 0;
                    temp.isLike = item.isLike;
                    temp.replyList = item.replyVOList;
                    temp.showControl = 0;
                    this.data.commentList.push(temp);
                });
                this.setData({
                    commentList: this.data.commentList,
                    commentNum: commentNum
                }, () => {
                    console.log('评论列表', this.data.commentList)
                })
            });
        },
        showMore: function showMore(e) {
            let index = e.currentTarget.dataset.index || index === 0 ? e.currentTarget.dataset.index : e.target.dataset.index;
            let str = `commentList[${index}].showControl`;
            this.setData({
                [str]: 10
            })
            console.log('showControl', this.data.commentList[index].showControl)
        },

        textInput: function(e) {
            console.log('键入', e.detail.value)
            this.setData({
                inputValue: e.detail.value
            })
        },
        // 获取焦点事件
        bindfocus(e) {
            this.setData({
                    isScroll: false
                })
                // this.triggerEvent('inputFocus');
        },
        // 失去焦点事件
        closeblur(e) {
            this.setData({
                    isScroll: true
                })
                // this.triggerEvent('inputBlur');
        },
        // 评论作品
        sendReply: function sendReply(e) {
            if (this.data.replyType === 'works') {
                let data = {
                    columnId: this.data.commentId,
                    colunmNames: 'what',
                    detailDesc: e.detail.value ? e.detail.value : this.data.inputValue,
                }
                this.replyWorks(data);
            }
            if (this.data.replyType === 'comment') {
                let data = {
                    postsId: this.data.postId,
                    content: e.detail.value ? e.detail.value : this.data.inputValue
                }
                console.log(321232123123, data)

                this.replyComment(data);
            }

        },
        // 点赞评论
        likeComment: function(e) {
            console.log(e);
            let postId = e.currentTarget.dataset.id ? e.currentTarget.dataset.id : e.target.dataset.id;
            let index = e.currentTarget.dataset.index || e.currentTarget.dataset.index === 0 ? e.currentTarget.dataset.index : e.target.dataset.index;
            httpRequestApi.likeCommend(postId).success(res => {
                console.log('点赞点赞点赞', res.data);
                const str = `commentList[${index}].likes`;
                const strImg = `commentList[${index}].isLike`;
                if (res.data.data) {
                    this.setData({
                        [str]: res.data.data,
                        [strImg]: true
                    })
                }
                if (res.data.count > 0) {
                    this.setData({
                        flowerNum: res.data.count
                    })
                }

            });
        },
        // 回复作品
        replyWorks: function(data) {
            httpRequestApi.postReply(data).success(res => {
                console.log(res)
                this.setData({
                    pageNo: 1,
                    commentList: []
                }, () => {
                    this.getReply(this.data.commentId);
                    this.setData({
                        inputValue: '',
                    })
                    if (res.data.count > 0) {
                        this.setData({
                            flowerNum: res.data.count
                        })
                    }

                })
            });
        },
        catchComment: function catchComment(e) {
            let postId = e.currentTarget.dataset.id ? e.currentTarget.dataset.id : e.target.dataset.id;
            let index = e.currentTarget.dataset.index || e.currentTarget.dataset.index === 0 ? e.currentTarget.dataset.index : e.target.dataset.index;
            this.setData({
                postId: postId,
                replyType: 'comment',
                ifGetFocus: true,
                postIndex: index
            })
        },
        // 回复评论
        replyComment: function(data) {
            httpRequestApi.postReplyComment(data).success(res => {

                this.setData({
                    replyInfo: '',
                }, () => {
                    this.getReplyInner(this.data.commentId);
                    this.setData({
                        inputValue: '',
                        replyType: 'works',
                        ifGetFocus: false
                    })
                    if (res.data.count > 0) {
                        this.setData({
                            flowerNum: res.data.count
                        })
                    }
                });
            });
        },
        // 发布楼中楼评论后渲染之前列表
        getReplyInner: function(columnId) {
            httpRequestApi.getReply(this.uid, columnId, 1, 10).success((res) => {
                const commentList = res.data.data.list;
                commentList.forEach((item, index) => {
                    console.log('回复列表', index)
                    console.log('回复列表', this.data.postIndex)

                    if (index === this.data.postIndex) {
                        let replyList = item.replyVOList;
                        console.log('回复列表', replyList)
                        let str = `commentList[${index}].replyList`;
                        let strShow = `commentList[${index}].showControl`;
                        let strReply = `commentList[${index}].replyCount`;
                        this.setData({
                            [str]: replyList,
                            [strShow]: 10,
                            [strReply]: replyList.length
                        }, () => {
                            console.log('刷新后列表', this.data.commentList)
                        })
                        return;
                    };
                })

            });
        },

    }

})