|
|
<form action="/trainings/update_payinfo" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
|
|
|
<div style="padding-top: 10px">
|
|
|
<%= hidden_field_tag(:tag_id, params[:id]) %>
|
|
|
<%= hidden_field_tag(:offline_later_pay, 'false') %>
|
|
|
|
|
|
<!-- <div class="showPanel" id="payTypeLine" NavShow>-->
|
|
|
<div class="showPanel" id="payTypeLine">
|
|
|
<p class="clearfix pr">
|
|
|
<label>支付方式</label>
|
|
|
<!-- <span class="mr5" style="margin-right: 24px;" id="payTypeName"><%#= @training.training_payinfo.pay_type.to_i == 3 ? "线下支付" : "微信支付" %></span>-->
|
|
|
<span class="mr5" style="margin-right: 24px;">线下支付</span>
|
|
|
<i class="iconfont icon-gengduo1 rightArrow" style="color: #323232;right: 4px"></i>
|
|
|
</p>
|
|
|
<p class="payTip" style="margin-top:0px;margin-bottom:9px;">微信支付将于6月18日开通</p>
|
|
|
<!-- <div class="<%#= @training.training_payinfo.pay_type.to_i == 3 ? "" : "none" %> mt5" id="payInfos">-->
|
|
|
<div class="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">账 号：</label>
|
|
|
<p class="fl flex1 break-word">1901008009200085901</p>
|
|
|
</li>
|
|
|
<li class="df">
|
|
|
<label class="fl">户 名：</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.try(: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>费用明细
|
|
|
<% 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">
|
|
|
<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>
|
|
|
</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<p style="height: 44px;"></p>
|
|
|
<div class="bottomBtn <%= @training.training_payinfo.pay_type.to_i == 1 ? "none" : "" %>" id="offlinePaySubmitBtn">
|
|
|
<a href="javascript:void(0)" class="leftbtn" id="laterSubmitFormBtn">稍后支付</a>
|
|
|
<a href="javascript:void(0)" class="rightbtn" id="submitFormBtn">立即支付</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="bottomBtn <%= @training.training_payinfo.pay_type.to_i == 1 ? "" : "none" %>" id="paySubmitBtn">
|
|
|
<a href="<%= enroll_training_path(id: @tag_id) %>" 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 || 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/<%= @tag_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 }
|
|
|
$('form').submit();
|
|
|
});
|
|
|
$('#laterSubmitFormBtn').on('click', function () {
|
|
|
if(!checkBillInfo()){ return }
|
|
|
|
|
|
$('#offline_later_pay').val('true');
|
|
|
$('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=0;
|
|
|
$("#billDemand").html("单位").attr("status",0);
|
|
|
if (!userInfo.newPayinfo) {
|
|
|
if(userInfo.invoiceTitle == "" && userInfo.invoiceNo == ""){
|
|
|
index=2;
|
|
|
$("#billDemand").html("不需要").attr("status",2);
|
|
|
}
|
|
|
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.invoiceTitle || userInfo.school);
|
|
|
$(".taxNumber").removeClass("none").val(userInfo.invoiceNo);
|
|
|
} else if (parseInt(index) == 1) {
|
|
|
$(".needWrite").removeClass("none");
|
|
|
$(".billUnit").attr("placeholder", "请填写姓名").val(userInfo.name);
|
|
|
$(".taxNumber").val('').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 == "单位" || 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() {
|
|
|
var bill = $("#billLine");
|
|
|
var billNav = $(".billDownNav");
|
|
|
var status = $("#billDemand").attr("status");
|
|
|
if(status == 2){
|
|
|
$(".billInput").val('');
|
|
|
}
|
|
|
|
|
|
var billUnit = $('.billUnit').val();
|
|
|
var taxNumber = $('.taxNumber').val();
|
|
|
if(status == 1 && billUnit == ''){
|
|
|
alert('请将发票信息填写完整');
|
|
|
showNav(bill, billNav, "down");
|
|
|
return false;
|
|
|
}
|
|
|
if(status == 0 && (billUnit == '' || taxNumber == '')){
|
|
|
alert('请将发票信息填写完整');
|
|
|
showNav(bill, billNav, "down");
|
|
|
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>
|
