mashangyoujiu/Application/Retail/View/Discount/cuxiao.html

<!doctype html>
<html lang="en">
<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">
    <title>促销</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/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"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 10px 15px;
        }

        .Promotion, blockquote {
            box-sizing: border-box;
            /*margin: 0;*/
            padding: 0;
            padding-left: 15px;
            border-left: 2px solid #3D4357;
            font-size: 14px;
        }

        table {
            border: 1px solid #f1f1f1;
            margin-top: 40px;
        }

        .glyphicon-plus {
            color: #289FDE;
            width: 25px;
            display: inline-block;
        }

        .glyphicon-minus {
            color: #E77062;
            width: 25px;
            display: inline-block;
        }

        .PromotionForm {
            position: relative;
        }

        .Preservation {
            background: #3E4C72;
            color: #fff;
            position: absolute;
            right: 50px;
            top: 0;
        }

        .goods :nth-child(1) {
            border: none;
            outline: none;
        }

        /*.tableBox tr:hover input {*/
            /*background: #F5F5F5;*/
        /*}*/

        .goods :nth-child(2) {
            border: none;
            vertical-align: middle;
        }

        .specialOffer input {
            /*border: none;*/
            outline: none;
        }

        .table {
            background-color: white;
        }
        .goods {
            text-align: center;
        }

        .layui-table-box tr th .layui-form-checkbox{
            display: none;!important;
        }
    </style>
</head>
<body style="background-color:#fff7f8;">
<div class="goodsBox">
    <div class="goods_title">
        <div class="goods_title_inner">
            特价打折 <span style="color:orangered">(注意:促销商品不参加会员的打折)</span>
        </div>
    </div>
</div>
<form  class="form-inline PromotionForm" id="myform" action="{:U('retail/discount/savediscountmsg')}" method="post">
    <div class="form-group" style="width: 90%;margin-bottom: 15px">
        <div class="col-md-12 col-sm-12">
            <div class="form-group has-feedback" >
                <label for="">日期</label>
            </div>
            <div class="form-group has-feedback" id='datetimepicker1'>
                <!--<label for="">日期</label>-->
                <input type="text" class="form-control test-item" name="start_day" placeholder="2018-5-12">
                <span class="glyphicon glyphicon-calendar form-control-feedback"></span>

                <input type="text" class="form-control time" name="start_time" value="00:00" placeholder="00:00">
                <span class="sr-only glyphicon glyphicon-calendar form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="">&nbsp;&nbsp;至&nbsp;&nbsp;</label>
                <input type="text" class="form-control test-item" name="end_day" placeholder="2018-5-12">
                <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
                <input type="text" class="form-control time" name="end_time" value="23:59" placeholder="23:59">
                <span class="sr-only glyphicon glyphicon-calendar form-control-feedback"></span>
            </div>
        </div>
    </div>
    <div class="form-group" style="width: 90%;">
        <div class="col-md-6 col-sm-6 ">
            <div class="form-group">
                <label for="">促销名称:</label>
                <input type="text" class="form-control" placeholder="" name="dis_name">
            </div>
        </div>
        <div class="col-md-6 col-sm-6 pull-right">
            <div class="form-group">
                <label for="">促销模式:</label>
                <select name="type" id="discountType" class="form-control" style="width: 165px;">
                    <option value="1">直接特价</option>
                    <option value="0">直接折扣</option>
                </select>
                <span></span>
            </div>
            <div class="form-group">
                <label for="">会员类别:</label>
                <select name="isvip" id="" class="form-control" style="width: 165px;">
                    <option value="1">会员</option>
                    <option value="0">所有顾客</option>
                </select>
                <span></span>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-default Preservation" id="savemsg">保存</button>
    <table class="table tableBox layui-table" style="min-width: 1000px;">
        <tr style="background: #F2F1F1">
            <th>序号</th>
            <th>货号</th>
            <th style="width:50px;">选择</th>
            <th>品名</th>
            <th>进货价</th>
            <th>零售价</th>
            <th>商城价</th>
            <th>零售<span class="discountType">特价</span></th>
            <th>商城<span class="discountType">特价</span></th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td width="200" class="goods">
                <input type="text" value="" placeholder="货号" readonly>
                <input type="hidden" name="goodsid[]" class="mygoodsid">
            </td>
            <td class="goods">
                <span class="glyphicon glyphicon-option-horizontal" data-toggle="modal" data-target=".myModal"></span>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td width="200" class="specialOffer"><input type="text" value="" name="te_price[]" onkeyup="value=value.replace(/[^\d\.]/g,'')"></td>
            <td width="200" class="specialOffer"><input type="text" value="" name="online_te_price[]" onkeyup="value=value.replace(/[^\d\.]/g,'')"></td>
            <td>
                <!--data-target 对应的是模态框 （弹出层）的class -->
                <span class="glyphicon glyphicon-plus"></span>
                <span class="glyphicon glyphicon-minus"></span>
            </td>
        </tr>
    </table>
</form>
<!--弹出层-->
<div class="myModal" style="display: none">
    <div class="modal-body" style="height:300px;overflow:auto; ">
        <form action="" class="form-inline">
            <div class="form-group">
                <label for="" class=" control-label">过滤</label>
                <input type="text" class="form-control" placeholder="货号/品名" id="mykeyword">
                <button type="button" class="btn btn-default" id="mysearch">查询</button>
            </div>
        </form>
        <table class="layui-hide" id="test" lay-filter="demo"></table>
    </div>
</div>
<input type="hidden" value="" id="cleckids">
</body>
<script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        // 日期
        var laydate = layui.laydate;
        var table = layui.table;
        lay('.test-item').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click'
            });
        });
        //时间
        lay('.time').each(function () {
            laydate.render({
                elem: this,
                type: 'time',
                format: 'H:m'
            });
        });
        var serial_nmu = 1;
        //jia
        $(".glyphicon-plus").click(function () {
            serial_nmu++
            $(".tableBox").append(`<tr>
                                        <td>${serial_nmu}</td>
                                        <td width="200"  class="goods">
                                            <input type="text" value="" placeholder="货号" readonly>
                                            <input type="hidden" name="goodsid[]" class="mygoodsid" >
                                        </td>
                                        <td class="goods">
                                            <span class="glyphicon glyphicon-option-horizontal" data-toggle="modal" data-target=".myModal"></span>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td width="200" class="specialOffer">
                                            <input type="text" value="" name="te_price[]" onkeyup="value=value.replace(/[^\\d\\.]/g,'')">
                                        </td>
                                        <td width="200" class="specialOffer">
                                            <input type="text" value="" name="online_te_price[]" onkeyup="value=value.replace(/[^\\d\\.]/g,'')">
                                        </td>
                                        <td>
                                            <span class="glyphicon glyphicon-plus"></span>
                                            <span class="glyphicon glyphicon-minus"></span>
                                        </td>
                                    </tr>`);
        })
        var candel = true;
        //  删除
        $(".tableBox").on("click", '.glyphicon-minus', function () {
            if (serial_nmu > 1) {
                candel = true;
                serial_nmu--;
            }
            else if (serial_nmu == 1) {
                candel = false;
            }
            if(candel){
                $(this).parents('tr').parent().children().last().remove();
            }
        })
        $(".tableBox").on('click', '.glyphicon-option-horizontal', function (e) {
            // console.log($(e.target)[0]);
            var tar = e.target;
            var data = '';
            layer.open({
                type: 1,
                content: $('.myModal'),
                title: "选择商品",
                area: "900px",
                btn: ['确定', '取消'],
                btnAlign: 'c',
                success: function () {
                    //展示已知数据
                    table.render({
                        elem: '#test',
                        url: "{:U('Discount/goodsList')}",
                        cols: [
                            [ //标题栏
                                {
                                    type: 'checkbox'
                                },
                                {
                                    field: 'good_number',
                                    title: '货号'
                                }, {
                                field: 'goods_name',
                                title: '品名'
                            }, {
                                field: 'goods_code',
                                title: '商品条码'
                            },{
                                field: 'retail_price',
                                title: '零售价(元)',
                                width:90
                            }, {
                                field: 'online_price',
                                title: '商城价(元)',
                                width:90
                            }]
                        ],
                        page: {
                            layout: [ 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        }, //是否开启分页
                    });
                    //监听表格复选框选择
                    table.on('checkbox(demo)', function (obj) {
                        // console.log(obj.data.id)
                        data = obj.data;
                    });
                    $('#mysearch').click(function () {
                        var keyword = $('#mykeyword').val()
                        table.reload('test', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                                keyword:keyword
                            }
                        });
                    })
                },
                yes: function (index) {
                    var cleckidsarr = [];
                    $('#myform input.mygoodsid').each(function () {
                        cleckidsarr.push($(this).val())
                    })
                    var bol = false;
                    for(var i=0;i<cleckidsarr.length;i++){
                        if(data.id==cleckidsarr[i]){
                            bol = true;
                            break;
                        }
                    }
                    if(bol){
                        top.layer.msg('该商品已添加进优惠');
                    }else{
                        $(tar).parents('tr').children().eq(1).children().eq(0).val(data.good_number);
                        $(tar).parents('tr').children().eq(1).children().eq(1).val(data.id);
                        $(tar).parents('tr').children().eq(3).text(data.goods_name);
                        $(tar).parents('tr').children().eq(4).text(data.purch_price);
                        $(tar).parents('tr').children().eq(5).text(data.retail_price);
                        $(tar).parents('tr').children().eq(6).text(data.online_price);
                        $('#cleckids').val($('#cleckids').val()+data.id+',');
                        layer.close(index);
                    }
                }
            })
        })
        // 选择促销类别
        $('#discountType').on('change', function () {
            var val = $('#discountType option:selected').val();
            // console.log(val);
            if (val == 0) {
                $('.discountType').text('折扣');
                top.layer.alert('当前促销方式为打折促销<br>收银机和小程序商城将显示折扣后的价格<br>折扣数据请保持在0到10之间,例如8折填写8');
            } else if (val == 1) {
                $('.discountType').text('特价');
            }
        })
        $('#savemsg').click(function () {
            top.layer.confirm('确定保存',function () {
                $.ajax({
                    url:"{:U('retail/discount/savediscountmsg')}",
                    type:'post',
                    data:$("#myform").serialize(),
                    success:function (res) {
                        // console.log(res);
                        if(res.status==1){
                            top.layer.alert(res.msg,function () {
                                top.layer.closeAll();
                                window.location.reload();
                            });
                        }else{
                            top.layer.alert(res.msg);
                        }
                    }
                })
            })
        })
    });
</script>
</html>