pgfqe6ch8/app/views/trainings/pay.html.erb

<form action="/trainings/update_payinfo" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
  <div style="padding-top: 10px">
    <div class="showPanel" id="payTypeLine" NavShow>
      <p class="clearfix pr">
        <label>支付方式</label>
        <span class="mr5" style="margin-right: 24px;" id="payTypeName"><%= @training.training_payinfo.pay_type.to_i == 3 ? "线下支付" : "微信支付" %></span>
        <i class="iconfont icon-gengduo1 rightArrow" style="color: #323232;right: 4px"></i>
      </p>
      <div class="<%= @training.training_payinfo.pay_type.to_i == 3 ? "" : "none" %> mt5" id="payInfos">
        <div class="payInfo df">
            <span class="fl accountIcon">
              <i class="iconfont icon-yinhangqia blue"></i>
              <p>对公账号</p>
            </span>
          <div class="flex1 accountRight">
            <li class="df">
              <label class="fl">账&nbsp;&nbsp;&nbsp;号：</label>
              <p class="fl flex1 break-word">1901008009200085901</p>
            </li>
            <li class="df">
              <label class="fl">户&nbsp;&nbsp;&nbsp;名：</label>
              <p class="fl flex1">长沙智擎信息技术有限公司</p>
            </li>
            <li class="df">
              <label class="fl">开户行：</label>
              <p class="fl flex1">工商银行长沙市岳麓山支行</p>
            </li>
          </div>
        </div>
        <p class="payTip">完成线下支付后，请将支付截图粘贴到备注中，以便财务审核</p>
      </div>
    </div>
    <div class="infoBar mb10">
      <p class="clearfix" id="billLine" NavShow>
        <span class="grey fl">发票</span>
        <label class="fr" id="billDemand" status=2 style="margin-right: 24px;">不需要</label>
        <i class="iconfont icon-gengduo1 rightArrow" style="color: #323232;right: 14px"></i>
      </p>
      <p class="clearfix" id="billRemark">
        <span class="grey fl">发票内容</span>
        <input type="text" name="invoice_content" class="right_input"
               value="<%#=  @training.training_payinfo.invoice_content.presence || '会议注册费' %>"/>
      </p>
    </div>
    <div class="infoBar mb10">
      <p>备注</p>
      <textarea class="remarkAccount" name="info" id="info"><%= @training.training_payinfo.info %></textarea>
      <!--图片上传-->
      <%= render :partial => 'upload_img', :locals => {:training => @training}  %>
    </div>
    <div class="infoBar mb10">
      <p>费用明细</p>
      <p class="break-word justify moneyDetail">大数据培训缴费</p>
      <div style="text-align: right">
        <p class="inline">
          <input type="hidden" name="enlistN" value="<%= @training.training_payinfo.num %>"/>
          <span class="fl mr10 font-12"><span id="enlistNum"><%= @training.training_payinfo.num %></span>人</span>
          <span class="fl font-16">
            <a href="javascript:void(0)" class="minusNum"><i class="iconfont icon-default sky_blue font-18"></i></a>
            <span class="red mr5">￥<span id="enlistMoney"><%= @pay_fee * @training.training_payinfo.num %></span></span>
            <a href="javascript:void(0)" class="plusNum"><i class="iconfont icon-roundaddfill blue font-18"></i></a>
          </span>
        </p>
      </div>
    </div>
    <p style="height: 44px;"></p>
    <div class="bottomBtn <%= @training.training_payinfo.pay_type.to_i ==3 ? "" : "none" %>" id="offlinePaySubmitBtn">
      <a href="<%= enroll_training_path(id: 'bigdata_hnjcxy_2019') %>" class="leftbtn">返回</a>
      <a href="javascript:void(0)" class="rightbtn" id="submitFormBtn">提交</a>
    </div>

    <div class="bottomBtn <%= @training.training_payinfo.pay_type.to_i ==3 ? "none" : "" %>" id="paySubmitBtn">
      <a href="<%= enroll_training_path(id: 'bigdata_hnjcxy_2019') %>" class="leftbtn">返回</a>
      <a href="javascript:void(0)" class="rightbtn" id="payBtn">立即支付</a>
    </div>

  </div>

  <!--发票<div class="billDownNav downNav">
    <div class="pr billPanel">
      <p class="clearfix mb10">
        <span class="fl billBigTitle">发票抬头</span>
        <a href="javascript:void(0)" class="fr" id="closeTypeNav"><i class="iconfont icon-guanbi billClose"></i></a>
      </p>
      <ul class="clearfix billType">
        <li>单位</li>
        <li>个人</li>
        <li class="active">不需要</li>
      </ul>
      <p class="clearfix needWrite none">
        <span class="fl billSmallTitle mb10">发票抬头</span>
      </p>
      <ul class="clearfix needWrite none">
        <input placeholder="请填写公司单位名称" name="invoice_title" class="billInput billUnit"/>
        <input placeholder="请填写税务登记号" name="invoice_no" class="billInput taxNumber"/>
      </ul>
      <p style="height:48px;"></p>
      <a href="javascript:void(0)" class="submitBillInfo" id="commonSubmit" onclick="submitBillInfo();">确定</a>
    </div>
  </div>-->

  <div class="payTypeDownNav downNav">
    <div class="pr billPanel">
      <p class="clearfix mb10">
        <span class="fl billBigTitle">支付方式</span>
        <a href="javascript:void(0)" class="fr" id="closePayNav"><i class="iconfont icon-guanbi billClose"></i></a>
      </p>
      <ul class="clearfix payType">
        <li class="<%= @training.training_payinfo.pay_type.to_i ==3 ? "" : "active" %>">微信支付</li>
        <li class="<%= @training.training_payinfo.pay_type.to_i ==3 ? "active" : "" %>">线下支付</li>
      </ul>
    </div>
  </div>
  <input type="hidden" id="pay_type" name="pay_type" value="<%= @training.training_payinfo.pay_type.presence || 1 %>">
</form>

<!--<script src="https://cdn.jsdelivr.net/npm/eruda" type="text/javascript"></script>-->
<script>
    $(function () {
        //
        // eruda.init();

        // var userInfo = {
        //     name: '<%= @training.name %>',
        //     school: '<%= @training.school %>',
        //     //支付方式，默认为0
        //     // 1 微信支付
        //     // 2 支付宝支付
        //     // 3 银行卡支付
        //     payType: <%#= @training.training_payinfo.pay_type.to_i %>,
        //
        //     //发票抬头
        //     //为空则代表不需要发票
        //     invoiceTitle: '<%#= @training.training_payinfo.invoice_title %>',
        //
        //     //税号
        //     invoiceNo: '<%#= @training.training_payinfo.invoice_no %>'
        // };
        //点击弹出发票弹框
        aboutBillType(userInfo);

        //点击弹出支付方式弹框
        aboutPayType();

        //初始化发票类型
        InitBill(userInfo);

        //切换发票类型
        $(".billType li").on("click", function () {
            $(".billType li").removeClass("active");
            $(this).addClass("active");
            billTypeShowFun(parseInt($(this).index()),userInfo);
        })
        //关闭弹窗
        $(".billClose").on("click", function () {
            hideNav($(".downNav"));
        });

        //延迟支付，直接提交
        $('#delayPayBtn').on('click', function () {
            if($("#billDemand").attr("status")==2){
                $(".billInput").val('');
            }
            alert("报名成功，请尽快支付");
            $('form').submit();
        });

        //立即支付
        $('#payBtn').on('click', function () {

            if($("#billDemand").attr("status")==2){
                $(".billInput").val('');
            }
            var postData = $('form').serialize();
            postData += '&js=true'
            console.log(postData);

            $.ajax({
                url: '<%= update_payinfo_trainings_path %>',
                type: 'POST',
                data: postData
            }).done(function (data) {
                console.log(data);
                if (data.status != 0) {
                    alert(data.msg);
                    return;
                }

                var config = data.data;
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId": config.appid,     //公众号名称，由商户传入
                        "timeStamp": "" + config.time,         //时间戳，自1970年以来的秒数
                        "nonceStr": config.nonce, //随机串
                        "package": "prepay_id=" + config.prepay_id,
                        "signType": "MD5",         //微信签名方式：
                        "paySign": config.sign //微信签名
                    },
                    function (res) {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            setTimeout(function () {
                                window.location.href = "/trainings/bigdata_hnjcxy_2019/result";
                            }, 500);
                        } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {

                        } else if (res.err_msg == 'get_brand_wcpay_request:fail') {
                            alert("支付失败");
                        } else {
                            alert("支付失败：" + res.err_msg);
                        }
                        console.log(res);
                    }
                );

            });
        });

        //线下支付提交
        $('#submitFormBtn').on('click', function () {
            if($("#billDemand").attr("status")==2){
                $(".billInput").val('');
            }
            $('form').submit();
        });
        //上传头像
        InitPhoto();

        //加减报名人数
        $(".minusNum").click(function(){
            var num=parseInt($("#enlistNum").html());
            var money=parseFloat($("#enlistMoney").html()).toFixed(2);
            if(num>1){
                money=parseFloat(parseFloat(money)-parseFloat(money)/parseFloat(num)).toFixed(2);
                num=num-1;
                $("#enlistNum").html(num);
                $("#enlistMoney").html(money);
                if(num==1){
                    $(".icon-default").removeClass("blue").addClass("sky_blue");
                }
                $("input[name='enlistN']").val(num);
            }
        })
        $(".plusNum").click(function(){
            var num=parseInt($("#enlistNum").html());
            if(num==1){
                $(".icon-default").removeClass("sky_blue").addClass("blue");
            }
            var money=parseFloat($("#enlistMoney").html()).toFixed(2);
            money=parseFloat(parseFloat(money)+parseFloat(money)/parseFloat(num)).toFixed(2);
            num=num+1;

            $("#enlistNum").html(num);
            $("#enlistMoney").html(money);
            $("input[name='enlistN']").val(num);
        })
    })
    //页面加载时，初始化发票类型
    function InitBill(userInfo){
        var index=2;
        $("#billDemand").html("不需要").attr("status",2);
        if(userInfo.invoiceTitle != "" && userInfo.invoiceNo != ""){
            index=0;
            $("#billDemand").html("单位").attr("status",0);
        }
        if(userInfo.invoiceTitle != "" && userInfo.invoiceNo == ""){
            index=1;
            $("#billDemand").html("个人").attr("status",1);
        }
        $(".billType li").removeClass("active");
        $(".billType li").eq(index).addClass("active");
        billTypeShowFun(index,userInfo);
    }
    function billTypeShowFun(index,userInfo){
        if (parseInt(index) == 0) {
            $(".needWrite").removeClass("none");
            $(".billUnit").attr("placeholder", "请填写公司单位名称").val(userInfo.school);
            $(".taxNumber").removeClass("none");
        } else if (parseInt(index) == 1) {
            $(".needWrite").removeClass("none");
            $(".billUnit").attr("placeholder", "请填写姓名").val(userInfo.name);
            $(".taxNumber").addClass("none");
        } else {
            $(".needWrite").addClass("none");
            $(".billInput").val('');
        }
    }

    //点击弹出发票类型弹框
    function aboutBillType(userInfo){
        var bill = $("#billLine");
        var billNav = $(".billDownNav");
        showNav(bill, billNav, "down");
    }

    //点击弹出支付方式弹框
    function aboutPayType() {
        var payType = $("#payTypeLine");
        var payTypeNav = $(".payTypeDownNav");
        showNav(payType, payTypeNav, "down");


        //切换支付方式
        $(".payType li").on("click", function () {
            $(".payType li").removeClass("active");
            $(this).addClass("active");
            $("#payTypeName").html($(this).html().trim());
            console.log($(this).index());
            if ($(this).index() == 0) { //微信支付
                $("#payInfos,#sendPhoto").addClass("none");
                //切换显示按钮
                $("#offlinePaySubmitBtn").addClass("none");
                $("#paySubmitBtn").removeClass("none");

                $('#pay_type').val("1");
            } else { //线下支付
                $("#payInfos,#sendPhoto").removeClass("none");
                //切换显示按钮
                $("#offlinePaySubmitBtn").removeClass("none");
                $("#paySubmitBtn").addClass("none");

                $('#pay_type').val("3");
            }
            hideNav(payTypeNav);
        });
    }


    //提交发票信息
    /*function submitBillInfo() {
        var type = $(".billType li.active").html();
        var unit = $(".billUnit").val();
        var tax = $(".taxNumber").val();
        //只有选择了单位时才需要判断三个是否都已经填写
        if (type == "单位") {
            if (unit == "") {
                $(".billUnit").addClass("nullVal");
                return;
            } else {
                $(".billUnit").removeClass("nullVal");
            }
            if (tax == "") {
                $(".taxNumber").addClass("nullVal");
                return;
            } else {
                $(".taxNumber").removeClass("nullVal");
            }
        }
        //选择单位或者个人都要判断是否填写了发票内容
        if (type == "单位" || type == "个人") {
            var remark = $("input[name='invoice_content']").val();
            if (remark == "") {
                $("input[name='invoice_content']").addClass("nullVal");
                return;
            } else {
                $("input[name='invoice_content']").removeClass("nullVal");
            }
        }
        $("#billDemand").html(type);
        //记录选中的发票类型
        $("#billDemand").attr("status",$(".billType li.active").index());
        hideNav($(".billDownNav"));
    }*/

    function InitPhoto() {
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
            $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles")
        ;

        $uploaderInput.on("change", function (e) {
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];

                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }

                $uploaderFiles.html($(tmpl.replace('#url#', src)));
            }
        });
        $uploaderFiles.on("click", "li", function () {
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });
    }

    function loadImg() {
        //获取文件
        var file = $("#imgForm").find("input")[0].files[0];

        //创建读取文件的对象
        var reader = new FileReader();

        //创建文件读取相关的变量
        var imgFile;

        //为文件读取成功设置事件
        reader.onload = function (e) {
            imgFile = e.target.result;
            console.log(imgFile);
            $("#imgContent").attr('src', imgFile);
        };

        //正式读取文件
        reader.readAsDataURL(file);
        $(".addIcon").remove();
    }
</script>