{layout name="layout" /}
<style>
.hjf input .file {
    width: 200px;
    float: left;
    height: 80px;
    width: 120px;
}.layui-table img {
    max-width: 100px;
}.laytable-cell-1-card_img {
    width: 140px;
    height: 100%;
}
.layui-table-cell {
    height: 100px;
    line-height: 100px;
}
.hjf{width:100%; float:left; clear:both; padding:5px 0; box-sizing:border-box; padding-left:15px;}
.hjf small{width:80px; float:left; padding:6px 0; text-align:right; padding-right:10px;}
.hjf input{width:200px; float:left;}
</style>
    <div class="if_wrap">
        <div id="if_con">
            <div class="cus-con">
                <div class="set-top">
                {$topmenu}
                </div>

                <div class="layui-inline margin_top_10">

                        <input type="hidden" name="usertype" value="{$Think.get.usertype}" />
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 200px"></label>

                            <label class="layui-form-label">请选择时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input test-item" name="starttime" id="starttime" readonly="true">
                            </div>

                            <div class="layui-input-inline">
                                <input type="text" class="layui-input test-item"  name="endtime" id="endtime" readonly="true">
                            </div>


                            <button class="layui-btn layui-btn-warm"  id="btn"  lay-submit="" lay-filter="*" >立即搜索</button>

                        </div>

                </div>
                <table class="layui-table" lay-data="{ url:'{:url('vip/wxextend/index')}', page:true, id:'idTest'}" lay-filter="demo">
                    <thead>
                    <tr>
                        <td lay-data="{width:60,field:'id', sort: true,templet: '#indexTpl'}">序号</td>
                        <td lay-data="{width:140,field:'title'}">渠道名称</td>
                        <td lay-data="{width:140,field:'scene'}">渠道编号</td>       
                        <td lay-data="{width:120,style:'height:100px;',field:'card_img',toolbar: '#imgbox'}">二维码</td>
                        <td lay-data="{width:90,field:'scaned_num'}">扫码人数</td>   
                        <td lay-data="{width:80,field:'follow_num'}">关注人数</td>   
                        <td lay-data="{width:200,field:'create_time'}">创建日期</td>
                        <td lay-data="{width:100,field:'order_num',toolbar: '#showUser'}">查看用户</td>                      
                        <td lay-data="{width: 160, align:'center', toolbar: '#barDemo'}">操作</td>
                    </tr>
                    </thead>
                </table>
            </div>
            
        </div>
    </div>

<div id="addbox" class="new_msg_div">
    <form  action="" method="post" id="addextendform">
    <div class="xmsgd">
        <div class="layui-input-block" style="margin-left:0;">
            <span class="hjf"><small>渠道名称：</small><input type="text" class="layui-input" name="title" id="title" /></span>
             <span class="hjf"><small>渠道编号：</small><input type="text" class="layui-input" name="scene" id="scene" /></span>
             <input type="hidden" name="id" value="0" id="id" />
        </div>
    </div>
    </form>
</div>
<script>document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>

<script type="text/html" id="showUser">
   <a class="ex_view"  href="/vip/wxextend/showuserlist/id/{{d.id}}">查看用户</a>
</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">  

    <a class="ex_view" lay-event="edit" data-id="{{d.id}}" data-title="{{d.title}}" data-scene="{{d.scene}}">编辑</a>
    <a class="ex_view" lay-event="del" data-id="{{d.id}}">删除</a>
</script>

<script type="text/html" id="imgbox">
    <a href="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket={{d.ticket}}" target="_blank">
        <img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket={{d.ticket}}" width="100%" />
    </a>
</script>
<script>


    layui.use(['form','table'], function() {
        var table = layui.table; //表格
        $('#btn').click(function () {
            table.reload('idTest', {
                url: 'index'
                , where: {starttime: $('#starttime').val(),endtime:$('#endtime').val()} //设定异步数据接口的额外参数

            });
        });
    });
	//时间格式插件
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //同时绑定多个
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

    });
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
                ,laypage = layui.laypage //分页
        layer = layui.layer //弹层
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element; //元素操作
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是
        // 工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                var id = $(this).attr("data-id");
                layer.confirm('你确定要删除这条记录吗？', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    if(id){
                        $.ajax({
                            url:"{:url('vip/wxextend/del');}",
                            data:{id:id},
                            type:'post',
                            success:function(e){
                                if(e.code==200){
                                    layer.msg('删除成功',{
                                        icon:1,
                                    });
                                }else{
                                    layer.msg('删除失败',{
                                        icon: 2,
                                    });
                                }
                            }
                        })
                    }
                });
            }else if(layEvent === 'edit'){
                var data = obj.data;
                $("#title").val(data.title);
                $("#scene").val(data.scene);

                layer.open({
                    title:'修改用户级别',
                    type: 1,
                    skin: 'layui-layer-rim',
                    area:  ['400px', '230px'],
                    content: $('#addbox'),
                    btn:['提交修改','取消'],
                    yes:function(index){
                        var id       = data.id;
                        var title     = $.trim($("#title").val());
                        var scene = $.trim($("#scene").val());
                        if(!title){
                            layer.msg('渠道名称不能为空', {
                                icon: 2,
                            });
                            return false;
                        }
                        if(!scene || !isInt(scene)){
                            $("#scene").focus()
                            layer.msg('请填写正确的渠道编号,只能是数字', {
                                icon: 2,
                            });
                            return false;
                        }
//                        if(scene > 99999){
//                            layer.msg('请填写正确的渠道编号,只能是数字,不能大于99999', {
//                                icon: 2,
//                            });
//                            return false;
//                        }
                        if(id ){
                            var postData = {};
                            postData.title = title;
                            postData.scene = scene;
                            postData.id = id;
                            $.ajax({
                              type:'post',
                              url:"{:url('vip/wxextend/save')}",
                              data:postData,
                              success:function(s){
                                if(s.code==200){
                                  layer.open({
                                    content: '恭喜您保存成功！',
                                    btn: ['确认'],
                                    yes: function(index, layero) {
                                      window.location.href="{:url('vip/wxextend/index')}";
                                    }
                                  });
                                }else{
                                  layer.msg(s.msg, {
                                    icon: 2
                                  });
                                }
                              }});
                            return false;
                        }else{
                            msg = '修改失败，请重试';
                            layer.msg(msg, {
                                icon: 2,
                            });
                        }
                    }
                                    
                });
            }
        });
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,limits: [2,10,20,30]
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页');
                }
            }
        });
    })

layui.use('form', function(){ 


}); 
    

// 新添加类型
$("#addExtendbtn").on('click',function(){
    layer.open({
        title:'添加推广渠道',
        type: 1,
        skin: 'layui-layer-rim',
        area:  ['450px', '230px'],
        content: $('#addbox'),
        btn:['立即添加','取消'],
        yes:function(index){
            var title = $.trim($("#title").val());
            var scene = $.trim($("#scene").val());
            if(!title){
                layer.msg('渠道名称不能为空', {
                    icon: 2,
                });
                return false;
            }
            if(!scene || !isInt(scene)){
                $("#scene").focus()
                layer.msg('请填写正确的渠道编号,只能是数字', {
                    icon: 2,
                });
                return false;
            }
//            if(scene > 99999){
//                layer.msg('请填写正确的渠道编号,只能是数字,不能大于99999', {
//                    icon: 2,
//                });
//                return false;
//            }
            var postData = {};
            postData.title = title;
            postData.scene = scene;

            
            $.ajax({
              type:'post',
              url:"{:url('vip/wxextend/save')}",
              data:postData,
              success:function(s){
                if(s.code==200){
                  layer.open({
                    content: '恭喜您添加成功！',
                    btn: ['确认'],
                    yes: function(index, layero) {
                      window.location.href="{:url('vip/wxextend/index')}";
                    }
                  });
                }else{
                  layer.msg(s.msg, {
                    icon: 2
                  });
                }
              }});
             
            

        }
    });
})
function isInt(a){
    var pattern = /^[0-9]*$/;
    return pattern.test(a)?true:false;
}
 
//图片显示
$("#imginput,#editimginput").on('change',function(){
  var box = $(this).attr('id')=='editimginput'?'editimgbox':'imgbox';
  imgView(this,box);
  //$("#imgbox").removeClass("display");
});


</script>   
</body>
</html>