Skip to content

B
buildbank-replica
Commit 3c5a821b authored by 黄同智's avatar 黄同智
Browse files
Options

更多

Co-authored-by: 's avatarCopilot <copilot@github.com>
parent e96642c9
Hide whitespace changes
Inline Side-by-side
Showing with 523 additions and 23 deletions
account_detail-long.html 0 → 100644
View file @ 3c5a821b
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="calendar-plugin/calendar.css">
<title>交易明细查询</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
}
body {
background-color: #ffffff;
padding: 0;
}
/* 顶部导航栏 */
.top-nav {
background-color: #ffffff;
border-bottom: 2px solid #1890ff;
display: flex;
align-items: center;
padding: 10px 20px;
gap: 40px;
}
.top-nav a {
color: #1890ff;
text-decoration: none;
font-size: 16px;
}
/* 面包屑 */
.breadcrumb {
background-color: #f5f7fa;
padding: 15px 20px;
color: #666;
margin: 10px 0;
}
/* 查询表单 */
.form-container {
padding: 20px;
}
.form-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 15px;
/* gap: 10px; */
}
.form-label {
width: 120px;
text-align: right;
color: #333;
}
.form-label .required {
color: red;
margin-right: 4px;
}
.form-input,
.form-select {
padding: 5px 8px;
border: 1px solid #d9d9d9;
width: 230px;
}
.select-down-icon {
height: 31px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
border: 1px solid #d9d9d9;
border-left: none;
}
.down-arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #b0b0b0;
}
.form-select.hide {
appearance: none;
}
.form-input.small {
width: 111px;
}
.px-2 {
padding-left: 2px;
padding-right: 2px;
}
.form-input.x-small {
width: 84px;
}
.form-input.wide {
width: 234px;
}
.radio-group {
display: flex;
gap: 30px;
margin-left: 10px;
}
.radio-group label {
display: flex;
align-items: center;
input {
margin-right: 5px;
}
}
.form-tip {
color: #0066b3;
margin-left: 8px;
}
.form-question {
cursor: pointer;
margin-left: 8px;
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 50%;
background-color: #1890ff;
color: #fff;
padding-left: 4px;
}
.question1 {
margin-left: 30px;
}
.question2 {
margin-left: 70px;
}
/* 按钮组 */
.btn-group {
display: flex;
gap: 20px;
margin: 30px 0;
padding-left: 120px;
}
.btn-group button {
background-color: #1f93d5;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
height: 35px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* 温馨提示 */
.tips-section {
background-color: #f0f7ff;
padding: 10px;
border: 1px solid #e8e8e8;
}
.tips-title {
color: red;
font-weight: bold;
margin-bottom: 10px;
}
.tips-section p {
line-height: 1.8;
color: #333;
}
.mt-24 {
margin-top: 24px;
}
.mt-20 {
margin-top: 20px;
}
.date-picker {
width: 27px;
height: 27px;
position: relative;
}
.date-picker .date-input {
position: absolute;
top: 0;
left: 0;
width: 27px;
height: 27px;
opacity: 0;
z-index: 1;
}
.date-picker .dateimg {
width: 27px;
height: 27px;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a>
<a href="#">批量账户查询</a>
<a href="#">电子回单查询</a>
<a href="#">集成资讯 ∨</a>
<a href="#">电子对账 ∨</a>
<a href="#">经营分析</a>
<a href="#">操作指南</a>
<a href="#">明细清单</a>
</div> -->
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 查询表单 -->
<div class="form-container">
<div class="form-title">交易明细查询</div>
<form id="myForm">
<div class="form-row">
<label class="form-label"><span class="required">*</span>查询类型：</label>
<select class="form-select">
<option value="1">明细</option>
<option value="2">明细汇总</option>
</select>
</div>
<div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom">
<div class="date-picker" id="sDate">
<img class="dateimg" src="/imagse/date.png" alt="" />
</div>
<span>-</span>
<input type="text" id="dateTo" class="form-input small x-small" name="dateTo">
<div class="date-picker" id="eDate">
<img class="dateimg" src="/imagse/date.png" alt="" />
<!-- <input class="date-input dateTo" type="date" /> -->
</div>
<div class="radio-group">
<label><input type="radio" name="quickDate" value="7" /> 最近7天</label>
<label><input type="radio" name="quickDate" value="14" /> 最近14天</label>
<label><input type="radio" name="quickDate" value="30" /> 最近30天</label>
</div>
<span class="form-question question1">？</span>
</div>
<div class="form-row">
<label class="form-label">交易金额：</label>
<input type="text" class="form-input small" name="amtFrom">
<span class="px-2">-</span>
<input type="text" class="form-input small" name="amtTo">
</div>
<div class="form-row">
<label class="form-label">交易方向：</label>
<div class="radio-group">
<label><input type="radio" name="direction" checked value="all"> 全部</label>
<label><input type="radio" name="direction" value="in"> 转入</label>
<label><input type="radio" name="direction" value="out"> 转出</label>
</div>
</div>
<div class="form-row mt-24">
<label class="form-label">冲正交易：</label>
<div class="radio-group">
<label><input type="radio" name="reverse" checked> 显示</label>
<label><input type="radio" name="reverse"> 不显示</label>
</div>
<span class="form-question question2">？</span>
</div>
<div class="form-row mt-20">
<label class="form-label">对方户名：</label>
<input type="text" class="form-input wide" name="counterName">
<span class="form-tip">录入生僻字</span>
</div>
<div class="form-row">
<label class="form-label">对方账号：</label>
<input type="text" class="form-input wide" name="counterAccount">
</div>
<div class="form-row">
<label class="form-label">交易备注：</label>
<input type="text" class="form-input wide" name="remark">
<span class="form-tip">录入生僻字</span>
</div>
<div class="form-row">
<label class="form-label">交易摘要：</label>
<!-- name="summary" -->
<select class="form-select hide" style="width: 200px;">
<option>请选择</option>
</select>
<div class="select-down-icon">
<div class="down-arrow"></div>
</div>
</div>
<div class="form-row">
<label class="form-label">起止明细编号：</label>
<input type="text" class="form-input small" name="detailFrom">
<span class="px-2">-</span>
<input type="text" class="form-input small" name="detailTo">
<span class="form-question">？</span>
</div>
<!-- 按钮组 -->
<div class="btn-group">
<button onclick="onAccount(1)">确定</button>
<button onclick="onAccount(2)">返回</button>
<button onclick="onAccount(3)" type="submit">查询长期</button>
</div>
</form>
</div>
<!-- 温馨提示 -->
<div class="tips-section">
<div class="tips-title">温馨提示</div>
<p>1、签约汇总记账账户仅提供历史明细查询。</p>
<p>2、当前交易明细查询页面仅支持查询最近一年半的账户明细，“查询长期”支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。</p>
</div>
<script src="calendar-plugin/calendar.js"></script>
</body>
</html>
<script>
const pickerStart = new CalendarPlugin({
trigger: '#sDate',
onSelect: function (date) {
const result = date.replaceAll('-', '');
document.getElementById('dateFrom').value = result || '未选择';
}
});
const pickerEnd = new CalendarPlugin({
trigger: '#eDate',
onSelect: function (date) {
const result = date.replaceAll('-', '');
document.getElementById('dateTo').value = result || '未选择';
}
});
// 快速日期
document.querySelectorAll('input[name=quickDate]').forEach(el => {
el.addEventListener('change', () => {
const days = parseInt(el.value, 10);
const today = new Date('2026-04-29');
const from = new Date(today.getTime() - days * 86400000);
const fmt = d => d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');
document.getElementById('dateFrom').value = fmt(from);
document.getElementById('dateTo').value = fmt(today);
});
});
const form = document.getElementById('myForm');
function onAccount(number) {
if( number == 1) {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
const formData = new FormData(form);
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => {
window.location.href = './account_list.html'
}, 500);
});
}
if (number == 2) {
window.history.back();
}
if (number == 3) {
}
}
</script>
\ No newline at end of file
account_detail.html
View file @ 3c5a821b
......@@ -284,10 +284,6 @@
</div>
<span class="form-question question1">？</span>
</div>
<div class="form-row">
<label class="form-label">交易金额：</label>
<input type="text" class="form-input small" name="amtFrom">
......
account_list.html
View file @ 3c5a821b
......@@ -152,13 +152,13 @@
}
.lashen {
transform: scaleY(1.8);
transform: scaleY(1.6);
color: #1890ff;
}
.detail-table th {
background-color: #c8e0f5;
padding: 10px;
padding: 0px 5px;
text-align: left;
font-weight: normal;
}
......@@ -180,6 +180,7 @@
.detail-table td {
padding: 0 5px;
border: none;
overflow-wrap: break-word;
}
.toolbar-box {
......@@ -409,8 +410,8 @@
<table class="detail-table grid" id="resultTable">
<thead>
<tr>
<th class="col-select" style="min-width: 54px;">选择</th>
<th style="min-width: 84px;">
<th class="col-select" style="width: 42px;">选择</th>
<th style="width: 77px;">
<div class="xflex">
<span>交易时间 </span>
<div class="jiantou">
......@@ -419,7 +420,7 @@
</div>
</div>
</th>
<th colspan="2" style="min-width: 200px;">
<th colspan="2" style="width: 220px;">
<div class="thbox">
<div>发生额/元</div>
<div class="flex">
......@@ -440,7 +441,7 @@
</div>
</div>
</th>
<th style="min-width: 84px;">
<th style="width: 110px;">
<div class="xflex">
<span>余额 </span>
<div class="jiantou">
......@@ -449,7 +450,7 @@
</div>
</div>
</th>
<th style="min-width: 160px;">
<th style="width: 151px;">
<div class="xflex">
<span>对方户名 </span>
<div class="jiantou">
......@@ -458,7 +459,7 @@
</div>
</div>
</th>
<th style="min-width: 160px;">
<th style="width: 150px;">
<div class="xflex">
<span>对方账号 </span>
<div class="jiantou">
......@@ -467,7 +468,7 @@
</div>
</div>
</th>
<th style="min-width: 100px;">
<th style="width: 101px;">
<div class="xflex">
<span>对方<br>开户机构 </span>
<div class="jiantou">
......@@ -476,7 +477,7 @@
</div>
</div>
</th>
<th style="min-width: 85px;">
<th style="width: 86px;">
<div class="xflex">
<span>记账日期 </span>
<div class="jiantou">
......@@ -485,7 +486,7 @@
</div>
</div>
</th>
<th style="min-width: 85px;">
<th style="width: 76px;">
<div class="xflex">
<span>摘要 </span>
<div class="jiantou">
......@@ -494,7 +495,7 @@
</div>
</div>
</th>
<th style="min-width: 100px;">
<th style="width: 101px;">
<div class="xflex">
<span>备注 </span>
<div class="jiantou">
......@@ -503,8 +504,54 @@
</div>
</div>
</th>
<th>
<div class="lashen">>></div>
<th class="thmore" style="width: 143px;display: none;">
<div class="xflex">
<span>账户明细编号-<br>交易流水号 </span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 70px;display: none;">
<div class="xflex">
<span>企业-<br>流水号 </span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 108px;display: none;">
<div class="xflex">
<span>凭证种类</span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 108px;display: none;">
<div class="xflex">
<span>凭证号</span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 108px;display: none;">
<div class="xflex">
<span>交易介质编号</span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th style="width: 40px;">
<div id="moreright" class="lashen" onclick="lookmore()">>></div>
<div id="moreleft" style="display: none;" class="lashen" onclick="noLookmore()"><<</div>
</th>
</tr>
</thead>
......@@ -558,6 +605,9 @@
</html>
<script>
let table = document.getElementById("resultTable");
table.style.width = "1145px";
table.style.tableLayout = "fixed"; // 关键！
let CURRENT_ROWS = [];
let CURRENT_RANGE = { from: '', to: '' };
const params = JSON.parse(localStorage.getItem('accountQueryParams') || '{}');
......@@ -599,7 +649,7 @@
});
}
function render(rows) {
function render(rows, more) {
CURRENT_ROWS = rows;
const tbody = document.getElementById('tbody');
tbody.innerHTML = '';
......@@ -607,6 +657,8 @@
rows.forEach(r => {
totDebit += r.debit; totCredit += r.credit;
const tr = document.createElement('tr');
const moreTds = more ? `<td>222</td><td>222</td><td>222</td><td>222</td><td>222</td>` : '';
tr.innerHTML = `
<td class="center col-select"><input type="checkbox"></td>
<td class="center">${r.tradeTime?.replaceAll('-', '')}</td>
......@@ -619,6 +671,7 @@
<td class="center">${r.postDate?.replaceAll('-', '') || ''}</td>
<td class="center">${r.summary || ''}</td>
<td>${r.remark || ''}</td>
${moreTds}
<td></td>
`;
tbody.appendChild(tr);
......@@ -633,8 +686,6 @@
function doSearch() {
const v = params;
const rows = filterData(v);
console.log(3333, rows, v)
CURRENT_RANGE.from = v.dateFrom;
CURRENT_RANGE.to = v.dateTo;
// document.getElementById('resultArea').style.display = '';
......@@ -642,9 +693,33 @@
// document.getElementById('resultArea').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function lookmore() {
const ths = document.querySelectorAll('.thmore');
ths.forEach(th => {
if (th.style.display === 'none') {
th.style.display = '';
} else {
th.style.display = 'none';
}
});
const moreleft = document.getElementById('moreleft');
moreleft.style.display = '';
const moreright = document.getElementById('moreright');
moreright.style.display = 'none';
render(CURRENT_ROWS, true);
}
function noLookmore() {
const ths = document.querySelectorAll('.thmore');
ths.forEach(th => {
th.style.display = 'none';
});
const moreleft = document.getElementById('moreleft');
moreleft.style.display = 'none';
const moreright = document.getElementById('moreright');
moreright.style.display = '';
render(CURRENT_ROWS, false);
}
function onBack() {
window.history.back();
......
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