tp3接口写的评论

控制器:

<?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&hellip;" ο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">&nbsp;'+ 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">&nbsp;'+ 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>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值