【微信小程序】:评论、回复和删除功能 -- 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代码:都是一些很常规的增删改查操作,就不贴了。