{extend name="wap/default/base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/components.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/group_goods_list.css">
<style>
.custom-search-button{top:6px;}
.category{width:95%;margin:10px auto;display: none;}
.category img{display: inline-block;height:70px;max-height: 100%;}
.nothing-data{margin-top:50%;}
.custom-tag-list-goods dl{width:100%;}
.custom-tag-list-goods dt a {padding:0 10px;}
.custom-tag-list{height:92%;}
/* .category img{
	display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: auto;
} */
/* .custom-tag-list,.custom-tag-list .custom-tag-list-menu-block,.custom-tag-list .custom-tag-list-goods{height:initial;}
 body{ 
	height:initial;
} */ 
</style>
{/block}
{block name="goodsHead"}
<section class="head">
	<a class="head_back" id="head_back" href="javascript:window.history.go(-1)"><i class="icon-back"></i></a>
	<div class="head-title">商品分类</div>
</section>
{/block}

{block name="main"}
	<!-- 平台商品分类 -->
	<!-- 搜索框样式 -->
<div class="custom-tag-list clearfix">
<!-- 	<div class="mask" id="grouGoodsListmask"></div> -->
	<div class="custom-tag-list-menu-block">
		<ul class="custom-tag-list-side-menu" style="position: relative;width:100%;background:#fff;" id='goods_group'>
			{foreach name="goods_category_list_1" item = "category" key = "k"}
			<li val="{$category.category_id}">
				<a {if condition="$k==0" } class="selected" {/if} onclick="showCategorySecond(this,{$category.category_id})"><span>{$category.short_name}</span></a>
			</li>
			{/foreach}
		</ul>
	</div>
	<div class="custom-tag-list-goods" id='good_list'>
		
		<!-- 一级分类频道 -->
		{foreach name="goods_category_list_1" item = "category" key = "k"}
		<div class="category js-category-{$category.category_id}" {if condition = "$k==0" }style="display:block;"{/if}>
		
			<div style="width:100%;background: #ffffff;text-align: center;">
			{if condition="$category.category_pic!=''"}
			<img src="__UPLOAD__/{$category.category_pic}" alt="{$category.short_name}">
			{else/}
			<img src="__TEMP__/{$style}/public/images/catagory.png" alt="{$category.short_name}">
			{/if}
			</div>
			<a href="APP_MAIN/goods/goodslist.html?category_id={$category.category_id}" class="all" style="color: #FFF">进入{$category.short_name}频道&nbsp;&gt;&nbsp;&gt;</a>
		</div>
		{/foreach}
		
		{foreach name="goods_category_list_2" item="category_second" key = "k"}
			<dl class="js-category-{$category_second.pid}" {if condition ="$category_second.pid!=$goods_category_list_1[0]['category_id']"}style="display: none;"{/if}>
			<dt><a href="APP_MAIN/goods/goodslist.html?category_id={$category_second.category_id}"> {$category_second.category_name} </a></dt>
			<dd>
				<div class="catalog-box">
				{foreach name="goods_category_list_3" item = "category_third"}
					{if condition = "$category_second.category_id==$category_third.pid"}
					<div class="catalog-info">
						
						<a href="APP_MAIN/goods/goodslist.html?category_id={$category_third.category_id}">
							{if condition="$category_third.category_pic!=''"}
							<div style=" height:40px; width: 100%;overflow: hidden;">
							<img src="__UPLOAD__/{$category_third.category_pic}" alt="{$category_third.category_name}">
							</div>
							{else/}
							<div style=" height:40px; width: 100%;overflow: hidden;">
							<img src="__TEMP__/{$style}/public/images/catagory-02.png" alt="{$category_third.category_name}">
							</div>
							{/if}
							<em style="margin:0;">{$category_third.category_name}</em>
						</a>
					</div>
					{/if}
				{/foreach}
				</div>
			</dd>
		</dl>
		{/foreach}
		
		<div class="nothing-data" align="center" style="display:none;">
			<img src="__TEMP__/{$style}/public/images/wap_nodata.png"/>
			<div>当前分类下没有子分类...</div>
		</div>
	</div>
</div>
<script>
	//显示二级分类
	function showCategorySecond(obj,category_id){
		//设置选中效果
		$(".custom-tag-list-side-menu li a").removeClass("selected");
		$(obj).addClass("selected");
		$("[class*='js-category']").hide();
		$("[class$='js-category-"+category_id+"']").show();
		$("dl[class='js-category-"+category_id+"']").each(function(){
			//没有三级分类，把二级分类隐藏
			if($(this).find(".catalog-info").length==0){
				$(this).hide();
			}
			
		})
		
		if($("dl[class='js-category-"+category_id+"']").length == 0){
			$("div[class='nothing-data']").show();
		}else{
			$("div[class='nothing-data']").hide();
		}
	}
</script>
<script type="text/javascript">
$("#head_back").click(function (){
    var json ={
            "center" : "2"
        }
    window.webkit.messageHandlers.center.postMessage(json);
})
</script>
{/block}
{block name="bottom"} {/block}