manghe/app/admin/view/FFProducts/index.html
2025-06-25 18:26:26 +08:00

308 lines
13 KiB
HTML

{include file="Public:header3"/}
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-header">商品管理</div>
<div class="layui-card-body">
<div class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<input type="text" id="searchProductName" placeholder="请输入商品名称关键词" class="layui-input">
</div>
<div class="layui-inline">
<input type="text" id="searchCategoryName" placeholder="请输入分类名称关键词" class="layui-input">
</div>
<div class="layui-inline">
<select id="searchStatus">
<option value="">全部状态</option>
<option value="0">下架</option>
<option value="1">上架</option>
</select>
</div>
<div class="layui-inline">
<select id="searchIsHot">
<option value="">全部热销</option>
<option value="0">非热销</option>
<option value="1">热销</option>
</select>
</div>
<div class="layui-inline">
<select id="searchIsNew">
<option value="">全部新品</option>
<option value="0">非新品</option>
<option value="1">新品</option>
</select>
</div>
<div class="layui-inline">
<select id="searchIsRecommend">
<option value="">全部推荐</option>
<option value="0">非推荐</option>
<option value="1">推荐</option>
</select>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm" id="btnSearch"><i
class="layui-icon">&#xe615;</i>搜索</button>
<button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon">&#xe654;</i>添加</button>
</div>
</div>
</div>
<table id="tableList" lay-filter="tableList"></table>
</div>
</div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# if(d.status == 0){ }}
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="publish">上架</a>
{{# }else{ }}
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="draft">下架</a>
{{# } }}
{{# if(d.is_hot == 0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setHot">设为热销</a>
{{# }else{ }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="cancelHot">取消热销</a>
{{# } }}
{{# if(d.is_new == 0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setNew">设为新品</a>
{{# }else{ }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="cancelNew">取消新品</a>
{{# } }}
{{# if(d.is_recommend == 0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setRecommend">设为推荐</a>
{{# }else{ }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="cancelRecommend">取消推荐</a>
{{# } }}
</script>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
{{# if(d.status == 1){ }}
<span class="layui-badge layui-bg-green">上架</span>
{{# }else{ }}
<span class="layui-badge">下架</span>
{{# } }}
</script>
<!-- 热销模板 -->
<script type="text/html" id="hotTpl">
{{# if(d.is_hot == 1){ }}
<span class="layui-badge layui-bg-orange"></span>
{{# }else{ }}
<span></span>
{{# } }}
</script>
<!-- 新品模板 -->
<script type="text/html" id="newTpl">
{{# if(d.is_new == 1){ }}
<span class="layui-badge layui-bg-blue"></span>
{{# }else{ }}
<span></span>
{{# } }}
</script>
<!-- 推荐模板 -->
<script type="text/html" id="recommendTpl">
{{# if(d.is_recommend == 1){ }}
<span class="layui-badge layui-bg-cyan"></span>
{{# }else{ }}
<span></span>
{{# } }}
</script>
{include file="Public/footer3" /}
<script>
layui.use(['table', 'form', 'jquery', 'layer', 'laydate'], function () {
var $ = layui.jquery;
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
// 渲染表格
var tableIns = table.render({
elem: '#tableList',
url: '{:url("/admin/ff_products")}',
page: true,
cols: [[
{ type: 'numbers', title: '序号', width: 60 },
{ field: 'product_name', title: '商品名称', width: 180 },
{ field: 'category_name', title: '分类', width: 150 },
{
field: 'cover_image', title: '封面图', width: 100, templet: function (d) {
return d.cover_image ? '<img src="' + d.cover_image + '" style="max-height: 50px;">' : '';
}
},
{ field: 'price', title: '价格', width: 100 },
{ field: 'stock', title: '库存', width: 80 },
{ field: 'sales', title: '销量', width: 80 },
{ field: 'is_hot', title: '热销', width: 80, templet: '#hotTpl' },
{ field: 'is_new', title: '新品', width: 80, templet: '#newTpl' },
{ field: 'is_recommend', title: '推荐', width: 80, templet: '#recommendTpl' },
{ field: 'status', title: '状态', width: 80, templet: '#statusTpl' },
{
field: 'create_time', title: '创建时间', width: 160, templet: function (d) {
return layui.util.toDateString(new Date(d.create_time).getTime(), 'yyyy-MM-dd HH:mm:ss');
}
},
{ title: '操作', toolbar: '#tableBar', width: 380 }
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
text: {
none: '暂无相关数据'
}
});
// 搜索按钮点击事件
$('#btnSearch').click(function () {
tableIns.reload({
where: {
product_name: $('#searchProductName').val(),
category_name: $('#searchCategoryName').val(),
status: $('#searchStatus').val(),
is_hot: $('#searchIsHot').val(),
is_new: $('#searchIsNew').val(),
is_recommend: $('#searchIsRecommend').val()
},
page: {
curr: 1
}
});
});
// 添加按钮点击事件
$('#btnAdd').click(function () {
layer.open({
type: 2,
title: '添加商品',
area: ['90%', '90%'],
shade: 0.4,
shadeClose: false,
content: '{:url("/admin/ff_products_add")}'
});
});
// 表格工具条点击事件
table.on('tool(tableList)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') {
layer.open({
type: 2,
title: '编辑商品',
area: ['90%', '90%'],
shade: 0.4,
shadeClose: false,
content: '{:url("/admin/ff_products_edit")}?id=' + data.id
});
} else if (layEvent === 'del') {
layer.confirm('确定要删除该商品吗?', function (i) {
layer.close(i);
layer.load(2);
$.post('{:url("/admin/ff_products_del")}', { id: data.id }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
});
} else if (layEvent === 'publish') {
layer.load(2);
$.post('{:url("/admin/ff_products_status")}', { id: data.id, status: 1 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'draft') {
layer.load(2);
$.post('{:url("/admin/ff_products_status")}', { id: data.id, status: 0 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'setHot') {
layer.load(2);
$.post('{:url("/admin/ff_products_hot")}', { id: data.id, is_hot: 1 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'cancelHot') {
layer.load(2);
$.post('{:url("/admin/ff_products_hot")}', { id: data.id, is_hot: 0 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'setNew') {
layer.load(2);
$.post('{:url("/admin/ff_products_new")}', { id: data.id, is_new: 1 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'cancelNew') {
layer.load(2);
$.post('{:url("/admin/ff_products_new")}', { id: data.id, is_new: 0 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'setRecommend') {
layer.load(2);
$.post('{:url("/admin/ff_products_recommend")}', { id: data.id, is_recommend: 1 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
} else if (layEvent === 'cancelRecommend') {
layer.load(2);
$.post('{:url("/admin/ff_products_recommend")}', { id: data.id, is_recommend: 0 }, function (res) {
layer.closeAll('loading');
if (res.status) {
layer.msg(res.msg, { icon: 1 });
tableIns.reload();
} else {
layer.msg(res.msg, { icon: 2 });
}
}, 'json');
}
});
});
</script>