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">
    <%= hidden_field_tag(:friendly_id, @friendly_id) %>

    <div class="showPanel" id="payTypeLine" <%= @training.training_payinfo.not_payed? ? '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_title" class="right_input" placeholder="请填写发票抬头"
               value="<%=  @training.training_payinfo.try(:invoice_title) || @training.school %>"/>
      </p>
      <p class="clearfix" id="billRemark">
        <span class="grey fl">税务登记号</span>
        <input type="text" name="invoice_no" class="right_input" placeholder="请填写税务登记号"
               value="<%=  @training.training_payinfo.try(:invoice_no) %>"/>
      </p>
      <p class="clearfix" id="billRemark">
        <span class="grey fl">发票内容</span>
        <input type="text" name="invoice_content" class="right_input"
               value="<%=  @training.training_payinfo.try(:invoice_content).presence || '会议注册费' %>"/>
      </p>
    </div>
    <div class="infoBar mb10">
      <p>备注</p>
      <textarea class="remarkAccount" name="info" id="info" placeholder="请您在此输入您的留言"><%= @training.training_payinfo.info %></textarea>
    </div>
    <div class="infoBar mb10 pay-image <%= @training.training_payinfo.pay_type.to_i == 3 ? "" : "none" %>">
      <p>上传转账凭证</p>
      <!--图片上传-->
      <%= render :partial => 'upload_img', :locals => {:training => @training}  %>
    </div>

    <div class="infoBar mb10">
      <p>费用明细
        <% if @training.training_type == 3 %>
          <span class="color-orange" id="percentPay">（3人及以上8折优惠)</span>
        <% end %>
      </p>
      <p class="break-word justify moneyDetail">含会务费、培训费、教材资料费、餐费、专家差旅费等</p>
      <p class="clearfix">
        <input type="hidden" name="enlistNum" value="<%= @training.training_payinfo.num || 1 %>"/>
        <input type="hidden" name="enlistMoney" value="<%= @training.training_payinfo.fee || @training.registration_fee %>"/>
        <span class="fl red mr5 font-16">￥<span id="enlistM"><%= @training.training_payinfo.fee || @training.registration_fee %></span></span>
        <span class="lastPrice"></span>
        <span class="fr font-16">
          <% if @training.training_payinfo.not_payed? %>
            <a href="javascript:void(0)" class="minusNum" onclick="minusNum(this)">
              <i class="iconfont icon-default sky_blue font-18"></i>
            </a>
            <span class="mr5 ml5 font-14"><span id="enlistN"><%= @training.training_payinfo.num || 1 %></span>人</span>
            <a href="javascript:void(0)" class="plusNum" onclick="plusNum(this)">
              <i class="iconfont icon-roundaddfill blue font-18"></i>
            </a>
          <% else %>
            <span class="mr5 ml5 font-14"><span id="enlistN"><%= @training.training_payinfo.num || 1 %></span>人</span>
          <% end %>
        </span>
      </p>
    </div>
    <p style="height: 44px;"></p>
    <div class="bottomBtn <%= @training.training_payinfo.pay_type.to_i == 1 ? "none" : "" %>" id="offlinePaySubmitBtn">
      <a href="<%= training_path(id: @friendly_id, disable_redirect: true) %>" class="leftbtn">返回</a>
      <a href="javascript:void(0)" class="rightbtn" id="submitFormBtn"><%= @training.training_payinfo.new_record? ? '完成转账' : '提交' %></a>
    </div>

    <div class="bottomBtn <%= @training.training_payinfo.pay_type.to_i == 1 ? "" : "none" %>" id="paySubmitBtn">
      <a href="<%= training_path(id: @friendly_id, disable_redirect: true) %>" class="leftbtn">返回</a>
      <% if @training.training_payinfo.not_payed? %>
        <a href="javascript:void(0)" class="rightbtn" id="payBtn">立即支付</a>
      <% else %>
        <a href="javascript:void(0)" class="rightbtn" id="submitWxpayFormBtn">提交</a>
      <% end %>
    </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>-->
<!--      </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 || 3 %>">
</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 %>,
            newPayinfo: <%= @training.training_payinfo.new_record? %>,
            payType: 3,
            //发票抬头
            //为空则代表不需要发票
            invoiceTitle: '<%= @training.training_payinfo.invoice_title || @training.school %>',
            //税号
            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(!checkBillInfo()){ return }

            alert("报名成功，请尽快支付");
            $('form').submit();
        });

        $(".billInput").on("blur",function(){
            document.body && (document.body.scrollTop = document.body.scrollTop);
        })
        //立即支付
        $('#payBtn').on('click', function () {
            if(!checkBillInfo()){ return }

            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/<%= @friendly_id %>/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(!checkBillInfo()){ return; }

          <% if @training.training_payinfo.blank? || (@training.training_payinfo.not_payed? && @training.training_payinfo.attachment.blank?) %>
            var image = $("input[name='image']").val()
            if (!image || image.length < 0) {
              alert('请先上传支付凭证');
              return;
            }
          <% end %>
          $('form').submit();
        });

        // 微信支付后修改内容提交
        $("#submitWxpayFormBtn").on('click', function () {
          if(!checkBillInfo()){ return; }
          $('form').submit();
        });

        //上传头像
        InitPhoto();

    })

    //加减报名人数
    function minusNum(item){
        var num=parseInt($("#enlistN").html());
        var money=parseFloat(<%= @training.registration_fee %>).toFixed(2);
        var percent=$("#percentPay");
        if(num>1){
            num=num-1;
            if(num == 1){
                $(".icon-default").removeClass("blue").addClass("sky_blue");
            }
            money=parseFloat(parseFloat(money) *num).toFixed(2);
            if($(percent).length>0 && num>2){
                $(".lastPrice").html("￥"+ money);
                money = parseFloat(parseFloat(money) *0.8);
            }else{
                $(".lastPrice").html("");
            }
            $("#enlistN").html(num);
            $("#enlistM").html(money);
            $("#enlistNum").val(num);
            $("#enlistMoney").val(money);
            $("input[name='enlistNum']").val(num);
        }
    }
    function plusNum(item){
        var num=parseInt($("#enlistN").html());
        var money=parseFloat(<%= @training.registration_fee %>).toFixed(2);
        var percent=$("#percentPay");

        num=num+1;
        if(num > 1){
            $(".icon-default").removeClass("sky_blue").addClass("blue");
        }
        money=parseFloat(parseFloat(money) *num).toFixed(2);

        if($(percent).length>0 && num>2){
            $(".lastPrice").html("￥"+ money);
            money = parseFloat(parseFloat(money) * 0.8).toFixed(2);
        }else{
            $(".lastPrice").html("");
        }

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

    //点击弹出发票类型弹框
    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,.pay-image").addClass("none");
                //切换显示按钮
                $("#offlinePaySubmitBtn").addClass("none");
                $("#paySubmitBtn").removeClass("none");

                $('#pay_type').val("1");
            } else { //线下支付
                $("#payInfos,.pay-image").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 == "单位" || type == "个人") {
          if (unit == "") {
            $(".billUnit").addClass("nullVal");
            return;
          } else {
            $(".billUnit").removeClass("nullVal");
          }
        }
        if (type == "单位") {
          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 checkBillInfo() {
      if ($("input[name='invoice_title']").val() == '') {
        alert("请填写发票抬头");
        return false;
      }
      if ($("input[name='invoice_no']").val() == '') {
        alert("请填写税务登记号");
        return false;
      }
      if ($("input[name='invoice_content']").val() == '') {
        alert("请填写发票内容");
        return false;
      }

      return true;
    }

    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>