mashangyoujiu/Application/Retail/View/Guide/details.html

<!DOCTYPE html>
<html lang="en">
<!--[1.3.26]-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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"/>
    <script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jquery/js/jquery.min.js"></script>
    <style>
        .layuiadmin-card-list p.layuiadmin-big-font {
            font-size: 28px;
            color: #666;
            line-height: 15px;
            padding: 5px 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
        }
        body {
            padding: 10px 15px;
        }
        table {
            border: 1px solid #f1f1f1;
            margin-top: 40px;
        }
        .card {
            border-radius: 2px;
            background-color: #fff;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            width:11%;
            margin: 5px;
        }
        .card-header {
            position: relative;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
        }
        .card-body {
            position: relative;
            padding: 10px 15px;
            line-height: 24px;
        }
        .goods_edit {
            box-sizing: border-box;
            padding: 10px 20px 10px 0px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="goods_edit">
    <div class="goods_edit_input">
        <input type="text" name="startdate" id="startdate" lay-verify="date" value="" placeholder="起始日期" autocomplete="off" class="layui-input">
    </div>
    <div style="text-align: center;">
        <span style="margin-left: -20px;color: #9d9d9d;font-size: 27px;">-</span>
    </div>
    <div class="goods_edit_input">
        <input type="text" name="enddate" id="enddate" lay-verify="date" value="" placeholder="截止日期" autocomplete="off" class="layui-input">
    </div>
    <select class="goods_edit_input" name="moneystate" id="moneystate">
        <option value="">请选择</option>
        <option value="1">未提现</option>
        <option value="2">待审核</option>
        <option value="3">已结算</option>
    </select>
    <button type="button" class="layui-btn" id="seek">查询</button>
    <button type="button" class="layui-btn" id="export">导出</button>
</div>
<div style="padding: 5px; background-color: #F2F2F2;display: flex;">
    <div class="card">
        <div class="card-header">销售数量</div>
        <div class="card-body" id="count">0（笔）</div>
    </div>
    <div class="card">
        <div class="card-header">销售金额</div>
        <div class="card-body" id="sell_money">0（元）</div>
    </div>
    <div class="card">
        <div class="card-header">现金支付</div>
        <div class="card-body" id="xj">0（元）</div>
    </div>
    <div class="card">
        <div class="card-header">微信支付</div>
        <div class="card-body" id="wx">0（元）</div>
    </div>
    <div class="card">
        <div class="card-header">支付宝支付</div>
        <div class="card-body" id="zfb">0（元）</div>
    </div>
    <div class="card">
        <div class="card-header">余额支付</div>
        <div class="card-body" id="hyk">0（元）</div>
    </div>
    <div class="card">
        <div class="card-header">其他支付</div>
        <div class="card-body" id="qt">0（元）</div>
    </div>
    <div class="card">
        <div class="card-header">所得金额</div>
        <div class="card-body" id="get_money">0（元）</div>
    </div>
</div>
<div class="goods_edit">
    <table class="layui-hide" id="test" lay-filter="demo"></table>
</div>
</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;
        var form = layui.form;

        //日期
        laydate.render({
            elem: '#startdate'
        });
        laydate.render({
            elem: '#enddate'
        });
        var id = {:I('get.id')};
        table.render({
            elem: '#test',
            url: "{:U('get_sell_list')}",
            where: {id: id},
            limit: 10,
            cols: [
                [{
                    field: 'index',
                    title: '序号',
                    align: 'center',
                    width: 80,
                }, {
                    field: 'guide_name',
                    title: '导购员',
                    align: 'center',
                }, {
                    field: 'vip_name',
                    title: '消费对象',
                    align: 'center',
                }, {
                    field: 'allmoney',
                    title: '支付金额',
                    align: 'center',
                }, {
                    field: 'pay_name',
                    title: '支付方式',
                    align: 'center',
                }, {
                    field: 'paytime',
                    title: '支付时间',
                    align: 'center',
                }, {
                    field: 'income',
                    title: '所得佣金',
                    align: 'center',
                }, {
                    field: 'money_state',
                    title: '状态',
                    align: 'center',
                }]
            ],
            page: {
                layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            },
            done: function (res) {
                $('#count').text(res.count + '（笔）');
                $('#sell_money').text(res.sell_money);
                $('#xj').text(res.xj);
                $('#yhk').text(res.yhk);
                $('#wx').text(res.wx);
                $('#zfb').text(res.zfb);
                $('#hyk').text(res.hyk);
                $('#qt').text(res.qt);
                $('#get_money').text(res.get_money);
            },
        });

        /* 搜索 */
        $('#seek').click(function () {
            table.reload('test', {
                page: {curr: 1},
                where: {startdate: $('#startdate').val(), enddate: $('#enddate').val(),moneystate:$('#moneystate').val()}
            });
        })

        /* 导出 */
        $('#export').click(function(){
            layer.confirm("默认导出所有销售数据",function(){
                window.location.href="{:U('sell_list_export')}?start_date=" + $('#startdate').val() + "&end_date=" + $('#enddate').val() + "&id=" + id + "&moneystate=" + $('#moneystate').val();
                layer.closeAll();
            })
        })
    });
</script>
</body>
</html>