566 行
19 KiB
HTML
可执行文件
566 行
19 KiB
HTML
可执行文件
<!doctype html>
|
||
<html>
|
||
<!--[1.0.77]-->
|
||
<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"/>
|
||
<title>添加魔方</title>
|
||
<style>
|
||
html, body {
|
||
background-color: rgb(246, 248, 249);
|
||
font-size: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.file_label {
|
||
position: relative;
|
||
cursor: pointer;
|
||
font-weight: normal;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.file_label:before {
|
||
display: block;
|
||
content: '+';
|
||
font-size: 50px;
|
||
font-weight: 100;
|
||
color: #bbb;
|
||
border: 2px solid #bbb;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
}
|
||
|
||
.box_file_label:before {
|
||
width: 50px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.box {
|
||
border: 1px solid #eee;
|
||
border-radius: 5px;
|
||
background-color: white;
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.title {
|
||
background-color: #f5f5f5;
|
||
color: black;
|
||
font-size: 18px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
line-height: 60px;
|
||
border-radius: 5px 5px 0 0;
|
||
text-indent: 15px;
|
||
}
|
||
|
||
.left_name {
|
||
width: 100px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
line-height: 56px;
|
||
color: #666;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.list > input {
|
||
margin: 10px 0;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.list > select {
|
||
width: 322px;
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.save {
|
||
font-size: 16px;
|
||
width: 50px;
|
||
background-color: #009688;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 8px 10px;
|
||
border-radius: 5px;
|
||
margin: 50px 200px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.save:hover {
|
||
background-color: #099688;
|
||
}
|
||
|
||
.label_radio {
|
||
height: 18px;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
line-height: 19px;
|
||
color: #313131;
|
||
margin-right: 20px;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.label_radio > input {
|
||
width: 16px;
|
||
height: 16px;
|
||
opacity: 0;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.label_radio > span {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
border: 2px solid #ccc;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.label_radio > input:checked + span:after {
|
||
background-color: #009688 !important;
|
||
}
|
||
|
||
.label_radio > input:checked + span {
|
||
border-color: #009688 !important;
|
||
}
|
||
|
||
.label_radio > span::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background-color: #ddd;
|
||
top: 4px;
|
||
left: 4px;
|
||
transition: .5s;
|
||
}
|
||
|
||
.small_img_box {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
}
|
||
|
||
.small_img_box-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.small_img_box-right > input,.small_img_box-right>div>input,.searchInput {
|
||
margin-bottom: 5px;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.small_img_box-right > select {
|
||
margin-bottom: 5px;
|
||
width: 322px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.chooseGoods {
|
||
width: 70px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: #009688;
|
||
color: white;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
input:disabled{
|
||
background-color: transparent;
|
||
}
|
||
.layui-table-cell{
|
||
height: auto;
|
||
}
|
||
.status {
|
||
width: 52px;
|
||
height: 22px;
|
||
border-radius: 13px;
|
||
font-size: 12px;
|
||
border: 1px solid #ccc;
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.isOpen {
|
||
background-color: #009688;
|
||
border-color: #009688;
|
||
}
|
||
|
||
.isOpen:before {
|
||
content: '启用';
|
||
color: white;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 5px;
|
||
transform: scale(0.9);
|
||
}
|
||
.isOpen:after{
|
||
content: '';
|
||
background-color: white;
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 30px;
|
||
border-radius: 50%;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.isClose:before {
|
||
content: '禁用';
|
||
color: #aaa;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 21px;
|
||
transform: scale(0.9);
|
||
}
|
||
.isClose:after{
|
||
content: '';
|
||
background-color: #bbb;
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 5px;
|
||
border-radius: 50%;
|
||
transform: scale(0.9);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="padding: 0 50px">
|
||
<form id="form">
|
||
<div class="box">
|
||
<div class="list">
|
||
<div class="left_name">导航栏标题：</div>
|
||
<input type="text" name="title" placeholder="请输入标题" maxlength="16" id="title">
|
||
</div>
|
||
<div class="list">
|
||
<sapn class="left_name">导航栏图片：</sapn>
|
||
<label class="file_label box_file_label">
|
||
<input type="file" name="icon" accept="image/png,image/jpeg" value="" id="icon"/>
|
||
<img>
|
||
</label>
|
||
<span style="font-size: 12px;color: #666;padding-top: 5px;margin: 10px">建议尺寸：60 x 60，或等比例图片</span>
|
||
</div>
|
||
<div class="list navigation_type">
|
||
<div class="left_name">导航栏类型：</div>
|
||
<select name="navigation_type">
|
||
<option value="0" selected>其他链接</option>
|
||
<option value="1">商品分类</option>
|
||
<option value="2">功能入口</option>
|
||
</select>
|
||
</div>
|
||
<div class="list class_goods" style="display: none;">
|
||
<div class="left_name">商品分类：</div>
|
||
<select name="class_goods">
|
||
<option value="0" selected>请选择</option>
|
||
<volist name="class_goods" id="val">
|
||
<option value="{$val['id']}" >{$val['class_name']}</option>
|
||
</volist>
|
||
</select>
|
||
</div>
|
||
<div class="list function_entrance" style="display: none;">
|
||
<div class="left_name">功能入口：</div>
|
||
<select name="function_entrance">
|
||
<option value="0" selected>请选择</option>
|
||
<volist name="classList" id="val">
|
||
<option value="{$val['id']}" data-type="{$val['type']}">{$val['name']}</option>
|
||
</volist>
|
||
</select>
|
||
</div>
|
||
<div class="list other_url">
|
||
<div class="left_name">其他链接地址：</div>
|
||
<input type="text" name="other_url" placeholder="其他网页链接地址" id="other_url">
|
||
<span style="font-size: 12px;color: #666;padding-top: 20px;margin-left: 10px;">需要到小程序后台添加域名白名单</span>
|
||
</div>
|
||
<div class="list link_id" style="display: none;">
|
||
<div class="left_name">商品：</div>
|
||
<input type="text" name="goods_name" id="goods_name" disabled placeholder="选择商品">
|
||
<div class="chooseGoods choose" style="margin-top: 14px;">选择商品</div>
|
||
<input type="hidden" name="goods_id" id="goods_id" value="">
|
||
</div>
|
||
<div class="list">
|
||
<div class="left_name">排序：</div>
|
||
<input type="text" name="rank" id="rank" value="1" onkeyup="value=value.replace(/[^\d]/g,'')">
|
||
<span style="font-size: 12px;color: #666;padding-top: 20px;margin-left: 10px;">用于导航列排序,按<b style="color: #c7254e;">正序</b>排列,默认为<b style="color:#c7254e;">1</b></span>
|
||
</div>
|
||
<div class="list">
|
||
<div class="left_name">是否启用：</div>
|
||
<div style="margin-top:15px;">
|
||
<div class="status isOpen"></div>
|
||
<input type="hidden" name="status" value="1" id="status">
|
||
</div>
|
||
</div>
|
||
<div class="save">创建</div>
|
||
</div>
|
||
</form>
|
||
<div id="selectGoods" style="display: none;">
|
||
<div style="margin: 10px;display: flex;align-items: center;">
|
||
<input type="text" style="margin-top: 3px;margin-right: 10px" class="searchInput" value="" placeholder="商品名称/货号/编码">
|
||
<a class="layui-btn layui-btn-sm" id="search">搜索</a>
|
||
</div>
|
||
<table class="layui-hide" id="goods" lay-filter="demo"></table>
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-sm choose" lay-event="choose">选择</a>
|
||
</script>
|
||
</div>
|
||
</body>
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script src="__PUBLIC__/layui/layui.js"></script>
|
||
<script src="__PUBLIC__/js/tips.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
|
||
<script>
|
||
layui.use(['form', 'layedit', 'laydate', 'table'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var table = layui.table;
|
||
|
||
$(".navigation_type").on('change', function () { // 导航栏类型选择
|
||
if ($("select[name='navigation_type']>option:selected").val() == 1) {
|
||
$(".class_goods").show();
|
||
$(".function_entrance").hide();
|
||
$(".other_url").hide();
|
||
$('.link_id').hide();
|
||
} else if($("select[name='navigation_type']>option:selected").val() == 2) {
|
||
$(".class_goods").hide();
|
||
$(".function_entrance").show();
|
||
$(".other_url").hide();
|
||
if($("select[name='function_entrance']>option:selected").val() == 0){
|
||
$('.link_id').hide();
|
||
}else if($("select[name='function_entrance']>option:selected").attr('data-type') == 1){
|
||
$('.link_id').show();
|
||
}else{
|
||
$('.link_id').hide();
|
||
}
|
||
}else{
|
||
$(".class_goods").hide();
|
||
$(".function_entrance").hide();
|
||
$(".other_url").show();
|
||
$('.link_id').hide();
|
||
}
|
||
});
|
||
$(".function_entrance").on('change', function () { // 功能入口
|
||
if ($(this).children('option:selected').val() == 0) {
|
||
$('.link_id').hide();
|
||
} else if($(this).find('option:selected').attr('data-type') == 1){
|
||
$('.link_id').show();
|
||
} else {
|
||
$('.link_id').hide();
|
||
}
|
||
});
|
||
$("input[type='file']").on('change', function () { // 上传图片
|
||
if (this.files.length) {
|
||
var that = this;
|
||
var img_data = this.files[0];
|
||
var img_type = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if ($.inArray(img_data.type,img_type) != -1) { // 0 是图片 -1 不是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(img_data);
|
||
reader.onload = function () {
|
||
$(that).next().attr('src', this.result).show();
|
||
}
|
||
}
|
||
}
|
||
})
|
||
$('.chooseGoods').click(function () { // 选择商品
|
||
var layIndex = layer.open({
|
||
type: 1,
|
||
content: $('#selectGoods'),
|
||
title: '选择商品',
|
||
area: ["50%", "80%"],
|
||
btnAlign: 'c',
|
||
success: function () {
|
||
table.render({
|
||
elem: '#goods',
|
||
url: "{:U('getOnlineGoods')}",
|
||
limit: 10,
|
||
cols: [
|
||
[{
|
||
field: 'id',
|
||
title: 'ID',
|
||
align: 'center',
|
||
width: 60
|
||
}, {
|
||
field: 'good_image',
|
||
title: '商品图片',
|
||
align: 'center',
|
||
templet: '<div><a target="_blank" href="{{ d.good_image}}"><img src="{{ d.good_image}}" style="height: 30px;width: 30px;"></a></div>',
|
||
}, {
|
||
field: 'goods_name',
|
||
title: '商品名称',
|
||
align: 'center'
|
||
}, {
|
||
field: 'goods_num',
|
||
title: '商品库存',
|
||
align: 'center',
|
||
}, {
|
||
field: 'online_price',
|
||
title: '零售价',
|
||
align: 'center',
|
||
}, {
|
||
fixed: 'right',
|
||
title: '操作',
|
||
align: 'center',
|
||
toolbar: '#barDemo',
|
||
width: 100
|
||
}]
|
||
],
|
||
page: {
|
||
layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||
}, //是否开启分页
|
||
id: 'goods',
|
||
});
|
||
|
||
table.on('tool(demo)', function (obj) {
|
||
if (obj.event === 'choose') { //选择商品
|
||
goods = obj.data;
|
||
layer.close(layIndex);
|
||
}
|
||
});
|
||
$('#search').click(function () {
|
||
table.reload('goods', {
|
||
page: {
|
||
curr: 1, //重新从第 1 页开始
|
||
},
|
||
where: {
|
||
keyword: $('.searchInput').val(),
|
||
}
|
||
});
|
||
})
|
||
},end:function () {
|
||
if(JSON.stringify(goods)!=JSON.stringify({})){
|
||
$("#goods_name").val(goods.goods_name);
|
||
$("#goods_id").val(goods.id);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
$('.status').click(function(){
|
||
if($('.status').hasClass('isOpen')){
|
||
$('.status').addClass('isClose').removeClass('isOpen');
|
||
$('#status').val(2);
|
||
}else{
|
||
$('.status').addClass('isOpen').removeClass('isClose');
|
||
$('#status').val(1);
|
||
}
|
||
});
|
||
|
||
// 提交
|
||
$('.save').click(function () {
|
||
if (!$('#title').val().trim()) {
|
||
showTips('请输入导航栏标题');
|
||
return;
|
||
}
|
||
if (!$('#icon').val().trim()) {
|
||
showTips('请上传导航栏图片');
|
||
return;
|
||
}
|
||
if ($("select[name='navigation_type']>option:selected").val() == 1) { // 商品分类
|
||
if ($("select[name='class_goods']>option:selected").val() == 0) {
|
||
showTips('请选择商品分类');
|
||
return;
|
||
}
|
||
} else if($("select[name='navigation_type']>option:selected").val() == 2){ // 功能入口
|
||
if ($("select[name='function_entrance']>option:selected").val() == 0) {
|
||
showTips('请选择功能入口');
|
||
return;
|
||
}else if($("select[name='function_entrance']>option:selected").attr('data-type') == 1){
|
||
if(!$('#goods_name').val() || !$('#goods_id').val()){
|
||
showTips('请选择商品');
|
||
return;
|
||
}
|
||
}
|
||
}else{
|
||
if(!$('#other_url').val().trim()){
|
||
showTips('请填写链接地址');
|
||
return;
|
||
}
|
||
}
|
||
if($("#rank").val() <= 0){
|
||
showTips('请填写排序');
|
||
return;
|
||
}
|
||
var fd = new FormData(document.getElementById('form'));
|
||
$.ajax({
|
||
url: "{:U('do_add_navigation')}",
|
||
type: "POST",
|
||
data: fd,
|
||
dataType: 'JSON',
|
||
cache: false, // 不缓存
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
layer.msg(res.msg, {time: 1500}, function () {
|
||
parent.layer.closeAll();
|
||
});
|
||
} else {
|
||
showTips(res.msg, 1500);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
</script>
|
||
</html> |