zhengwentao
/
game-box


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!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(){
        var category_id = $("#category_id").val();
        parent.$("#layui-layer-iframe{$index}").attr("src",'{:url("group/add")}?cid='+category_id);
        parent.layer.close(index);
    });
    category(0,1);
})
/*模板引擎*/
var category = function(parent_id,level_id){
     $.getJSON('{:url("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("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>