book_admin/application/index/view/category/books.html

{extend name="layout/layout" /}
{block name="title"} <?php echo $category['name']; ?> {/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/recently.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/ad/image.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
	.read_popup_box, .custom_popup_box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0,0,0,.5);
		font-size: 0;
		text-align: center;
		white-space: nowrap;
	}
	.rpb_main,
	.rpb_jgb{
		display: inline-block;
		vertical-align: middle;
	}
	.rpb_jgb{
		overflow: hidden;
		height: 100%;
		margin-left: -1px;
		width: 1px;
	}
	.rpb_main{
		overflow: hidden;
		width: 100%;
	}
	.rpbm_box{
		padding: .3rem .16rem .1rem;
		position: relative;
		left: 0;
		top: 0;
		overflow: hidden;
		background-color: #fff;
		margin: .14rem .48rem;
		border-radius: .16rem;
		white-space: normal;
		-webkit-box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
		box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
	}
	.rpbm_box a{
		display: block;
	}
	.rpb_img{
		overflow: hidden;
		margin: 0 auto .16rem;
		height: 1.39rem;
		width: 1.04rem;
		border-radius: .04rem;
		-webkit-box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
		box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
	}
	.rpb_img a,
	.rpb_img img{
		overflow: hidden;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: .04rem;
	}
	.rpb_tit{
		overflow: hidden;
		margin: 0 0 .16rem;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
	}
	.rpb_tit a{
		overflow: hidden;
		display: block;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.rpb_p{
		margin-bottom: .1rem;
		overflow: hidden;
		max-height: .72rem;
	}
	.rpb_p a{
		overflow: hidden;
		display: block;
		font-size: .14rem;
		color: rgba(0,0,0,.5);
		text-align: left;
		line-height: .24rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	.rpb_but{
		text-align: center;
		height: .3rem;
	}
	.rpb_but a{
		display: block;
		height: .3rem;
		text-align: center;
		font-size: .16rem;
		color: #007aff;
		line-height: .3rem;
	}

	.rpbm_close_but{
		display: block;
		position: absolute;
		right: .1rem;
		top: .1rem;
		height: .2rem;
		width: .2rem;
		background: url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
		background-size: .14rem .14rem;
		border-radius: .2rem;
	}

</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
<script type="text/javascript" src="{:asset('/libs/zepto/zepto.picLazyLoad.min.js')}"></script>
{/block}
{block name="menu_title"} <?php echo $category['name']; ?> {/block}
{block name="main"}
<!-- 这是正文 -->

<div class="body_sytle">

	<div class="c_list_box">

		<div class="c_list_tab_box_2">
			<a href="javascript:;" class="hover" type="all">全部</a>
			<a href="javascript:;" type="serial">连载</a>
			<a href="javascript:;" type="finish">完本</a>
			<a href="javascript:;" type="free">免费</a>
		</div>

		<ul class="r_img_ul"></ul>
	</div>
	<div class="loading_box"><span>正在加载中，请稍后......</span></div>

	<div class="content_null_box" style="display: none;">
		<img src="{:asset('/img/frontend/icon/icon_16.png')}" style="width: 1.28rem;" />
		<span>暂无该类别图书，换个条件试试看吧！</span>
		<div class="content_null_but_box">
			<a href="/index/index">去首页看看</a>
		</div>
		<div class="ad_position_16"></div>
	</div>

</div>

<!--继续阅读弹框-->
{notempty name="$continueData"}
<div class="read_popup_box">
	<div class="rpb_main">
		<div class="rpbm_box">
			<a href="javascript:;" class="rpbm_close_but"></a>
			<div class="rpb_img"><a href="{$continueData.url}"><img src="{$continueData.image}" /></a> </div>
			<div class="rpb_tit"><a href="{$continueData.url}">{$continueData.book_name}</a></div>
			<div class="rpb_p"><a href="{$continueData.url}">{$continueData.description}</a> </div>
			<div class="rpb_but"><a href="{$continueData.url}">继续阅读 ></a> </div>
		</div>
	</div>
	<div class="rpb_jgb"></div>
</div>
{/notempty}

<!--客服消息弹框-->
{notempty name="$customData"}
<div class="custom_popup_box" data-resouce_id="{$customData.custom_id}">
	<div class="rpb_main">
		<div class="rpbm_box">
			<a href="javascript:;" class="rpbm_close_but"></a>
			<div class="rpb_img"><a href="{$customData.url}"><img src="{$customData.image}" /></a> </div>
			<div class="rpb_tit"><a href="{$customData.url}">{$customData.book_name}</a></div>
			<div class="rpb_p"><a href="{$customData.url}">{$customData.description}</a> </div>
			<div class="rpb_but"><a href="{$customData.url}">继续阅读 ></a> </div>
		</div>
	</div>
	<div class="rpb_jgb"></div>
</div>
{/notempty}

{/block}
{block name="footer"}
{/block}

{block name="js"}
<script type="text/javascript">
	var pagenum=1,
		sBookstop=true,
		sBookstopTime=null,
		pagesize=10,
		type = $(".c_list_tab_box_2 a").eq(0).attr('type'),
		book_category_id = {$category.id};

	$(function(){
		loadingList();
		$(".c_list_tab_box_2 > a").click(function(){
			$(this).addClass("hover");
			$(this).siblings().removeClass("hover");
			$('.r_img_ul').html('').show();
			$('.content_null_box').hide();
			$('.loading_box').html('<span>正在加載中，请稍候......</span>').show();
			type = $(this).attr("type");
			sBookstop = true;
			pagenum = 1;
			loadingList();
		});

		$(window).scroll(function(){
			var nWinH =  document.documentElement.clientHeight;
			var nScrollTop = (document.body.scrollTop || document.documentElement.scrollTop) + nWinH;
			var nBodyScrollH = document.body.scrollHeight;
			if(sBookstop && nBodyScrollH - nScrollTop < 240){
				bookstoptime();
				$('.loading_box').html('<span>正在加載中，请稍候......</span>').show();
				loadingList();
			}
		});
	});

	function loadingList(){
		$.ajax({
			type: 'get',
			url: '/api/category/booklistapi',
			timeout: 10000,
			cache: false,
			dataType: 'json',
			data: {
				'book_category_id':book_category_id,
				'type':type,
				'page':pagenum
			},
			success: function (data) {
				clearTimeout(sBookstopTime);
				if (typeof data == 'string') {
					data = JSON.parse(data);
				}
				if(data<=0 && pagenum == 1){
					$('.r_img_ul,.loading_box').hide();
					$('.content_null_box').show();
					sBookstop = false;
					window.$isAdPick == '1' && window.simpleAD.render(window.AD_PAGE_CODE.CATEGORY_SUB)
					return false;
				}
				var sLi = '';
				var type_name = $(".c_list_tab_box_2 a.hover").text();
				for(var i=0; i<data.length; i++){
					sLi += '<li class="section-block">\
						<a href="/index/book/info?book_id='+ data[i]['id'] +'" class="section-data" data-book_id="'+ data[i]['id'] +'" data-zone="'+type_name+'">\
							<div class="r_img">\
								<img src="{:asset('/img/frontend/images/default_img.png')}" data-original="'+ data[i]['image'] +'" />\
							</div>\
							<div class="r_img_text">\
								<h3>'+ data[i]['name'] +'</h3>';
					if (data[i]['free_period'].length>0) {
						sLi+='<h3 style="font-size: .12rem; color: #f63566; font-weight: normal;">限时免费:'+data[i]['free_period']+'</h3>';
					}
					sLi += '<p>'+ data[i]['description'] +'</p>\
								<div class="r_img_other">\
									<i>'+ data[i]['author'] +'</i>\
									<strong>'+ data[i]['read_num'] +'人在追</strong>\
								</div>\
							</div>\
						</a>\
					</li>';
				}
				$('.r_img_ul').append(sLi);
				pagenum ++;
				if(data.length < pagesize){
					$('.loading_box').html('<span>已显示全部</span>').show();
					sBookstop = false;
				}else{
					$('.loading_box').html('<span>下拉加载更多</span>').show();
					sBookstop = true;
				}
				$('img').picLazyLoad({
					effect : "fadeIn"
				});
				window.$isAdPick == '1' && window.simpleAD.render(window.AD_PAGE_CODE.CATEGORY_SUB)
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				if (typeof XMLHttpRequest == 'object') {
					XMLHttpRequest = fRead.jsonstringify(XMLHttpRequest);
				}
			}
		});
	}

	//防止重复请求数据
	function bookstoptime() {
		clearTimeout(sBookstopTime);
		sBookstop = false;
		sBookstopTime = setTimeout(function () {
			sBookstop = true;
		}, 3000);
	}
</script>
<!-- 多条广告如下脚本只需引入一次 -->
{if condition="$isAdPick"}
{include file="public/ad_common_js"}
{/if}
<script>
	window.$isAdPick = '{$isAdPick}'
	window.$adLatestVersion = '{$ad_latest_version}'
</script>
{/block}