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.wechatName;
          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) {
      console.log('sendReply', e.detail.value)
      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
          })
          this.flowerAnimationHandler();
        }

      });
    },
    // 回复作品
    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
            })
            this.flowerAnimationHandler();
          }

        })
      });
    },
    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
      })
      console.log(this.data.ifGetFocus)

    },
    // 回复评论
    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
            })
            this.flowerAnimationHandler();
          }
        });
      });
    },
    // 发布楼中楼评论后渲染之前列表
    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;
          };
        })

      });
    },
    flowerAnimationHandler: function () {
      this.flowerBox = this.selectComponent("#flower-toast");
      console.log('this.flower', this.flowerBox)
      this.flowerBox.comeOut();
    },
  }

})