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


實現的最終效果圖

1.點贊功能

前端頁面結構

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

點贊函數favorclick

 1   favorclick: function(e) {
 2     var likeFlag = false; //標志,避免多次發請求
 3     //避免多次點擊
 4     if (likeFlag === true) {
 5       return false;
 6     }
 7     var that = this;
 8     if (e.currentTarget.dataset.userid == that.data.user_id) {
 9       that.Pop_show('/image/close.png', '不能給自己評論點贊');
10       return
11     }
12     var comment_id = e.currentTarget.dataset.id; //點擊當前項的id
13     var index = e.currentTarget.dataset.dex;
14     var islike = e.currentTarget.dataset.islike;
15     var message = this.data.talks;
16     var timestamp = Date.parse(new Date());
17     timestamp = timestamp / 1000;
18     var zanInfo = {
19       token: App.globalData.portConfig.token,
20       timestamp: timestamp,
21       comment_id: comment_id,
22       cancel: islike,
23     }
24     var zanData = zanInfo;
25     var postzanData = that.makePostData(zanData, that.data.key);
26     wx.request({
27       url: App.globalData.portConfig.HTTP_BASE_URL + '/comment/addLike', //點贊接口
28       data: postzanData,
29       method: 'POST',
30       header: {
31         'content-type': 'application/x-www-form-urlencoded'
32       },
33       success: function(res) {
34         for (let i in message) {
35           if (i == index) {
36             if (message[i].is_like == 0) {
37               that.data.talks[index].is_like = 1
38               message[i].like_num = parseInt(message[i].like_num) + 1
39             } else {
40               that.data.talks[index].is_like = 0
41               message[i].like_num = parseInt(message[i].like_num) - 1
42             }
43           }
44         }
45         that.setData({
46           talks: message
47         })
48         console.log("點贊成功", res);
49 
50       },
51       complete: function(res) {
52         likeFlag = false;
53       }
54     })
55   },

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

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

 1 faBu: function() {
 2     let that = this;
 3     if (!that.data.inputValue) {
 4       return false;
 5     } else {
 6       var timestamp = Date.parse(new Date());
 7       timestamp = timestamp / 1000;
 8       var voice_id = that.data.voice_id;
 9       var content = this.data.inputValue;
10       var newCommentInfo = {
11         token: App.globalData.portConfig.token,
12         timestamp: timestamp,
13         voice_id: voice_id,
14         reply_user_id: 0,
15         pid: 0,
16         source: 1,
17         content: content
18       }
19       var newCommentData = newCommentInfo;
20       var postnewCommentData = that.makePostData(newCommentData, that.data.key);
21       wx.request({
22         url: App.globalData.portConfig.HTTP_BASE_URL + '/comment/addComment', //發布評論的接口
23         data: postnewCommentData,
24         method: 'POST',
25         header: {
26           'content-type': 'application/x-www-form-urlencoded' // 默認值
27         },
28         success: function(res) {
29           console.log("成功評論", res);
30           that.data.talks.unshift({
31             user_avater: that.data.headimgurl,
32             user_name: that.data.nickName,
33             content: that.data.inputValue,
34             createtime: '剛剛'
35           })
36           that.data.inputValue = '';
37           that.setData({
38             talks: that.data.talks,
39             inputValue: that.data.inputValue,
40             talksAnimationData: that.animation.export(),
41             sendShow: true
42           })
43           that.tapMove();
44         }
45       })
46 
47 
48     }
49   },
其中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
    }
  },

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM