364 行
11 KiB
HTML
可执行文件
364 行
11 KiB
HTML
可执行文件
<!doctype html>
|
||
<html>
|
||
<!--[1.1.48]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/bootstrap.min.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/goodsClassify.css"/>
|
||
<link rel="stylesheet" href="__PUBLIC__/font/font/font.css">
|
||
<title>分类管理</title>
|
||
<style>
|
||
body, html {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.goods_title {
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
}
|
||
|
||
.goods_title_inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-left: 2px solid #232b42;
|
||
box-sizing: border-box;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.gA_inner_left {
|
||
width: 55px;
|
||
text-align: right;
|
||
}
|
||
.gA_inner{
|
||
padding: 10px 0;
|
||
}
|
||
.layui-form {
|
||
padding: 10px 20px;
|
||
|
||
}
|
||
|
||
.tree {
|
||
min-height: 20px;
|
||
padding: 19px;
|
||
margin-bottom: 20px;
|
||
background-color: white;
|
||
border: 1px solid #999;
|
||
-webkit-border-radius: 4px;
|
||
-moz-border-radius: 4px;
|
||
border-radius: 4px;
|
||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
|
||
}
|
||
|
||
.tree li {
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 10px 5px 0 35px;
|
||
position: relative
|
||
}
|
||
|
||
.tree li::before, .tree li::after {
|
||
content: '';
|
||
left: -20px;
|
||
position: absolute;
|
||
right: auto
|
||
}
|
||
|
||
.tree li::before {
|
||
border-left: 1px solid #999;
|
||
bottom: 50px;
|
||
height: 100%;
|
||
top: 0;
|
||
width: 1px
|
||
}
|
||
|
||
.tree li::after {
|
||
border-top: 1px solid #999;
|
||
height: 20px;
|
||
top: 25px;
|
||
width: 50px
|
||
}
|
||
|
||
.lispan {
|
||
-moz-border-radius: 5px;
|
||
-webkit-border-radius: 5px;
|
||
border: 1px solid #999;
|
||
border-radius: 5px;
|
||
/*display:inline-block;*/
|
||
padding: 3px 8px;
|
||
text-decoration: none;
|
||
width: 600px;
|
||
}
|
||
|
||
.lispan > * {
|
||
flex: 1;
|
||
}
|
||
|
||
.lispan {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tree li.parent_li > span {
|
||
cursor: pointer
|
||
}
|
||
|
||
.tree > ul > li::before, .tree > ul > li::after {
|
||
border: 0;
|
||
left: 25px;
|
||
}
|
||
|
||
.tree li:last-child::before {
|
||
height: 30px
|
||
}
|
||
|
||
.tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul > li > span {
|
||
background: #eee;
|
||
border: 1px solid #94a0b4;
|
||
color: #000
|
||
}
|
||
|
||
.cate-chose {
|
||
display: block;
|
||
width: 100%;
|
||
height: 40px;
|
||
border: 1px solid #CCCCCC;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
padding: 0 5px;
|
||
}
|
||
|
||
p.tipss {
|
||
text-align: center;
|
||
margin: auto;
|
||
font-size: 12px;
|
||
color: #009688;
|
||
margin-top: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pagination a {
|
||
border-color: #009688 !important;
|
||
color: #009688 !important;
|
||
}
|
||
|
||
.active > a {
|
||
background-color: #009688 !important;
|
||
border-color: #009688 !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.label_checkbox {
|
||
height: 18px;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
line-height: 17px;
|
||
}
|
||
|
||
.label_checkbox > input {
|
||
width: 16px;
|
||
height: 16px;
|
||
opacity: 0;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.label_checkbox > span {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 2px;
|
||
border: 2px solid #bbb;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
cursor: pointer;
|
||
transition: 0.5s;
|
||
}
|
||
|
||
.label_checkbox > span::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 6px;
|
||
height: 11px;
|
||
top: 2px;
|
||
left: 5px;
|
||
border-right: 3px solid;
|
||
border-bottom: 3px solid;
|
||
border-radius: 2px;
|
||
border-color: transparent;
|
||
transform: rotate(45deg);
|
||
transition: 0.5s;
|
||
}
|
||
|
||
.label_checkbox > input:checked + span:after {
|
||
border-color: #009688;
|
||
}
|
||
|
||
.label_checkbox > input:checked + span {
|
||
border-color: #009688;
|
||
}
|
||
|
||
.file_label {
|
||
position: relative;
|
||
cursor: pointer;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.file_label:before {
|
||
display: block;
|
||
content: '+';
|
||
font-size: 50px;
|
||
color: #bbb;
|
||
border: 1px solid #bbb;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 56px;
|
||
}
|
||
|
||
.file_label > input {
|
||
width: 100px;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.file_label > img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
display: none;
|
||
}
|
||
|
||
.is_recommend {
|
||
display: none;
|
||
}
|
||
.btn-1{
|
||
position: fixed;
|
||
bottom: 10px;
|
||
display: flex;
|
||
width: calc(90% - 30px);
|
||
justify-content: center;
|
||
}
|
||
.auto{
|
||
width: 74px;
|
||
height: 34px;
|
||
border: 1px solid #ccc;
|
||
text-align: center;
|
||
line-height: 34px;
|
||
position: absolute;
|
||
right: -80px;
|
||
top: 2px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.auto:hover{
|
||
background-color: rgb(241,241,241);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container" style="width: 90%;">
|
||
<form id="create_cate" style="margin-top: 10px;">
|
||
<input type="hidden" name="id" id="class_id" value="">
|
||
<div class="gA_inner">
|
||
<div class="gA_inner_left">类别：</div>
|
||
<div class="gA_inner_right">
|
||
<select name="pid" id="cate-chose" class="cate-chose">
|
||
<option value="0">顶级分类</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="gA_inner">
|
||
<div class="gA_inner_left">编码：</div>
|
||
<div class="gA_inner_right" style="position: relative;">
|
||
<input type="" name="code" id="code" value="" placeholder="编码仅支持输入纯数字"
|
||
onkeyup="value=value.replace(/[^\d]/g,'')" onkeydown="value=value.replace(/[^\d]/g,'')"/>
|
||
<div class="auto">获取序号</div>
|
||
</div>
|
||
</div>
|
||
<div class="gA_inner">
|
||
<div class="gA_inner_left">名称：</div>
|
||
<div class="gA_inner_right">
|
||
<input type="" name="class_name" id="class_name" placeholder="请输入分类名称" value=""/>
|
||
</div>
|
||
</div>
|
||
<div class="btn-1">
|
||
<div class="goods_edit_add" id="add-class" style="margin-left: 0">提交</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
</body>
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
|
||
<script type="text/javascript">
|
||
layui.use('layer', function () {
|
||
var layer = layui.layer;
|
||
$("#add-class").click(function () {
|
||
var class_name = $("#class_name").val();
|
||
var code = $("#code").val();
|
||
if (code == '') {
|
||
layer.msg("请填写编码", {time: 1000});
|
||
return false;
|
||
} else if (class_name == '') {
|
||
layer.msg("请填写类别名称", {time: 1000});
|
||
return false;
|
||
}else if(/\//g.test(class_name)){
|
||
top.layer.msg("分类名称不许含有 ‘/’", {time: 1500});
|
||
return false;
|
||
}
|
||
var fd = new FormData(document.getElementById('create_cate'));
|
||
$.ajax({
|
||
url: "{:U('Retail/MerCate/cateSet')}",
|
||
type: "POST",
|
||
data: fd,
|
||
dataType: 'JSON',
|
||
cache: false, // 不缓存
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (data) {
|
||
if (data.status == 1) {
|
||
layer.msg(data.msg, {
|
||
time: 1000 //2秒关闭（如果不配置，默认是3秒）
|
||
}, function () {
|
||
localStorage.classIsChange = 1;
|
||
parent.layer.closeAll();
|
||
});
|
||
} else {
|
||
layer.msg(data.msg)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
$('.auto').click(function () {
|
||
$.post("{:U('getAutoClassCode')}",{
|
||
pid:$('#cate-chose').val()
|
||
},function (res) {
|
||
if(res.status==1){
|
||
$("#code").val(res.code);
|
||
}else {
|
||
top.layer.msg(res.msg, {time: 1500});
|
||
}
|
||
})
|
||
})
|
||
})
|
||
</script>
|
||
</html> |