<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品栏目选择</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SmartShop Manage System</title>
{load href="__PUBLIC__/base/base.css,__PUBLIC__/admin/style.css,__PUBLIC__/js/do.js,__PUBLIC__/js/package.js" /}
<style type="text/css">
html,body{background: #FFF;font-size: 14px;}
.alone_box{position:absolute; top: 0; bottom: 0px; overflow: auto; left: 0px; right: 0px;}
.alone_box .top{position: absolute;left:2px;bottom: 50px;top:2px;right:4px;overflow: auto;}
.alone_box .bottom{position: fixed; bottom: 0px; background: #F8F8F8; left: 0; right: 0;height:80px;}
.sub{float: left;width:32%;overflow-x: hidden;overflow-y:scroll;border:1px #ddd solid;position: absolute;bottom:35px;top:2px;}
.sub_1{left:0%;}.sub_2{left:34%;}.sub_3{right:0%;}
.box{line-height: 35px;}
.box li{border-bottom: 1px solid #ddd;padding: 0px 5px;background: #FFF;cursor:pointer;}
.box .selected{background: #f2f2f2}
.selected_category{border: 1px dotted #3f51b5;background: #F0F6E4;padding: 5px 10px;margin:0px 2px;}
</style>
</head>
<body>
<div class="alone_box">
<div class="top">
<div class="sub sub_1"></div>
<div class="sub sub_2"></div>
<div class="sub sub_3"></div>
</div>
<div class="bottom">
<div class="selected_category">您当前选择的是：<span id="category_path_name"></span></div>
<div class="m5 fn-tac fn-hide selected_yes">
<input type="hidden" id="category_id" name="category_id">
<input type="hidden" id="category_path_id" name="category_path_id">
<button class="button selected_ok">选择商品分类完成</button>
</div>
</div>
</div>
<script id="category" type="text/html">
<ul class="box">
{{each list value}}<li data-cat-id="{{value.id}}" data-cat-level="{{level_id}}" onclick="ClickHasSubCategory(this)">{{value.title}}</li>{{/each}}
</ul>
</script>
<script id="category_path" type="text/html">
{{each list value}}{{value.title}} / {{/each}}
</script>
<script type="text/javascript">
Do('base','layer','form','tpl',function(){
var index = parent.layer.getFrameIndex(window.name);
$('.selected_ok').click(function(){
parent.$("#iframe").contents().find("#{$input}_id").val($("#category_id").val())
parent.$("#iframe").contents().find("#{$input}_path_id").val($("#category_path_id").val())
parent.$("#iframe").contents().find("#{$input}_path_name").html($("#category_path_name").html())
parent.layer.close(index);
});
category(0,1);
})
/*模板引擎*/
var category = function(parent_id,level_id){
$.getJSON('{:url("fastshop/item/category")}',{parent_id:parent_id},function(data){
if(data.code == 200){
$(".sub_"+level_id).html(template('category',{list:data.data,level_id:level_id}));
}
});
}
/*获取下降目录*/
function ClickHasSubCategory(event){
var category_id = $(event).attr('data-cat-id');
var level_id = $(event).attr('data-cat-level');
var new_level_id = parseInt(level_id)+ 1;
for (var i = new_level_id; i <= 4; i++){
$(".sub_"+i).empty();
}
$('#category_id').val(category_id);
$('.sub_'+level_id+' > .box > li').removeClass('selected');
$(event).addClass('selected');
category(category_id,new_level_id);
category_path(category_id);
}
/*返回当前路径*/
function category_path(parent_id){
$.getJSON('{:url("fastshop/item/category_path")}',{parent_id:parent_id},function(data){
if(data.code == 200){
$("#category_path_name").html(template('category_path',{list:data.data}));
$(".selected_yes").show();
$('#category_path_id').val(data.category_id);
}
});
}
</script>
</body>
</html>