waibao
/
NN2022090201


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							<!doctype html>
<html class="no-js">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商城分类</title>
		<meta name="renderer" content="webkit">
		<link rel="stylesheet" href="__CDN__/assets/shop/css/amazeui.css">
		<link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
		<link rel="stylesheet" href="__CDN__/assets/shop/css/cate.css" />
	</head>

	<body class="am-bg-white">
		<!-- Header -->
		<header data-am-widget="header" class="am-header am-header-default">
			<div class="am-header-left am-header-nav">
          		<a href="javascript:void(0);" onclick="javascript:history.back(-1);return false;"><i class="am-header-icon am-icon-chevron-left"></i></a>
      		</div>
			<h1 class="am-header-title">
				<a href="#title-link">分类</a>
			</h1>
		</header>
		<!-- Content -->
		<div class="wapper">
			<div class="am-g">
				<div class="am-u-sm-3 am-padding-0 left-panel" style="background: #eeeeee;">
					<ul class="am-list menu-list" >
					 {volist name="cate" id="v"}
						<li  {in name="$key" value="0"} class="active"{/in} data-id="{$v.id}"><a href="#">{$v.name}</a></li>
					 {/volist}		
					</ul>
				</div> 
				<div class="am-u-sm-9 right-panel">
					<div class="am-padding-xs cate_img1">
						
					</div>
					<div class="catelist">
					</div>
				</div>
			</div>
		</div>
		<!-- Footer-Menu -->
		<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default" id="">
			<ul class="am-navbar-nav am-cf am-avg-sm-3">
				<li>
					<a href="{:url('shop/index/index')}">
						<span class="am-icon-home"></span>
						<span class="am-navbar-label">首页</span>
					</a>
				</li>
				<li class="am-active">
					<a href="{:url('shop/cate/index')}">
						<span class="am-icon-th-large"></span>
						<span class="am-navbar-label">分类</span>
					</a>
				</li>
				<li>
					<a href="{:url('shop/cart/index')}">
						<span class="am-icon-shopping-cart"></span>
						<span class="am-navbar-label">购物车</span>
					</a>
				</li>
				<li>
					<a href="{:url('index/user/index')}">
						<span class="am-icon-user"></span>
						<span class="am-navbar-label">我的</span>
					</a>
				</li>
			</ul>
		</div>
		<script src="__CDN__/assets/shop/js/jquery.min.js"></script>
		<script src="__CDN__/assets/shop/js/amazeui.min.js"></script>
		<script src="__CDN__/assets/shop/js/app.js"></script>
		<script>
			$(function(){
				$('.wapper').css('margin-bottom', $('.am-navbar').height());
				var _ = screen.height - $('.am-header').height() - $('.am-navbar').height() - $('.am-top-bar').height();
				$('.left-panel').css('height', _);
				$('.right-panel').css('height', _);
				getcate({$cate[0]['id']});
			});
			//选择分类
			$('.menu-list li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
				var cid=$(this).attr('data-id');
				$('.catelist').html('');
				getcate(cid);	
			});
			function getcate(cid)
			{
				jQuery.post("{:url('api/shop/getcatelist')}" ,{id:cid},function(data) {
					console.log(data.data);
					$('.cate_img1').html('<img src="'+data.data.cate_image+'" width="100%" height="70"/>');
					var json=data.data.child1;
					if(json != null && json.length != 0){						
						for(var i = 0; i < json.length; i++){
							var _li='';
							var cate_child=json[i].child2;
							for(var j=0;j<cate_child.length;j++)
							{
								 _li += '<li>'+
										  '<div class="am-gallery-item am-bg-white am-radius am-text-center">'+
											'<a href="/shop/goods/goodslist/catid/'+cate_child[j].id+'" class="">'+
												'<img src="'+cate_child[j].image+'" />'+
												'<p class="am-my-gallery-title am-ellipsis">'+cate_child[j].name+'</p>'+
											'</a>'+
										  '</div>'+
										'</li>';
							}
							var _ ='<div class="am-padding-left-xs">'+
										'<h3  class="am-margin-bottom-xs">'+json[i].name+'</h3>'+
									'</div>'+
									'<ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-2 am-gallery-bordered am-gallery-index am-padding-0 "  >'+
										_li+
									'</ul>';
							$('.catelist').append(_);
						}
					}else{
						$('.catelist').html('<li class="am-padding-top-xs am-padding-bottom-xs am-text-center am-link-muted">暂无分类</li>')
					}
				});
			}
		</script>
	</body>