pgfqe6ch8/app/views/trainings/test.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">微信支付</span>
        <i class="iconfont icon-gengduo1 rightArrow" style="color: #323232;right: 4px"></i>
      </p>
      <div class="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">800190320609016</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" 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="研讨会"/>
      </p>
    </div>
    <div class="infoBar mb10">
      <p>备注</p>
      <textarea class="remarkAccount" name="info" id="info"></textarea>
      <!--图片上传-->
      <div id="sendPhoto" class="none" style="padding-bottom: 10px;">
        <div class="weui-uploader__bd">
          <ul class="weui-uploader__files" id="uploaderFiles"></ul>
          <div class="weui-uploader__input-box">
            <input name="image" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
          </div>
        </div>
      </div>
    </div>
    <div class="infoBar mb10">
      <p>费用明细</p>
      <p class="break-word justify moneyDetail">含会议注册费、场地费、培训费、教材资料费、餐费、专家差旅费等</p>
      <p class="sendMoney">￥<%= @pay_fee %></p>
    </div>
    <p style="height: 44px;"></p>
    <a href="javascript:void(0)" class="submitForm none" id="submitFormBtn">提交</a>
    <a href="javascript:void(0)" class="submitForm" id="weixinSubmit" onclick="wechatPay();">支付</a>
  </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"><i class="iconfont icon-guanbi billClose"></i></a>
      </p>
      <ul class="clearfix billType">
        <li class="active">单位</li>
        <li>个人</li>
        <li>不需要</li>
      </ul>
      <p class="clearfix needWrite">
        <span class="fl billSmallTitle mb10">发票抬头</span>
      </p>
      <ul class="clearfix needWrite">
        <input placeholder="请填写公司单位名称" name="invoice_title" class="billInput billUnit" value="<%= @training.school %>"/>
        <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"><i class="iconfont icon-guanbi billClose"></i></a>
      </p>
      <ul class="clearfix payType">
        <li class="active">微信支付</li>
        <li>线下支付</li>
      </ul>
    </div>
  </div>
  <input type="hidden" id="pay_type" name="pay_type" value="1">
</form>

<script src="https://cdn.jsdelivr.net/npm/eruda" type="text/javascript"></script>
<script>
    function wechatPay() {
        $.ajax({
                    url: '/trainings/update_payinfo',
                    type: "POST",
                    data: $('form').serialize()
                }
        ).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，但并不保证它绝对可靠。
                                    window.location.href = "/trainings/bigdata_hnjcxy_2019/result";
                                } 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);
                            });


                });


    }

    $(function () {
        // eruda.init();

        var userInfo = {
            name: '<%= @training.name %>',
            school: '<%= @training.school %>'
        };

        //点击弹出发票弹框
        var bill = $("#billLine");
        var billNav = $(".billDownNav");
        showNav(bill, billNav, "down");

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

        //切换发票类型
        $(".billType li").on("click", function () {
            $(".billType li").removeClass("active");
            $(this).addClass("active");
            if($(this).index()==0) {
                $(".needWrite").removeClass("none");
                $(".billUnit").attr("placeholder","请填写公司单位名称").val(userInfo.school);
                $(".taxNumber").removeClass("none");
            }else if($(this).index()==1){
                $(".needWrite").removeClass("none");
                $(".billUnit").attr("placeholder","请填写姓名").val(userInfo.name);
                $(".taxNumber").addClass("none");
            }else{
                $(".needWrite").addClass("none");
                $(".billInput").val('');
            }
        })
        //关闭，取消发票信息的填写
        $(".billClose").on("click", function () {
            hideNav($(".billDownNav"));
        });

        //线下支付提交
        $('#submitFormBtn').on('click', function () {
            if ($('#info').val() == '') {
                alert('请输入支付订单信息');
                return;
            }
            $('form').submit();
        });
        //上床头像
        InitPhoto();

    })

    //点击弹出支付方式弹框
    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());
            $(".submitForm").addClass("none");
            if ($(this).index() == 0) { //微信支付
                $("#payInfos,#sendPhoto").addClass("none");
                $("#weixinSubmit").removeClass("none");
                $('#pay_type').val("1");
            } else { //线下支付
                $("#payInfos,#sendPhoto").removeClass("none");
                $("#submitFormBtn").removeClass("none");
                $('#pay_type').val("2");
            }
            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);
        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>