Files
kami_boss/views/bank_card.html
danial c3906e940e refactor(account): 重构账户管理页面布局和样式
-精简HTML结构,优化`account.html`,`apple-card/account.html`,和`t-mall-game/account.html`中iframe的布局。
- 调整CSS样式,以增强用户界面的一致性和可读性。
- 优化`account_history.html`中的表格和搜索栏的样式与对齐。

fix(controller): 修正新增控制器参数顺序

- 修正`addController.go`中的参数顺序,确保交易类型正确传递给服务层。
- 更新数据库插入操作,确保UUID正确分配给新记录,防止SQL错误。
2024-09-04 09:54:18 +08:00

489 lines
17 KiB
HTML
Raw Permalink 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 href="../static/css/basic.css" rel="stylesheet" type="text/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 class="account-name-search" placeholder="模糊匹配" type="text" value="">
<button class="btn btn-info bank-card-button">搜索</button>
</div>
</div>
<button class="btn btn-default btn-xs glyphicon glyphicon-plus add-card-button" type="button">添加银行卡</button>
<div class="menu-table">
<table>
<thead class="thead-dark">
<tr>
<th>序列号</th>
<th>商户名称(UID)</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 name="jump_page" type="text" value="">
<button class="btn btn-default" type="button">Go</button>
</li>
</div>
</div>
<div class="add-bank-card">
<fieldset>
<legend>添加银行卡</legend>
<div class="row">
<div class="col-md-4">
<input class="bank-card-uid" type="hidden" value="">
<div>
<span>商户名称:</span>
<select class="user-name" id="select-self-name" name="">
</select>
</div>
<div>
<span>银行编码:</span>
<input class="bank-code" type="text" value="">
</div>
<div>
<span>银行开户名:</span>
<input class="account-name" type="text" value="">
</div>
<div>
<span>证件类型:</span>
<select id="certificate-type">
<option value="identify-card">身份证&nbsp;</option>
</select>
</div>
<div>
<span>手机号:</span>
<input class="phone-code" placeholder="" type="text" value="">
</div>
</div>
<div class="col-md-4">
<div>
<span>银行名称:</span>
<input class="bank-name" placeholder="" type="text" value="">
</div>
<div>
<span>银行账户类型</span>
<select id="bank-account-type">
<option value="private">对私</option>
<option value="public">对公</option>
</select>
</div>
<div>
<span>银行卡账号:</span>
<input class="bank-no" placeholder="" type="text">
</div>
<div>
<span>证件号:</span>
<input class="certificate-no" placeholder="" type="text" value="">
</div>
<div>
<span>开户行详细地址:</span>
<input class="bank-address" placeholder="" type="text" value="">
</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());
}
}
});
});
function setAccount() {
$.ajax({
url: "/get/all/account",
success: function (res) {
if (res.Code == 404) {
window.parent.location = "/login.html";
} else {
let str = '<option value="' + "" + '">' + "请选择" + '</option>';
for (let i = 0; i < res.AccountList.length; i++) {
let account = res.AccountList[i];
str = str + '<option value="' + account.AccountUid + '">' + account.AccountName + '</option>';
}
$("#select-self-name").html(str);
}
}
});
}
$(function () {
setAccount();
});
</script>
</body>
</html>