小程序评论功能

 

//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>

.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,

})

}



})