qy-platform/Application/Payment/View/ExcelPayment/showPayment.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>

<style>


    .tabcon1711 table {
        width: 480px;
    }

    table {

        margin: auto;
    }

    .hidebox {
        display: none;
    }

    .r {
        width: 300px;
    }

    .l {
        width: 180px;
    }

    .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;
    }

    .input-list,
    .i_list {
        float: left;
        margin: 0;
    }
    #sendSasfeCode {
        border-radius:3px;
        width:100px;
        cursor:pointer;
        border:1px solid;
        top:0;
        right:0;
        height:40px;
        text-align: center;
        line-height: 40px;
    }
    .g-btntn{
        border-color: grey;
        color: grey;
    }
    .g-btn{
        border-color: #2697FF;
        color: #2697FF;
    }
</style>

    <div class="cf main-place top_nav_list navtab_list">
        <h3 class="page_title">批量打款</h3>
    <p class="description_text">确认打款前请先确认账户余额是否足够</p>
    </div>
        
    <div class="data_list box_mt">
        <div class="">
            <table>
                <thead>
                    <tr>
                        <th style="border-right: solid 1px #b6cad2;">序号</th>
                        <th style="border-right: solid 1px #b6cad2;">合作公司</th>
                        <th style="border-right: solid 1px #b6cad2;">支付宝真实名称</th>
                        <th style="border-right: solid 1px #b6cad2;">支付宝账号</th>
                        <th style="border-right: solid 1px #b6cad2;">批次号</th>
                        <th style="border-right: solid 1px #b6cad2;">金额(元)</th>
                        <th style="border-right: solid 1px #b6cad2;">备注</th>
                        <th style="border-right: solid 1px #b6cad2;">打款备注</th>
                    </tr>
                </thead>
                <tbody id="statementShow">
                    <foreach name="CompanyInfo" item="vo" >
                            <tr>
                                <td>{$key-0+1}</td>
                                <td>{$vo.company_name}</td>
                                <td>{$vo.company_info.ali_user}</td>
                                <td>{$vo.company_info.ali_account}</td>
                                <td>{$vo.batch_num}</td>
                                <td>{$vo.statement_money}</td>
                                <td>{$vo.remark}</td>
                                <td><input type="text" class="txt paymentset" data-id="{$vo.id}" data-pool="{$vo.pool_id}" name="remark" value="" placeholder="打款备注"></td>
                            </tr>
                        
                    </foreach>
                    <tr>
                        <td colspan="2">合计:</td>
                        <td colspan="6">打款总金额:&nbsp;{$count['statement_money']} <span <if condition="$count['statement_money'] gt $money ">style="color: red;"</if>>&nbsp;&nbsp;&nbsp;&nbsp;账户金额:&nbsp;{$money}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div style="display: flex;padding:20px 10px;line-height: 40px;justify-content:center;">
        <input name="verify" type="text" class="login_input verify" value="" placeholder="请填写验证码"/>
        <div id="sendSasfeCode" class="g-btn" style="margin-left: 20px;">获取验证码</div>
        <div style="margin-left: 20px;">接收验证码手机:{$mobile}</div>
    </div>

    <div class="search_list" style="display:flex;justify-content:flex-end;width:100%;">
        <div class="input-list" style="margin-left: 30px;float: right;">
            <a class="sch-btn" href="javascript:;" id="setPayment" style="width: 150px;">确认打款</a>
        </div>
    </div>

    <div style="width: 100vw;height: 100vh;padding: 0;position: absolute;top: 0;z-index: 9999;display: none;" id="creat_msg">
        <div class="layui-layer layui-layer-dialog layui-layer-border layui-layer-msg layui-layer-hui" 
            type="dialog" times="1" showtime="50000" contype="string" style="z-index: 19891015; top:30%; left:45%;">
            <div class="layui-layer-content" style="padding: 15px 0 5px;font-size: 20px;font-weight: 600;">执行进度</div>
            <div id="tip_msg" class="layui-layer-content">开始时间与结束时间都不允许为空</div>
            <div class="layui-layer-content" style="padding: 5px 10px 15px;font-size: 10px;color: #BBB;">TIP:未执行完成之前请勿刷新或关闭此页面</div>
            <span class="layui-layer-setwin"></span>
        </div>
    </div>

</block> 
<block name="script">
    <script>
        var DATA={};
        // $("#creat_msg").show();
        highlight_subnav("{:U('lists')}");

        var MSG={
            showmsg:function(str){
                $("#creat_msg").show();
                $("#tip_msg").html(str);
            },
            hidemsg:function(){
                $("#creat_msg").hide();
                $("#tip_msg").html('');
            }
        }
        var COMPARE={
            publiucAjax:function(url,senddata,callback){
                $.ajax({
                    type: 'post',
                    url: url,
                    data:senddata,
                    success: function(data) {
                        if(data.success){
                            callback(data.data);
                        }else{
                            MSG.hidemsg();
                            layer.alert(data.error);
                            return false;
                        }
                        
                    },
                    error:function(){
                        MSG.hidemsg();
                        layer.alert("网络错误或超时");
                        return false;
                    }
                });
            },
            //验证验证码
            checkVerify:function(callback){
                MSG.showmsg("验证码验证中....");
                COMPARE.publiucAjax("{:U('checkVerify')}",{verify:DATA.verify},function(data){
                    MSG.showmsg("验证码验证通过，开始进行打款 [0/"+DATA.datacount+"] ......");
                    callback();
                });
            },
            //打款
            doPayment:function(callback){
                var senddata = DATA.data[(DATA.now-1)];
                console.log(senddata);
                COMPARE.publiucAjax("{:U('doPayment')}",senddata,function(){
                    MSG.showmsg("开始进行打款 ["+DATA.now+"/"+DATA.datacount+"] ......");
                    DATA.now ++;
                    if( DATA.now > DATA.datacount){
                        callback();
                    }else{
                        COMPARE.doPayment(callback)
                    }
                   
                });

            }

        }

        var r = function(i, t) {
            if (i>0) {
                var r = 60;
                e='#sendSasfeCode';
                $(e).removeClass('g-btn').addClass('g-btntn');
                var a = setInterval(function() {
                    r--;
                    $(e).text(r + '秒');
                    0 == r && ($(e).removeClass('g-btntn').addClass('g-btn'),
                        $(e).text('获取验证码'),
                        clearInterval(a))
                },1000)
            }
        };
        $('#sendSasfeCode').on('click',function() {
            if ($(this).hasClass('g-btntn')) {
                return false;
            }
            var phone = "{$mobile}";
            $.ajax({
                type:'post',
                dataType:'json',
                data:'phone='+phone,
                url:'{:U("Public/telsafecode")}',
                success:function(data) {
                    if (data.status ==1) {
                        r(1);
                    } else {
                        alert(data.msg);
                    }
                },
                error:function() {
                    alert('服务器开小差了，请稍后再试。');
                }
            });
            
        });
        $("#setPayment").on("click",function(){
            MSG.showmsg("程序初始化中...");
            var verify = $("input[name='verify']").val();
            if($.trim(verify) == ''){
                MSG.hidemsg();
                alert('验证码不能为空');
                return false;
            };
            DATA.data=[];
            DATA.now=1;
            DATA.verify=verify;
            var text = $("input[name='remark']").map(function(index,elem) {
                 var t = {};
                 t.id = $(elem).data("id");
                 t.remark = $(elem).val();
                 DATA.data.push(t);
            });
            DATA.datacount = DATA.data.length;
            //执行流程
            COMPARE.checkVerify(function(){
                COMPARE.doPayment(function(){
                    MSG.showmsg("打款结束，执行跳转中......");
                    setTimeout(function(){
                        window.location.href = "{:U('lists')}";
                    },2000)
                })
            });
        })
        function cancelPoolAjax(opurl,senddata){
                //执行
                $.ajax({
                    type: "POST",
                    url: opurl,
                    dataType: 'json',
                    async: false,
                    data: senddata,
                    success:function(data){
                        if(data.status==1){
                            layer.msg("<font style='color:white'>" + data.info + "</font>");
                            setTimeout(function(){
                                window.location.reload();
                            },1500);
                        }else{
                            layer.msg("<font style='color:white'>" + data.info + "</font>");
                            return false;
                        }
                    }
                });
            }
        
        
    </script>
</block>