crm/app/sys/view/turntable/winning_customer.html

{extend name="public/layout"/} {block name="title"}已完成人员列表{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        width: 100%;
        background-color: #fff;
    }

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

    .layui-fluid {
        display: block;
        border-radius: 5px;
        background-color: #ffffff;
        padding: 15px 30px;
    }

    .layui-tab {
        padding: 0px;
        height: 100%;
    }

    .layui-form-item {
        width: 100%;
    }

    .layui-form-item .layui-inline {
        display: block;
        float: left;
        height: 38px;
        line-height: 38px;
        background: #FFFFFF;
        margin-right: 5px;
    }

    .layui-form-item .layui-input-inline {
        width: 145px;
        height: 38px;
        line-height: 38px;
        margin-bottom: 0;
    }

    .layui-form-item .layui-input-inline .layui-input {
        border: 1px solid #9DB6CF;
        border-radius: 5px;
    }

    .layui-form-select dl dd.layui-this {
        background-color: #249EFB;
    }

    .layui-form-item div.searchBox {
        width: 320px;
        background: #FFFFFF;
        height: 38px;
        overflow: hidden;
        padding-left: 18px;
        position: relative;
        margin-bottom: 0px;
        float: right;
    }

    .searchBox .inputBox {
        width: 240px;
        float: left;
        height: 36px;
        line-height: 36px;
    }

    .searchBtn {
        position: absolute;
        top: 0;
        right: 0;
        width: 51px;
        height: 38px;
        background-color: #fff;
    }

    .searchBtn img {
        position: absolute;
        width: 26px;
        top: 6px;
        left: 0;
    }

    .layui-btn.layui-btn-success {
        background-color: #009688;
    }

    .layui-card-body {
        padding: 0px;
        box-shadow: none;
    }

    .layui-card-header {
        padding: 0px 0px 15px !important;
    }
    .layui-tab-title .layui-this {
        background-color: #249EFB !important;
        color: #fff;
    }

    .layui-tab-title .layui-this:after {
        border-bottom: none;
        border: none;
    }

    .layui-tab-title li {
        background-color: #F2F2F2;
        margin: 0px 5px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this switchTab" style="margin-left: 0px;" data-index="1">
                中奖客户
            </li>
            <li class="switchTab" data-index="2">
                未中奖客户
            </li>
        </ul>
    </div>
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item clearfix">
                <div class="layui-inline" style="margin-left: 10px;">
                    <select name="org" id="depart" lay-filter="org_select">
                        <option value="">请选择部门</option>
                    </select>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <select name="employee" id="employee" lay-filter="org_select1">
                      <option value="">请选择员工</option>
                    </select>
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <input type="text" name="keyword" id="keyword" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline" style="margin-left: 10px;">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table lay-filter="commentdatalist" id="commentdatalist"></table>
        </div>
    </div>
</div>
{/block} {block name="js"}
<script type="text/html" id="table-operate">
    {{# if(d.status){ }}
    {{# if(d.status==1){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="cashPrize">
        确认兑奖
    </a>
    {{# }else if(d.status==2){ }}
    <button class="layui-btn layui-btn-disabled layui-btn-xs">已兑奖</button>
    {{# } }}
    {{# }else{ }}
    <span style="color: #cccccc;">无</span>
    {{# } }}

</script>
<script type="text/html" id="usernick">
    {{# if(d.user.nickname){ }}
        {{d.user.nickname}}
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="userphone">
    {{# if(d.user.phone){ }}
        {{d.user.phone}}
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="userheadimg">
    {{# if(d.user.headimgurl){ }}
    <img style="display: inline-block; width: 25%; height: 100%;" src="{{d.user.headimgurl}}?x-oss-process=image/resize,w_50">
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="share_img">
    {{# if(d.lotteryuser && d.lotteryuser.share_img && d.is_share_yes){ }}
    <img style="display: inline-block; width: 25%; height: 100%;" src="{{d.lotteryuser.share_img}}?x-oss-process=image/resize,w_50">
    {{# }else if(d.share_img){ }}
    <img style="display: inline-block; width: 25%; height: 100%;" src="{{d.share_img}}?x-oss-process=image/resize,w_50">
    {{# }else{ }}
    <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="lucky_time">
    {{# if(d.lucky_time){ }}
    <span>{{d.lucky_time}}</span>
    {{# }else{ }}
        <span>{{d.addtime}}</span>
    {{# } }}
</script>
<script type="text/html" id="goods">
    {{# if(d.good){ }}
    <span>{{d.good.good_name}}</span>
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script type="text/html" id="wiped_sn">
    {{# if(d.status==2){ }}
    <span>已核销</span>
    {{# }else{ }}
        <span style="color: #cccccc;">未核销</span>
    {{# } }}
</script>
<script type="text/html" id="share_name">
    {{# if(d.emp.name){ }}
    <span>{{d.emp.name}}</span>
    {{# }else{ }}
        <span style="color: #cccccc;">无</span>
    {{# } }}
</script>
<script>
    var orgids_str = '{:$orgids}';
    var orgids = JSON.parse(orgids_str);
    var org = eval('{$org|raw}');
    layui.use(['form', 'table', 'laydate'], function () {
        var form = layui.form,
            table = layui.table,
            $ = layui.$,
            laydate = layui.laydate,
            depart = [];
        //执行一个laydate实例
        laydate.render({
            elem: '#dateTime1' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#dateTime2' //指定元素
        });

        $('#depart').append(setOrgOption(org, ''));
        form.render('select')

        form.on('select(org_select)', function (data) {
        var val = data.value;
        $.ajax({
            url: '{:url("org/employee")}'
            , data: { org:val,limit:10000}
            , type: 'get'
            , success: function (res) {
            if (res.code == 0) {
                $('#employee').html('<option value="">请选择</option>');
                res.data.forEach(element => {
                $('#employee').append('<option value="' + element.id + '">' + element.name + '</option>');
                });
                form.render('select')
            }
            }
        });
        });

        function setOrgOption(opt, sj) {
            var html = '';
            opt.forEach(element => {
            if (orgids.length > 0) {
                if (in_array(element.id, orgids)) {
                html += '<option value="' + element.id + '">' + sj + element.title + '</option>';
                }
            }
            if (element && element.children.length > 0) html += setOrgOption(element.children, sj + '-');

            });

            return html;
        }

        function in_array(search, array) {
            for (var i in array) {
            if (array[i] == search) {
                return true;
            }
            }
            return false;
        }

        var field = {};
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var keyword = $('#keyword').val();
            var org = $('#depart').val();
            var employee = $('#employee').val();
            field['keyword'] = keyword;
            field['org'] = org;
            field['employee'] = employee;
            //执行重载
            table.reload('commentdatalist', {
                where: field,
                page: {
                    curr: 1
                }
            });
        });
        
        $('.switchTab').click((e) => {
            let type = e.target.dataset.index;
            e.target.className="layui-this switchTab";
            if (type == 1) {
                $('.switchTab')[1].className="switchTab";
            } else {
                $('.switchTab')[0].className="switchTab";
            }
            field['type'] = type;
			//执行重载
			table.reload('commentdatalist', {
				where: field,
				page: {
					curr: 1
				}
			});
        })

        table.render({
            elem: '#commentdatalist',
            url: "{:url('turntable/winning_customer')}?id={$id}",
            page: true,
            height: 'full-120',
            cols: [
                [{
                    type: 'numbers',
                    field: 'id',
                    title: '序号'
                },
                {
                    field: 'user.headimgurl',
                    title: '头像',
                    templet:'#userheadimg'
                },
                {
                    field: 'user.nickname',
                    title: '昵称',
                    templet:'#usernick'
                },
                {
                    field: 'user.phone',
                    title: '手机号',
                    templet:'#userphone'
                },
                {
                    field: 'lucky_time',
                    title: '抽奖时间',
                    templet:'#lucky_time'
                },
                {
                    field: 'good.good_name',
                    title: '抽中奖品',
                    templet:'#goods'
                },
                {
                    field: 'user.nickname',
                    title: '转发人员',
                    templet:'#share_name'
                },
                {
                    field: 'time',
                    title: '截图上传',
                    templet:'#share_img'
                },
                {
                    field: 'wiped_sn',
                    title: '核销码',
                    templet:'#wiped_sn'
                },
                {
                    toolbar: '#table-operate',
                    title: '操作',
                    fixed: 'right',
                }
                ]
            ]
        });

        //监听
		table.on('tool(commentdatalist)', function(obj) {
			var data = obj.data;
			if (obj.event === 'cashPrize') {
                layer.prompt({
                    formType: 3,
                    value: '',
                    title: ['请输入核销码', 'color:#333333;background-color:#D8E6F1;'],
                }, function(value, index, elem){
                    //console.log(data);
                    var formData = new FormData();
                    formData.append('id',data.id);
                    formData.append('wiped_sn',value);
                    $.ajax({
                    url: '{:url("Turntable/wiped_lottery")}',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.code === 0) {
                            table.reload('commentdatalist');
                            layer.msg(res.msg, {
                                anim: 0
                                , time: 2000
                            }, function () {
                                layer.close(index); //再执行关闭
                            });
                        } else {
                            layer.msg(res.msg, {
                                anim: 6
                                , time: 2000
                            });
                        }
                    }
                    });
                    //layer.close(index);
                });
			} 
		});

    });
</script>

{/block}