直播商城源码为了加强系统的社交性，实现了动态发布的功能，其他用户可以评论回复动态，所以评论和回复动态，是直播商城源码重要的一部分功能。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>添美咨询</title>
<script src="../../modules/searchtml/js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//用户登录信息
var logoinfo = JSON.parse(localStorage.getItem('logoinfo')); </script>
</head>
<body>
<!-- 回复区 start -->
<!-- <div class="common-box">
<div class="common-item">
<p class="username"><span class="user">本田车主</span></p>
<div class="userfont">
<p>这颜值真的帅，不过国内的品牌越野已经次于他了</p>
</div>
</div>
</div> -->
<!-- 回复区 end -->
<!-- </div> -->
<div class="commentAll">
<!--评论区域 begin-->
<div class="reviewArea clearfix">
<textarea class="content comment-input" placeholder="Please enter a comment…" onkeyup="keyUP(this)"></textarea>
<a href="javascript:;" class="plBtn">评论</a>
</div>
<!--评论区域 end-->
<!--回复区域 begin-->
<div class="comment-show">
<!-- <div class="comment-show-con clearfix">
<div class="comment-show-con-img pull-left"><img src="../../my/img/userphone.jpg" alt=""></div>
<div class="comment-show-con-list pull-left clearfix">
<div class="pl-text clearfix">
<a href="#" class="comment-size-name">张三 : </a>
<span class="my-pl-con"> 来啊 造作啊!</span>
</div>
<div class="date-dz">
<span class="date-dz-left pull-left comment-time">2017-5-2 11:11:39</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="z-num">666</i>)</a>
</div>
</div>
<div class="hf-list-con"></div>
</div>
</div> -->
</div>
<!--回复区域 end-->
</div>
<!-- -->
</div>
<!-- <footer class="footer"> -->
<!-- <textarea class="footer-input" placeholder="想说点什么"></textarea> -->
<!-- <input type="search" class="footer-input" placeholder="想说点什么" maxlength="140"> -->
<!-- <div class="footer-icon"></div>
<div class="footer-icon"></div>
<div class="footer-icon"></div> -->
<!-- </footer> -->
<div class="footer-zhanwei"></div>
<script type="text/javascript" src="js/jquery.flexText.js"></script>
<script type="text/javascript">
$(function () {
$('.content').flexText();
}); function skipBack() { window.history.back();
} 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; //查询评论
$.ajax({ url: communicationUrl, type: 'post', data: { goodid: id
}, success: function(e) { console.log(e) if(e.sta_commentary == 'ok'){
var eHtml = ""; var data = e.vo_commentary; for(var i=0;i<data.length;i++){
eHtml += '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="../../my/img/userphone.jpg" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+logoinfo.name+' :</a> <span class="my-pl-con"> '+ data[i].info +'</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="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
} //动态创建评论模块
// if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
$('.plBtn').parents('.reviewArea ').siblings('.comment-show').prepend(eHtml);
$('.plBtn').siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text(''); // }
}
}, error: function(error) { console.log(error)
}
}) </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">
$('.commentAll').on('click','.plBtn',function(){
//获取输入内容
var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
if(oSize !== ''){
$.ajax({
url: addCommunicationUrl,
type: 'post',
data: {
goodid: id,
userid : logoinfo.id ,
type : 2,
info : oSize
},
success: function(data) {
var eHtml = "";
eHtml += '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="../../my/img/userphone.jpg" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+logoinfo.name+' :</a> <span class="my-pl-con"> '+ data.info +'</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="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
$('.plBtn').parents('.reviewArea ').siblings('.comment-show').prepend(eHtml);
$('.plBtn').siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
}
},
error: function(error) {
console.log(error)
}
})
}
}); </script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
$('.comment-show').on('click','.pl-hf',function(){ //获取回复人的名字
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" style="width:100%" placeholder="" οnkeyup="keyUP(this)"></textarea> <a href="javascript:;" 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');
$(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('width','100%'); //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();
}
}); </script>
<!--评论回复块创建-->
<script type="text/javascript">
$('.comment-show').on('click','.hf-pl',function(){ var oThis = $(this); //获取输入内容
var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val(); 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 {
$.getJSON("json/pl.json",function(data){ var oAt = ''; var oHf = '';
$.each(data,function(n,v){ console.log(data) // 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;
});
var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">'+logoinfo.name+' : </a><span class="my-pl-con">'+oAt+'</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="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();
});
}
}); </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);
}else {
zNum++;
$(this).addClass('date-dz-z-click');
$(this).find('.z-num').html(zNum);
}
}) </script>
</body></html>
声明：本文由云豹科技转发自weixin_44134551博客，如有侵权请联系作者删除
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69982461/viewspace-2790132/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
直播源码搭建教程，教你实现举报功能
请登录后发表评论
登录
全部评论
