mashangyoujiu/Application/Retail/View/SecKill/chooseGoods.html

<!DOCTYPE html>
<html>
<!--[1.7.14]-->
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>

    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/goodsList.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
    <script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
    <style>
        .gA_inner01 > span {
            min-width: 66px;
        }

        .gA_inner01 > input {
            margin-left: 10px;
        }

        .gA_inner02 {
            margin-right: 0px;
        }
        .layui-table-tool {
            display: none;
        }
        .layui-layer-btn .layui-layer-btn0{
            background-color: #009688!important;
            border-color: #009688!important;
        }
    </style>
</head>
<body>
<div class="goodsBox" style="padding: 0 20px">
    <div class="goods_table">
        <div class="goods_edit">
            <div class="goods_edit_input">
                <input class="searchInput form-control" type="text" value="" placeholder="商品名称" id="keyword">
            </div>
            <button type="button" class="layui-btn" id="search">搜索</button>
        </div>
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="submit">选择商品</a>
        </script>
    </div>
</div>
<form id="choose" class="layui-form" style="display: none;">
    <input type="hidden" id="gid" value="">
    <input type="hidden" id="skuid" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-inline">
            <input type="text" name="goods_name" class="layui-input" value="" id="goods_name" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">现有库存</label>
        <div class="layui-input-inline">
            <input type="text" name="goods_num" class="layui-input" value="" id="goods_num" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">秒杀库存</label>
        <div class="layui-input-inline">
            <input type="text" name="active_limit_num" autocomplete="off" class="layui-input" id="active_limit_num"
                   value="" onkeyup="value=value.replace(/[^\d]/g,'')">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input type="text" name="online_price" class="layui-input" value="" id="online_price"
                   readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">秒杀价</label>
        <div class="layui-input-inline">
            <input type="text" name="goods_seckill_price" autocomplete="off" class="layui-input" id="goods_seckill_price"
                   value="" onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');">
        </div>
    </div>
    <div class="layui-form-item" id="attribute2" style="display: none">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button  type="button"  name="getCheckData" value="" class="layui-btn layui-btn-sm" lay-event="getCheckData" id="getCheckData">获取选中行数据</button>
            </div>
        </script>
        <table class="layui-hide" id="skutest" lay-filter="demo1"></table>
    </div>
</form>

</body>

<script type="text/javascript">
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        //展示已知数据
        table.render({
            elem: '#test',
            url: "{:U('addSeckill')}",
            method: 'post',
            cols: [
                [{
                    field: 'index',
                    title: '序号',
                    width: 60
                }, {
                    field: 'goods_name',
                    title: '商品名',
                    align: 'center'
                }, {
                    field: 'goods_img_id',
                    title: '商品图片',
                    style: 'height:100%;',
                    align: 'center',
                    templet: '<div><img src="{{ d.goods_img_id}}" style="height: 30px;width: 30px;"></div>'
                }, {
                    field: 'goods_num',
                    title: '库存',
                    align: 'center'
                }, {
                    field: 'online_price',
                    title: '价格',
                    align: 'center'
                }, {
                    field: 'right',
                    title: '操作',
                    align: 'center',
                    toolbar: '#barDemo'
                }]
            ],
            page: {
                layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            } //是否开启分页
            , id: 'testReload'
        });
        //查询
        $('#search').click(function () {
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    keyword:$('#keyword').val(),
                }
            });
        })

        function sync(fn1, fn2) {
            fn1();
            fn2();
        }

        //选择商品
        table.on('tool(demo)', function (obj) {
            $('#goods_seckill_price').val(null);
            $('#active_limit_num').val(null);
            $('#skuid').val(null);
            $('#attribute2').hide();
            var data = obj.data;
            $('#goods_name').val(data.goods_name);
            $('#goods_num').val(data.goods_num);
            $('#online_price').val(data.online_price);
            $('#gid').val(data.id);
            var info = data;
            if (obj.event === 'submit') {
                var attribute = data.attribute_state;
                var goods_num = data.goods_num;
                if(goods_num <= 0){
                    top.layer.msg('库存必须大于0',{time:1500});
                    return;
                }
                if (attribute == 1) {
                    layer.open({
                        type: 1,
                        content: $("#choose"),
                        title: "设置秒杀价格和库存",
                        area: ["100%", "100%"],
                        btn: ['提交', '取消'],
                        btn1: function () {
                            var goods_name = $('#goods_name').val();
                            var goods_num = parseInt($('#goods_num').val());
                            var online_price = $('#online_price').val();
                            var goods_seckill_price = $('#goods_seckill_price').val();
                            var active_limit_num = $('#active_limit_num').val();
                            if (!active_limit_num) {
                                top.layer.msg('请填写秒杀库存')
                                return;
                            } else if (active_limit_num > goods_num) {
                                top.layer.msg('秒杀库存大于库存，请重新输入')
                                return;
                            } else if (parseFloat(active_limit_num) != parseInt(active_limit_num)){
                                top.layer.msg('请输入规范库存')
                                return;
                            }
                            //价格转为整型
                            var goods_seckill_price = goods_seckill_price;   //秒杀价
                            if (!goods_seckill_price) {
                                top.layer.msg('请填写秒杀价')
                                return;
                            }
                            
                            //存入缓存
                            var gid = $('#gid').val();
                            localStorage.gid = gid;
                            localStorage.skuid = 'abc';
                            localStorage.goodsImg = info.goods_img_id;
                            localStorage.active_limit_num = active_limit_num;
                            localStorage.goods_seckill_price = goods_seckill_price;
                            // console.log(localStorage.goods_seckill_price);
                            // console.log(localStorage.active_limit_num);

                            //提交关闭页面
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            $(obj.elem).parents('iframe').remove();
                        }, btn2: function () {
                            layer.closeAll()
                        },
                    });
                } else {
                    $('#attribute2').show();
                    table.render({
                        elem: '#skutest',
                        url:"{:U('SecKill/getsku')}",
                        toolbar: '#toolbarDemo',
                        method: 'post',
                        where:{
                            goods_id: data.id
                        },
                        cols: [[
                            {type:'radio'}
                            ,{field:'sku',title: '商品规格',align:'center', }
                            ,{field:'goods_img',title: '商品图片',align:'center',templet: '<div><img src="{{ d.goods_img}}" style="height: 30px;width: 30px;"></div>', }
                            ,{field:'goods_num',title: '商品库存',align:'center', }
                            ,{field:'online_price',title: '商品价格',align:'center', }
                        ]]
                        ,page: true
                    });

                    $("#attribute2").on("click", ".layui-form-radio", function () {
                        $("#getCheckData").click()
                    });

                    table.on('toolbar(demo1)', function(obj){
                        var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                        switch(obj.event){
                            case 'getCheckData':
                                var data = checkStatus.data;          //获取选中行数据
                                var goods_num = data[0].goods_num;
                                var online_price = data[0].online_price;
                                var skuid = data[0].id;
                                localStorage.goodsImg = data[0].goods_img;
                                $('#goods_num').val(goods_num);
                                $('#online_price').val(online_price);
                                $('#skuid').val(skuid);
                                break;
                        };
                    });
                    layer.open({
                        type: 1,
                        content: $("#choose"),
                        title: "设置秒杀价格和库存",
                        area: ["100%", "100%"],
                        btn: ['提交', '取消'],
                        btn1: function () {
                            var goods_name = $('#goods_name').val();
                            var goods_num = parseInt($('#goods_num').val());
                            var online_price = $('#online_price').val();
                            var skuid = $('#skuid').val();
                            var active_limit_num = $('#active_limit_num').val();
                            var goods_seckill_price = $('#goods_seckill_price').val();
                            //判断是否选择规格
                           if(!skuid){
                               top.layer.msg('请先选择规格')
                               return;
                           }
                           if(parseFloat(goods_num) <= 0){
                               top.layer.msg('该商品库存不足，请重新选择')
                               return;
                           }
                            //判断库存
                            if (!active_limit_num) {
                                top.layer.msg('请填写秒杀库存')
                                return;
                            } else if (active_limit_num > goods_num) {
                                top.layer.msg('秒杀库存大于库存，请重新输入')
                                return;
                            }else if (active_limit_num < 1){
                                top.layer.msg('请输入规范库存')
                                return;
                            }
                            //价格转为整型
                            var onlinePrice = online_price * 100;   //零售价
                            var seckillPrice = goods_seckill_price * 100;   //秒杀价
                            if (!seckillPrice) {
                                top.layer.msg('请填写秒杀价')
                                return;
                            } else if (seckillPrice > onlinePrice) {
                                top.layer.msg('秒杀价大于当前价格，请重新输入')
                                return;
                            }

                            //存入缓存
                            var gid = $('#gid').val();
                            localStorage.gid = gid;
                            localStorage.skuid = skuid;

                            localStorage.active_limit_num = active_limit_num;
                            localStorage.goods_seckill_price = goods_seckill_price;

                            //提交关闭页面
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            $(obj.elem).parents('iframe').remove();
                        }, btn2: function () {
                            layer.closeAll()
                        },
                    });
                }
            }
        });
    });


</script>
</html>