TaoLer/view/taoler/index/article/news/detail.html

{extend name="public/base" /}
{block name="title"}{$article.title}-{$sysInfo.webname}{/block} 
{block name="keywords"}{$article.tags}{/block}
{block name="description"}{$article.title},{$article.description}{/block}
{block name="ogtitle"}<meta property="og:title" content="{$article.title}-{$sysInfo.webname}">{/block}
{block name="ogdescription"}<meta property="og:description" content="{$article.title},{$article.description}" />{/block}
{block name="link"}<link rel="stylesheet" href="{$Request.domain}/static/res/css/plyr.css" charset="utf-8">{/block}
{block name="column"}<div class="layui-hide-xs">{include file="/public/column" /}</div>{/block}
{block name="content"}
<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12 content detail">
      <div class="fly-panel detail-box">
		    {//标题}
        <h1 style="color:{$article.title_color};margin:10px 5px 15px 5px;" align="center">{$article.title}</h1>

		    {//作者}
        <div class="detail-about" align="center">
          <div class="detail-hits" style="left:-30px;">
            <span>{$article.user.name} /</span>
            <span class="post-time" style="padding-top: 5px;" data="{$article.create_time}">{$article.create_time}</span>
            <span>/ <i class="iconfont" title="浏览">&#xe60b;</i> {$pv}</span>
          </div>
        </div>
        <hr style="margin-bottom: 25px">
        {// 内容}
        <div class="detail-body photos" style="font-size: 18px;line-height: 200%;" id="content">{$article.content}</div>
        <div style="margin-top: 25px;">本文链接：<a href="{$Request.domain}{$Request.url}">{$Request.domain}{$Request.url}</div>
          <div style="margin-top: 15px">
            <h2>关键词</h2>
            <div class="layui-btn-container" style="padding-top: 15px;">
              {volist name="tags" id="vo" }
              <button type="button" class="layui-btn layui-btn-sm  layui-btn-radius layui-btn-danger" value="{$vo}">{$vo}</button>
              {/volist}
            </div>
          </div>
          <div style="margin: 20px 0px 15px 0px; color: rgb(130, 125, 125);">
            <p>{$sysInfo.state}</p>    
          </div>
      </div>

      
      {//管理}
        {if (($article.upzip !== '') || session('?user_name'))}
        <div class="fly-panel detail-box" >
        <div class="detail-assist">
        {notempty name="$article.upzip"}
        <button type="button" class="layui-btn layui-btn-xs" id="zip-download"><i class="layui-icon layui-icon-download-circle"></i>{:lang('download files')}: {$article.downloads}次</button>
        {/notempty}
          <div class="fly-admin-box" data-id="{$article.id}">
              {if ($user.auth ?? '')}
                <span class="layui-btn layui-btn-xs jie-admin" type="del"><i class="layui-icon layui-icon-delete"></i></span>
                {if($article.is_top == 0)}
                <span class="layui-btn layui-btn-xs jie-admin" type="set" field="top" rank="1"><i class="layui-icon layui-icon-top"></i></span> 
                {else /}
                <span class="layui-btn layui-btn-xs jie-admin" type="set" field="top" rank="0" style="background-color:#ccc;">{:lang('cancel topping')}</span>
                {/if}
                {if($article.is_hot == 0)}
                <span class="layui-btn layui-btn-xs jie-admin" type="set" field="hot" rank="1"><i class="layui-icon layui-icon-fire"></i></span> 
                {else /}
                <span class="layui-btn layui-btn-xs jie-admin" type="set" field="hot" rank="0" style="background-color:#ccc;">{:lang('cancel hoting')}</span>
                {/if}
                {if($article.is_reply == 1)}
                <span class="layui-btn layui-btn-xs jie-admin" type="set" field="reply" rank="0"><i class="layui-icon layui-icon-face-cry"></i></span>
                {else /}
                <span class="layui-btn layui-btn-xs jie-admin" type="set" field="reply" rank="1" style="background-color:#ccc;">{:lang('enable reply')}</span>
                {/if}
                <span id="color">{:lang('title color')}</span>
              {/if}
              {if(session('user_name')==$article.user.name  || ($user.auth  ?? ''))}
              <span class="layui-btn layui-btn-xs jie-admin" type="edit"><a href="{$Request.domain}{:url('article/edit',['id'=>$article.id])}">{:lang('edit')}</a></span>
              {/if}
          </div>
        </div>
      </div>
      {/if}
      

    </div>
  </div>
<!--底部栏-->
	<div class="site-tree-mobile-detail-bottom layui-hide-md">
		<div id="LAY_jieAdmin1" data-id="{$article['id']}"></div>
    </div> 
</div>
{include file="public/menu" /}
{/block}

{block name="script"}
<script>
var collectionFind = "{:url('Collection/find')}",
    collection = "{:url('collection/')}",
    articleJieset = "{:url('Article/jieset')}",
    articleDelete = "{:url('Article/delete')}",
    commentJiedaZan = "{:url('Comment/jiedaZan')}",
    commentJiedaCai = "{:url('Comment/jiedaCai')}",
    commentGetDa = "{:url('Comment/getDa')}",
    commentUpdateDa = "{:url('Comment/updateDa')}",
    commentJiedaDelete = "{:url('Comment/jiedaDelete')}",
	  langCollection = "{:lang('collection')}",
	  langCancelCollection = "{:lang('cancel collection')}";
	  
layui.use(['fly', 'face','colorpicker','plyr', 'laypage'], function(){
	var $ = layui.jquery
	,form = layui.form
	,fly = layui.fly
	,colorpicker = layui.colorpicker
	,plyr = layui.plyr;
	var laytpl = layui.laytpl;
	var uid = layui.cache.user.uid;
	var laypage = layui.laypage;
  
  //tpl模板给发布时间赋值
  $('div.detail-hits').children('span.post-time').each(function(){
    var othis = $(this), html = othis.html();
	  var string =  laytpl('{{ d.time }}').render({
		//time: html
		time: othis.attr('data')
	});
	var posttime = layui.util.timeAgo(string, 1);
  
	othis.text(posttime);
    //console.log(othis.attr('data'));
  });
  

	//预定义颜色项
	colorpicker.render({
		elem: '#color'
		,color: '#393d49'
		,predefine: true // 开启预定义颜色
		,size: 'xs'
		,done: function(color){
			  //改变标题颜色
			  $('h1').css("color", color);
			  var id = "{$article.id}";
			  $.ajax({
				type:'post',
				url:"{:url('Article/titleColor')}",
				data:{id: id,title_color: color},
				dataType:'json',
				success:function(data){
					if(data.code == 0){
						layer.msg(data.msg,{icon:6,time:2000
						});
					} else {
						layer.open({content:data.msg,icon:5,adim:6});
					}
				}
			  });
		}
	});
  
  //评论需要登陆
  form.on('submit(user-comment)',function (data){
	var index = layer.load(1);
	var filed = data.field;
    if (uid == -1) {
			layer.msg('请先登陆',{icon:5,time:2000},function(){
                location.href = "{:url('login/index')}";
            });
        } else {
          $.ajax({
            type: "post",
            url: "{:url('article/comment')}",
            data: filed,
            dataType: "json",
            success:function (data) {
              if (data.code == 0) {
                layer.msg(data.msg,{icon:6,time:2000},function () {
                    location.reload(true);
                });
              }else {
                layer.open({title:'评论失败',content:data.msg,icon:5,anim:6});
              }
            }
          });
        }
        return false;
    });
	
	//执行一个laypage实例
	laypage.render({
      elem: 'pages' //注意，这里的 test1 是 ID，不用加 # 号
      ,count: "{$article.comments_count}" //数据总数，从服务端得到
      ,limit: 10
      ,curr : {$page}
      
      //获取起始页
      ,jump: function(obj, first){
        //首次不执行
        if(!first){
          var page = obj.curr;
		      var url = "{:url('article/detail',['id'=>$article.id])}";
		      var id = "{$article.id}";
          $.post("{:url('article/detail')}",{"id":id,"page":page},function(){
            window.location.href = url + '?page=' + page + '#flyReply';
          });
        }
      }
	});
	
	//下载
    $('#zip-download').click(function (){
	  var id = "{$article.id}";
      $.ajax({
        type:"post",
        url:"{:url('article/download')}",
        data:{id:id},
        success:function (data) {
          location.href = "{:url('article/download',['id'=>$article.id])}"; 
        }
      });
    });
	
	//如果你是采用模版自带的编辑器，你需要开启以下语句来解析。
  $('.detail-body').each(function(){
    var othis = $(this), html = othis.html();
    othis.html(fly.content(html));
  });
  //加载播放器
  plyr.setup();

});
</script>


<script type="text/javascript">
  // 点击图片放大
 $(function(){ 
    $(".photos").on("click","img",function(){ 
      var _this = $(this); 
      imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); 
    }); 
  }); 
  function imgShow(outerdiv, innerdiv, bigimg, _this){ 
    var src = _this.attr("src");
    $(bigimg).attr("src", src); 
     
    $("<img/>").attr("src", src).on("load",function(){ 
      var windowW = $(window).width();
      var windowH = $(window).height();
      var realWidth = this.width; 
      var realHeight = this.height; 
      var imgWidth, imgHeight; 
      var scale = 0.8; 
      if(realHeight>windowH*scale) {
      	//判断图片高度 
        imgHeight = windowH*scale;
        imgWidth = imgHeight/realHeight*realWidth; 
        if(imgWidth>windowW*scale) {
        	//如宽度扔大于窗口宽度 
          imgWidth = windowW*scale;
        } 
      } else if(realWidth>windowW*scale) {
      	
        imgWidth = windowW*scale;
        imgHeight = imgWidth/realWidth*realHeight;
      } else {
      	//如果图片真实高度和宽度都符合要求，高宽不变 
        imgWidth = realWidth; 
        imgHeight = realHeight; 
      } 
          $(bigimg).css("width",imgWidth);
      var w = (windowW-imgWidth)/2;
      var h = (windowH-imgHeight)/2;
      $(innerdiv).css({"top":h, "left":w}); 
      $(outerdiv).fadeIn("fast"); 
    }); 
    $(outerdiv).click(function(){
    	//再次点击淡出消失弹出层 
      $(this).fadeOut("fast"); 
    }); 
  }
</script>

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
  <div id="innerdiv" style="position:absolute;">
    <img id="bigimg" style="border:5px solid #fff;" src="" />
</div>

{:hook('markdownhook')}

{volist name="push_js" id="vo"}
{$vo.jscode|raw}
{/volist}

{/block}