这里的小程序评论功能只支持实时评论和显示,不支持回复,现实项目中后台PHP用的是redis,而我用的是表(在后期开发中,我会用redis写评论,不建议用表写评论,用表对服务器和数据库压力比较大)
//wxml部分
<!-- 用户评论信息 -->
<view class='comment'>
<view class='pinglun'><text class='collectTitle'>用户评论</text></view>
<view class="addcomment">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label"><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image></view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" type="text" name="comcontent" placeholder='点赞都是套路，评论才是真诚' bindinput ="comcontentInput" value="{{comcontent}}"/>
<button class="tjcom mini-btn button-hover " bindtap="commentBtnClick">评论</button>
</view>
</view>
</view>
<view class='display' wx:if='{{comment_show}}'>
<block wx:for="{{collectinfo}}" wx:for-item='item' wx:key='key'>
<view class='user-nickname'>
<image class='user-icon' src='{{item.usericon}}'></image>
<text class='nickname'>{{item.usernickname}}</text>
</view>
<text class='commentDetail'>{{item.content}}</text>
<view class='time-heart'>
<text class='comment-time'>{{item.create_time}}</text>
<image class='heart-icon' src='../images/heart.png'></image>
<text class='dianzan'>{{item.herat_num}}次点赞</text>
</view>
</block>
<view class='comment-count' bindtap='lookAllcollect' data-aid='{{detail.id}}'>查看全部{{comnum}}条评论</view>
</view>
<view class='none' wx:else><text>该文章还没有评论...</text></view>
</view>
//wxss部分
/* 用户评论 */
.comment{
width: 100%;
background-color: #fff;
}
.collectTitle{
border-left: solid 10rpx red;
margin-left: 30rpx;
padding-left: 10rpx;
font-size: 30rpx;
}
.pinglun{
width: 100%;
height: 80rpx;
border-bottom: solid 1rpx #F9F9F9;
line-height: 80rpx
}
.display{
width: 100%;
background-color: #fff;
}
.none{
text-align: center;
padding: 20rpx 0;
font-size: 24rpx;
color: #999
}
.user-nickname{
padding: 20rpx 30rpx 0 30rpx;
}
.user-icon{
width: 50rpx;
height: 50rpx;
border-radius: 50rpx;
vertical-align: top;
}
.nickname{
font-size: 24rpx;
color: #999;
margin-left: 20rpx
}
.commentDetail{
font-size: 26rpx;
margin-left: 100rpx
}
.time-heart{
padding: 0rpx 30rpx 0 30rpx;
height: 50rpx;
position: relative
}
.comment-time{
font-size: 20rpx;
color: #999;
margin-left: 70rpx
}
.heart-btn{
width: 20rpx;
height: 20rpx;
}
.heart-icon{
width: 20rpx;
height: 20rpx;
position: absolute;
right: 160rpx;
top: 20rpx
}
.dianzan{
font-size: 20rpx;
display: inline-block;
color: #999;
position: absolute;
right: 60rpx;
top: 14rpx
}
.comment-count{
border-top: solid 1rpx #F9F9F9;
text-align: center;
color: #999;
font-size: 24rpx;
padding: 20rpx 0;
}
//js部分
// pages/artDetail/artDetail.js
const app = getApp();
import { Artdetail } from 'artDetail-model.js';
var artdetail = new Artdetail(); //实例化 首页 对象
import dateTimeStamp from '../../utils/datamissing.js';
Page({
/**
* 页面的初始数据
*/
data: {
"comment_show":false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
// console.log(options)
var user = wx.getStorageSync('user');
var openid = user.openid;
var articleid = options.id;
//加载文章详情数据
artdetail.getArtDetailData(articleid, openid, sid, (articleData) => {
console.log(articleData);
//显示所有评论
if (articleData.collectinfo){
that.setData({
"comment_show":true,
"collectinfo": articleData.collectinfo,
comnum: articleData.count
})
}else{
that.setData({
"comment_show":false
})
}
});
},
//获取当前文章的评论内容
getArtComment: function () {
var that = this;
var artid = that.data.currentId;
artdetail.getUserComment(artid, '2', (commentData) => {
if (commentData.data.countnum > 0) {
for (var data of commentData.data.data) {
var time = dateTimeStamp(data.create_time);
data.create_time = time;
}
that.setData({
collectinfo: commentData.data.data,
comcontent: '',
comnum: commentData.data.countnum,
comment_show: true
})
}
})
},
//获取用户评论的内容
comcontentInput: function (e) {
this.setData({
comcontent: e.detail.value
})
},
//提交评论
commentBtnClick: function (e) {
var that = this;
var content = that.data.comcontent;
var artid = that.data.currentId;
var user = wx.getStorageSync('user');
var userInfo = wx.getStorageSync('userInfo');
var usernickname = userInfo.nickName;
var usericon = userInfo.avatarUrl;
var openid = user.openid;
var sid = app.globalData.sid;
// console.log(sid)
// 发表评论
// 此处延迟的原因是 在点发送时 先执行失去文本焦点 再执行的send 事件 此时获取数据不正确 故手动延迟100毫秒
setTimeout(function () {
if (content.trim().length > 0) {
artdetail.addUserComment(artid, openid, content, usernickname, usericon,sid, (commentData) => {
that.getArtComment();
// console.log(commentData.sid);
wx.showToast({
title: commentData.message
})
})
} else {
that.setData({
comcontent: ""//清空文本域值
})
}
}, 100)
},
/**
* 查看所有评论
*/
lookAllcollect:function(e){
var that = this;
var articleid = e.currentTarget.dataset.aid;
// console.log(articleid);
wx.navigateTo({
url: '../allcollect/allcollect?aid='+articleid,
})
}
})