cf-platform/Application/Payment/View/WxPayment/customerLists.html

<extend name="Public/base"/>

<block name="body">
    <link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" />
    <link rel="stylesheet" href="__CSS__/pro_promote.css" type="text/css" />
    <script src="__STATIC__/jquery.form.js"></script>
    <script src="__STATIC__/layer/layer.js"></script>
    <script type="text/javascript" src="__JS__/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/select2.min.js"></script>
    <script type="text/javascript" src="__STATIC__/layer3/layer.js"></script>
    <script src="__STATIC__/juicer-min.js" type="text/javascript"></script>
    <style>
        .select2-container--default .select2-selection--single {
            color: #000;
            resize: none;
            border-width: 1px;
            border-style: solid;
            border-color: #a7b5bc #ced9df #ced9df #a7b5bc;
            box-shadow: 0px 3px 3px #F7F8F9 inset;height:35px;
            height:28px;border-radius:3px;font-size:12px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height:35px;
            line-height:28px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height:26px;
        }
        .select2-container--default .select2-search--dropdown .select2-search__field {
            height:26px;line-height:26px;font-size:12px;
        }
        .select2-results__option[aria-selected] {font-size:12px;}
        .layui-layer-dialog .layui-layer-content{color:red}
        .butnbox {padding:10px 0 10px;}
        .butnbox .butnlist {overflow:hidden;clear:both;}
        .butnbox .butnlist .butn,.butnbox .butnlist .butn:hover {text-decoration:none;border:none;}
        .butnbox .butnlist .butn {display:inline-block;width:120px;height:28px;line-height:28px;text-align:center;color:#FFF;background:#3C95C8;border-radius:3px;}
        .butnbox .butnlist .butn.last {background:#009900;}
        .butnbox .butnlist .butn~.butn {margin-left:20px;}
        .data_list table tbody tr a.disabled,.data_list table tbody tr a.disabled:hover {color:#999;cursor:default;}
        .layui-layer-title {
            text-align: center;
            height: 80px;
            line-height: 80px;
            font-weight: 600;
            font-size: 18px;
        }
        /* .data_list table td{
            line-height: 2;
        } */
        
        .layui-layer-title {
            text-align: center;
            height: 42px;
            line-height: 42px;
            font-weight: 400;
            font-size: 14px;
        }
        .tooltip {
            position: relative;
            /* display: block; */
            /* color: #056dae; */
        }

        .tooltip .tooltiptext {
            display: none;
            width: 100%;
            background-color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 10px 5px 5px;
            position: absolute;
            z-index: 1;
            bottom: 80%;
            left: 0;
            border: #000 solid 1px;
            line-height: 20px;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

        .tooltip:hover .tooltiptext {
            color: #333;
            display: block;

        }
        .page .sch-btn:before{
          content: '';
          padding: 0;
        }
        ::-webkit-scrollbar {
          width: 3px;
          height: 3px;
        }
        ::-webkit-scrollbar-track {
          border-radius: 3px; /*滚动条的背景区域的圆角*/
        }
        ::-webkit-scrollbar-thumb {
          border-radius: 3px; /*滚动条的圆角*/
          background-color: #ccc; /*滚动条的背景颜色*/
        }

        ::-webkit-scrollbar-thumb:hover {
          background-color: #bbb;
        }

        ::-webkit-scrollbar-thumb:active {
          cursor: pointer;
        }

        .triangle{
          width:0;
          height:0;
          border-top:10px solid blue;
          border-left:8px solid transparent;
          border-right:8px solid transparent;
          border-bottom:0;
          /*float: left;*/
        }
    </style>

    <div class="cf main-place top_nav_list navtab_list">
        <h3 class="page_title">打款名录</h3>
       <p class="description_text">导出后可批量打款</p>
    </div>



    <div class="cf top_nav_list" style="height: 38px;">
        <!-- 高级搜索 -->
        <div class="jssearch fl cf search_list" style="margin-bottom: 0">
            <div class="input-list">
              <input type="text" name="nickname" class="" value="{:I('nickname')}" placeholder="昵称查找" style="width: 180px;"/>
            </div>

            <div class="input-list">
                <input type="text" name="realname" class="" value="{:I('realname')}" placeholder="真实姓名查找" style="width: 180px;"/>
              </div>

              <div class="input-list input-list-promote search_label_rehab">
                <select id="type" name="type" class="select_gallery" style="width:150px;">
                  <option value="">是否实名</option>
                  <option value="1" <if condition="1 eq $_GET['type']">selected=selected</if>>未实名</option>
                  <option value="2" <if condition="2 eq $_GET['type']">selected=selected</if>>已实名</option>
                </select>
              </div>

            <div class="input-list">
                <a class="sch-btn" href="javascript:;" id="search" url="{:U('customerLists','model='.$model['name'] .'&row='.I('row'),false)}">搜索</a>
            </div>

        </div>
    </div>

    <div class="butnbox" >
        <div class="butnlist jscheckbutn" style="margin-left: 2px">
          <a class='butn' id='customerExport'>导出所选记录</a>
          <a class='butn' style="background-color: red;" id='batchDel'>批量删除</a>
        </div>
    </div>

    <!-- 数据列表 -->
    <div class="data_list">
            <div class="">
                <table>
                    <!-- 表头 -->
                    <thead>
                    <tr>
                        <th><input class="check-all" type="checkbox"></th>
                        <th>openid</th>
                        <th>真实姓名</th>
                        <th>昵称</th>
                        <th>头像</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <!-- 列表 -->
                    <tbody>
                    <if condition = "empty($data)">
                        <tr>
                            <td colspan="16" class="text-center">aOh! 暂时还没有内容!</td>
                        </tr>
                    </if>
                    <notemtpy name = "data">
                        <volist name="data" id="data">
                            <tr>
                              <td ><input class="ids" type="checkbox" value="{$data['ids']}" data-verify_id="{$data['id']}"  name="ids[]"></td>
                              <td>{$data.openid}</td>
                              <td>{$data.realname}</td>
                              <td>{$data.nickname}</td>
                              <td style="display: flex;justify-content:center"><img src="{$data.avatar}" style="width: 50px;height: auto;"></td>
                              <td>{$data.create_time}</td>
                              <td>
                                  <a class="edit" data-id="{$data['id']}" data-realname="{$data.realname}">编辑</a>
                                  <if condition="$data.is_pay eq 1 ">
                                    <a class="pay" data-id="{$data['id']}" data-realname="{$data.realname}">打款</a>
                                  </if>
                                </td>
                            </tr>
                        </volist>
                    </notemtpy>
                    </tbody>
                </table>
            </div>

    </div>
    <script type="text/html" id="updateRealnameTpl">
        <div style="padding:10px 40px 30px;">
            <spend style="font-size:14px;color:#666;">
                小程序用户实名修改
            </spend>
            <table border="0" cellspacing="0" cellpadding="0" style="margin-top:30px;">
                <tr>
                    <td class="l noticeinfo" style="width:80px;">真实姓名:</td>
                    <td class="r table_radio">
                        <input type="text" id="realname" name="realname" autocomplete="off"  placeholder="请输入真实姓名" />
                    </td>
                </tr>
            </table>
            <button class="submit_btn mlspacing" id="updateStatementSubmit" type="submit" style="margin-top:30px;">
                保存
            </button>
        </div>
    </script>

    <script type="text/html" id="payTpl">
        <div style="padding:10px 40px 30px;">
            <spend style="font-size:14px;color:#666;">
                打款金额设置（单位元）
            </spend>
            <table border="0" cellspacing="0" cellpadding="0" style="margin-top:30px;">
                <tr>
                    <td class="l noticeinfo" style="width:80px;">打款金额:</td>
                    <td class="r table_radio">
                        <input type="number"  οninput="value=value.replace(/[^\w\.\/]/ig, '')" id="statement_money" name="statement_money" autocomplete="off"  placeholder="请输入打款金额" />
                    </td>
                </tr>
            </table>
            <button class="submit_btn mlspacing" id="paySubmit" type="submit" style="margin-top:30px;">
                保存
            </button>
        </div>
    </script>

    <div class="page">
        {$_page|default=''}
    </div>
</block>

<block name="script">
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
    <php>if(C('COLOR_STYLE')=='blue_color') echo '
        <link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">
        ';
    </php>
    <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">

    <script src="__STATIC__/laydate/laydate.js" type="text/javascript"></script>
    <script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
    <script src="__STATIC__/layer/extend/layer.ext.js"></script>
    <script type="text/javascript">
    </script>
    <script>
        <volist name=":I('get.')" id="vo">
            Think.setValue('{$key}',"{$vo}");
        </volist>
        $(".select_gallery").select2();
    </script>
    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('customerLists')}");

        $(function(){
            $(".edit").on("click",function(){
                var html = $("#updateRealnameTpl").html();
                var orginData = $(this).data();
                
                layer.open({
                    type: 1,
                    title: "编辑",
                    maxWidth:720,
                    closeBtn: 1,
                    shadeClose: true,
                    content: html,
                    success:function(){
                        $("#realname").val(orginData.realname);
                        $("#updateStatementSubmit").off("click");
                        $("#updateStatementSubmit").on("click",function() {
                            var realname= $("#realname").val();
                            $.ajax({
                                type: 'post',
                                url: "{:U('updateRealname')}",
                                data:{realname:realname,id:orginData.id},
                                success: function(data) {
                                    if(data.success){
                                        layer.alert('修改成功',function(){
                                            window.location.reload();
                                        });
                                    }else{
                                        layer.alert('修改失败');
                                    }
                                },
                                error:function(){
                                    layer.alert("网络错误或超时");
                                    return false;
                                }
                            });
                        });

                    }
                });
            })

            $(".pay").on("click",function(){
                var html = $("#payTpl").html();
                var orginData = $(this).data();
                layer.open({
                    type: 1,
                    title:'向【'+orginData.realname+'】打款',
                    maxWidth:720,
                    closeBtn: 1,
                    shadeClose: true,
                    content: html,
                    success:function(){
                        $("#statement_money").val(0);
                        $("#paySubmit").off("click");
                        $("#paySubmit").on("click",function() {
                            var statement_money= $("#statement_money").val();
                            $.ajax({
                                type: 'post',
                                url: "{:U('addPayList')}",
                                data:{statement_money:statement_money,id:orginData.id},
                                success: function(data) {
                                    if(data.status ==1){
                                        layer.alert('添加成功',function(){
                                            window.location.href = "{:U('lists')}";
                                        });
                                    }else{
                                        layer.alert(data.msg);
                                    }
                                },
                                error:function(){
                                    layer.alert("网络错误或超时");
                                    return false;
                                }
                            });
                        });

                    }
                });
            })

           
          $("#customerExport").click(function () {
            var flag = false;
            var text = $("input:checkbox[name='ids[]']:checked").map(function(index,elem) {
              return $(elem).data("verify_id");
            }).get();

            if(text.length < 1){
              layer.msg("<font style='color:white'>" + '请先选择要导出的打款单' + "</font>");
              return;
            }
            _export();
            function _export(){
              layer.alert("<font style='color:#333'>"+"指令执行成功,等待浏览器响应中，注意打款金额默认为元,打款模板的表头不允许修改"+ "</font>");
              var id = text.join(",");
              var url ="{:U('customerExport')}"+"&ids="+id;
              var iframeExcel = "<iframe src='"+url+"' width='0px' height='0px' style='z-index:-1;position: absolute;top: -999999px;'></iframe>"
              $("body").append(iframeExcel);
            }
          });

          $("#batchDel").click(function () {
            var flag = false;
            var text = $("input:checkbox[name='ids[]']:checked").map(function(index,elem) {
              return $(elem).data("verify_id");
            }).get();

            if(text.length < 1){
              layer.msg("<font style='color:white'>" + '请先选择要删除的数据' + "</font>");
              return;
            }
            layer.confirm('【警告】删除后将不可回退，请慎重选择', {
                btn: ['确认','取消'],
                title:false
            }, function(index){
                layer.close(index);
                _del();
            });
            function _del(){
                var id = text.join(",");
                $.ajax({
                    type: "POST",
                    url: "{:U('batchDel')}",
                    dataType: 'json',
                    async: true,
                    data: {ids:id},
                    success:function(data){
                        if(data.status==1){
                            layer.msg("<font style='color:white'>" + data.msg + "</font>");
                            setTimeout(function(){
                                window.location.reload();
                            },1500);
                        }else{
                            layer.msg("<font style='color:white'>" + data.msg + "</font>");
                            return false;
                        }
                    }
                });
            }
          });

          $("#search").click(function(){
            var url = $(this).attr('url');
            var query  = $('.jssearch').find('input').serialize();
            query  += "&"+$('.jssearch').find('select').serialize();
            query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
            query = query.replace(/^&/g,'');
            if( url.indexOf('?')>0 ){
                url += '&' + query;
            }else{
                url += '?' + query;
            }
            window.location.href = url;
          });
          //回车自动提交
          $('.jssearch').find('input').keyup(function(event){
              if(event.keyCode===13){
                  $("#search").click();
              }
          });
    
        })


    </script>
</block>