apzl_leasing/WebContent/New_Sign_index.jsp
2021-03-24 09:17:56 +08:00

269 lines
12 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>通联卡扣签约</title>
<style>
.logon_footer{
float:left;
text-align:center;
color:#818181;
font-size:12px;
line-height:35px;
position:fixed;
bottom:0;
width:100%; height:15%;}
#showTable td{
text-align: left;
font-size: 18px;
padding:8px;
}
</style>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/gloab.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<script src="../js/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery/register.js" charset="GBK" type="text/javascript"></script>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body class="bgf4">
<div class="login-box f-mt10 f-pb50">
<div class="main bgf">
<div class="reg-box-pan display-inline">
<div class="step">
<ul>
<li class="col-xs-4 on">
<span class="num"><em class="f-r5"></em><i>1</i></span>
<span class="line_bg lbg-r"></span>
<p class="lbg-txt">验证身份信息</p>
</li>
<li class="col-xs-4">
<span class="num"><em class="f-r5"></em><i>2</i></span>
<span class="line_bg lbg-l"></span>
<span class="line_bg lbg-r"></span>
<p class="lbg-txt">验证短信信息</p>
</li>
<li class="col-xs-4">
<span class="num"><em class="f-r5"></em><i>3</i></span>
<span class="line_bg lbg-l"></span>
<p class="lbg-txt">验证成功</p>
</li>
</ul>
</div>
<div class="reg-box" id="verifyCheck" style="margin-top:20px;">
<div class="part1">
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>卡号:</span>
<div class="f-fl item-ifo">
<input type="text" class="txt03 f-r3 required" tabindex="1" id="accountNo" data-valid="isNonEmpty||minLength:6" data-error="卡号不能为空||最少输入6位" />
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl">银行名称:</span>
<div class="f-fl item-ifo">
<input type="text" class="txt03 f-r3 required" tabindex="1" id="bankName" readonly data-valid="isNonEmpty" data-error="银行名称不能为空" />
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>客户姓名:</span>
<div class="f-fl item-ifo">
<input type="text" maxlength="20" class="txt03 f-r3 required" tabindex="1" name="accountName" id="accountName" data-valid="isNonEmpty" data-error="客户姓名不能为空" />
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号:</span>
<div class="f-fl item-ifo">
<input type="text" maxlength="11" name="tel" class="txt03 f-r3 required" tabindex="2" id="tel" data-valid="isNonEmpty||isPhone" data-error="手机号不能为空||手机号格式错误"/>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>证件号码:</span>
<div class="f-fl item-ifo">
<input type="text" name="idCard" class="txt03 f-r3 required" data-valid="isNonEmpty||isCard" data-error="身份证号不能为空||身份证号格式错误" tabindex="2" id="idCard" />
<label class="focus valid"></label>
</div>
</div>
<input type="hidden" name="signType" value="TLcollect" id="signType">
<input type="hidden" name="inputPage" value="increment" id="inputPage">
<input type="hidden" name="signSource" value="d989246c11c111eaaa0000163e0e11e6" id="signSource">
<div class="item col-xs-12">
<span class="intelligent-label f-fl">&nbsp;</span>
<div class="f-fl item-ifo">
<a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">下一步</a>
</div>
</div>
</div>
<div class="part2" style="display:none">
<div class="alert alert-info" style="width:700px">请点击发送验证码,输入短信中的验证码</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码:</span>
<div class="f-fl item-ifo">
<input type="text" maxlength="6" id="verifyNo" name="verifyNo" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" data-valid="isNonEmpty||isInt" data-error="验证码不能为空||请输入6位数字验证码" />
<span class="btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="width:97px;display:none;">发送验证码</span>
<span class="btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" style="width:97px;">发送验证码</span>
<span class="ie8 icon-close close hide" style="right:130px"></span>
<label class="icon-sucessfill blank hide"></label>
<label class="focus"><span id="tipMsg">请查收手机短信并填写短信中的验证码此验证码10分钟内有效</span></label>
<label class="focus valid"></label>
</div>
</div>
<div class="item col-xs-12">
<span class="intelligent-label f-fl">&nbsp;</span>
<div class="f-fl item-ifo">
<a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">签约</a>
</div>
</div>
</div>
<div class="part4 text-center" style="display:none">
<div class="text-center" >
<table id="showTable" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td >签约银行:</td><td id="bankNameShow"></td>
<td colspan="2"></td>
</tr>
<tr>
<td width="90">卡号:</td><td id="accountNoShow" width="250"></td>
<td width="90">户名:</td><td id="accountNameShow" width="250" ></td>
</tr>
<tr>
<td width="90">证件号码:</td><td id="idCardShow"></td>
<td width="90">手机号码:</td><td id="telShow"></td>
</tr>
<tr>
<td width="90">签约结果:</td><td>签约成功!</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="logon_footer">
<div>安鹏租赁 版权所有</div>
</div>
<script>
$(function(){
//防止刷新导致可以重新发验证码
sendVerify();
//第一页的确定按钮
$("#btn_part1").click(function(){
if(!verifyCheck._click()) return;
$(".part1").hide();
$(".part2").show();
$(".step li").eq(1).addClass("on");
});
//第二页的确定按钮
$("#btn_part2").click(function(){
if(!verifyCheck._click()) return;
var signSource = $.trim($("#signSource").val());
var verifyNo = $.trim($("#verifyNo").val());
var signType = $.trim($("#signType").val());
var phoneNumber = $.trim($("#tel").val());
var inputPage = $.trim($("#inputPage").val());
var accountNo = $.trim($("#accountNo").val());
var bankName = $.trim($("#bankName").val());
var accountName = $.trim($("#accountName").val());
var idCard = $.trim($("#idCard").val());
$.ajax({
type : "POST",
url : "sign",
async : true,
dataType: "json",
data : {
"method":"allinPaySigning",
"signSource":signSource,
"verCode":verifyNo,
"phoneNumber":phoneNumber,
"signType":signType,
"inputPage":inputPage,
"accountNo":accountNo,
"bankName":bankName,
"accountName":accountName,
"idCard":idCard
},
success : function(data) {
if("success" == data.message){
$(".part2").hide();
$(".part4").show();
$(".step li").eq(2).addClass("on");
showSignResult();
return true;
}else{
alert(data.msg);
return false;
}
},
error : function(data) {
alert("连接服务器失败");
return false;
}
});
});
});
//根据卡号带出银行名称
function cardVerify() {
var accountObj = $("#accountNo");
var accountNo = $.trim(accountObj.val());
$.ajax({
type: "POST",
url: "sign",
async: false,
data: {
"method":"obtainBankName",
"accountNo": accountNo
},
dataType: "json",
success: function (data) {
if (data.status == "success") {
var bankName = data.bankName;
if (bankName.indexOf('工') >= 0) {
$("#bankName").val(bankName);
$("#bankName").removeClass("v_error");
$("#bankName").next().html('');
} else {
alert("暂不支持该卡签约");
}
} else {
alert("卡号无法识别,联系管理员");
}
},
error: function (data) {
alert("连接服务器失败");
}
});
}
/**
* 显示签约结果
*/
function showSignResult() {
$("#bankNameShow").html($.trim($("#bankName").val()));
$("#accountNoShow").html($.trim($("#accountNo").val()));
$("#accountNameShow").html($.trim($("#accountName").val()));
$("#idCardShow").html($.trim($("#idCard").val()));
$("#telShow").html($.trim($("#tel").val()));
}
</script>
</body>
</html>