微信小程序——評論點贊功能

實現的最終效果圖

1.點贊功能

前端頁面結構

    <view class='talk-item-zan'>
              <view bindtap='favorclick' data-id='{{item.id}}' data-islike="{{item.is_like}}" data-dex="{{index}}" data-userid="{{item.user_id}}" class="like_box">
                <image src='/image/okzan.png' class="zan_img" wx:if="{{item.is_like == 1}}"></image>
                <image src='/image/nozan.png' class="zan_img" wx:else></image>
                <view class='zan_num'>{{item.like_num}}</view>
              </view>
            </view>
   </view>

點贊函數favorclick

  favorclick: function(e) {
    var likeFlag = false; //標志，避免多次發請求
    //避免多次點擊
    if (likeFlag === true) {
      return false;
    }
    var that = this;
    if (e.currentTarget.dataset.userid == that.data.user_id) {
      that.Pop_show('/image/close.png', '不能給自己評論點贊');
      return
    }
    var comment_id = e.currentTarget.dataset.id; //點擊當前項的id
    var index = e.currentTarget.dataset.dex;
    var islike = e.currentTarget.dataset.islike;
    var message = this.data.talks;
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000;
    var zanInfo = {
      token: App.globalData.portConfig.token,
      timestamp: timestamp,
      comment_id: comment_id,
      cancel: islike,
    }
    var zanData = zanInfo;
    var postzanData = that.makePostData(zanData, that.data.key);
    wx.request({
      url: App.globalData.portConfig.HTTP_BASE_URL + '/comment/addLike', //點贊接口
      data: postzanData,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function(res) {
        for (let i in message) {
          if (i == index) {
            if (message[i].is_like == 0) {
              that.data.talks[index].is_like = 1
              message[i].like_num = parseInt(message[i].like_num) + 1
            } else {
              that.data.talks[index].is_like = 0
              message[i].like_num = parseInt(message[i].like_num) - 1
            }
          }
        }
        that.setData({
          talks: message
        })
        console.log("點贊成功", res);

      },
      complete: function(res) {
        likeFlag = false;
      }
    })
  },

其中設置likeFlag避免多次點擊，當一次點擊請求接口完成后才能進行下次點擊，在complete完成后把likeFlag值置為false。

2.評論功能，發表評論后顯示在最上面

faBu: function() {
    let that = this;
    if (!that.data.inputValue) {
      return false;
    } else {
      var timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000;
      var voice_id = that.data.voice_id;
      var content = this.data.inputValue;
      var newCommentInfo = {
        token: App.globalData.portConfig.token,
        timestamp: timestamp,
        voice_id: voice_id,
        reply_user_id: 0,
        pid: 0,
        source: 1,
        content: content
      }
      var newCommentData = newCommentInfo;
      var postnewCommentData = that.makePostData(newCommentData, that.data.key);
      wx.request({
        url: App.globalData.portConfig.HTTP_BASE_URL + '/comment/addComment', //發布評論的接口
        data: postnewCommentData,
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默認值
        },
        success: function(res) {
          console.log("成功評論", res);
          that.data.talks.unshift({
            user_avater: that.data.headimgurl,
            user_name: that.data.nickName,
            content: that.data.inputValue,
            createtime: '剛剛'
          })
          that.data.inputValue = '';
          that.setData({
            talks: that.data.talks,
            inputValue: that.data.inputValue,
            talksAnimationData: that.animation.export(),
            sendShow: true
          })
          that.tapMove();
        }
      })


    }
  },

其中tapMove是返回頂部函數

//scroll-view發布之后返回到頂部

 

tapMove: function(e) {
this.setData({
scrollTop: 0
})
},

實時獲取輸入框中的字數，給字數限制

//實時獲取評論框的輸入的內容
  inputValue(e) {
    this.setData({
      inputValu: e.detail.value,
      val_len: e.detail.value.length,
      sendShow: false
    })
    if (!e.detail.value) {
      this.setData({
        sendShow: true
      })
    }
    console.log(this.data.inputValu)
    if (this.data.val_len >= 140) {
      this.Pop_show('/image/close.png', '評論超過最大字數限制')
      return
    }
  },