caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>申请付款</title>
    <meta name="decorator" content="default"/>
    <style type="text/css">
        .table th {
            text-align: center
        }

        .table td {
            text-align: center
        }

        .pay-table th {
            background: #f9f9f9
        }

        .pay-table tr:first-child th {
            background: #eee !important
        }

        .pay-table td {
            background: #fff !important
        }

        input[type="checkbox"]::before {
            content: '\a0';
            display: inline-block;
            vertical-align: .2em;
            width: .8em;
            height: .8em;
            margin-right: .2em;
            border-radius: .2em;
            text-indent: .15em;
            line-height: .65
        }

        .pay-more-func span:first-child {
            margin-right: 6px
        }

        .pay-more-func span:hover {
            color: #7aa9c3
        }

        .tips-popup-content p {
            text-align: center;
            padding: 80px;
            font-size: 20px
        }

        .revise-popup-content h4, .tips-popup-content h4 {
            padding-left: 10px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px
        }

        .revise-popup-content div {
            margin-top: 7px;
            text-align: center
        }

        .revise-popup-content label {
            width: 70px;
            text-align: right;
            vertical-align: text-bottom
        }

        .revise-popup-content button {
            width: 80px;
            height: 30px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px
        }

        .revise-popup-content > div:nth-of-type(4) > span:first-child {
            margin-left: -104px
        }

        .revise-popup-content > div:nth-of-type(4) > span:last-child {
            margin-left: 30px
        }

        .revise-popup-content > div:nth-of-type(4) > span span {
            margin-left: 10px
        }

        .revise-popup-content > div:last-child {
            text-align: center;
            margin-top: 20px
        }

        .revise-popup-content input {
            width: 100px;
            margin-bottom: 0px
        }

        .form-search label {
            width: 80px;
            text-align: left;
            margin-top: 12px
        }

        .remark-title span {
            color: red
        }

        .ul-form label {
            width: 90px;
            text-align: left;
            margin-top: 15px
        }

        .pay-status label {
            margin-left: 0
        }

        .pay-status label:first-child {
            margin-left: 10px
        }
        .controls{
            font-size: 0;
        }
        .controls .conList{
            display: inline-block;
            margin-right: 15px;
        }
        .conList .btn:nth-of-type(1){
            margin-left: 25px;
        }
        .upload-content {
            margin-top: -70px;
            display: inline-block;
        }
        .upload-content .conList .btn:nth-of-type(1) {
            width: 90px;
            height: 100px;
            border: 2px solid #eee;
            background: #fff;
            position: relative;
        }
        .upload-content .conList .btn:nth-of-type(1)>div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
        }
        .upload-content .conList .btn:nth-of-type(1) span {
            font-size: 35px;
        }
        .upload-content .conList .btn:nth-of-type(1) h5 {
            color: #666;
        }
        .cancel-upload {
            background: transparent;
            border: none;
            box-shadow: none;
            position: relative;
            top: -38px;
            left: -25px;
            cursor: pointer;
            z-index: 100;
        }
        .upload-content .conList ol li {
            width: 114px;
            min-height: 80px;
            text-align: center;
            background: #fff;
            position: relative;
            top: 120px;
            margin-left: 2px;
        }
        .hide-pic {
            display: none !important;
        }
        .refund-methods{height:auto !important}
        .refund-methods>div{display:inline-block}
        .refund-methods label{vertical-align:top;line-height:50px}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#inputForm").validate({
                ignore:"",
                submitHandler: function (form) {
                    var type = $("input[name='type']:checked").val();
                    var differencePrice = $("#differencePrice").val();
                    var waitPayShop = ${payShopDifference.waitPayShop};
                    if (type == 2 && differencePrice > waitPayShop) {
                        var refundCheckbox = $('.refund-checkbox:checked');
                        var inputTotalAmount = 0;
                        refundCheckbox.each(function () {
                            var wrapper = $(this).closest('.refund-wrapper'),
                                thisAmount = wrapper.find('.refund-amount');
                            inputTotalAmount += Number(thisAmount.val());
                            console.log('===', inputTotalAmount);
                        });
                        if (Number(differencePrice - inputTotalAmount - waitPayShop) > 0.1) {
                            alertx("退款金额应等于差价与待付金额的差值");
                            return false;
                        }
                    }
                    if (type == 1 && ${payShopDifference.payStatus eq 3}){
                        var bankAccountName = $("#bankAccountName").val();
                        if (bankAccountName == '' || bankAccountName == null){
                            alertx("开户名不能为空");
                            return false;
                        }
                        var bankAccount = $("#bankAccount").val();
                        if (bankAccount == '' || bankAccount == null){
                            alertx("账号不能为空");
                            return false;
                        }
                        var bankName = $("#bankName").val();
                        if (bankName == '' || bankName == null){
                            alertx("开户行不能为空");
                            return false;
                        }
                        var payShopCheckbox = $('.payShop-checkbox:checked');
                        var totalAmount = 0;
                        payShopCheckbox.each(function () {
                            if ($(this).val() == 1){
                                totalAmount += Number($('input[name=transferPayFee]').val());
                            }
                            if ($(this).val() == 2){
                                totalAmount += Number($('input[name=balancePayFee]').val());
                            }
                        });
                        if (totalAmount != differencePrice){
                            alertx("转账支付金额与欠款抵扣金额之和不等于差价，不能提交");
                            return false;
                        }
                    }
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="${ctx}/order/cmPayShop">付款列表</a></li>
    <li><a href="${ctx}/shopOrder/payOrderList?operatingMode=1">申请付款</a></li>
    <li class="active"><a href="${ctx}/order/cmPayShop/differencePriceForm?shopOrderId=${payShopDifference.shopOrderId}">供应商差价</a></li>
</ul>
<form:form id="inputForm" modelAttribute="payShopDifference" action="${ctx}/order/cmPayShop/saveDifferencePrice" method="post" class="form-horizontal">
    <input type="hidden" id="ShopReceiptStatus" value="${payShopDifference.shopReceiptStatus}">
    <form:hidden path="shopOrderId"/>
    <br>
    <div class="control-group">
        <label class="control-label">差价类型：</label>&nbsp;&nbsp;&nbsp;
            <input type="radio" name="type" value="1" ${(payShopDifference.differencePrice > 0 && payShopDifference.type eq 2) ? 'disabled="disabled"':'checked="true"'} onclick="showInfo()">成本上升&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="type" value="2" ${(payShopDifference.differencePrice > 0 && payShopDifference.type eq 1) ? 'disabled="disabled"':'checked="true"'} onclick="showInfo()">成本降低&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="/static/images/info.jpg" style="height: 20px;width: 20px" onclick="alertx('“成本上升”指成本变高了，按旧成本付款的话相当于会少付供应商，\n'+
'在已不能修改成本的情况下，通过补差价的方式来弥补；\n'+
'\n'+
'“成本降低”指成本变低了，按旧成本付款的话相当于会多付供应商，\n'+
'在已不能修改成本的情况下，通过退差价的方式来弥补。\n'+
'\n'+
'特别注意：一个子订单可以申请多次供应商差价，但是每次只能选择同一种差价类型。若要修改差价类型，需要将该子订单的所有供应商差价付款单取消后才能操作')">
    </div>
    <div class="control-group">
        <label class="control-label"><font color='red'>*</font>付款单名称：</label>
        <div class="controls">
            <form:input path="name" htmlEscape="false" maxlength="100" class="input-xlarge required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label"><font color='red'>*</font>差价金额：</label>
        <div class="controls">
            <input type="number" id="differencePrice" required name="differencePrice" onchange="showInfo()"/>
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（目前子订单待付金额为￥${payShopDifference.waitPayShop}）</label>
        </div>
    </div>
    <c:if test="${payShopDifference.payStatus eq 3}">
        <div id="payShopShow">
            <div class="control-group">
                <label class="control-label"><font color='red'>*</font>付款方式：</label>
                <input type="checkbox" class="payShop-checkbox" value="1" checked>转账支付
            </div>
            <div style="margin-left: 80px">
                <div class="control-group">
                    <label class="control-label"><font color='red'>*</font>转账金额：</label>
                    <div class="controls">
                        <input type="number" name="transferPayFee" value="" onchange="changeShouldPay(this)"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"><font color='red'>*</font>开户名：</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <form:input path="bankAccountName" id="bankAccountName" htmlEscape="false" maxlength="100" class="input-xlarge"/>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><font color='red'>*</font>账号：</label>
                    <form:input path="bankAccount" id="bankAccount" htmlEscape="false" maxlength="100" class="input-xlarge"/>
                </div>
                <div class="control-group">
                    <label class="control-label"><font color='red'>*</font>开户行：</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <form:input path="bankName" id="bankName" htmlEscape="false" maxlength="100" class="input-xlarge"/>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><font color='red'>*</font>账户类型：</label>
                    <form:select path="bankType" class="select-ele input-xlarge">
                        <form:option value="0" label="公账"/>
                        <form:option value="1" label="私账"/>
                    </form:select>
                </div>
            </div>
            <div style="margin-left: 160px">
                <div class="control-group">
                    <input type="checkbox" class="payShop-checkbox" value="2">欠款抵扣
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总欠款：<span id="rebateAmount">${payShopDifference.rebateAmount}</span>，
                可用抵扣欠款：<span id="ableRebateAmount">${payShopDifference.ableRebateAmount}</span>，
                使用：<input type="number" value="${payShopDifference.balancePayFee}" name="balancePayFee" class="used-amount">，
                剩余：<span id="remainingBalance">${payShopDifference.ableRebateAmount}</span>
            </div>
        </div><br>
    </c:if>
    <div class="control-group" id="refundShow" hidden>
        <div class="refund-methods">
            <label class="control-label">接收退款方式：</label>
            <div>
                <div class="refund-wrapper">
                    <input type="checkbox" class="refund-checkbox" name="refundWay" value="1" checked>线下转账&nbsp
                    <select name="refundType" id="refundType">
                        <option value="1">建设银行7297</option>
                        <option value="2">中信银行0897</option>
                        <option value="3">中信银行7172</option>
                        <option value="4">广发银行0115</option>
                        <option value="5">广发银行5461</option>
                        <option value="6">虚拟银行0000</option>
                    </select>
                    <input type="number" name="refundAmount" class="refund-amount" value="0.00">
                </div><br>
                <div class="refund-wrapper">
                    <input type="checkbox" class="refund-checkbox" name="refundWay" value="2">欠款账簿
                    <input type="number" name="refundBalanceAmount" class="refund-amount" value="0.00">
                </div><br>
                <font color="red">注意:两种退款方式金额之和应该等于差价金额与待付金额的差值</font>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label"><font color='red'>*</font>备注内容：</label>
        <div class="controls">
            <textarea type="text" name="remark" placeholder="请详细说明造成付供应商差价的原因" style="position: relative;height: 100px; width: 450px;" maxlength="500" required ></textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">图片：</label>
        <div class="controls upload-content" style="margin: -91px 0px 0px 16px;" id="remarkImageBox">
            <div class="conList">
                <form:hidden id="remarkImage1" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage1" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage2" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage2" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage3" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage3" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage4" path="" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage4" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage5" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage5" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage6" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage6" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage7" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage7" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList hide-pic">
                <form:hidden id="remarkImage8" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage8" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList  hide-pic">
                <form:hidden id="remarkImage9" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage9" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="conList  hide-pic">
                <form:hidden id="remarkImage10" path="remarkImages" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                <sys:ckfinder input="remarkImage10" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
            </div>
        </div>
    </div>
    <div class="form-actions">
        <input id="btnSubmit" style="margin-left: 150px" class="btn btn-primary" type="submit" value="确认"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="btnCancel" class="btn" type="button" value="返回" onclick="history.go(-1)"/>
    </div>
</form:form>
<sys:message content="${message}"/>
<script>

    //图片初始化
    $(function () {
        $('.upload-content .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
        $('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
        $('.upload-content .conList').find('.cancel-upload').hide();
        var observeEle = document.getElementsByClassName('upload-content')[0];
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        var MutationObserverConfig={
            childList: true,
            subtree: true,
            characterData: true
        };
        var observer = new MutationObserver(function(mutations){
            $.each(mutations, function(index,item) {
                if (item.type === 'childList') {
                    // 在创建新的 element 时调用
                    var target = $(item.target),
                        thisWrapper = target.closest('.conList'),
                        nextEle = thisWrapper.next();
                    thisWrapper.find('li').css('z-index',99);
                    thisWrapper.find('.cancel-upload').show();
                    if(nextEle.hasClass('hide-pic')) {
                        nextEle.removeClass('hide-pic');
                    }
                }
            })
        });
        observer.observe(observeEle,MutationObserverConfig);

        $('body').on('click','.upload-content li',function() {
            var index = $(this).closest('.conList').index() + 1,
                str = 'remarkImage'+index+'FinderOpen';
            eval(str+'()');
        });
        $('body').on('click', '.cancel-upload',function() {
            var wrapper = $(this).closest('.conList');
            wrapper.find('li').css('z-index','-1');
            wrapper.find('input').val('');
            $(this).hide();
            if ($('.cancel-upload:visible').length < 9) {
                wrapper.addClass("hide-pic");
            }else{
                wrapper.removeClass("hide-pic");
            }
            wrapper.parent().append(wrapper.clone());
            wrapper.remove();
            $(".conList").each(function(i,ele){
                if($(ele).find("input.input-xlarge").val()){
                    $(ele).next().removeClass("hide-pic")
                }
            })
        });
        $(window).on("load", function(){
            setTimeout(function(){
                $("#remarkImageBox").find("input.input-xlarge").each(function(i,ele){
                    if($(ele).val()){
                        $(ele).next().find("li").css("z-index","99");
                        $(ele).parents(".conList").find(".cancel-upload").show();
                        $(ele).parents(".conList").next().removeClass("hide-pic")
                    }
                })
            },500);
        });

        //使用余额<总余额
        $('body').on('input propertychange','.used-amount',function() {
            var thisEle = $(this),
                thisVal = Number(thisEle.val()),
                totalAmount = Number($('#differencePrice').val()),
                ableRebateAmount = Number($('#ableRebateAmount').text());
            if (totalAmount === 0){
                alertx("请输入差价金额");
                thisEle.val(0);
            }else if (thisVal > ableRebateAmount || thisVal > totalAmount){
                thisEle.val(0);
            }else {
                $('#remainingBalance').text(ableRebateAmount - thisVal);
            }
        });
        showInfo();
    });

    /**
     * @param obj
     * jquery控制input只能输入数字
     */
    function onlynum(obj) {
        obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
    }

    function showInfo() {
        debugger
        var type = $("input[name='type']:checked").val();
        var ShopReceiptStatus=$('#ShopReceiptStatus').val();
        console.log(ShopReceiptStatus)
        if (type == 1){
            $("#refundShow").hide();
            $("#payShopShow").show();
        } else if(ShopReceiptStatus!=2){
            $("#payShopShow").hide();
            var differencePrice = $("#differencePrice").val();
            var waitPayShop = ${payShopDifference.waitPayShop};
            if (differencePrice > waitPayShop) {
                $("#refundShow").show();
            }else {
                $("#refundShow").hide();
            }
        }
    }
</script>
</body>
</html>