<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>商品详情</title>
<link rel="stylesheet" href="../layui/css/layui.css" />
<script src="../layui/layui.js"></script>
<script src="../js/jquery.1.12.4.min.js"></script>
<script src="../../../js/echarts.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
background-color: #efefef;
}
.left2 {
width: 200px;
}
.right2 {
float: left;
margin-left: 220px;
font-size: 17px;
opacity: 0.78;
margin-top: 15px;
border-bottom: 1px solid rgb(179, 179, 179);
height: 35px;
width: 80%;
}
.layui-table-cell {
text-align: center;
height: auto;
white-space: normal;
}
.layui-table img {
max-width: 300px;
}
</style>
</head>
<body>
<div class="left2">
<ul class="layui-nav layui-nav-tree" lay-filter="test" style="position: fixed; height: 100%">
<li class="layui-nav-item"><a href="./home.html">系统首页</a></li>
<li class="layui-nav-item"><a href="">订单详情</a></li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">商品管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">库存查询</a></dd>
<dd><a href="">商品详情</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">其他</a>
<dl class="layui-nav-child">
<dd><a href="">留言反馈</a></dd>
<dd><a href="">数据统计</a></dd>
<dd><a href="">商品评论</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">会员信息</a></li>
<li class="layui-nav-item"><a href="">店铺信息</a></li>
<li class="layui-nav-item"><a href="">平台优惠券</a></li>
</ul>
</div>
<div class="right2"><span>商品详情</span></div>
<div>
<div style="padding-top: 65px; padding-left: 220px">
<span class="layui-breadcrumb">
<a href=""><cite>全部商品</cite></a>
<a href="">已上架</a>
<a href="">已下架</a>
</span>
</div>
<div style="margin-left: 219px;width: 85%;" class="layui-anim layui-anim-down">
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type=" text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary layui-border-blue layui-btn layui-btn-sm"
lay-event="getCheckData" id="tianjias" >添加商品</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit2">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# if(d.logins === 1){ }}
<button id="xiajia" class="layui-btn layui-btn-warm layui-btn layui-btn-xs" lay-event="jiajia2">下架</button>
{{# } else { }}
<button class="layui-btn layui-btn-warm layui-btn layui-btn-xs" lay-event="jiajia2">上架</button>
{{# } }}
</script>
<script type="text/html" id="status">
{{# if(d.logins === 1){ }}
<span style="color: rgb(0, 139, 44);font-weight: bolder;font-family: '幼圆';">已上架</span>
{{# } else { }}
<span style="color: rgb(237, 115, 140);font-weight: bolder;font-family: '幼圆';">已下架</span>
{{# } }}
</script>
<script type="text/html" id="fenlei">
{{# if(d.fenlei === 1 ){ }}
<span >电视家影</span>
{{# } }}
{{# if(d.fenlei === 2 ){ }}
<span >生活家电</span>
{{# } }}
{{# if(d.fenlei === 3 ){ }}
<span >小家电</span>
{{# } }}
{{# if(d.fenlei === 4 ){ }}
<span >智能厨房</span>
{{# } }}
{{# if(d.fenlei === 5 ){ }}
<span >大家电</span>
{{# } }}
{{# if(d.fenlei === 6 ){ }}
<span >智能卫浴</span>
{{# } }}
{{# if(d.fenlei === 7 ){ }}
<span >手机数码</span>
{{# } }}
</script>
<script>
layui.use("table", function () {
var table = layui.table;
table.render({
elem: "#test",
url: "http://127.0.0.1/shopshangpin/select_all",
toolbar: "#toolbarDemo",
defaultToolbar: [
"filter",
"exports",
],
title: "用户数据表",
cols: [
[
{
field: 'tupian', title: '图片', unresize: true, width: 80, templet: function (d) {
return '<div><img src="' + 1 + '" ' + 'alt="" width="50px" height="50px"></a></div>';
}
},
{
field: "shopname",
title: "名称",
width: 340,
},
{
field: "shopmoney",
title: "价格",
width: 180,
},
{
field: "fenlei",
title: "所属分类",
width: 200,
templet: '#fenlei'
},
{ field: "inserttime", title: "添加时间", width: 200 },
{
field: "logins",
title: "是否上架",
width: 100,
templet: '#status'
},
{
fixed: "right",
title: "操作",
toolbar: "#barDemo",
width: 190,
},
],
],
page: true,
});
table.on('toolbar(test)', function (obj) {
$("#tianjias").click(function () {
layer.open({
type: 2, //设置类型 默认为0 1页面层 2ifream层
title: "添加商品",
id: 'unique-identifier',
content: "tianjiashangpin.html",
area: ['500px', '600px'],
});
});
})
table.on('tool(test)', function (obj) {
let layEvent = obj.event;
// console.log(obj.data);
console.log(layEvent);
if (layEvent === "jiajia2") {
//上架
layer.confirm("确定要上架商品吗?", {
btn2: function (index, layero) {
}
},
function (index, layero) {
$.ajax({
url: "http://127.0.0.1/shopshangpin/shangjia_shop/" + obj.data.id,
type: 'get',
success: function (response) {
if (obj.data.logins == 0) {
layer.msg("商品上架成功", { icon: 1 });
} else {
layer.msg("商品已经下架", { icon: 2 });
}
table.reload('test');
},
dataType: "json",
contentType: "application/json",
xhrFields: {
withCredentials: true
},
});
}
);
} else
if (layEvent === "edit2") {
let dangqianshuju = obj.data; // 获取当前行的数据对象
layer.open({
type: 2, //设置类型 默认为0 1页面层 2ifream层
title: obj.data.shopname,
content: "tanchukuang.html",
area: ['500px', '600px'],
id: 'unique-identifier2',
resize: true,
success: function (dom, index) {
//通过索引获取到当前iframe弹出层
var iframe = window['layui-layer-iframe' + index];
//调用iframe弹出层内的方法
iframe.edit(obj.data);
},
});
} else
if (layEvent === "del") {
layer.confirm("确定要删除商品吗?", {
btn2: function (index, layero) {
}
},
function (index, layero) {
$.ajax({
url: "http://127.0.0.1/shopshangpin/delect_shop/" + obj.data.id,
type: 'get',
success: function (response) {
layer.msg("删除商品成功", { icon: 1 });
table.reload('test');
},
dataType: "json",
contentType: "application/json",
xhrFields: {
withCredentials: true
},
});
}
);
//删除
}
})
});
</script>
</div>
</div>
<script>
</script>
</body>
</html>
layui商品展示界面代码
于 2024-01-11 20:34:11 首次发布