【微信小程序】：評論、回復和刪除功能 -- 2017/7/14

1、理論核心：傳參-》pid，評論父id需要在wxml頁面傳遞；小程序端和WEB端不同核心：前者操縱數據，后者操縱DOM元素對象

2、不廢話，直接代碼：wxml

<view class="comment-new">
      <block wx:if="{{home_comment!='暫無評論~'&&home_comment!=undefined}}">
         <block wx:for="{{home_comment}}" wx:for-item="comment" >
          <p class="c_1">{{comment.username}}：{{comment.content}}</p>
          <a class="reply" bindtap="reply" data-cid="{{comment.c_id}}">回復</a>
          <a class="reply" wx:if="{{comment.uid==comment.login_uid}}" bindtap="del" data-cid="{{comment.c_id}}">刪除</a>
          <!--  點擊回復，展示以下回復form  -->
          <view wx:if="{{comment.c_id==reply_id}}" hidden="{{reply}}" class="reply_box">
          <form bindsubmit="commentForm" report-submit >    
            <textarea auto-focus="true" name="evaContent" maxlength="500" value="回復 {{comment.username}}:" class="textarea" /> 
        <input hidden="true" name="comment_pid" value="{{comment.c_id}}" />
            <button class="save_btn" form-type="submit">發送</button>
          </form>
          </view>
         </block>
         <form bindsubmit="commentForm2" report-submit >    
            <textarea auto-focus="true" name="evaContent" maxlength="500" placeholder="發表評論（50字以內）" class="textarea" /> 
        <input hidden="true" name="comment_pid" value="0" />
            <button class="save_btn" form-type="submit">發送</button>
          </form>
       </block>

<!--  上面判斷有評論、有回復、有刪除；下面判斷無評論，只需要一個發表評論textarea即可  -->

  <block wx:else>
        暫無評論~
        <!--這里單獨寫一個發表評論功能，與上面【回復、刪除和展示評論區分開】-->
       <form bindsubmit="commentForm3" report-submit >    
            <textarea auto-focus="true" name="evaContent" maxlength="500" placeholder="發表評論（50字以內）" class="textarea" /> 
        <input hidden="true" name="comment_pid" value="0" />
            <button class="save_btn" form-type="submit">發送</button>
          </form>
       </block>
</view>

3、js：

var getList = function(that){
  /* 獲取房間評論信息  -xzz 0714*/
  wx.request({
    url: 'https://m.****.com/index.php/Home/Xiaoxxf/home_comment?home_id=' + that.data.home_id,    //房間評論
    data: {
      'openid': wx.getStorageSync('openid')
    },
    method: 'GET',
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    dataType: 'json',
    success: function (res) {
      console.log(res.data);
      that.setData({
        home_comment: res.data    //一維數組，房間評論所有信息
      })
      console.log(that.data.home_comment);
    },
    fail: function (res) { },
    complete: function (res) { },
  })
}

page({
onLoad: function (options) {
    var that = this;
    that.setData({
      home_id: options.home_id,
      // 評論數據
      reply: "true"    //  默認隱藏回復
    })
/* 初始化獲取房間評論信息  -xzz 0714*/
      getList(that);
},

reply:function(e){
      var that = this;
      // 回復form隱藏、展示切換
      if(that.data.reply==true){
        that.setData({
          reply: false     //展示回復框
        })
      }else{
        that.setData({
          reply: true     //隱藏回復框
        })
      }
      that.setData({
        reply_id: e.currentTarget.dataset.cid   //用戶點擊回復的評論id
      })
    },
    del:function(e){
      var that = this;
      console.log(e.currentTarget.dataset.cid);
      wx.request({
        url: 'https://m.****.com/index.php/Home/Xiaoxxf/home_comment_del?c_id=' + e.currentTarget.dataset.cid,    //刪除房間評論
        data: '',
        header: {
          'Content-Type': 'application/json'
        },
        method: 'GET',
        success: function(res) {
          console.log(res);
          wx.showToast({
            title: res.data,  //數據返回提示，查看后台PHP
            icon: 'success',
            duration: 2000
          })
          /* 獲取房間評論信息  -xzz 0714*/
          getList(that);
        },
        fail: function(res) {},
        complete: function(res) {},
      })
    },

   /**
   * 自定義方法，commentForm表單校驗，然后提交后台，最后刷新數據
   */
    commentForm: function (e) {
      var that = this;
      // ------------- 3、檢查用戶登錄態 ------------------
      wx.checkSession({
        success: function (res) {     //登錄態未過期
          console.log(res.errMsg);
        },
        fail: function (res) {    //登錄態過期
          wx.login();
        },
        complete: function (res) { },
      })

      if (e.detail.value.evaContent.length <= 0 || e.detail.value.evaContent.length > 50) {
        wx.showToast({
          title: '評論字數在1~50字之間',
          icon: 'loading',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else if (e.detail.value.comment_pid<0 || isNaN(e.detail.value.comment_pid)) {
        wx.showToast({
          title: '回復評論參數有誤~',
          icon: 'loading',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else {                //回復評論
        wx.request({
          url: 'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/reply_comment',//回復評論
          data: {
           "comment_pid":e.detail.value.comment_pid,
           "content": e.detail.value.evaContent,
           "home_id":that.data.home_id,
           "openid":wx.getStorageSync("openid") 
          },
          header: {
            'Content-Type': 'application/json'
          },
          method: 'GET',
          success: function(res) {
            console.log(res);
            if(res.data.state == 1){    //回復成功，state==1
              wx.showToast({
                title: res.data.Msg,
                icon: 'loading',
                duration: 1500
              })
              /* 獲取房間評論信息  -xzz 0714*/
              getList(that);
            }else{
              wx.showToast({            //回復失敗，查看原因
                title: res.data,
                icon: 'loading',
                duration: 1500
              })
            }
          },
          fail: function(res) {},
          complete: function(res) {},
        })
      }
    },
    commentForm2: function (e) {
      var that = this;
      // ------------- 3、檢查用戶登錄態 ------------------
      wx.checkSession({
        success: function (res) {     //登錄態未過期
          console.log(res.errMsg);
        },
        fail: function (res) {    //登錄態過期
          wx.login();
        },
        complete: function (res) { },
      })

      if (e.detail.value.evaContent.length <= 0 || e.detail.value.evaContent.length > 50) {
        wx.showToast({
          title: '評論字數在1~50字之間',
          icon: 'loading',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else if (e.detail.value.comment_pid < 0 || isNaN(e.detail.value.comment_pid)) {
        wx.showToast({
          title: '回復評論參數有誤~',
          icon: 'loading',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else {                //回復評論
        wx.request({
          url: 'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/reply_comment',//回復評論
          data: {
            "comment_pid": e.detail.value.comment_pid,
            "content": e.detail.value.evaContent,
            "home_id": that.data.home_id,
            "openid": wx.getStorageSync("openid")
          },
          header: {
            'Content-Type': 'application/json'
          },
          method: 'GET',
          success: function (res) {
            console.log(res);
            if (res.data.state == 1) {    //回復成功，state==1
              wx.showToast({
                title: res.data.Msg,
                icon: 'loading',
                duration: 1500
              })
              /* 獲取房間評論信息  -xzz 0714*/
              getList(that);
            } else {
              wx.showToast({            //回復失敗，查看原因
                title: res.data,
                icon: 'loading',
                duration: 1500
              })
            }
          },
          fail: function (res) { },
          complete: function (res) { },
        })
      }
    },
    commentForm3: function (e) {
      var that = this;
      // ------------- 3、檢查用戶登錄態 ------------------
      wx.checkSession({
        success: function (res) {     //登錄態未過期
          console.log(res.errMsg);
        },
        fail: function (res) {    //登錄態過期
          wx.login();
        },
        complete: function (res) { },
      })

      if (e.detail.value.evaContent.length <= 0 || e.detail.value.evaContent.length > 50) {
        wx.showToast({
          title: '評論字數在1~50字之間',
          icon: 'loading',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else if (e.detail.value.comment_pid < 0 || isNaN(e.detail.value.comment_pid)) {
        wx.showToast({
          title: '回復評論參數有誤~',
          icon: 'loading',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else {                //回復評論
        wx.request({
          url: 'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/reply_comment',//回復評論
          data: {
            "comment_pid": e.detail.value.comment_pid,
            "content": e.detail.value.evaContent,
            "home_id": that.data.home_id,
            "openid": wx.getStorageSync("openid")
          },
          header: {
            'Content-Type': 'application/json'
          },
          method: 'GET',
          success: function (res) {
            console.log(res);
            if (res.data.state == 1) {    //回復成功，state==1
              wx.showToast({
                title: res.data.Msg,
                icon: 'loading',
                duration: 1500
              })
              /* 獲取房間評論信息  -xzz 0714*/
              getList(that);
            } else {
              wx.showToast({            //回復失敗，查看原因
                title: res.data,
                icon: 'loading',
                duration: 1500
              })
            }
          },
          fail: function (res) { },
          complete: function (res) { },
        })
      }
    }
})

 

4、后台PHP代碼：都是一些很常規的增刪改查操作，就不貼了。