Skip to content

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

复刻项目

parent eacb3d4c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 46 deletions
account_detail-long.html
View file @ 33c4ab5c
...@@ -155,6 +155,53 @@ ...@@ -155,6 +155,53 @@
padding-left: 4px; padding-left: 4px;
} }
/* 气泡框 */
.bubble {
position: absolute;
bottom: calc(100% + 14px);
left: -25px;
width: 150px;
padding: 10px 5px;
color: #000000;
border-radius: 4px;
border: 1px solid #62A7E3;
background-color: #EAF5FE;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100;
pointer-events: none;
}
/* 显示气泡 */
.form-question:hover .bubble {
visibility: visible;
opacity: 1;
}
.bubble::before {
content: '';
position: absolute;
bottom: -12px;
left: 23px;
border-width: 12px 4px 0 10px;
border-style: solid;
border-color: #62A7E3 transparent transparent transparent;
z-index: 1;
}
/* 背景三角（内层，盖住部分边框） */
.bubble::after {
content: '';
position: absolute;
bottom: -9px;
left: 24px;
border-width: 9px 4px 0 8px;
border-style: solid;
border-color: #EAF5FE transparent transparent transparent;
z-index: 2;
}
.question1 { .question1 {
margin-left: 30px; margin-left: 30px;
} }
...@@ -194,10 +241,12 @@ ...@@ -194,10 +241,12 @@
bottom: 64px; bottom: 64px;
} }
.yy { .yy {
left: 264px; left: 264px;
bottom: 64px; bottom: 64px;
} }
.zz { .zz {
left: 390px; left: 390px;
bottom: 64px; bottom: 64px;
...@@ -285,12 +334,14 @@ ...@@ -285,12 +334,14 @@
<div class="form-row"> <div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label> <label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom"> <input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom"
oninput="startDate = this.value" onblur="handleBlur('dateFrom')">
<div class="date-picker" id="sDate"> <div class="date-picker" id="sDate">
<img class="dateimg" src="./images/date.png" alt="" /> <img class="dateimg" src="./images/date.png" alt="" />
</div> </div>
<span>-</span> <span>-</span>
<input type="text" id="dateTo" class="form-input small x-small" name="dateTo"> <input type="text" id="dateTo" class="form-input small x-small" name="dateTo"
oninput="endDate = this.value" onblur="handleBlur('dateTo')">
<div class="date-picker" id="eDate"> <div class="date-picker" id="eDate">
<img class="dateimg" src="./images/date.png" alt="" /> <img class="dateimg" src="./images/date.png" alt="" />
<!-- <input class="date-input dateTo" type="date" /> --> <!-- <input class="date-input dateTo" type="date" /> -->
...@@ -300,7 +351,11 @@ ...@@ -300,7 +351,11 @@
<label><input type="radio" name="quickDate" value="180" /> 最近180天</label> <label><input type="radio" name="quickDate" value="180" /> 最近180天</label>
<label><input type="radio" name="quickDate" value="365" /> 最近365天</label> <label><input type="radio" name="quickDate" value="365" /> 最近365天</label>
</div> </div>
<span class="form-question question1">？</span> <span class="form-question question1">？
<span class="bubble">
请输入或选择最近10年内的日期；每次查询时间段不超过1年；日期输入标准格式20180101，表示2018年1月1日
</span>
</span>
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">交易金额：</label> <label class="form-label">交易金额：</label>
...@@ -318,7 +373,7 @@ ...@@ -318,7 +373,7 @@
<label class="form-label">对方账号：</label> <label class="form-label">对方账号：</label>
<input type="text" class="form-input wide" name="counterAccount"> <input type="text" class="form-input wide" name="counterAccount">
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">交易摘要：</label> <label class="form-label">交易摘要：</label>
<!-- name="summary" --> <!-- name="summary" -->
...@@ -334,16 +389,21 @@ ...@@ -334,16 +389,21 @@
<input type="text" class="form-input small" name="detailFrom"> <input type="text" class="form-input small" name="detailFrom">
<span class="px-2">-</span> <span class="px-2">-</span>
<input type="text" class="form-input small" name="detailTo"> <input type="text" class="form-input small" name="detailTo">
<span class="form-question">？</span> <span class="form-question">？
<span class="bubble">
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。
</span>
</span>
</div> </div>
<!-- 按钮组 --> <!-- 按钮组 -->
<div style="height: 90px;"></div> <div style="height: 90px;"></div>
<button class="buttonx xx" onclick="onAccount(1)" type="submit">确定</button> <button class="buttonx xx" onclick="onAccount(1)" type="submit">确定</button>
</form> </form>
<button class="buttonx yy" onclick="onAccount(2)">返回</button> <button class="buttonx yy" onclick="onAccount(2)">返回</button>
<button onclick="onAccount(3)" type="submit" class="buttonx zz" style="width: auto;padding: 0 20px;">异步下载查询</button> <button onclick="onAccount(3)" type="submit" class="buttonx zz"
style="width: auto;padding: 0 20px;">异步下载查询</button>
</div> </div>
<!-- 温馨提示 --> <!-- 温馨提示 -->
...@@ -357,25 +417,66 @@ ...@@ -357,25 +417,66 @@
</html> </html>
<script> <script>
/**
* 解析 YYYYMMDD 格式为 Date 对象
* @param {string} dateStr - 8位数字字符串，如 20250101
* @returns {Date}
*/
function parseYYYYMMDD(dateStr) {
const year = parseInt(dateStr.substring(0, 4));
const month = parseInt(dateStr.substring(4, 6)) - 1;
const day = parseInt(dateStr.substring(6, 8));
return new Date(year, month, day);
}
/**
* 检测 YYYYMMDD 格式的日期间隔是否大于365天
* @param {string} startStr - 开始日期，如 20250101
* @param {string} endStr - 结束日期，如 20260101
* @returns {boolean}
*/
function isOver365DaysYYYYMMDD(startStr, endStr) {
const start = parseYYYYMMDD(startStr);
const end = parseYYYYMMDD(endStr);
const diffDays = (end - start) / (1000 * 60 * 60 * 24);
return Math.abs(diffDays) > 365;
}
let startDate = '';
let endDate = '';
const handleBlur = (dateId) => {
console.log('handleBlur', startDate, endDate, isOver365DaysYYYYMMDD(startDate, endDate));
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) {
alert('起止日期间隔不能超过365天');
if (dateId === 'dateFrom') {
startDate = '';
document.getElementById(dateId).value = '未选择';
} else {
endDate = '';
document.getElementById(dateId).value = '未选择';
}
const checkedQuickDate = document.querySelector('input[name="quickDate"]:checked');
checkedQuickDate && (checkedQuickDate.checked = false);
}
};
const pickerStart = new CalendarPlugin({ const pickerStart = new CalendarPlugin({
trigger: '#sDate', trigger: '#sDate',
onSelect: function (date) { onSelect: function (date) {
const result = date.replaceAll('-', ''); startDate = date.replaceAll('-', '');
document.getElementById('dateFrom').value = result || '未选择'; handleBlur('dateFrom');
} }
}); });
const pickerEnd = new CalendarPlugin({ const pickerEnd = new CalendarPlugin({
trigger: '#eDate', trigger: '#eDate',
onSelect: function (date) { onSelect: function (date) {
const result = date.replaceAll('-', ''); endDate = date.replaceAll('-', '');
document.getElementById('dateTo').value = result || '未选择'; handleBlur('dateTo');
} }
}); });
// 快速日期 // 快速日期
document.querySelectorAll('input[name=quickDate]').forEach(el => { document.querySelectorAll('input[name=quickDate]').forEach(el => {
...@@ -391,8 +492,10 @@ ...@@ -391,8 +492,10 @@
const today = new Date(formattedDate); const today = new Date(formattedDate);
const from = new Date(today.getTime() - days * 86400000); 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'); const fmt = d => d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');
document.getElementById('dateFrom').value = fmt(from); startDate = fmt(from);
document.getElementById('dateTo').value = fmt(today); endDate = fmt(today);
document.getElementById('dateFrom').value = startDate;
document.getElementById('dateTo').value = endDate;
}); });
}); });
...@@ -401,7 +504,7 @@ ...@@ -401,7 +504,7 @@
function onAccount(number) { function onAccount(number) {
if( number == 1) { if (number == 1) {
form.addEventListener('submit', async (e) => { form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新 e.preventDefault(); // 阻止页面刷新
......
account_detail.html
View file @ 33c4ab5c
...@@ -157,15 +157,18 @@ ...@@ -157,15 +157,18 @@
transition: all 0.2s; transition: all 0.2s;
} }
/* 气泡框 - 完全参照截图风格：白底、圆角、箭头、阴影，左侧竖条装饰+列表排版 */ /* 气泡框 */
.bubble { .bubble {
position: absolute; position: absolute;
bottom: calc(100% + 14px); bottom: calc(100% + 14px);
left: 0; left: -25px;
width: 320px; width: 150px;
background: #ffffff; padding: 10px 5px;
border-radius: 16px; text-align: left;
box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.05); color: #000000;
border-radius: 4px;
border: 1px solid #62A7E3;
background-color: #EAF5FE;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease;
...@@ -174,21 +177,32 @@ ...@@ -174,21 +177,32 @@
} }
/* 显示气泡 */ /* 显示气泡 */
.question:hover .bubble { .form-question:hover .bubble {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
/* 箭头：朝下（因为气泡在上方，箭头指向触发元素） */ .bubble::before {
content: '';
position: absolute;
bottom: -12px;
left: 23px;
border-width: 12px 4px 0 10px;
border-style: solid;
border-color: #62A7E3 transparent transparent transparent;
z-index: 1;
}
/* 背景三角（内层，盖住部分边框） */
.bubble::after { .bubble::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -8px; bottom: -9px;
left: 24px; left: 24px;
border-width: 8px 8px 0 8px; border-width: 9px 4px 0 8px;
border-style: solid; border-style: solid;
border-color: #ffffff transparent transparent transparent; border-color: #EAF5FE transparent transparent transparent;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); z-index: 2;
} }
.question1 { .question1 {
...@@ -328,12 +342,14 @@ ...@@ -328,12 +342,14 @@
<div class="form-row"> <div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label> <label class="form-label"><span class="required">*</span>起止日期：</label>
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom"> <input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom"
oninput="startDate = this.value" onblur="handleBlur('dateFrom')">
<div class="date-picker" id="sDate"> <div class="date-picker" id="sDate">
<img class="dateimg" src="./images/date.png" alt="" /> <img class="dateimg" src="./images/date.png" alt="" />
</div> </div>
<span>-</span> <span>-</span>
<input type="text" id="dateTo" class="form-input small x-small" name="dateTo"> <input type="text" id="dateTo" class="form-input small x-small" name="dateTo"
oninput="endDate = this.value" onblur="handleBlur('dateTo')">
<div class="date-picker" id="eDate"> <div class="date-picker" id="eDate">
<img class="dateimg" src="./images/date.png" alt="" /> <img class="dateimg" src="./images/date.png" alt="" />
<!-- <input class="date-input dateTo" type="date" /> --> <!-- <input class="date-input dateTo" type="date" /> -->
...@@ -345,7 +361,7 @@ ...@@ -345,7 +361,7 @@
</div> </div>
<span class="form-question question1">？ <span class="form-question question1">？
<span class="bubble"> <span class="bubble">
好景不长v计划表v看见啊办法深V合计阿萨办法v啊好几把送达方v科技啊表达法v 请输入或选择最近一年半内日期；每次查询时间段不超过3个月；日期标准输入格式20180101，表示2018年1月1日
</span> </span>
</span> </span>
</div> </div>
...@@ -375,7 +391,12 @@ ...@@ -375,7 +391,12 @@
<label><input type="radio" name="reverse" checked> 显示</label> <label><input type="radio" name="reverse" checked> 显示</label>
<label><input type="radio" name="reverse"> 不显示</label> <label><input type="radio" name="reverse"> 不显示</label>
</div> </div>
<span class="form-question question2">？</span> <span class="form-question question2">
？
<span class="bubble">
冲正交易流水查询仅供查询使用，不提供电子回执
</span>
</span>
</div> </div>
<div class="form-row mt-20"> <div class="form-row mt-20">
...@@ -409,7 +430,12 @@ ...@@ -409,7 +430,12 @@
<input type="text" class="form-input small" name="detailFrom"> <input type="text" class="form-input small" name="detailFrom">
<span class="px-2">-</span> <span class="px-2">-</span>
<input type="text" class="form-input small" name="detailTo"> <input type="text" class="form-input small" name="detailTo">
<span class="form-question">？</span> <span class="form-question">
？
<span class="bubble">
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。
</span>
</span>
</div> </div>
<div style="height: 90px;"></div> <div style="height: 90px;"></div>
...@@ -438,26 +464,67 @@ ...@@ -438,26 +464,67 @@
</html> </html>
<script> <script>
/**
* 解析 YYYYMMDD 格式为 Date 对象
* @param {string} dateStr - 8位数字字符串，如 20250101
* @returns {Date}
*/
function parseYYYYMMDD(dateStr) {
const year = parseInt(dateStr.substring(0, 4));
const month = parseInt(dateStr.substring(4, 6)) - 1;
const day = parseInt(dateStr.substring(6, 8));
return new Date(year, month, day);
}
/**
* 检测 YYYYMMDD 格式的日期间隔是否大于365天
* @param {string} startStr - 开始日期，如 20250101
* @param {string} endStr - 结束日期，如 20260101
* @returns {boolean}
*/
function isOver365DaysYYYYMMDD(startStr, endStr) {
const start = parseYYYYMMDD(startStr);
const end = parseYYYYMMDD(endStr);
const diffDays = (end - start) / (1000 * 60 * 60 * 24);
return Math.abs(diffDays) > 365;
}
let startDate = '';
let endDate = '';
const handleBlur = (dateId) => {
console.log('handleBlur', startDate, endDate, isOver365DaysYYYYMMDD(startDate, endDate));
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) {
alert('起止日期间隔不能超过365天');
if (dateId === 'dateFrom') {
startDate = '';
document.getElementById(dateId).value = '未选择';
} else {
endDate = '';
document.getElementById(dateId).value = '未选择';
}
const checkedQuickDate = document.querySelector('input[name="quickDate"]:checked');
checkedQuickDate && (checkedQuickDate.checked = false);
}
};
const pickerStart = new CalendarPlugin({ const pickerStart = new CalendarPlugin({
trigger: '#sDate', trigger: '#sDate',
onSelect: function (date) { onSelect: function (date) {
const result = date.replaceAll('-', ''); startDate = date.replaceAll('-', '');
document.getElementById('dateFrom').value = result || '未选择'; handleBlur('dateFrom');
} }
}); });
const pickerEnd = new CalendarPlugin({ const pickerEnd = new CalendarPlugin({
trigger: '#eDate', trigger: '#eDate',
onSelect: function (date) { onSelect: function (date) {
const result = date.replaceAll('-', ''); endDate = date.replaceAll('-', '');
document.getElementById('dateTo').value = result || '未选择'; handleBlur('dateTo');
} }
}); });
// 快速日期 // 快速日期
document.querySelectorAll('input[name=quickDate]').forEach(el => { document.querySelectorAll('input[name=quickDate]').forEach(el => {
el.addEventListener('change', () => { el.addEventListener('change', () => {
...@@ -470,15 +537,15 @@ ...@@ -470,15 +537,15 @@
const formattedDate = `${year}-${month}-${day}`; const formattedDate = `${year}-${month}-${day}`;
const today = new Date(formattedDate); const today = new Date(formattedDate);
const from = new Date(today.getTime() - days * 86400000); 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'); const fmt = d => d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0');
document.getElementById('dateFrom').value = fmt(from); startDate = fmt(from);
document.getElementById('dateTo').value = fmt(today); endDate = fmt(today);
document.getElementById('dateFrom').value = startDate;
document.getElementById('dateTo').value = endDate;
}); });
}); });
const form = document.getElementById('myForm'); const form = document.getElementById('myForm');
function onAccount(number) { function onAccount(number) {
...@@ -488,9 +555,9 @@ ...@@ -488,9 +555,9 @@
// 方式1：使用 FormData 自动搜集 // 方式1：使用 FormData 自动搜集
const formData = new FormData(form); const formData = new FormData(form);
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => { setTimeout(() => {
window.location.href = './account_list.html' window.localStorage.setItem('dateFrom', startDate);
window.location.href = './account_list.html';
}, 500); }, 500);
}); });
} }
......
account_list.html
View file @ 33c4ab5c
This diff is collapsed.
async_detail_list.html
View file @ 33c4ab5c
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
margin: 10px 0; margin: 10px 0;
} }
/* 筛选与工具栏 */ /* 筛选与工具栏 */
.filter { .filter {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
padding-left: 10px; padding-left: 10px;
padding-right: 11px; padding-right: 11px;
} }
.filter .left { .filter .left {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -364,7 +365,8 @@ ...@@ -364,7 +365,8 @@
table.grid th.col-select { table.grid th.col-select {
display: none; display: none;
} */ } */
.form-question {
.form-question {
cursor: pointer; cursor: pointer;
margin-left: 8px; margin-left: 8px;
display: inline-block; display: inline-block;
...@@ -377,6 +379,53 @@ ...@@ -377,6 +379,53 @@
color: #fff; color: #fff;
padding-left: 4px; padding-left: 4px;
} }
/* 气泡框 */
.bubble {
position: absolute;
bottom: calc(100% + 14px);
left: -25px;
width: 150px;
padding: 10px 5px;
color: #000000;
border-radius: 4px;
border: 1px solid #62A7E3;
background-color: #EAF5FE;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100;
pointer-events: none;
}
/* 显示气泡 */
.form-question:hover .bubble {
visibility: visible;
opacity: 1;
}
.bubble::before {
content: '';
position: absolute;
bottom: -12px;
left: 23px;
border-width: 12px 4px 0 10px;
border-style: solid;
border-color: #62A7E3 transparent transparent transparent;
z-index: 1;
}
/* 背景三角（内层，盖住部分边框） */
.bubble::after {
content: '';
position: absolute;
bottom: -9px;
left: 24px;
border-width: 9px 4px 0 8px;
border-style: solid;
border-color: #EAF5FE transparent transparent transparent;
z-index: 2;
}
</style> </style>
</head> </head>
...@@ -402,7 +451,11 @@ ...@@ -402,7 +451,11 @@
<div class="left"> <div class="left">
<input type="checkbox" id="filterCheckbox" onclick="openFilter(this)"> <input type="checkbox" id="filterCheckbox" onclick="openFilter(this)">
<span>筛选</span> <span>筛选</span>
<span class="form-question">？</span> <span class="form-question">？
<span class="bubble">
支持通过任务设定日期等要素筛选异步查询任务，设定日期仅支持按单日筛选
</span>
</span>
</div> </div>
</div> </div>
......
data/pdf_b64.js
View file @ 33c4ab5c
This source diff could not be displayed because it is too large. You can view the blob instead.
data/transactionDetailData.js
View file @ 33c4ab5c
This source diff could not be displayed because it is too large. You can view the blob instead.
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