<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{$data['title']}</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="/css/news.css">
<link rel="stylesheet" href="/static/dropload-gh-pages/dropload.css">
<script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/static/dropload-gh-pages/dropload.min.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<style>
.container{
padding: 10px;
background-color: #FFFFFF;
padding-bottom: 50px;
padding-top: 0;
}
.content img{
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h3>{$data['title']}</h3>
<div class="text-muted">{$data['source']} {$data['comment_num']}评 {$data['create_time']}</div>
<div class="content">
{$data['content']|raw}
</div>
<div id="page-all">
{if $comment}
<div class="comment-select">
<div class="comment-title">
<img class="comment-title-img" src="/img/remen2x.png"></img>
<text class="comment-title-content">热门评论</text>
</div>
{foreach $comment as $v}
<div class="comment-content">
<div class="comment-content-all">
<div class="comment-head-img">
<img class="head-img" src="{$v['head_image']}" onerror="this.src='/img/defaulthead.png'" alt="" />
</div>
<div class="comment-info-title-user">
<div class="comment-name">{$v['user_name']}</div>
<div class="comment-time shijian">{$v['create_time']}</div>
</div>
{if $token}
<div class="link-a">
{if $v['user_id']==$userid}
<a style="text-decoration:none;" class="comment-delete" href="javascript:void" data-id="{$v['id']}" >删除</a>
{/if}
{if $v['user_id'] !== $userid}
<a class="comment-reply" href="javascript:;" data-reply-user="{$v['user_id']}" data-id="{$v['id']}" name="{$v['user_name']}">回复</a>
{/if}
</div>
{/if}
</div>
<p class="comment-content-info">{$v['content']}</p>
{if $v['sub']}
<div class="reply-select">
{foreach $v['sub'] as $key=>$val}
<div class="reply-select-title1">
{if $val['user_id']==$userid}
<label>{$val['user_name']}</label>
{else}
<label class="replyRen" data-reply-user="{$val['user_id']}" data-id="{$v['id']}">{$val['user_name']}</label>
{/if}
<text class="reply-select-tetx">回复</text>
{if $val['reply_user_id']==$userid}
<label >{$val['reply_name']}:</label>
{else}
<label class="replyRen" data-reply-user="{$val['reply_user_id']}" data-id="{$v['id']}">{$val['reply_name']}:</label>
{/if}
<text>{$val['content']}</text>
</div>
{/foreach}
</div>
{/if}
</div>
{/foreach}
</div>
{/if}
</div>
<div class="footer input-select bottom">
<div class="input-select-text">
<input type="text" readonly onclick="reply_news()" class="form-control" placeholder="欢迎发表您的观点哦~" aria-describedby="basic-addon1" />
</div>
<div class="bottom-all-img">
<img onclick="reply_news()" src="/img/comment.png" />
{if $data['like']==1}
<img class="islike" value="1" src="/img/like.png" />
{else}
<img class="islike" value="0" src="/img/nolike.png" />
{/if}
</div>
</div>
</div>
<div id="tcbox" class="tcbox">
<div class="tkmain">
<div class="tkmain-title">
<span id="relpy"></span>
<i class="glyphicon glyphicon-remove pull-right" onclick="closeTcbox()"></i>
</div>
<div class="tkmain-body">
<textarea id="replycontent" class="form-control" rows="3"></textarea>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary" onclick="submitBtn(this)">提交</button>
</div>
</div>
</div>
</body>
</html>
<script>
var newsid = "{$data['id']}";
var token = '{$token}';
var replyId = 0;
var username = '';
var replyUserId = 0;
//删除回复
$(document).on('touchstart','.comment-delete',function(){
var id = $(this).attr('data-id');
var url = "/h5/News/delReplay";
var that = $(this);
$.post(url,{id:id,token:token,},function (res) {
if(res.code == 0){
that.parent().parent().parent().remove();
layer.msg('删除成功',{time:1000},function () {
window.location.reload();
})
}else{
layer.msg(res.msg);
}
})
})
//回复
$(document).on('touchstart','.comment-reply',function(){
replyId = $(this).attr('data-id');
username= $(this).attr('name');
replyUserId = $(this).attr('data-reply-user');
showTcbox();
$('#relpy').html('回复:'+username);
})
function reply_news() {
replyId = 0;
username = '';
replyUserId = 0;
$('#relpy').html('');
showTcbox();
}
$(document).on('touchstart','.replyRen',function(){
username= $(this).html();
replyId = $(this).attr('data-id');
replyUserId = $(this).attr('data-reply-user');
showTcbox();
$('#relpy').html('回复:'+username.replace(/[:]/g,''));
})
//点赞
$(document).on('touchstart','.islike',function(){
var type= $(this).attr('value');
var url = "/h5/News/like";
if(!token){
layer.msg('游客无权操作');
return false;
}
$.post(url,{newsid:newsid,token:token,type:type},function (res) {
if(res.code == 0){
layer.msg(res.message,{time:1000},function () {
window.location.reload()
})
}else{
layer.msg(res.message);
}
})
});
function showTcbox() {
if(!token){
layer.msg('游客无权操作');
return false;
}
$('#tcbox').show();
}
function closeTcbox() {
$('#tcbox').hide();
}
function submitBtn(_self){
if(!token){
layer.msg('游客无权操作');
return false;
}
var flag ;
if(!flag){
$(_self).attr('data-flag',true);
var content = $('#replycontent').val();
var url = "/h5/News/replytc";
$.post(url,{newsid:newsid,content:content,token:token,replyId:replyId,replyUserId:replyUserId},function (res) {
if(res.code == 0){
window.location.reload();
}else{
layer.msg(res.message);
}
$(_self).attr('data-flag',false);
})
}
}
</script>
<script>
var newsid = "{$data['id']}";
var token = '{$token}';
var userid= '{$userid}';
$(function(){
// 页数
var page = 1;
// 每页展示10个
var size = 10;
// dropload
$('.container').dropload({
scrollArea : window,
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
var url='/h5/News/newDetails';
$.ajax({
type: 'GET',
url: url+'?page='+page+'&size='+size+'&newsid='+newsid+'&token='+token,
dataType: 'json',
success: function(res){
var pageData=res.message;
var arrLen = pageData.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
var pageSubData =pageData[i].sub;
var subLen = pageSubData.length;
result +=' <div class="comment-content">';
result +='<div class="comment-content-all">';
result +='<div class="comment-head-img">';
result +='<img class="head-img" src="'+pageData[i].head_image+'" onerror="this.src=\'/public/img/defaulthead.png\'" alt=""/>';
result +='</div>';
result +='<div class="comment-info-title-user">';
result +='<div class="comment-name">'+pageData[i].user_name+'</div>';
result +='<div class="comment-time shijian">'+pageData[i].create_time+'</div>';
result +='</div>';
if(token){
result +='<div class="link-a">'
if(pageData[i].user_id == userid){
result +='<a style="text-decoration:none;" class="comment-delete" href="javascript:void" data-id="'+pageData[i].id+'" >删除</a>';
}else {
result +='<a class="comment-reply" href="javascript:;" data-reply-user="'+pageData[i].user_id+'" data-id="'+pageData[i].id+'" name="'+pageData[i].user_name+'">回复</a>';
}
result +='</div>';
}
result +='</div>';
result +='<p class="comment-content-info">'+pageData[i].content+'</p>';
if(pageSubData){
if(subLen > 0){
result +='<div class="reply-select">';
for(var s=0; s < subLen; s++){
result +='<div class="reply-select-title1">';
if(pageSubData[s].user_id == userid){
result +='<label>'+pageSubData[s].user_name+'</label>';
}else {
result +='<label class="replyRen" data-reply-user="'+pageSubData[s].user_id+'" data-id="'+pageData[i].id+'">'+pageSubData[s].user_name+'</label>';
}
result +='<text class="reply-select-tetx">回复</text>';
if(pageSubData[s].reply_user_id == userid){
result +='<label>'+pageSubData[s].reply_name+':</label>';
}else{
result +='<label class="replyRen" data-reply-user="'+pageSubData[s].reply_user_id+'" data-id="'+pageData[i].id+'">'+pageSubData[s].reply_name+':</label>';
}
result +='<text>'+pageSubData[s].content+'</text>';
result+='</div>'
}
result+='</div>';
}
result+='</div>';
}
result+='</div>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.comment-select').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
});
</script>