wxml
共{{comment_list.length + comment_list2.length}}条评论
{{list.comment_user_name}}
{{list.comment_text}}
{{list.comment_time}}
{{list2.comment_user_name}}
{{list2.comment_text}}
回复 {{list2.reply_name}}： {{list2.comment_text}}
{{list2.comment_time}}
— THE END —
wxss
/* 评论-回复-回复评论显示区域 */
.container{ width: 718rpx; margin-top: 39rpx; padding-left: 32rpx;}
.total{ font-size: 24rpx; color: #999999; margin-left: 1rpx;}
.container_inp{ width: 661rpx; height: 32rpx; background-color: #F2F2F2; border-radius: 8rpx; padding: 17rpx 0rpx 15rpx 25rpx; margin-top: 24rpx; margin-bottom: 47rpx ;}
.container_place{ font-size: 24rpx; color: #999999;}
.container-item{ display: flex; margin-bottom: 34rpx; align-items: flex-start;}
.item_img{ width: 64rpx; height: 64rpx; margin-right: 17rpx;}
.item_right{ display: inline-block; width: 636rpx; border-bottom: 2rpx solid #E5E5E5; padding-bottom: 40rpx;}
.right_name{ font-size: 24rpx; color: #999999;}
.right_content{ width: 603rpx; margin-top: 20rpx;}
.right_content_txt{ font-size: 26rpx; color: #333333;}
.right_content_txt2{ font-size: 24rpx; color: #CCCCCC; margin-left: 30rpx;}
.reply{ display: flex; margin-top: 32rpx; align-items: flex-start; }
.reply_img{ width: 40rpx; height: 40rpx; margin-right: 17rpx;}
.reply_right{ display: inline-block; width: 546rpx;}
/* 结束 */
.end{ margin-top: 47rpx; margin-bottom: 48rpx; text-align: center;}
.end_txt{ font-size: 24rpx; color: #999999;}
/* 底部评论 */
.foot{ width: 686rpx; padding: 17rpx 32rpx; background-color: #FFFFFF; box-shadow:0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.08); position: fixed; bottom: 0; left: 0;}
.say{ display: inline-block; width: 360rpx; padding: 20rpx 0rpx 10rpx 24rpx; background-color: #F2F2F2; border-radius: 8rpx;}
.flex{ display: flex; align-items: center;}
.say_img{ width: 24rpx; height: 24rpx; margin-right: 13rpx; /* vertical-align: 10rpx; */}
.say_inp{ display: inline-block; width: 300rpx; height: 33rpx;}
.say_place{ font-size: 28rpx; color: #333333;}
.foot_img{ width: 45rpx; height: 40rpx; margin-left: 50rpx; margin-right: 17rpx;}
.foot_num{ font-size: 24rpx; vertical-align: 10rpx;}
.foot_img2{ width: 40rpx; height: 40rpx; margin-left: 30rpx; margin-right: 17rpx;}js
var app = getApp()
let api = require("../../utils/api.js")
Page({
data: {
//评论数据
comment_list: [
{
comment_id: 1, //评论id
comment_pr_id: 1, //评论文章所属id
comment_user_avatar: 'https://cclove.club/xcx/user.jpg', //评论用户头像(路径替换为你的图片路径)
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: 'https://cclove.club/xcx/user.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: 'https://cclove.club/xcx/user.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: 'https://cclove.club/xcx/user.jpg',
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: 'https://cclove.club/xcx/user.jpg',
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
// console.log('2.获取当前用户信息'),
//模拟用户信息
userinfo: {
nickName: '马飞', //用户昵称
avatarUrl: 'https://cclove.club/xcx/user.jpg',//用户头像
}
},
//点击用户评论或回复时触发
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回复-回复评论)
})
},
// 评论提交数据
commit_data:function (comment_data) {
wx.request({
url:api.IndexDetailCommenPosttApi,
data: comment_data,
dataType: "json",
header: {},
method: "post",
success: (result) => {
console.log(result.data,'>>>>')
},
})
},
//底部输入框提交内容时触发
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_list_length = comment_list.length; //获取当前评论数组的长度
if(comment_list_length>0){
var last_id = comment_list[comment_list_length - 1].comment_id; //获取最后一个评论的id
}else{
var last_id =0
}
var comment_list2 = this.data.comment_list2; //获取回复数据
var comment_list2_length = comment_list2.length; //获取回复数组的长度
// 判断数组是否为空,
if(comment_list2_length>0){
var last_id2 = comment_list2[comment_list2_length - 1].comment_id; //获取最后回复的id
}else{
var last_id2 =0
}
// console.log(comment_list2)
// console.log(comment_list2[comment_list2_length - 1],'>>>>>>')
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);
//toto 发送数据到后端
console.log(comment_detail)
// this.commit_data(comment_list2)
} else {
//评论
comment_list.unshift(comment_detail);
//toto 发送数据到后端
console.log(comment_detail)
// this.commit_data(comment_list)
}
//动态渲染
this.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 //回复列表
})
}
},
// ---生命周期获取初始数据---
onLoad: function (options) {
let Id = options.id;
let type = options.type;
console.log(Id,type,'>>>>>>')
// console.log(type,'>>>>>>')
// ---生命周期获取初始数据---
// console.log('1.获取初始数据;2.获取当前用户在userinfo替换,3.发送数据到后端')
// 根据id，类型去获取
// 类型：indexuser---》用户案例评论
// 类型：indexdetail---》自己的商城产品评论
if (type == 'indexdetail'){
// 商品详情
wx.request({
url: api.IndexDetailCommentApi + Id+'/',
dataType: "json",
method: "GET",
success: (result) => {
// console.log(result.data.data,'>>>>>')
this.setData({
comment_list:result.data.data.comment_list,
comment_list2:result.data.data.comment_list2
})
console.log(this.data.comment_list)
console.log(this.data.comment_list2)
// console.log(this.data.goodList,'>>>>>')
},
})
}else{
}
}
})
输入框失去焦点时触发
//下面的方法可以绑定在输入框的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 //输入框获取焦点
})
}
}如果你是点击输入框右边按钮才发送内容的话需要在输入框bindinput属性绑定以下方法获取用户输入的值
//获取输入框内容
getCommentText(e) {
var val = e.detail.value;
this.setData({
comment_text: val
})
}
