控制器:
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
$d= M()->query('SELECT
user.id,
user.user,
pinglun1.content,
pinglun1.time,
pinglun2.content as son_content,
pinglun2.time as son_time,
pinglun2.id as son_id
FROM
user
JOIN pinglun pinglun1 ON user.id = pinglun1.user_id
AND pinglun1.sex != 1
LEFT JOIN pinglun pinglun2 ON pinglun2.parent_id = pinglun1.id
');
echo json_encode($d);
}
public function show(){
$this->assign('d',$d);
$this->display();
}
public function insertPinglun(){
$pinglunContent= I('get.pinglun');
$pinglun['time']=date('Y-m-d H:i:s');
$pinglun['user_id']=1;
$pinglun['content']=$pinglunContent;
if( M('pinglun')->add($pinglun)){
echo 200;
}else{
echo 100;
}
}
public function sonPinglun(){
$pinglunContent= I('get.pinglun');
$parent_id= I('get.user_id');
$pinglun['time']=date('Y-m-d H:i:s');
$pinglun['user_id']=1;
$pinglun['parent_id']= $parent_id;
$pinglun['content']=$pinglunContent;
if( M('pinglun')->add($pinglun)){
echo 200;
}else{
echo 100;
}
}
public function deletePinglun(){
$this->display();
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿微博评论</title>
<link rel="stylesheet" href="__PUBLIC__/css/style.css">
<link rel="stylesheet" href="__PUBLIC__/css/comment.css">
</head>
<body>
<!--
此评论textarea文本框部分使用的https://github.com/alexdunphy/flexText此插件
-->
<div class="commentAll">
<!--评论区域 begin-->
<div class="reviewArea clearfix">
<textarea class="content comment-input" placeholder="Please enter a comment…" οnkeyup="keyUP(this)"></textarea>
<a href="javascript:;" class="plBtn">评论</a>
</div>
<!--评论区域 end-->
<!--回复区域 begin-->
<div class="comment-show">
</div>
<!--回复区域 end-->
</div>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.flexText.js"></script>
<!--textarea高度自适应-->
<script type="text/javascript">
$(function () {
$('.content').flexText();
});
</script>
<!--textarea限制字数-->
<script type="text/javascript">
function keyUP(t){
var len = $(t).val().length;
if(len > 139){
$(t).val($(t).val().substring(0,140));
}
}
</script>
<!--点击评论创建评论条-->
<script type="text/javascript">
$('.plBtn').click(function(){
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
if(m<10) m = '0' + m;
var s=myDate.getSeconds();
if(s<10) s = '0' + s;
var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
//获取输入内容
var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();//获得评论内容
console.log(oSize);
//动态创建评论模块
oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="__PUBLIC__/images/header-img-comment_03.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">David Beckham : </a> <span class="my-pl-con"> '+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
$('.comment-show').prepend(oHtml);
insertPinglun(oSize);
// if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
// $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
// $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
// }
});
$('.comment-show').on('click','.pl-hf',function(){
var user_id=$(this).attr('user_id');
//获取回复人的名字
var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
//回复@
var fhN = '回复@'+fhName;
//var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" οnkeyup="keyUP(this)"></textarea> <a href="javascript:;" user_id='+user_id+' class="hf-pl">评论</a></div>';
//显示回复
if($(this).is('.hf-con-block')){
$(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
$(this).removeClass('hf-con-block');
$('.content').flexText();
$(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
//console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
//input框自动聚焦
$(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
}else {
$(this).addClass('hf-con-block');
$(this).parents('.date-dz-right').siblings('.hf-con').remove();
}
});
// $(".comment-show").on('focus','textarea',function(){
// $(this).val('');
// });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
$('.comment-show').on('click','.hf-pl',function(){
var user_id=$(this).attr('user_id');
var pinglun=$(this).closest('div').find('textarea').val();
var bei_pinglun_id=1;
var oThis = $(this);
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var h=myDate.getHours(); //获取当前小时数(0-23)
var m=myDate.getMinutes(); //获取当前分钟数(0-59)
if(m<10) m = '0' + m;
var s=myDate.getSeconds();
if(s<10) s = '0' + s;
var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
//获取输入内容
var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
console.log(oHfVal)
var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
var oAllVal = '回复@'+oHfName;
if(oHfVal.replace(/^ +| +$/g,'') == '' || oHfVal == oAllVal){
}else {
$.ajax({
url:'http://www.tp.com/index.php/Home/Index/sonPinglun?pinglun='+pinglun+'&user_id='+user_id+'&bei_pinglun_id='+bei_pinglun_id,
success:function(e){
if(e==200){
var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">我的名字 : </a><span class="my-pl-con">'+pinglun+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left" user_id=1>回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
}
}
// var oAt = '';
// var oHf = '';
// $.each(data,function(n,v){
// delete v.hfContent;
// delete v.atName;
// var arr;
// var ohfNameArr;
// if(oHfVal.indexOf("@") == -1){
// data['atName'] = '';
// data['hfContent'] = oHfVal;
// }else {
// arr = oHfVal.split(':');
// ohfNameArr = arr[0].split('@');
// data['hfContent'] = arr[1];
// data['atName'] = ohfNameArr[1];
// }
// if(data.atName == ''){
// oAt = data.hfContent;
// }else {
// oAt = '回复<a href="#" class="atName">@'+data.atName+'</a> : '+data.hfContent;
// }
// oHf = data.hfName;
// });
});
}
});
</script>
<!--删除评论块-->
<script type="text/javascript">
$('.commentAll').on('click','.removeBlock',function(){
var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
if(oT.siblings('.all-pl-con').length >= 1){
oT.remove();
}else {
$(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
oT.remove();
}
$(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();
})
</script>
<!--点赞-->
<script type="text/javascript">
$('.comment-show').on('click','.date-dz-z',function(){
var zNum = $(this).find('.z-num').html();
if($(this).is('.date-dz-z-click')){
zNum--;
$(this).removeClass('date-dz-z-click red');
$(this).find('.z-num').html(zNum);
$(this).find('.date-dz-z-click-red').removeClass('red');
}else {
zNum++;
$(this).addClass('date-dz-z-click');
$(this).find('.z-num').html(zNum);
$(this).find('.date-dz-z-click-red').addClass('red');
}
})
</script>
<script type="text/javascript">
function insertPinglun(pinglun){
$.ajax({
url:'http://www.tp.com/index.php/Home/Index/insertPinglun?pinglun='+pinglun,
success:function(e){
if(e==200){
}else{
window.location.reload();
}
}
});
}
$.ajax({
url:'http://www.tp.com/index.php/Home/Index/index',
dataType:'json',
success:function(e){
$.each(e,function(k,v){
$('.comment-show').prepend( '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="__PUBLIC__/images/header-img-comment_03.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+v.user+' : </a> <span class="my-pl-con"> '+ v.content +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+v.time+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left" user_id='+v.id+'>回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>');
})
}
})
</script>
</body>
</html>