You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
pgfqe6ch8/app/views/trainings/pay.html.erb

443 lines
17 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>费用明细<span class="color-orange" id="percentPay">3人及以上8折优惠)</span></p>
<p class="break-word justify moneyDetail">含会议注册费、场地费、培训费、教材资料费、餐费、专家差率费等</p>
<p class="clearfix">
<input type="hidden" name="enlistNum" value="1"/>
<input type="hidden" name="enlistMoney" value="3000"/>
<span class="fl red mr5 font-16">¥<span id="enlistM">3000</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">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 ==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();
})
//加减报名人数
function minusNum(item){
var num=parseInt($("#enlistN").html());
var money=parseFloat(3000).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);
}
}
function plusNum(item){
var num=parseInt($("#enlistN").html());
var money=parseFloat(3000).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=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>