• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

【微信小程序】：评论、回复和删除功能--2017/7/14

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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代码：都是一些很常规的增删改查操作，就不贴了。

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
小程序笔记 参见：js扩展运算符（spread）是三个点（...） ...发布时间：2022-07-18
下一篇：
微信小程序实战：app主页面保存page页面实例发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap