Skip to content

B
buildbank-replica
Commit 5198162e authored by 何波's avatar 何波
Browse files
Options

info页面修改,还差按钮事件

parent 4a1dc705
Hide whitespace changes
Inline Side-by-side
Showing with 653 additions and 132 deletions
account.html
View file @ 5198162e
...@@ -1312,20 +1312,6 @@ ...@@ -1312,20 +1312,6 @@
</html> </html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script> <script>
// function onAccount(number){
// if(number == 1){
// window.location.href = './account_info.html'
// }
// if(number == 2){
// window.location.href = './account_balance.html'
// }
// if(number == 3){
// window.location.href = './account_detail.html'
// }
// if(number == 4){
// window.location.href = './history_query.html'
// }
// }
function onAccount(number) { function onAccount(number) {
if(number == 0) { if(number == 0) {
window.location.href = './account_balance.html' window.location.href = './account_balance.html'
......
account_info.html
View file @ 5198162e
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账户信息详情</title> <script src="https://cdn.jsdelivr.net/npm/xlsx-js-style/dist/xlsx.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<title>账户交易明细</title>
<style> <style>
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif; font-family: '\5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif';
font-size: 14px; font-size: 14px;
color: #2C2C2C;
} }
body { body {
background-color: #ffffff; background-color: #ffffff;
padding: 0; padding: 0;
} }
/* 面包屑导航 */
/* 面包屑 */
.breadcrumb { .breadcrumb {
background-color: #f5f7fa; height: 42px;
padding: 15px 20px; background-color: #f4f5fb;
color: #333; border: 1px solid #dfe1f2;
line-height: 40px;
padding-left: 10px;
margin-top: 15px;
font-size: 14px;
color: #2C2C2C;
} }
/* 账户标题栏 */ .breadcrumb_item{
.account-header { font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 2px solid #1890ff;
} }
.account-header .account-number { /* 账户信息卡片 */
border: 1px solid #1890ff; .account-card {
color: #1890ff; margin-top: 15px;
padding: 10px 15px;
border-radius: 4px; border-radius: 4px;
font-size: 18px;
font-weight: bold;
} }
.account-header .收支视图 {
color: #1890ff; .account-card .account-number {
text-decoration: none; background: #fff;
font-size: 16px; position: relative;
display: flex; }
align-items: center;
gap: 4px; .account-card .account-number::before {
content: '';
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 0;
width: 25px;
}
.account-card .account-number::after {
content: '';
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 141px;
right: 0
} }
/* 信息表格 */
.account-number div {
display: inline-block;
border: 2px solid #1f93d5;
border-bottom: none;
color: #1f93d5;
padding: 4px 8px;
border-radius: 4px 4px 0 0;
margin-left:23px;
height: 40px;
width: 120px;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.info-table { .info-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 0; margin-top: 6px;
border: 1px solid #62a7e3;
} }
.info-table td { .info-table td {
padding: 12px 20px; height: 34px;
border: 1px solid #d0e8ff; padding: 0 10px;
border: none
} }
.info-table td:first-child {
width: 20%; .info-table tr {
border-top: 1px solid #c5d7e8;
}
.info-table tr:first-child {
border-top: 1px solid #1f93d5;
}
.info-table tr td:nth-child(2n+1) {
background-color: #f7fbfe;
text-align: right; text-align: right;
color: #333; }
font-weight: 500;
.info-table td:first-child {
width: 258px;
background: #fafafa;
} }
.info-table td:nth-child(2) { .info-table td:nth-child(2) {
width: 30%; width: 337.47px;
} }
.info-table td:nth-child(3) { .info-table td:nth-child(3) {
width: 20%; width: 221.41px;
text-align: right; background: #fafafa;
color: #333;
font-weight: 500;
} }
.info-table td:nth-child(4) { .info-table td:nth-child(4) {
width: 30%; width: 341.13px;
} }
/* 工具栏 */ /* 工具栏 */
.toolbar { .toolbar {
display: flex; display: flex;
justify-content: flex-end;
align-items: center; align-items: center;
gap: 20px; justify-content: flex-end;
padding: 10px 20px; height: 42px;
background: #f8faf5; background-color: #f6fbf4;
border-top: 1px solid #e8e8e8; height: 35px;
border-bottom: 1px solid #e8e8e8; line-height: 35px;
} }
.toolbar a { .toolbar a {
color: #1890ff; color: #1890ff;
...@@ -91,102 +140,588 @@ ...@@ -91,102 +140,588 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
font-size: 16px; }
.tableLBtn_box{
position: relative;
}
.tableLBtn_active{
padding: 10px 10px 10px 10px;
}
.tableLBtn_box:hover .tableLBtn_active{
position: relative;
border-left: 1px solid #d1d0d0;
border-top: 1px solid #d1d0d0;
border-right: 1px solid #d1d0d0;
background: #FFFFFF;
line-height: 14px;
z-index: 9999;
}
.tableLBtn_box:hover .downloadBox{
display: block;
}
.downloadBox{
display: none;
}
.downloadBox{
position: absolute;
top: 33px;
z-index: 999;
}
.downloadBox span {
display: block;
border-left: 1px solid #d1d0d0;
border-top: 1px solid #d1d0d0;
border-right: 1px solid #d1d0d0;
background: #FFFFFF;
padding: 10px 10px 0px 10px;
height: 24px;
}
.downloadBox span a {
float: none;
font-size: 1em;
padding-left: 16px;
margin-right: 0px;
background-color: #FFFFFF;
}
.underline {
text-decoration: underline;
}
.downloadBox .firstLi {
border-top: 1px solid #d9d9d9;
}
.downloadBox ul {
border: 1px solid #d9d9d9;
padding: 15px 10px 15px 10px;
background: #FFFFFF;
list-style: none;
}
.downloadBox ul li {
border-bottom: 1px solid #d9d9d9;
color: #0066bb;
line-height: 32px;
width: 94px;
cursor: pointer;
background: #FFFFFF;
}
.downloadBox ul li:hover {
font-weight: bold;
}
.download{
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center;
}
.print{
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tablePrint.png) no-repeat left center;
}
.tableRBtn {
padding-left: 16px;
color: #1f93d5;
cursor: pointer;
} }
/* 底部按钮组 */ /* 底部按钮组 */
.bottom-btn-group { .bottom-btn-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 30px; margin-top: 30px;
margin: 30px 0;
} }
.bottom-btn-group button { .bottom-btn-group button {
background-color: #1890ff; height: 35px;
min-width: 100px;
padding: 0 20px;
background-color: #1f93d5;
color: #fff; color: #fff;
border: none; border: none;
padding: 15px 30px;
border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-weight: bold;
border-radius: 5px;
font-size: 1em;
margin-right: 20px;
}
.bottom-btn-group button:hover {
background-color: #229EE6;
} }
#pdfArea {
position: absolute;
left: -9999px;
top: 0;
width: 1060px;
background: #fff;
}
.title {
padding: 30px 0 4px 0;
text-align: center;
font-weight: normal;
font-size: 14px;
}
.print-date {
float: right;
margin-right: 5px;
font-size: 14px;
}
.table_none {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 14px;
/* ✅ 平分列宽 */
table-layout: fixed;
}
.ths, .tds {
color: #000 !important;
border: 1px solid #000 !important;
padding: 4px;
text-align: center;
font-weight: normal;
word-break: break-all;
}
.tds:nth-child(1), /* 账号 */
.tds:nth-child(5), /* 账面余额 */
.tds:nth-child(6), /* 可用余额 */
.tds:nth-child(11), /* 历史余额 */
.tds:nth-child(12) /* 时间 */
{
color: #000;
font-weight: 500 !important;
}
.ths {
background-color: #fff;
font-weight: normal;
}
</style> </style>
<script src="./js/pako.min.js"></script>
</head> </head>
<body> <body>
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > 活期账户 当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
</div> </div>
<!-- 账户信息卡片 -->
<!-- 账户标题栏 --> <div class="account-card">
<div class="account-header"> <div class="account-number">
<div class="account-number">4205****1941</div> <div>4205***1941</div>
<a href="#" class="收支视图"> </div>
<span>⦿</span> 收支视图 <table class="info-table" border="none">
</a> <tr>
<td>账户名称:</td>
<td>中科软盈（武汉）科技有限公司 </td>
<td>账号:</td>
<td>42050123704500001941 </td>
</tr>
<tr>
<td>开户机构名称:</td>
<td>中国建设银行股份有限公司武汉南湖大道支行 </td>
<td>开户机构号:</td>
<td>420237045 </td>
</tr>
<tr>
<td>本外币合一标识:</td>
<td>- </td>
<td>币种: </td>
<td>人民币元 </td>
</tr>
<tr>
<td>钞/汇:</td>
<td>钞 </td>
<td>账户性质:</td>
<td>基本户 </td>
</tr>
<tr>
<td>外币资金性质:</td>
<td>- </td>
<td>账户状态:</td>
<td>正常 </td>
</tr>
<tr>
<td>可用余额:</td>
<td>773,541.62 </td>
<td>开户日期:</td>
<td>20251105 </td>
</tr>
<tr>
<td>开户许可证号/基本存款账户编号信息:</td>
<td>J5210095814103 </td>
<td>银行联行号:</td>
<td>105521000764 </td>
</tr>
</table>
</div> </div>
<!-- 账户信息表格 -->
<table class="info-table">
<tr>
<td>账户名称：</td>
<td>中科软盈（武汉）科技有限公司</td>
<td>账号：</td>
<td>42050123704500001941</td>
</tr>
<tr>
<td>开户机构名称：</td>
<td>中国建设银行股份有限公司武汉南湖大道支行</td>
<td>开户机构号：</td>
<td>420237045</td>
</tr>
<tr>
<td>本外币合一标识：</td>
<td>-</td>
<td>币种：</td>
<td>人民币元</td>
</tr>
<tr>
<td>钞/汇：</td>
<td>钞</td>
<td>账户性质：</td>
<td>基本户</td>
</tr>
<tr>
<td>外币资金性质：</td>
<td>-</td>
<td>账户状态：</td>
<td>正常</td>
</tr>
<tr>
<td>可用余额：</td>
<td>775, 342.62</td>
<td>开户日期：</td>
<td>20251105</td>
</tr>
<tr>
<td>开户许可证号/基本存款账户编号信息：</td>
<td>J5210095814103</td>
<td>银行联行号：</td>
<td>105521000764</td>
</tr>
</table>
<!-- 工具栏 -->
<div class="toolbar"> <div class="toolbar">
<a href="#"><span>↓</span> 下载全部</a> <div class="tableLBtn_box">
<a href="#"><span>🖨️</span> 打印</a> <div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载全部</a>
</div>
<div class="downloadBox" style="left: 0;">
<ul>
<li class="firstLi">Txt下载</li>
<li>Excel下载</li>
<li>Csv下载</li>
<li>PDF下载</li>
</ul>
</div>
</div>
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn print">打印</a>
</div>
<div class="downloadBox" style="right: 0; ">
<ul>
<li onclick="printPage('1')" class="firstLi">网页打印</li>
<li onclick="printPage('2')">PDF打印</li>
</ul>
</div>
</div>
</div> </div>
<!-- 底部按钮组 -->
<div class="bottom-btn-group"> <div class="bottom-btn-group">
<button>基本存款信息打印</button> <button>基本存款信息打印</button>
<button>存款人查询密码打印</button> <button>存款人查询密码打印</button>
<button onclick="onBack()">返回</button> <button onclick="onBack()">返回</button>
</div> </div>
<div id="pdfArea">
<div class="title"></div>
<div class="table-header">
<div class="print-date" id="printDate"></div>
<table class="table_none">
<tr>
<td class="tds">账户名称</td>
<td class="tds">中科软赢（武汉）科技有限公司</td>
<td class="tds">账号</td>
<td class="tds">42050123704500001941</td>
<td class="tds">开户机构号</td>
<td class="tds">420237045</td>
</tr>
<tr>
<td class="tds">开户机构名称</td>
<td class="tds">中国建设银行股份有限公司武汉汉阳大道支行</td>
<td class="tds">本外币合一标识</td>
<td class="tds"></td>
<td class="tds">币种</td>
<td class="tds">人民币元</td>
</tr>
<tr>
<td class="tds">钞/汇</td>
<td class="tds"></td>
<td class="tds">账户性质</td>
<td class="tds">基本户</td>
<td class="tds">外币资金性质</td>
<td class="tds"></td>
</tr>
<tr>
<td class="tds">账户状态</td>
<td class="tds">正常</td>
<td class="tds">开户日期</td>
<td class="tds">20251105</td>
<td class="tds">可用余额</td>
<td class="tds">773,541.62</td>
</tr>
<tr>
<td class="tds">透支金额</td>
<td class="tds">0.00</td>
<td class="tds">普通业务冻结金额</td>
<td class="tds">0.00</td>
<td class="tds">存款司法冻结金额</td>
<td class="tds">0.00</td>
</tr>
<tr>
<td class="tds">在途业务冻结金额</td>
<td class="tds">0.00</td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
</tr>
<tr>
<td class="tds">开户许可证号/基本存款账户编号信息</td>
<td class="tds">J5210095814103</td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
<td class="tds"></td>
</tr>
</table>
</div>
</div>
</body> </body>
</html>
<script> <script>
function onBack() { document.querySelectorAll('.downloadBox li').forEach((el, index) => {
window.history.back(); el.addEventListener('click', function () {
submitSelect('0', String(index + 1));
});
});
// 通用函数
function getTableData() {
var table = document.querySelector(".info-table");
if (!table) return [];
var rows = table.querySelectorAll('tr');
// ✅ 表头（你自己定义）
var header = [
"账户名称","账号","开户机构号","开户机构名称",
"本外币合一标识","币种","钞/汇","账户性质",
"外币资金性质","账户状态","开户日期","可用余额",
"开户许可证号/基本存款账户编号信息"
];
var body = [];
rows.forEach(tr => {
var cells = tr.querySelectorAll('td');
for (var i = 1; i < cells.length; i += 2) {
let text = cells[i].innerText
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (
!text ||
text.includes("点击查询") ||
text === "-" ||
text === "--"
) {
text = "";
}
body.push(text);
}
});
[body[2], body[3]] = [body[3], body[2]];
return [header, body];
}
// 下载方法
function downloadFile(content, fileName, type) {
var blob = new Blob([content], { type: type });
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
}
function submitSelect(scope, type) {
var data = getTableData();
switch (type) {
case '1':
case '5':
case '21':
case '25':
downloadTXT(data);
break;
case '2':
case '6':
case '22':
case '26':
downloadExcel(data);
break;
case '3':
case '7':
case '23':
case '27':
downloadCSV(data);
break;
case '4':
case '8':
case '24':
case '28':
downloadPDF(data);
break;
}
}
function downloadTXT(data) {
var list = data[1]
var result = [];
var colLength = [9, 9, 4, 5, 10, 10, 7, 5, 5, 12, 5, 7];
var colLengths = [28, 16, 3, 7, 1, 1, 3, 2, 2, 21, 11, 20];
function format(str, len, index) {
str = (str || "")
.toString()
.replace(/\u00A0/g, '')
.replace(/\s+/g, ' ')
.trim();
if (index === 2) len += 2;
if (str.length > len) {
str = str.substring(0, len);
}
var space = " ".repeat(len - str.length);
return `"${str + space}"`;
}
var header = [
"账户名称","账号","开户机构号","开户机构名称",
"本外币合一标识","币种","钞/汇","账户性质",
"外币资金性质","账户状态","开户日期","可用余额","开户许可证号/基本存款账户编号信息"
];
var headerRow = header.map((item, i) =>
format(item, colLength[i] || 10, i)
);
result.push(headerRow.join(','));
list.forEach(row => {
var formatted = row.slice(0, -1).map((item, idx) =>
format(item, colLengths[idx] || 20, idx)
);
result.push(formatted.join(','));
});
var content = result.join('\n');
downloadFile(content, '活期账户详情下载.txt', 'text/plain');
}
function downloadExcel(list) {
let arr = [
["中国建设银行"],
["账户信息查询下载"],
];
list[1].pop()
let data = [...arr,...list]
const ws = XLSX.utils.aoa_to_sheet(data);
ws["!merges"] = [
{ s: { r: 1, c: 0 }, e: { r: 1, c: 7 } }
];
const baseFont = {
name: "Arial",
sz: 10
};
ws["A1"].s = {
font: baseFont
};
ws["A2"].s = {
font: { ...baseFont, bold: true },
alignment: { horizontal: "center", vertical: "center" }
};
data[2].forEach((_, i) => {
const cell = XLSX.utils.encode_cell({ r: 2, c: i });
ws[cell].s = {
font: baseFont,
alignment: { horizontal: "center", vertical: "center" }
};
});
data[3].forEach((val, i) => {
const cellRef = XLSX.utils.encode_cell({ r: 3, c: i });
const isNumber = /^-?\d+(\.\d+)?$/.test(val);
ws[cellRef] = {
v: val,
t: "s",
s: {
font: baseFont,
alignment: { horizontal: "left", vertical: "center" }
}
};
});
ws["!cols"] = [
{ wch: 24.29 }, { wch: 21.29 }, { wch: 12.29 }, { wch: 12.29 },
{ wch: 10.29 }, { wch: 10.29 }, { wch: 16.29 }, { wch: 15.29 },
{ wch: 16.29 }, { wch: 17.29 }, { wch: 18.29 }, { wch: 20.29 },
];
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "账户信息");
const wbout = XLSX.write(wb, {
bookType: "xlsx",
type: "array"
});
saveAs(new Blob([wbout]), "活期账户详情下载.xls");
}
function downloadCSV(data) {
var content = data.map(row => row.join(',')).join('\n');
downloadFile(content, '活期账户详情下载.csv', 'text/csv');
}
/* ✅ 打印日期 */
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // ✅ 不补0
const day = now.getDate(); // ✅ 不补0
document.getElementById("printDate").innerText =
`打印日期：${year}年${month}月${day}日`;
/* ✅ PDF导出 */
async function downloadPDF() {
const { jsPDF } = window.jspdf;
const element = document.getElementById("pdfArea");
const canvas = await html2canvas(element, {
scale: 2,
useCORS: true
});
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({
orientation: "p",
unit: "mm",
format: [210, 297]
});
const pageWidth = 210;
const pageHeight = 297;
const margin = 5;
let imgWidth = pageWidth - margin * 2;
let imgHeight = canvas.height * imgWidth / canvas.width;
if (imgHeight > pageHeight - margin * 2) {
imgHeight = pageHeight - margin * 2;
imgWidth = canvas.width * imgHeight / canvas.height;
} }
</script>
\ No newline at end of file const x = (pageWidth - imgWidth) / 2;
const y = margin;
pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight);
pdf.save("活期账户详情下载.pdf");
}
function printPage(type) {
if (type == '2') {
return downloadPDF();
}
var table = document.querySelector('.info-table');
if (!table) return;
var tableHTML = table.outerHTML;
var now = new Date();
var timeStr = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
var win = window.open('', '_blank');
var html = `
<html>
<head>
<title>中国建设银行 企业网上银行</title>
<style>
body {
font-family: SimSun, Arial;
margin: 0;
font-size: 14px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
border: 1px solid #62a7e3;
}
td {
padding: 6px;
border: none !important;
border-bottom: 1px solid rgba(98, 167, 227, 0.4) !important;
}
tr:last-child td {
border-bottom: none;
}
</style>
</head>
<body>
${tableHTML}
</body>
</html>
`;
win.document.write(html);
win.document.close();
win.onload = function () {
win.print();
win.close();
};
}
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment