layui商品展示界面代码

<!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>

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui框架可以通过以下步骤展示商品: 1. 引入Layui框架的相关组件,如Layui CSS、Layui JS、jQuery等。 2. 创建一个包含商品信息的HTML模板,包括商品名称、价格、图片等。 3. 使用Layui的模板引擎laytpl将商品信息模板和后台数据进行绑定,生成商品列表。 4. 将商品列表渲染到前端页面上,通过Layui的布局组件实现商品列表的排版和展示。 5. 可以使用Layui的其他组件,如轮播图组件、弹出层组件等来增强商品展示的效果和用户体验。 示例代码: HTML模板: ``` <script type="text/html" id="goodsTpl"> {{# layui.each(d.data, function(index, item){ }} <div class="layui-col-md3"> <div class="goods-item"> <div class="goods-img"> <a href="{{item.link}}"> <img src="{{item.img}}" alt="{{item.title}}"> </a> </div> <div class="goods-info"> <div class="goods-title">{{item.title}}</div> <div class="goods-price">¥{{item.price}}</div> </div> </div> </div> {{# }); }} </script> ``` JavaScript代码: ``` // 引入Layui组件 layui.use(['laytpl','jquery'], function(){ var laytpl = layui.laytpl, $ = layui.jquery; // 模拟后台数据 var data = { data: [ { title: '商品1', price: 100, img: 'img/goods1.jpg', link: '#' }, { title: '商品2', price: 200, img: 'img/goods2.jpg', link: '#' }, { title: '商品3', price: 300, img: 'img/goods3.jpg', link: '#' } ] }; // 使用Layui模板引擎渲染商品列表 var getGoodsTpl = $('#goodsTpl').html(); laytpl(getGoodsTpl).render(data, function(html){ $('#goodsList').html(html); }); }); ``` CSS样式: ``` .goods-item { border: 1px solid #ccc; margin-bottom: 20px; } .goods-img { height: 200px; text-align: center; line-height: 200px; } .goods-img img { max-width: 100%; max-height: 100%; vertical-align: middle; } .goods-info { padding: 10px; } .goods-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .goods-price { font-size: 14px; color: #f00; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值