|
|
Page({
|
|
|
data: {
|
|
|
//评论数据
|
|
|
comment_list: [
|
|
|
{
|
|
|
comment_id: 1, //评论id
|
|
|
comment_pr_id: 1 ,//评论文章所属id
|
|
|
comment_user_avatar: 'cloud://cloud1-7gyjwcyfbdf819da.636c-cloud1-7gyjwcyfbdf819da-1321167991/1678762683308.png', //评论用户头像(路径替换为你的图片路径)
|
|
|
comment_user_name: '高同学', //评论人昵称
|
|
|
comment_text: '您觉得这位老师的讲课方式是什么样的呢', //评论内容
|
|
|
comment_time: '2020年8月18日', //评论时间
|
|
|
reply_id: 0, //回复谁的评论，默认为0
|
|
|
parent_id: 0, //评论所属评论id，默认为0
|
|
|
reply_name: '' //回复评论用户的昵称 默认为''
|
|
|
},
|
|
|
{
|
|
|
comment_id: 2,
|
|
|
comment_pr_id: 1,
|
|
|
comment_user_avatar: 'cloud://cloud1-7gyjwcyfbdf819da.636c-cloud1-7gyjwcyfbdf819da-1321167991/photo/70eb920703ebdb368681f011c75aef3.jpg',
|
|
|
comment_user_name: '王同学',
|
|
|
comment_text: '强烈推荐这位老师，讲课幽默生动，容易接受',
|
|
|
comment_time: '2020年8月18日',
|
|
|
reply_id: 0,
|
|
|
parent_id: 0,
|
|
|
reply_name: ''
|
|
|
},
|
|
|
{
|
|
|
comment_id: 3,
|
|
|
comment_pr_id: 1,
|
|
|
comment_user_avatar: 'cloud://cloud1-7gyjwcyfbdf819da.636c-cloud1-7gyjwcyfbdf819da-1321167991/photo/4494c78cc34e0567b59bd6431df61f6.jpg',
|
|
|
comment_user_name: '张剑锋',
|
|
|
comment_text: '老师讲的比较仔细，但好像不太适合我',
|
|
|
comment_time: '2020年8月18日',
|
|
|
reply_id: 0,
|
|
|
parent_id: 0,
|
|
|
reply_name: ''
|
|
|
}
|
|
|
],
|
|
|
|
|
|
//回复数据
|
|
|
comment_list2: [
|
|
|
{
|
|
|
comment_id: 4,
|
|
|
comment_pr_id: 1,
|
|
|
comment_user_name: '张同学',
|
|
|
comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per3.png',
|
|
|
comment_text: "为什么呢？",
|
|
|
comment_time: '2020年8月18日',
|
|
|
reply_id: 3,
|
|
|
parent_id: 3,
|
|
|
reply_name: ''
|
|
|
},
|
|
|
{
|
|
|
comment_id: 5,
|
|
|
comment_pr_id: 1,
|
|
|
comment_user_name: '沈非隆',
|
|
|
comment_user_avatar: '/images/assemblyNumber/discoveryDetails/per4.png',
|
|
|
comment_text: "办理优待证大概需要多长时间呢会不会需要特别长时间",
|
|
|
comment_time: '2020年8月18日',
|
|
|
reply_id: 3,
|
|
|
parent_id: 3,
|
|
|
reply_name: '张剑锋'
|
|
|
}
|
|
|
],
|
|
|
|
|
|
/*定义一些数据*/
|
|
|
focus: false, //输入框是否聚焦
|
|
|
placeholder: '说点什么...', //底部输入框占字符
|
|
|
placeholder2: '说点什么，让ta也认识看笔记的你', //顶部输入框占字符
|
|
|
value: null, //顶部输入框内容
|
|
|
comment_text: null, //底部评论框内容
|
|
|
|
|
|
/*
|
|
|
*以下初始化数据是用户点击任意一条评论或回复时需要设置的数据
|
|
|
*然后将设置好的数据传递给评论时新创建的评论数据对象
|
|
|
*/
|
|
|
now_reply_name: null, //当前点击的评论或回复评论的用户昵称
|
|
|
now_reply_type: 0, //当前回复类型 默认为0 1为回复评论 2为回复回复
|
|
|
now_parent_id: 0, //当前点击的评论或回复评论的所属评论id
|
|
|
now_reply: 0, //当前点击的评论或回复评论的id
|
|
|
|
|
|
//模拟用户信息
|
|
|
userinfo: {
|
|
|
nickName: '马飞', //用户昵称
|
|
|
avatarUrl: '/images/assemblyNumber/discoveryDetails/per5.png' //用户头像
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//点击用户评论或回复时触发
|
|
|
replyComment(e) {
|
|
|
var cid = e.currentTarget.dataset.cid; //当前点击的评论id
|
|
|
var name = e.currentTarget.dataset.name; //当前点击的评论昵称
|
|
|
var pid = e.currentTarget.dataset.pid; //当前点击的评论所属评论id
|
|
|
var type = e.currentTarget.dataset.type; //当前回复类型
|
|
|
this.setData({
|
|
|
focus: true, //输入框获取焦点
|
|
|
placeholder: '回复' + name + '：', //更改底部输入框占字符
|
|
|
now_reply: cid, //当前点击的评论或回复评论id
|
|
|
now_reply_name: name, //当前点击的评论或回复评论的用户名
|
|
|
now_parent_id: pid, //当前点击的评论或回复评论所属id
|
|
|
now_reply_type: type, //获取类型(1回复评论/2回复-回复评论)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//底部输入框提交内容时触发
|
|
|
confirm(e){
|
|
|
//获取输入框输入的内容
|
|
|
var comment_text = e.detail.value;
|
|
|
//判断用户是否输入内容为空
|
|
|
if (comment_text == '') {
|
|
|
//用户评论输入内容为空时弹出
|
|
|
wx.showToast({
|
|
|
title: '请输入内容', //提示内容
|
|
|
icon: 'none' //提示图标
|
|
|
})
|
|
|
} else {
|
|
|
var date = new Date(); //创建时间对象
|
|
|
var year = date.getFullYear(); //获取年
|
|
|
var month = date.getMonth() + 1; //获取月
|
|
|
var day = date.getDate(); //获取日
|
|
|
var hour = date.getHours(); //获取时
|
|
|
var minute = date.getMinutes(); //获取分
|
|
|
var second = date.getSeconds(); //获取秒
|
|
|
var time = `${year}年${month}月${day}日${hour}时${minute}分${second}秒`; //当前时间
|
|
|
var comment_list = this.data.comment_list; //获评论数据
|
|
|
var comment_list2 = this.data.comment_list2; //获取回复数据
|
|
|
var comment_list_length = comment_list.length; //获取当前评论数组的长度
|
|
|
var last_id = comment_list[comment_list_length - 1].comment_id; //获取最后一个评论的id
|
|
|
var comment_list2_length = comment_list2.length; //获取回复数组的长度
|
|
|
var last_id2 = comment_list2[comment_list2_length - 1].comment_id; //获取最后回复的id
|
|
|
var new_id = last_id > last_id2 ? last_id + 1 : last_id2 + 1; //当前将要发表的评论的id
|
|
|
var userinfo = this.data.userinfo; //获取当前的用户信息
|
|
|
var comment_user_name = userinfo.nickName //用户昵称
|
|
|
var comment_user_avatar = userinfo.avatarUrl //用户头像
|
|
|
var reply_name = null; //回复评论用户的昵称
|
|
|
var parent_id = 0; //评论所属哪个评论的id
|
|
|
var reply_id = this.data.now_reply; //回复谁的评论id
|
|
|
//通过回复谁的评论id判断现在是评论还是回复
|
|
|
if(reply_id != 0) {
|
|
|
//现在是回复
|
|
|
var reply_type = this.data.now_reply_type; //回复类型
|
|
|
//通过回复类型判断是回复评论还是回复回复
|
|
|
if (reply_type == 1) {
|
|
|
//回复评论
|
|
|
parent_id = this.data.now_reply; //回复评论所属评论id
|
|
|
reply_name = this.data.now_reply_name; //回复评论用户昵称
|
|
|
} else {
|
|
|
//回复回复
|
|
|
parent_id = this.data.now_parent_id; //回复评论所属评论id
|
|
|
reply_name = this.data.now_reply_name; //回复评论用户昵称
|
|
|
}
|
|
|
} else {
|
|
|
//现在是评论
|
|
|
}
|
|
|
var comment_detail = {} //评论/回复对象
|
|
|
comment_detail.comment_id = new_id; //评论Id
|
|
|
comment_detail.comment_user_name = comment_user_name; //用户昵称
|
|
|
comment_detail.comment_user_avatar = comment_user_avatar; //用户头像
|
|
|
comment_detail.comment_text = comment_text; //评论内容
|
|
|
comment_detail.comment_time = time; //评论时间
|
|
|
comment_detail.reply_id = reply_id; //回复谁的评论的id
|
|
|
comment_detail.parent_id = parent_id; //评论所属哪个评论id
|
|
|
comment_detail.reply_name = reply_name; //回复评论人的昵称
|
|
|
//判断parent_id是否为0 为0就是评论 不为0就是回复
|
|
|
if(comment_detail.parent_id > 0) {
|
|
|
//回复
|
|
|
comment_list2.unshift(comment_detail);
|
|
|
} else {
|
|
|
//评论
|
|
|
comment_list.unshift(comment_detail);
|
|
|
}
|
|
|
//动态渲染
|
|
|
ths.setData({
|
|
|
//发表评论后将以下数据初始化 为下次发表评论做准备
|
|
|
comment_text: null, //评论内容
|
|
|
now_reply: 0, //当前点击的评论id
|
|
|
now_reply_name: null, //当前点击的评论的用户昵称
|
|
|
now_reply_type: 0, //评论类型
|
|
|
now_parent_id: 0, //当前点击的评论所属哪个评论id
|
|
|
placeholder: "说点什么...", //输入框占字符
|
|
|
//将加入新数据的数组渲染到页面
|
|
|
comment_list, //评论列表
|
|
|
comment_list2 //回复列表
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//下面的方法可以绑定在输入框的bindblur属性上
|
|
|
blur(e) {
|
|
|
const text = e.detail.value.trim();
|
|
|
if( text == ''){
|
|
|
this.setData({
|
|
|
now_reply: 0, //当前点击的评论或回复评论的id
|
|
|
now_reply_name:null, //当前点击的评论或回复评论的用户昵称
|
|
|
now_reply_type:0, //当前回复类型
|
|
|
now_parent_id:0, //当前点击的评论或回复评论的所属评论id
|
|
|
placeholder: "说点什么呢，万一火了呢", //占字符
|
|
|
focus:false //输入框获取焦点
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//获取输入框内容
|
|
|
getCommentText(e) {
|
|
|
var val = e.detail.value;
|
|
|
this.setData({
|
|
|
comment_text: val
|
|
|
})
|
|
|
},
|
|
|
//顶部评论框提交内容时触发
|
|
|
bindconfirm(e) {
|
|
|
var comment_text = e.detail.value
|
|
|
var comment_list = this.data.comment_list;
|
|
|
var comment_detail = {}
|
|
|
comment_list.unshift(comment_detail);
|
|
|
this.setData({
|
|
|
value: null })
|
|
|
}
|
|
|
|
|
|
})
|
