scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							{extend name="public/layout" /} {block name="title"}二维码扫码统计{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        width: 100%;
        background-color: #fff;
        min-width: 700px;
    }

    .layui-form {
        padding: 20px 30px;
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .nowbtn {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
    }

    .nowbtn:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
    }

    .layui-form {
        padding: 0px;
    }

    .layui-card {
        padding: 0px 20px 0px;
    }

    .mt20 {
        margin-top: 20px;
    }
</style>

<body>
    <div class="layui-form" id="admin" enctype="multipart/form-data">
        <!--<div class="layui-form-item mt20">
            <label class="layui-form-label">选择时间</label>
            <div class="layui-input-inline">
                <input type="text" name="start_date" id="start_date" placeholder="选择开始日期" autocomplete="off"
                    class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" name="end_date" id="end_date" placeholder="选择结束日期" autocomplete="off"
                    class="layui-input">
            </div>
        </div>-->
        <div class="layui-card">
            <table class="layui-table" id="livecodestatistics" lay-filter="livecodestatistics">
            </table>
            <script type="text/html" id="qrLinkOperate">
                <a class="layui-btn layui-btn-normal layui-btn-xs nowbtn lookphone" lay-event="look">查看</a>
            </script>
        </div>
    </div>
</body>
<script id="codelookphone" type="text/html">
    <div class="layui-card-body layui-form" style="padding: 15px;">
        <table class="layui-table" id="livecodephone" lay-filter="livecodephone">
            <thead>
                <tr>
                    <th>微信昵称</th>
                    <th>头像</th>
                    <!--<th>电话</th>-->
                </tr>
            </thead>
            <tbody id="livecodetbody">
                
            </tbody>
        </table>
    </div>
</script>
{/block} {block name="js"}
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;

        //日期范围
        laydate.render({
            elem: '#start_date'
        });
        laydate.render({
            elem: '#end_date'
        });

        table.render({
            elem: '#livecodestatistics',
            url: "{:url('Huoma/visit_list')}?id={$id}",
            height: 'full-160',
            cols: [
                [
                    { align: 'center', field: 'file_name', title: '活码名称' },
                    { align: 'center', field: 'visit_num', title: '报名数' },
                    { align: 'center', field: 'code_url', title: '报名详情', templet: '#qrLinkOperate' },
                ]
            ],
            page: true,
            text: '对不起，加载出现异常！'
        });

        function setHtml(arr) {
            let htmls = arr.map(v => {
                return `<tr>
                    <td>${v.user.nickname}</td>
                    <td><img src="${v.user.headimgurl}" alt="" width="20px" height="20px"></td>
                    <!--<td>${v.user.phone}</td>-->
                </tr>`;
            }).join('')
            $('#livecodetbody').html(htmls)
        }

        function getUserList(id) {
            let formData = new FormData();
            formData.append('id', id)
            $.ajax({
                url: '{:url("huoma/user_list")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: (ress) => {
                    if (ress.code == 0) {
                        setHtml(ress.data);
                    }
                },
            });
        }

        table.on('tool(livecodestatistics)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'look':
                    layer.open({
                        type: 1,
                        title: ['查看', 'color:#333333;background-color:#D8E6F1;'],
                        content: $('#codelookphone').html(), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        maxmin: true,
                        area: ['80%', '80%']
                    });
                    setTimeout(() => {
                        getUserList(data.id)
                    }, 500)
                    break;
            }
        })

    })
</script>
{/block}