dongfeng-pay/jhboss/views/bank_card.html
2019-12-19 14:47:58 +08:00

447 lines
13 KiB
Go
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.

<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理后台</title>
<link rel="stylesheet" type="text/css" href="../static/css/basic.css">
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/filter.js"></script>
<style>
.add-bank-card, .bank-card-record {
overflow-x: hidden;
}
fieldset {
margin-top: 10px;
}
legend {
width: 60px;
}
fieldset div {
margin-bottom: 20px;
}
fieldset div span {
display: inline-block;
width: 120px;
}
#certificate-type {
height: 30px;
}
.bank-card-footer {
height: 40px;
width: 100%
background-color: white;
/* border: 1px solid #e7e7e7; */
margin-top: 10px;
}
.bank-card-footer span {
display: inline-block;
text-align: center;
background-color: #e7e7e7;
border-radius: 4px;
height: 40px;
width: 60px;
line-height: 40px;
margin-left: 20px;
}
.bank-card-footer span:hover {
background-color: red;
cursor: pointer;
}
.add-card-button {
margin-bottom: 10px;
}
.bank-card-search {
border-bottom: 1px solid #e7e7e7;
margin-bottom: 10px;
margin-top: 10px;
padding-bottom: 10px;
}
.account-name-search {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="bank-card-record">
<div class="row bank-card-search">
<div class="col-md-4">
<span>开户名</span>
<input type="text" value="" class="account-name-search" placeholder="模糊匹配">
<button class="btn btn-info bank-card-button">搜索</button>
</div>
</div>
<button type="button" class="btn btn-default btn-xs glyphicon glyphicon-plus add-card-button">添加银行卡</button>
<div class="menu-table">
<table>
<thead class="thead-dark">
<tr>
<th>序列号</th>
<th>用户名称</th>
<th>银行名称</th>
<th>银行编码</th>
<th>对账卡类型</th>
<th>开户名</th>
<th>银行卡号</th>
<th>证件类型</th>
<th>身份证号</th>
<th>手机号</th>
<th>开户银行地址</th>
<th>操作</th>
</tr>
</thead>
<tbody id="bank_card_table_body">
</tbody>
</table>
</div>
<!-- 分页插件 -->
<div class="cut_page">
<li>
每页显示
<select id="display_count">
<option value="4">4</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</li>
<li class="current_total_page"><span class="current_page">0</span>/<span class="total_page">0</span></li>
<li class="pre_page">上一页</li>
<li class="next_page">下一页</li>
<li class="jump_page">跳转 <input type="text" name="jump_page" value=""> <button type="button" class="btn btn-default">Go</button></li>
</div>
</div>
<div class="add-bank-card">
<fieldset>
<legend>添加银行卡</legend>
<div class="row">
<div class="col-md-4">
<input type="hidden" value="" class="bank-card-uid">
<div>
<span>用户名称</span>
<input type="text" value="" class="user-name">
</div>
<div>
<span>银行编码</span>
<input type="text" value="" class="bank-code">
</div>
<div>
<span>银行开户名</span>
<input type="text" value="" class="account-name">
</div>
<div>
<span>证件类型</span>
<select id="certificate-type">
<option value="identify-card">身份证&nbsp;</option>
</select>
</div>
<div>
<span>手机号</span>
<input type="text" value="" placeholder="" class="phone-code">
</div>
</div>
<div class="col-md-4">
<div>
<span>银行名称</span>
<input type="text" value="" placeholder="" class="bank-name">
</div>
<div>
<span>银行账户类型</span>
<select id="bank-account-type">
<option value="private">对私</option>
<option value="public">对公</option>
</select>
</div>
<div>
<span>银行卡账号</span>
<input type="text" placeholder="" class="bank-no">
</div>
<div>
<span>证件号</span>
<input type="text" class="certificate-no" value="" placeholder="">
</div>
<div>
<span>开户行详细地址</span>
<input type="text" class="bank-address" value="" placeholder="">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend style="width: 25px;">操作</legend>
<div class="bank-card-footer">
<span class="bank-card-cannel">取消</span>
<span class="bank-card-save">保存</span>
</div>
</fieldset>
</div>
<script>
function getCutPageval() {
let operatorName = $(".operator-name").val();
let displayCount = $("#display_count").val();
let currentPage = $(".current_page").html();
let totalPage = $(".total_page").html();
let jumpPage = $(".jump_page input").val();
return dataJSON = {
"operatorName":operatorName,
"displayCount":displayCount,
"currentPage":currentPage,
"totalPage":totalPage,
"jumpPage":jumpPage
};
}
function editBankCard(uid) {
$.ajax({
url: "/get/oneBankCard",
data: {"uid":uid},
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else if (res.BankCardInfoList.length == 0){
alert("编辑失败");
return;
} else {
let b = res.BankCardInfoList[0];
$(".bank-card-uid").val(b.Uid);
$(".user-name").val(b.UserName);
$(".bank-code").val(b.BankCode);
$(".account-name").val(b.AccountName);
$(".phone-code").val(b.PhoneNo);
$(".bank-name").val(b.BankName);
$(".bank-no").val(b.BankNo);
$(".certificate-no").val(b.CertificateNo);
$(".bank-address").val(b.BankAddress);
$("#bank-account-type option").each(function() {
if ($(this).val() == b.BankAccountType) {
$(this).attr('selected', true);
}else {
$(this).removeAttr('selected');
}
});
$(".bank-card-record").hide();
$(".add-bank-card").show();
}
}
});
}
$(".bank-card-button").click(function() {
let dataJSON = getCutPageval();
let accountNameSearch = $(".account-name-search").val();
dataJSON["accountNameSearch"] = accountNameSearch;
showBankCradRecord(dataJSON);
});
function deleteBankCard(uid) {
$.ajax({
url: "/delete/bankCardRecord",
data: {"uid":uid},
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else if (res.Code == 200){
alert("删除成功");
showBankCradRecord(getBankCardData());
}
},
error: function() {
alert("系统异常,请稍后再试");
}
});
}
function showBankCradRecord(dataJSON) {
// let dataJSON = getBankCardData();
$.ajax({
url: "/get/bankCard",
data: dataJSON,
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
return;
} else {
$(".current_page").html(res.CurrentPage);
$(".total_page").html(res.TotalPage);
$("#display_count option").each(function() {
if ($(this).text() == res.DisplayCount) {
$(this).attr('selected', true);
}
});
$(".jump_page input").val("");
let str = "";
for (let i = 0; i < res.BankCardInfoList.length; i ++) {
let v = res.BankCardInfoList[i];
let tmp = "<tr>" + "<th>" + (res.StartIndex+i+1) + "</th>" +
"<th>" + v.UserName + "</th>" + "<th>" + v.BankName + "</th>" + "<th>" + v.BankCode + "</th>" +
"<th>" + v.BankAccountType + "</th>" + "<th>" + v.AccountName + "</th>" + "<th>" + v.BankNo + "</th>" +
"<th>" + "身份证" + "</th>" + "<th>" + v.CertificateNo + "</th>" + "<th>" + v.PhoneNo + "</th>" +
"<th>" + v.BankAddress + "</th>";
tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
'<button type="button" value="' + v.Uid +'" class="btn btn-default" onclick="editBankCard(this.value);"><span class="glyphicon glyphicon-pencil"></span></button>' +
'<button type="button" value="' + v.Uid +'" class="btn btn-default" onclick="deleteBankCard(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
'</div>' + "</th>" + "</tr>";
tmp = tmp.replace("private", "对私").replace("public", "对公");
str = str + tmp;
}
$("#bank_card_table_body").html(str);
}
},
error: function() {
alert("系统异常,请稍后再试");
}
});
}
$(function() {
$(".add-bank-card").hide();
showBankCradRecord(getBankCardData());
$(".bank-card-record").show();
});
$(".bank-card-cannel").click(function(event) {
/* Act on the event */
$(".bank-card-record").show();
$(".add-bank-card").hide();
});
$(".add-card-button").click(function() {
clearBankCardData();
$(".add-bank-card").show();
$(".bank-card-record").hide();
});
function clearBankCardData() {
$(".user-name").val("");
$(".bank-code").val("");
$(".account-name").val("");
$(".phone-code").val("");
$(".bank-name").val("");
// $("#bank-account-type").val();
$(".bank-no").val("");
// $(".identify-card").val("");
$(".certificate-no").val("");
$(".bank-address").val("");
$(".bank-card-uid").html("");
}
function getBankCardData() {
let userName = $(".user-name").val();
let bankCode = $(".bank-code").val();
let accountName = $(".account-name").val();
let certificateType = $("#certificate-type").val();
let phoneNo = $(".phone-code").val();
let bankName = $(".bank-name").val();
let bankAccountType = $("#bank-account-type").val();
let bankNo = $(".bank-no").val();
let identifyCard = $(".identify-card").val();
let certificateNo = $(".certificate-no").val();
let bankAddress = $(".bank-address").val();
let uid = $(".bank-card-uid").val();
return {
"uid":uid,
"userName":userName,
"bankCode":bankCode,
"accountName":accountName,
"certificateType":certificateType,
"phoneNo":phoneNo,
"bankName":bankName,
"bankAccountType":bankAccountType,
"bankNo":bankNo,
"identifyCard":identifyCard,
"certificateNo":certificateNo,
"bankAddress":bankAddress
};
}
//当每页显示数更改后,执行的操作
$("#display_count").change(function() {
let dataJSON = getCutPageval();
showBankCradRecord(dataJSON);
});
//点击上一页的按钮
$(".pre_page").click(function() {
let dataJSON = getCutPageval();
if (dataJSON["currentPage"] == 1) {
return;
}
dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) - 1;
showBankCradRecord(dataJSON);
});
//点击下一页的按钮时
$(".next_page").click(function() {
let dataJSON = getCutPageval();
if (dataJSON["currentPage"] == dataJSON["totalPage"]) {
return;
}
dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) + 1;
showBankCradRecord(dataJSON);
});
//点击跳转那一页的按钮
$(".jump_page button").click(function() {
let dataJSON = getCutPageval();
if (dataJSON["jumpPage"].length <= 0) {
return;
}
showBankCradRecord(dataJSON);
});
$(".bank-card-save").click(function() {
let dataJSON = getBankCardData();
if (dataJSON["userName"].length <= 0) {
alert("用户名称不能为空");
return;
} else if (dataJSON["bankCode"].length <= 0) {
alert("银行编码不能为空");
return;
} else if (dataJSON["accountName"].length <= 0) {
alert("银行开户名不能为空");
return;
} else if (dataJSON["phoneNo"].length <= 0) {
alert("手机号不能为空");
return;
} else if (dataJSON["bankName"].length <= 0) {
alert("银行名称不能为空");
return;
} else if (dataJSON["bankNo"].length <= 0) {
alert("银行卡账号不能为空");
return;
} else if (dataJSON["certificateNo"].length <= 0) {
alert("身份证号不能为空");
return;
} else if (dataJSON["bankAddress"].length <= 0) {
alert("开户行地址不能为空");
return;
}
$.ajax({
url: "/add/bankCard",
data: dataJSON,
success: function(res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else if (res.Code == -1) {
alert(res.Msg);
} else {
alert("添加银行卡成功");
$(".bank-card-record").show();
$(".add-bank-card").hide();
showBankCradRecord(getBankCardData());
}
}
});
});
</script>
</body>
</html>