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

{extend name="public/base" /}
<!--seo-->
{block name="title"}{$article.title} - {$sysInfo.webname}{/block} 
{block name="keywords"}{article:keywords /}{/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="meta"}
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="{$article.create_time|date='c'}"/>
<meta property="bytedance:published_time" content="{$article.create_time|date='c'}" />
<meta property="bytedance:lrDate_time" content="{$lrDate_time|date='c'}" />
<meta property="bytedance:updated_time" content="{$article.update_time|date='c'}" />
{/block}
{block name="link"} {/block}
{block name="column"}<div class="layui-hide-xs">{include file="/public/column" /}</div>{/block}
<!--body-->
{block name="content"}
<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8 content detail">
      <div class="fly-panel detail-box">
        {//标题}
        <h1 style="color:{article:title_color /};">{article:title /}</h1>
        {//图标}
        <div class="fly-detail-info">
		      <span class="layui-badge layui-bg-green fly-detail-column">
                {if (cookie('think_lang') == 'en-us')} {article:cate name="ename" /}
                {else /} {article:cate name="name" /}
                {/if}
              </span>
              {if ($article.is_top == 1)}<span class="layui-badge layui-bg-black">{:lang('top')}</span>{/if}
		      {if ($article.is_hot == 1)}<span class="layui-badge layui-bg-red">{:lang('hot')}</span>{/if}
		      <span id="LAY_jieAdmin" data-id="{article:id /}" data-colurl="{:url('collection/find')}"></span>
		      <span class="fly-list-nums"> 
			    <a href="#comment">
                  <i class="iconfont" title="{:lang('reply')}">&#xe60c;</i>{article:comment_num /}
                </a>
                  <i class="iconfont" title="浏览">&#xe60b;</i>{article:pv /}
		      </span>
        </div>
        {//作者}
        <div class="detail-about">
          <a class="fly-avatar" href="{article:user name='link' /}">
            <img src="{article:user name='user_img' /}" alt="{article:user name='name' /}">
            {if($article.user.vip > 0)}<i class="iconfont icon-renzheng" title="认证信息"></i>{/if}
          </a>
          <div class="fly-detail-user">
            <a href="{article:user name='link' /}" class="fly-link">
            <cite>{article:auther}</cite>
            </a>
            <span class="layui-btn layui-btn-xs guanzhu" >关注</span>
          </div>
          <div class="detail-hits">
            <!--span style="padding-right: 10px; color: #FF7200">悬赏：60飞吻</span-->
            <span class="post-time" data="{$article.create_time}" style="padding-top: 5px;"></span>
            {:hook('ipShow',$article.user.city)}
          </div>
        </div>
        <hr>
        {//内容}
        {:hook('taoplayerdiv')}
        <div class="detail-body photos" id="content">{article:content}</div>
          {//下载}
          {if (($article.upzip !== '') || session('?user_name'))}
            <div class="">
              {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>
          {/if}

          {//解密文件}
          {empty name="passJieMi"}
          {if($article.read_type == 1)}
          <div id="jiemi" style="text-align:center">
            <button type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-password" style="font-size: 30px; color: #FF5722;"></i> 阅读请解密 </button>
          </div>
          {/if}
          {/empty}

        {notempty name="tags"}
        <div style="margin-top: 15px">标签
          {volist name="tags" id="vo" }
          <a href="{$vo.url}"><span class="layui-btn layui-btn-xs layui-btn-normal  layui-btn-radius">{$vo.name}</span></a>
          {/volist}
        </div>
        {/notempty}
          <div style="margin: 20px 0px 15px 0px; color: rgb(130, 125, 125);">
            <p style="line-height:200%; ">{$sysInfo.state|raw}</p>
          </div>
        <div style="margin-top: 20px;">本文链接：<a href="{$Request.domain}{$Request.url}">{$Request.domain}{$Request.url}</a></div>
          <div class="detail-zan">
            <span class="jieda-zan" type="zan" id="article-zan">
              点赞 <i class="iconfont icon-zan"></i> <em>{:count($userZanList)}</em>
            </span>
            {volist name="userZanList" id="vo" }
              <span><img src="{$vo.userImg}"></span>
            {/volist}
          </div>
      </div>

      {//评论}
      <div class="fly-panel">
        {if session('?user_id') AND ( config('taoler.config.is_reply') == 1 ) AND ( $article.is_reply == 1 )}
        <div class="layui-form layui-form-pane">
          <div class="layui-form-item layui-form-text">
            <a name="comment"></a>
            <div class="layui-input-block">
              <textarea id="L_content" name="content" required lay-verify="required" placeholder="{:lang('please input the content')}"  class="layui-textarea fly-editor"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <input type="hidden" name="article_id" value="{$article.id}">
            <button class="layui-btn" lay-filter="user-comment" lay-submit>{:lang('submit comments')}</button>
          </div>
        </div>
        {/if}
      </div>

      {//评论内容}
      <div class="fly-panel detail-box" id="flyReply">
        <span style="font-size:18px;">评论 {$article.comments_count}</span>

        <ul class="jieda" id="jieda">
          {article:comment}
              <li data-id="{comment:id /}" class="jieda-daan">
                <div class="detail-about detail-about-reply">
                      <a class="fly-avatar" href="{comment:ulink /}">
                        <img src="{comment:uimg /}" alt="{comment:uname}">
                      </a>
                      <div class="fly-detail-user">
                        <a href="{comment:ulink /}" class="fly-link">
                          <cite>{comment:uname /}</cite>
                        </a>
                        {if condition="$article.user_id eq $comment.user_id"}<span>({:lang('poster')})</span>{/if}
                        <span>{comment:usign /}</span>
                      </div>
                      <div class="detail-hits">
                        <span class="post-time" data="{comment:time}"></span>{:hook('ipShow',$comment.user.city)}</span>
                      </div>

                      {//加密未解密评论不可查看}
                      {if($article.read_type == 0 || (($article.read_type == 1) && $passJieMi))}

                      <div class="detail-body jieda-body photos">{comment:content /}</div>
                      <div class="jieda-reply">
                        <span class="jieda-zan {if($comment.zan != 0)}zanok{/if}" type="zan">
                          <i class="iconfont icon-zan"></i><em>{comment:zan /}</em>
                        </span>
                        <span type="reply" data-pid="{comment:id /}" data-tid="{comment:uid /}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
                        {//评论编辑删除采纳权限}
                        <div class="jieda-admin">
                          {if ((session('user_id') == $comment.user_id) && (getLimtTime($comment.create_time) < 2)) OR ($user.auth  ?? '')}
                          <span type="edit" class="comment-edit" data-id="{comment:id /}">{:lang('edit')}</span>
                          <span type="del">{:lang('delete')}</span>
                          {/if}
                        </div>

                        {// 第二层回复}
                        {notempty name="$comment.children"}
                        {volist name="$comment.children" id="vo"}

                        <div class="layui-clear" style="margin:10px 0; padding: 10px; border: 1px solid #f0f0f0; background: #f6f6f6">
                          <a style="display: inline-block; float: left; width: 50px;"><img src="{$vo.user.user_img}" style="width: 30px; height: 30px; border-radius: 15px; object-fit: cover"></a>
                          <div style="float: left;width: calc(100% - 50px);">
                            <div>{$vo.user.name} {$vo.create_time|date='Y-m-d H:i'}</div>
                            <div class="detail-body jieda-body photos">{$vo.content|raw}</div>
                            <div class="jieda-reply">
                                  <span class="jieda-zan {if($vo.zan != 0)}zanok{/if}" type="zan">
                                    <i class="iconfont icon-zan"></i><em>{$vo.zan}</em>
                                  </span>
                              <span type="reply" data-pid="{$vo.id}" data-tid="{$vo.user.id}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
                              {//评论编辑删除采纳权限}
                              <div class="jieda-admin">
                                {if ((session('user_id') == $vo.user.id) && (getLimtTime($vo.create_time) < 2)) OR ($user.auth  ?? '')}
                                <span type="edit" class="comment-edit" data-id="{$vo.id}">{:lang('edit')}</span>
                                <span type="del">{:lang('delete')}</span>
                                {/if}
                              </div>

                            </div>
                          </div>
                        </div>

                        {// 第三层回复}
                        {notempty name="$vo.children"}
                        {volist name="$vo.children" id="voo"}
                        <div class="layui-clear" style="margin:10px 0; padding: 10px; border: 1px solid #f0f0f0;">
                          <a style="display: inline-block; float: left; width: 50px;"><img src="{$voo.user.user_img}" style="width: 30px; height: 30px; object-fit: cover; border-radius: 15px;"></a>
                          <div style="float: left;width: calc(100% - 50px);">
                            <div>{$voo.user.name} 回复 {$voo.touser} {$voo.create_time|date='Y-m-d H:i'}</div>
                            <div class="detail-body jieda-body photos">{$voo.content|raw}</div>
                            <div class="jieda-reply">
                                        <span class="jieda-zan {if($voo.zan != 0)}zanok{/if}" type="zan">
                                          <i class="iconfont icon-zan"></i><em>{$voo.zan}</em>
                                        </span>
                              <span type="reply" data-pid="{$vo.id}" data-tid="{$voo.user.id}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
                              {//评论编辑删除采纳权限}
                              <div class="jieda-admin">
                                {if ((session('user_id') == $voo.user.id) && (getLimtTime($voo.create_time) < 2)) OR ($user.auth  ?? '')}
                                <span type="edit" class="comment-edit" data-id="{$voo.id}">{:lang('edit')}</span>
                                <span type="del">{:lang('delete')}</span>
                                {/if}
                              </div>
                            </div>
                          </div>
                        </div>
                        {/volist}
                        {/notempty}

                        {/volist}
                        {/notempty}
                      </div>
                      {else /}
                      <div class="detail-body jieda-body photos">
                        <i class="layui-icon layui-icon-password" style="font-size: 24px; color: #FF5722;"></i>
                        评论解密后查看
                      </div>
                      {/if}
                </div>
              </li>
          {/article:comment}
        </ul>
        <div style="text-align: center" id="pages"></div>
      </div>
    </div>

    {//右栏}
    <div class="layui-col-md4">
      <div class="fly-panel">
        <div class="fly-panel-main wenda-user">
          <div class="user-img">
            <a href="{$Request.domain}{:url('user/home',['id'=>$article.user.id])}">
              <img class="" src="{$Request.domain}{$article.user.user_img}" alt="{$article.user.name}" />
              {if($article.user.vip > 0)}<i class="iconfont icon-renzheng" title="认证信息"></i>{/if}
            </a>
          </div>
          <div class="questions">
            <span class="layui-badge layui-bg-green">回答 {$article.user.comments_count}</span> <span class="layui-badge layui-bg-green">发表 {$article.user.article_count}</span>
            <span class="layui-badge layui-bg-green">+ 关注</span>
          </div>
        </div>
      </div>
      <!--详情广告赞助位-->
      {:hook('ads_detail_support')}
      <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">{:lang('hot post list')}</dt>
          {volist name="artHot" id="vo"}
          <dd>
            <a href="{$Request.domain}{$vo.url}">{$vo.title}</a>
            <span><i class="iconfont icon-pinglun1"></i> {$vo.comments_count}</span>
          </dd>
          {/volist}
      </dl>
      <!--详情广告图片位-->
      {:hook('ads_detail_rimg')}
    </div>
    {//crud管理模块}
    {include file="/public/crud" /}
  </div>
  <!--底部栏-->
</div>
{include file="public/menu" /}
{/block}
{block name="script"}



{:hook('taoplayer')}

<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')}";
  let taonystatus = "{:hook('taonystatus') ? 1 : 0} ";
	  
layui.use(['fly', 'face','colorpicker', 'laypage'], function(){
	var $ = layui.jquery
	,form = layui.form
	,fly = layui.fly
	,colorpicker = layui.colorpicker
	,laytpl = layui.laytpl
	,uid = layui.cache.user.uid
	,laypage = layui.laypage;
  var id = "{$article.id}";
  let LOGIN_URL = "{:url('login/index')}";

  //如果你是采用模版自带的编辑器，你需要开启以下语句来解析。
  // 编辑器插件启用状态
  if(taonystatus == 0) {
    $('.detail-body').each(function(){
      var othis = $(this), html = othis.html();
      othis.html(fly.content(html));
    });
  } else {
    $(".comment-edit").on('click',function (){
      var id = $(this).data('id');
      layer.open({
        type: 2,
        title: '修改',
        shade: 0.1,
        area: ['600px', '500px'],
        content: "{:url('comment/edit')}" + '?id=' + id
      });
    });
  }

  //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'));
  });

  //文章点赞
  $("#article-zan").on('click',function(){
    //判断登陆
    if(uid == -1){
          layer.msg('请登录再点赞', {icon: 6}, function(){location.href = login})
          return false;
        }
    $.post("{:url('article/userZanArticle')}",{article_id:id,type:1},function(data){
      if(data.code == 0){
          layer.msg(data.msg,{icon:6,time:2000},function () {
                location.reload(true);
            });
        } else {
          layer.msg(data.msg,{icon:6,adim:6});
        }
    })
  });
  
	//预定义颜色项
	colorpicker.render({
		elem: '#color'
		,color: '#393d49'
		,predefine: true // 开启预定义颜色
		,size: 'xs'
		,done: function(color){
      //改变标题颜色
      $('h1').css("color", color);
      $.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});
          }
        }
      });
		}
	});

    // 评论接口
    function comment(data){
        if (uid == -1) {
            layer.msg('请先登陆',{icon:5,time:2000},function(){location.href = "{:url('login/index')}"});
            return false;
        }
        var index = layer.load(1);
        $.ajax({
            type: "post",
            url: "{:url('article/comment')}",
            data: data,
            dataType: "json",
            success:function (res) {
              layer.close(index);
              if (res.code === 0) {
                layer.msg(res.msg,{icon:6,time:2000},function () {location.reload(true)});
              }else {
                layer.open({title:'评论失败',content:res.msg,icon:5,anim:6});
              }
            }
        });
    }
  
  // 评论
  form.on('submit(user-comment)',function (data){
      comment(data.field);
  });

  // 回复用户
  $("span[type='reply']").on('click',function (){
    var pid = $(this).attr('data-pid');
    var tid = $(this).data('tid');
    var html =
            '<form class="layui-form user-comment" style="margin-left:50px;">' +
            '<div>' +
            '<input type="hidden" name="article_id" value="{$article.id}">' +
            '<input name="pid" value="'+ pid +'" class="layui-hide">' +
            '<input name="to_user_id" value="'+ tid +'" class="layui-hide">' +
            '<textarea name="content" required lay-verify="required"  class="layui-textarea fly-editor" style="height: 100px; right: 5px; margin: 10px 5px;"></textarea>' +
            '<button  type="submit" class="layui-btn" lay-submit lay-filter="submit-user-comment">提交</button>' +
            '</div>' +
            '</form>';
    var forms = $(this).nextAll('form');
    if(forms.length == 0) {
      // 移除其它评论块
      $('.user-comment').remove();
      //动态添加评论块
      $(this).next().after(html);
    }
  })
  //提交回复
  form.on('submit(submit-user-comment)', function(data){
    comment(data.field);
    return false;
  })

  // 评论分页
  laypage.render({
    elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
    count: "{$comments['total']}", //数据总数，从服务端得到
    limit: 10,
    curr: "{$page}",
    //获取起始页
    jump: function (obj, first) {
      var page = obj.curr;
      var limit = obj.limit;
      var  url = "{:url('article_detail',['id' => $article.id ,'ename' =>$article['cate']['ename']])}";
      var id = "{$article.id}";
      //首次不执行
      if (!first) {
        $.post("{:url('article/detail')}", { id: id, page: page }, function () {
          location.href = url + '?page=' + page + '#comment';
        });
      }
    },
  });
	
	//下载
    $('#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])}"; 
        }
      });
    });

  $("#jiemi").click(function (){
    //判断登陆
    if(uid == -1){
      layer.msg('请先登录再查看', {icon: 6}, function(){location.href = LOGIN_URL})
      return false;
    }
    var id = "{$article.id}";
    layer.prompt(function(value, index, elem){
      // alert(value); //得到value
      $.post("{:url('article/jiemi')}",{id:id, art_pass:value},function (res){
        if(res.code === 0){
          layer.msg(res.msg,{icon:6,time:2000},function () {
            parent.location.reload(); //刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
          });
        } else {
          layer.msg(res.msg,{icon:5,adim:6});
        }
      });
      layer.close(index);
    });
  });

});
</script>

{:hook('taoplyr')}
{:hook('taonyeditor')}
{//图片点击放大}
{include file="/public/images-click" /}

{include file="/public/qr-read" /}

{/block}