Skip to content

B
buildbank-replica
Commit e7d0a00d authored by 饶来安's avatar 饶来安
Browse files
Options

样式微调

parent c1585d8c
Show whitespace changes
Inline Side-by-side
Showing with 321 additions and 234 deletions
account_detail-long.html
View file @ e7d0a00d
<!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"> <link rel="stylesheet" href="calendar-plugin/calendar.css" />
<link rel="stylesheet" href="calendar-plugin/calendar.css">
<title>交易明细查询</title> <title>交易明细查询</title>
<style> <style>
* { * {
...@@ -62,7 +61,6 @@ ...@@ -62,7 +61,6 @@
/* gap: 10px; */ /* gap: 10px; */
} }
.form-label { .form-label {
width: 120px; width: 120px;
text-align: right; text-align: right;
...@@ -142,11 +140,13 @@ ...@@ -142,11 +140,13 @@
} }
.form-question { .form-question {
position: relative;
cursor: pointer; cursor: pointer;
margin-left: 8px; margin-left: 8px;
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
box-sizing: content-box;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
...@@ -162,13 +162,16 @@ ...@@ -162,13 +162,16 @@
left: -25px; left: -25px;
width: 150px; width: 150px;
padding: 10px 5px; padding: 10px 5px;
text-align: left;
color: #000000; color: #000000;
border-radius: 4px; border-radius: 4px;
border: 1px solid #62A7E3; border: 1px solid #62a7e3;
background-color: #EAF5FE; 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;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
} }
...@@ -180,25 +183,25 @@ ...@@ -180,25 +183,25 @@
} }
.bubble::before { .bubble::before {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -12px; bottom: -12px;
left: 23px; left: 23px;
border-width: 12px 4px 0 10px; border-width: 12px 4px 0 10px;
border-style: solid; border-style: solid;
border-color: #62A7E3 transparent transparent transparent; border-color: #62a7e3 transparent transparent transparent;
z-index: 1; z-index: 1;
} }
/* 背景三角（内层，盖住部分边框） */ /* 背景三角（内层，盖住部分边框） */
.bubble::after { .bubble::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -9px; bottom: -9px;
left: 24px; left: 24px;
border-width: 9px 4px 0 8px; border-width: 9px 4px 0 8px;
border-style: solid; border-style: solid;
border-color: #EAF5FE transparent transparent transparent; border-color: #eaf5fe transparent transparent transparent;
z-index: 2; z-index: 2;
} }
...@@ -237,19 +240,18 @@ ...@@ -237,19 +240,18 @@
} }
.xx { .xx {
left: 140px; left: 120px;
bottom: 64px; bottom: 34px;
} }
.yy { .yy {
left: 264px; left: 245px;
bottom: 64px; bottom: 34px;
} }
.zz { .zz {
left: 390px; left: 370px;
bottom: 64px; bottom: 34px;
} }
/* 温馨提示 */ /* 温馨提示 */
...@@ -298,10 +300,13 @@ ...@@ -298,10 +300,13 @@
width: 27px; width: 27px;
height: 27px; height: 27px;
} }
#myForm {
position: relative;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<!-- <div class="top-nav"> <!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a> <a href="#">账户信息查询 ∨</a>
...@@ -315,9 +320,7 @@ ...@@ -315,9 +320,7 @@
</div> --> </div> -->
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 查询表单 --> <!-- 查询表单 -->
<div class="form-container"> <div class="form-container">
...@@ -325,7 +328,9 @@ ...@@ -325,7 +328,9 @@
<form id="myForm"> <form id="myForm">
<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
>
<select class="form-select"> <select class="form-select">
<option value="1">明细</option> <option value="1">明细</option>
<option value="2">明细汇总</option> <option value="2">明细汇总</option>
...@@ -333,51 +338,76 @@ ...@@ -333,51 +338,76 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label> <label class="form-label"
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom" ><span class="required">*</span>起止日期：</label
oninput="startDate = this.value" onblur="handleBlur('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
oninput="endDate = this.value" onblur="handleBlur('dateTo')"> 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" /> -->
</div> </div>
<div class="radio-group"> <div class="radio-group">
<label><input type="radio" name="quickDate" value="90" /> 最近90天</label> <label
<label><input type="radio" name="quickDate" value="180" /> 最近180天</label> ><input type="radio" name="quickDate" value="90" />
<label><input type="radio" name="quickDate" value="365" /> 最近365天</label> 最近90天</label
>
<label
><input type="radio" name="quickDate" value="180" />
最近180天</label
>
<label
><input type="radio" name="quickDate" value="365" />
最近365天</label
>
</div> </div>
<span class="form-question question1">？ <span class="form-question question1"
>？
<span class="bubble"> <span class="bubble">
请输入或选择最近10年内的日期；每次查询时间段不超过1年；日期输入标准格式20180101，表示2018年1月1日 请输入或选择最近10年内的日期；每次查询时间段不超过1年；日期输入标准格式<br />
20180101，表示2018年1月1日
</span> </span>
</span> </span>
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">交易金额：</label> <label class="form-label">交易金额：</label>
<input type="text" class="form-input small" name="amtFrom"> <input type="text" class="form-input small" name="amtFrom" />
<span class="px-2">-</span> <span class="px-2">-</span>
<input type="text" class="form-input small" name="amtTo"> <input type="text" class="form-input small" name="amtTo" />
</div> </div>
<div class="form-row mt-20"> <div class="form-row mt-20">
<label class="form-label">对方户名：</label> <label class="form-label">对方户名：</label>
<input type="text" class="form-input wide" name="counterName"> <input type="text" class="form-input wide" name="counterName" />
</div> </div>
<div class="form-row"> <div class="form-row">
<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" -->
<select class="form-select hide" style="width: 200px;"> <select class="form-select hide" style="width: 200px">
<option>请选择</option> <option>请选择</option>
</select> </select>
<div class="select-down-icon"> <div class="select-down-icon">
...@@ -386,10 +416,11 @@ ...@@ -386,10 +416,11 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">起止明细编号：</label> <label class="form-label">起止明细编号：</label>
<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 class="form-question"
>？
<span class="bubble"> <span class="bubble">
仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。 仅输入起始编号时，查询该编号（含）之后的明细；仅输入截止编号时，查询该编号（含）之前的明细；起止编号同时输入时，截止编号需大于或等于起始编号。
</span> </span>
...@@ -397,24 +428,33 @@ ...@@ -397,24 +428,33 @@
</div> </div>
<!-- 按钮组 --> <!-- 按钮组 -->
<div style="height: 90px;"></div> <div style="height: 90px">
<button class="buttonx xx" onclick="onAccount(1)" type="submit">
<button class="buttonx xx" onclick="onAccount(1)" type="submit">确定</button> 确定
</form> </button>
<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" <button
style="width: auto;padding: 0 20px;">异步下载查询</button> onclick="onAccount(3)"
type="submit"
class="buttonx zz"
style="width: auto; padding: 0 20px"
>
异步下载查询
</button>
</div>
</form>
</div> </div>
<!-- 温馨提示 --> <!-- 温馨提示 -->
<div class="tips-section"> <div class="tips-section">
<div class="tips-title">温馨提示</div> <div class="tips-title">温馨提示</div>
<p>1、签约汇总记账账户仅提供历史明细查询。</p> <p>1、签约汇总记账账户仅提供历史明细查询。</p>
<p>2、当前交易明细查询页面支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。</p> <p>
2、当前交易明细查询页面支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。
</p>
</div> </div>
<script src="calendar-plugin/calendar.js"></script> <script src="calendar-plugin/calendar.js"></script>
</body> </body>
</html> </html>
<script> <script>
/** /**
...@@ -442,77 +482,87 @@ ...@@ -442,77 +482,87 @@
return Math.abs(diffDays) > 365; return Math.abs(diffDays) > 365;
} }
let startDate = ''; let startDate = "";
let endDate = ''; let endDate = "";
const handleBlur = (dateId) => { const handleBlur = (dateId) => {
console.log('handleBlur', startDate, endDate, isOver365DaysYYYYMMDD(startDate, endDate)); console.log(
"handleBlur",
startDate,
endDate,
isOver365DaysYYYYMMDD(startDate, endDate),
);
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) { if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) {
alert('起止日期间隔不能超过365天'); alert("起止日期间隔不能超过365天");
if (dateId === 'dateFrom') { if (dateId === "dateFrom") {
startDate = ''; startDate = "";
document.getElementById(dateId).value = '未选择'; document.getElementById(dateId).value = "未选择";
} else { } else {
endDate = ''; endDate = "";
document.getElementById(dateId).value = '未选择'; document.getElementById(dateId).value = "未选择";
} }
const checkedQuickDate = document.querySelector('input[name="quickDate"]:checked'); const checkedQuickDate = document.querySelector(
'input[name="quickDate"]:checked',
);
checkedQuickDate && (checkedQuickDate.checked = false); checkedQuickDate && (checkedQuickDate.checked = false);
} }
}; };
const pickerStart = new CalendarPlugin({ const pickerStart = new CalendarPlugin({
trigger: '#sDate', trigger: "#sDate",
onSelect: function (date) { onSelect: function (date) {
startDate = date.replaceAll('-', ''); startDate = date.replaceAll("-", "");
handleBlur('dateFrom'); handleBlur("dateFrom");
} },
}); });
const pickerEnd = new CalendarPlugin({ const pickerEnd = new CalendarPlugin({
trigger: '#eDate', trigger: "#eDate",
onSelect: function (date) { onSelect: function (date) {
endDate = date.replaceAll('-', ''); endDate = date.replaceAll("-", "");
handleBlur('dateTo'); handleBlur("dateTo");
} },
}); });
// 快速日期 // 快速日期
document.querySelectorAll('input[name=quickDate]').forEach(el => { document.querySelectorAll("input[name=quickDate]").forEach((el) => {
el.addEventListener('change', () => { el.addEventListener("change", () => {
const days = parseInt(el.value, 10); const days = parseInt(el.value, 10);
const now = new Date(); const now = new Date();
const year = now.getFullYear(); const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零 const month = String(now.getMonth() + 1).padStart(2, "0"); // 补零
const day = String(now.getDate()).padStart(2, '0'); const day = String(now.getDate()).padStart(2, "0");
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");
startDate = fmt(from); startDate = fmt(from);
endDate = fmt(today); endDate = fmt(today);
document.getElementById('dateFrom').value = startDate; document.getElementById("dateFrom").value = startDate;
document.getElementById('dateTo').value = endDate; document.getElementById("dateTo").value = endDate;
}); });
}); });
const form = document.getElementById("myForm");
const form = document.getElementById('myForm');
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(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集 // 方式1：使用 FormData 自动搜集
const formData = new FormData(form); const formData = new FormData(form);
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries()))); localStorage.setItem(
"accountQueryParams",
JSON.stringify(Object.fromEntries(formData.entries())),
);
setTimeout(() => { setTimeout(() => {
window.location.href = './account_list.html' window.location.href = "./account_list.html";
}, 500); }, 500);
}); });
} }
...@@ -520,8 +570,7 @@ ...@@ -520,8 +570,7 @@
window.history.back(); window.history.back();
} }
if (number == 3) { if (number == 3) {
window.location.href = './async_detail_list.html' window.location.href = "./async_detail_list.html";
} }
} }
</script> </script>
account_detail.html
View file @ e7d0a00d
<!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"> <link rel="stylesheet" href="calendar-plugin/calendar.css" />
<link rel="stylesheet" href="calendar-plugin/calendar.css">
<title>交易明细查询</title> <title>交易明细查询</title>
<style> <style>
* { * {
...@@ -62,7 +61,6 @@ ...@@ -62,7 +61,6 @@
/* gap: 10px; */ /* gap: 10px; */
} }
.form-label { .form-label {
width: 120px; width: 120px;
text-align: right; text-align: right;
...@@ -148,6 +146,7 @@ ...@@ -148,6 +146,7 @@
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
box-sizing: content-box;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
...@@ -167,11 +166,13 @@ ...@@ -167,11 +166,13 @@
text-align: left; text-align: left;
color: #000000; color: #000000;
border-radius: 4px; border-radius: 4px;
border: 1px solid #62A7E3; border: 1px solid #62a7e3;
background-color: #EAF5FE; 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;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
} }
...@@ -183,25 +184,25 @@ ...@@ -183,25 +184,25 @@
} }
.bubble::before { .bubble::before {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -12px; bottom: -12px;
left: 23px; left: 23px;
border-width: 12px 4px 0 10px; border-width: 12px 4px 0 10px;
border-style: solid; border-style: solid;
border-color: #62A7E3 transparent transparent transparent; border-color: #62a7e3 transparent transparent transparent;
z-index: 1; z-index: 1;
} }
/* 背景三角（内层，盖住部分边框） */ /* 背景三角（内层，盖住部分边框） */
.bubble::after { .bubble::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -9px; bottom: -9px;
left: 24px; left: 24px;
border-width: 9px 4px 0 8px; border-width: 9px 4px 0 8px;
border-style: solid; border-style: solid;
border-color: #EAF5FE transparent transparent transparent; border-color: #eaf5fe transparent transparent transparent;
z-index: 2; z-index: 2;
} }
...@@ -243,17 +244,16 @@ ...@@ -243,17 +244,16 @@
.xx { .xx {
left: 120px; left: 120px;
bottom: 34px; bottom: 34px;
} }
.yy { .yy {
left: 264px; left: 245px;
bottom: -57px; bottom: 34px;
} }
.zz { .zz {
left: 390px; left: 370px;
bottom: -57px; bottom: 34px;
} }
/* 温馨提示 */ /* 温馨提示 */
...@@ -307,9 +307,9 @@ ...@@ -307,9 +307,9 @@
position: relative; position: relative;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<!-- <div class="top-nav"> <!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a> <a href="#">账户信息查询 ∨</a>
...@@ -323,9 +323,7 @@ ...@@ -323,9 +323,7 @@
</div> --> </div> -->
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<!-- 查询表单 --> <!-- 查询表单 -->
<div class="form-container"> <div class="form-container">
...@@ -333,7 +331,9 @@ ...@@ -333,7 +331,9 @@
<form id="myForm"> <form id="myForm">
<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
>
<select class="form-select"> <select class="form-select">
<option value="1">明细</option> <option value="1">明细</option>
<option value="2">明细汇总</option> <option value="2">明细汇总</option>
...@@ -341,55 +341,82 @@ ...@@ -341,55 +341,82 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label"><span class="required">*</span>起止日期：</label> <label class="form-label"
<input type="text" id="dateFrom" class="form-input small x-small" name="dateFrom" ><span class="required">*</span>起止日期：</label
oninput="startDate = this.value" onblur="handleBlur('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
oninput="endDate = this.value" onblur="handleBlur('dateTo')"> 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" /> -->
</div> </div>
<div class="radio-group"> <div class="radio-group">
<label><input type="radio" name="quickDate" value="7" /> 最近7天</label> <label
<label><input type="radio" name="quickDate" value="14" /> 最近14天</label> ><input type="radio" name="quickDate" value="7" /> 最近7天</label
<label><input type="radio" name="quickDate" value="30" /> 最近30天</label> >
<label
><input type="radio" name="quickDate" value="14" />
最近14天</label
>
<label
><input type="radio" name="quickDate" value="30" />
最近30天</label
>
</div> </div>
<span class="form-question question1">？ <span class="form-question question1"
>？
<span class="bubble"> <span class="bubble">
请输入或选择最近一年半内日期；每次查询时间段不超过3个月；日期标准输入格式20180101，表示2018年1月1日 请输入或选择最近一年半内日期；每次查询时间段不超过3个月；日期标准输入格式<br />20180101，表示2018年1月1日
</span> </span>
</span> </span>
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">交易金额：</label> <label class="form-label">交易金额：</label>
<input type="text" class="form-input small" name="amtFrom"> <input type="text" class="form-input small" name="amtFrom" />
<span class="px-2">-</span> <span class="px-2">-</span>
<input type="text" class="form-input small" name="amtTo"> <input type="text" class="form-input small" name="amtTo" />
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">交易方向：</label> <label class="form-label">交易方向：</label>
<div class="radio-group"> <div class="radio-group">
<label><input type="radio" name="direction" checked value="all"> 全部</label> <label
<label><input type="radio" name="direction" value="in"> 转入</label> ><input type="radio" name="direction" checked value="all" />
<label><input type="radio" name="direction" value="out"> 转出</label> 全部</label
>
<label
><input type="radio" name="direction" value="in" /> 转入</label
>
<label
><input type="radio" name="direction" value="out" /> 转出</label
>
</div> </div>
</div> </div>
<div class="form-row mt-24"> <div class="form-row mt-24">
<label class="form-label">冲正交易：</label> <label class="form-label">冲正交易：</label>
<div class="radio-group"> <div class="radio-group">
<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 class="form-question question2">
？ ？
...@@ -401,24 +428,24 @@ ...@@ -401,24 +428,24 @@
<div class="form-row mt-20"> <div class="form-row mt-20">
<label class="form-label">对方户名：</label> <label class="form-label">对方户名：</label>
<input type="text" class="form-input wide" name="counterName"> <input type="text" class="form-input wide" name="counterName" />
<!-- <span class="form-tip">录入生僻字</span> --> <!-- <span class="form-tip">录入生僻字</span> -->
</div> </div>
<div class="form-row"> <div class="form-row">
<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>
<input type="text" class="form-input wide" name="remark"> <input type="text" class="form-input wide" name="remark" />
<!-- <span class="form-tip">录入生僻字</span> --> <!-- <span class="form-tip">录入生僻字</span> -->
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">交易摘要：</label> <label class="form-label">交易摘要：</label>
<!-- name="summary" --> <!-- name="summary" -->
<select class="form-select hide" style="width: 200px;"> <select class="form-select hide" style="width: 200px">
<option>请选择</option> <option>请选择</option>
</select> </select>
<div class="select-down-icon"> <div class="select-down-icon">
...@@ -427,9 +454,9 @@ ...@@ -427,9 +454,9 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<label class="form-label">起止明细编号：</label> <label class="form-label">起止明细编号：</label>
<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 class="form-question">
？ ？
<span class="bubble"> <span class="bubble">
...@@ -438,14 +465,15 @@ ...@@ -438,14 +465,15 @@
</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">
</form> 确定
</button>
<button class="buttonx yy" onclick="onAccount(2)">返回</button> <button class="buttonx yy" onclick="onAccount(2)">返回</button>
<button class="buttonx zz" onclick="onAccount(3)">查询长期</button> <button class="buttonx zz" onclick="onAccount(3)">查询长期</button>
</form>
<!-- <div class="btn-group" style="margin-top: -65px;"> <!-- <div class="btn-group" style="margin-top: -65px;">
<button onclick="onAccount(1)" type="submit">确定</button> <button onclick="onAccount(1)" type="submit">确定</button>
...@@ -457,18 +485,19 @@ ...@@ -457,18 +485,19 @@
<div class="tips-section"> <div class="tips-section">
<div class="tips-title">温馨提示</div> <div class="tips-title">温馨提示</div>
<p>1、签约汇总记账账户仅提供历史明细查询。</p> <p>1、签约汇总记账账户仅提供历史明细查询。</p>
<p>2、当前交易明细查询页面仅支持查询最近一年半的账户明细，“查询长期”支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。</p> <p>
2、当前交易明细查询页面仅支持查询最近一年半的账户明细，“查询长期”支持查询最近十年的账户明细，如需查询十年前的账户明细请联系您的开户行。
</p>
</div> </div>
<script src="calendar-plugin/calendar.js"></script> <script src="calendar-plugin/calendar.js"></script>
</body> </body>
</html> </html>
<script> <script>
/** /**
* 解析 YYYYMMDD 格式为 Date 对象 * 解析 YYYYMMDD 格式为 Date 对象
* @param {string} dateStr - 8位数字字符串，如 20250101 * @param {string} dateStr - 8位数字字符串，如 20250101
* @returns {Date} * @returns {Date}
*/ */
function parseYYYYMMDD(dateStr) { function parseYYYYMMDD(dateStr) {
const year = parseInt(dateStr.substring(0, 4)); const year = parseInt(dateStr.substring(0, 4));
const month = parseInt(dateStr.substring(4, 6)) - 1; const month = parseInt(dateStr.substring(4, 6)) - 1;
...@@ -489,76 +518,88 @@ ...@@ -489,76 +518,88 @@
return Math.abs(diffDays) > 365; return Math.abs(diffDays) > 365;
} }
let startDate = ''; let startDate = "";
let endDate = ''; let endDate = "";
const handleBlur = (dateId) => { const handleBlur = (dateId) => {
console.log('handleBlur', startDate, endDate, isOver365DaysYYYYMMDD(startDate, endDate)); console.log(
"handleBlur",
startDate,
endDate,
isOver365DaysYYYYMMDD(startDate, endDate),
);
if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) { if (startDate && endDate && isOver365DaysYYYYMMDD(startDate, endDate)) {
alert('起止日期间隔不能超过365天'); alert("起止日期间隔不能超过365天");
if (dateId === 'dateFrom') { if (dateId === "dateFrom") {
startDate = ''; startDate = "";
document.getElementById(dateId).value = ''; document.getElementById(dateId).value = "";
} else { } else {
endDate = ''; endDate = "";
document.getElementById(dateId).value = ''; document.getElementById(dateId).value = "";
} }
const checkedQuickDate = document.querySelector('input[name="quickDate"]:checked'); const checkedQuickDate = document.querySelector(
'input[name="quickDate"]:checked',
);
checkedQuickDate && (checkedQuickDate.checked = false); checkedQuickDate && (checkedQuickDate.checked = false);
} }
}; };
const pickerStart = new CalendarPlugin({ const pickerStart = new CalendarPlugin({
trigger: '#sDate', trigger: "#sDate",
onSelect: function (date) { onSelect: function (date) {
startDate = date.replaceAll('-', ''); startDate = date.replaceAll("-", "");
handleBlur('dateFrom'); handleBlur("dateFrom");
} },
}); });
const pickerEnd = new CalendarPlugin({ const pickerEnd = new CalendarPlugin({
trigger: '#eDate', trigger: "#eDate",
onSelect: function (date) { onSelect: function (date) {
endDate = date.replaceAll('-', ''); endDate = date.replaceAll("-", "");
handleBlur('dateTo'); handleBlur("dateTo");
} },
}); });
// 快速日期 // 快速日期
document.querySelectorAll('input[name=quickDate]').forEach(el => { document.querySelectorAll("input[name=quickDate]").forEach((el) => {
el.addEventListener('change', () => { el.addEventListener("change", () => {
const days = parseInt(el.value, 10); const days = parseInt(el.value, 10);
const now = new Date(); const now = new Date();
const year = now.getFullYear(); const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零 const month = String(now.getMonth() + 1).padStart(2, "0"); // 补零
const day = String(now.getDate()).padStart(2, '0'); const day = String(now.getDate()).padStart(2, "0");
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");
startDate = fmt(from); startDate = fmt(from);
endDate = fmt(today); endDate = fmt(today);
document.getElementById('dateFrom').value = startDate; document.getElementById("dateFrom").value = startDate;
document.getElementById('dateTo').value = endDate; document.getElementById("dateTo").value = endDate;
}); });
}); });
const form = document.getElementById('myForm'); const form = document.getElementById("myForm");
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(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集 // 方式1：使用 FormData 自动搜集
const formData = new FormData(form); const formData = new FormData(form);
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries()))); localStorage.setItem(
"accountQueryParams",
JSON.stringify(Object.fromEntries(formData.entries())),
);
setTimeout(() => { setTimeout(() => {
window.localStorage.setItem('dateFrom', startDate); window.localStorage.setItem("dateFrom", startDate);
window.location.href = './account_list.html'; window.location.href = "./account_list.html";
}, 500); }, 500);
}); });
} }
...@@ -566,9 +607,8 @@ ...@@ -566,9 +607,8 @@
window.history.back(); window.history.back();
} }
if (number == 3) { if (number == 3) {
console.log(33333) console.log(33333);
window.location.href = './account_detail-long.html' window.location.href = "./account_detail-long.html";
} }
} }
</script> </script>
async_detail_list.html
View file @ e7d0a00d
<!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> <title>账户交易明细</title>
<style> <style>
* { * {
...@@ -74,7 +73,7 @@ ...@@ -74,7 +73,7 @@
} }
.account-card .account-number::before { .account-card .account-number::before {
content: ''; content: "";
height: 2px; height: 2px;
background-color: #1f93d5; background-color: #1f93d5;
position: absolute; position: absolute;
...@@ -84,13 +83,13 @@ ...@@ -84,13 +83,13 @@
} }
.account-card .account-number::after { .account-card .account-number::after {
content: ''; content: "";
height: 2px; height: 2px;
background-color: #1f93d5; background-color: #1f93d5;
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
left: 158px; left: 158px;
right: 0 right: 0;
} }
.account-number div { .account-number div {
...@@ -117,7 +116,7 @@ ...@@ -117,7 +116,7 @@
.info-table td { .info-table td {
padding: 8px 15px; padding: 8px 15px;
border: none border: none;
} }
.info-table tr { .info-table tr {
...@@ -128,7 +127,7 @@ ...@@ -128,7 +127,7 @@
border-top: 1px solid #1f93d5; border-top: 1px solid #1f93d5;
} }
.info-table tr td:nth-child(2n+1) { .info-table tr td:nth-child(2n + 1) {
background-color: #f7fbfe; background-color: #f7fbfe;
text-align: right; text-align: right;
} }
...@@ -182,9 +181,7 @@ ...@@ -182,9 +181,7 @@
font-weight: normal; font-weight: normal;
} }
.detail-table tr:nth-child(2n + 1) {
.detail-table tr:nth-child(2n+1) {
background-color: #ebf4fb; background-color: #ebf4fb;
} }
...@@ -279,7 +276,6 @@ ...@@ -279,7 +276,6 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.flex { .flex {
...@@ -297,9 +293,6 @@ ...@@ -297,9 +293,6 @@
border-top: none; border-top: none;
} }
/* 温馨提示 */ /* 温馨提示 */
.tips-section { .tips-section {
background-color: #f0f7ff; background-color: #f0f7ff;
...@@ -367,11 +360,13 @@ ...@@ -367,11 +360,13 @@
} */ } */
.form-question { .form-question {
position: relative;
cursor: pointer; cursor: pointer;
margin-left: 8px; margin-left: 8px;
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
box-sizing: content-box;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
...@@ -388,12 +383,15 @@ ...@@ -388,12 +383,15 @@
width: 150px; width: 150px;
padding: 10px 5px; padding: 10px 5px;
color: #000000; color: #000000;
text-align: left;
border-radius: 4px; border-radius: 4px;
border: 1px solid #62A7E3; border: 1px solid #62a7e3;
background-color: #EAF5FE; 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;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
} }
...@@ -405,31 +403,31 @@ ...@@ -405,31 +403,31 @@
} }
.bubble::before { .bubble::before {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -12px; bottom: -12px;
left: 23px; left: 23px;
border-width: 12px 4px 0 10px; border-width: 12px 4px 0 10px;
border-style: solid; border-style: solid;
border-color: #62A7E3 transparent transparent transparent; border-color: #62a7e3 transparent transparent transparent;
z-index: 1; z-index: 1;
} }
/* 背景三角（内层，盖住部分边框） */ /* 背景三角（内层，盖住部分边框） */
.bubble::after { .bubble::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -9px; bottom: -9px;
left: 24px; left: 24px;
border-width: 9px 4px 0 8px; border-width: 9px 4px 0 8px;
border-style: solid; border-style: solid;
border-color: #EAF5FE transparent transparent transparent; border-color: #eaf5fe transparent transparent transparent;
z-index: 2; z-index: 2;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<!-- <div class="top-nav"> <!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a> <a href="#">账户信息查询 ∨</a>
...@@ -443,15 +441,14 @@ ...@@ -443,15 +441,14 @@
</div> --> </div> -->
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="breadcrumb"> <div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<div class="filter"> <div class="filter">
<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 class="form-question"
>？
<span class="bubble"> <span class="bubble">
支持通过任务设定日期等要素筛选异步查询任务，设定日期仅支持按单日筛选 支持通过任务设定日期等要素筛选异步查询任务，设定日期仅支持按单日筛选
</span> </span>
...@@ -464,7 +461,7 @@ ...@@ -464,7 +461,7 @@
<table class="detail-table grid" id="resultTable"> <table class="detail-table grid" id="resultTable">
<thead> <thead>
<tr> <tr>
<th style="width: 107px;"> <th style="width: 107px">
<div class="xflex"> <div class="xflex">
<span>任务名称 </span> <span>任务名称 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -474,7 +471,7 @@ ...@@ -474,7 +471,7 @@
</div> </div>
</th> </th>
<th style="width: 110px;"> <th style="width: 110px">
<div class="xflex"> <div class="xflex">
<span>任务设定日期 </span> <span>任务设定日期 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -483,7 +480,7 @@ ...@@ -483,7 +480,7 @@
</div> </div>
</div> </div>
</th> </th>
<th style="width: 151px;"> <th style="width: 151px">
<div class="xflex"> <div class="xflex">
<span>起止日期 </span> <span>起止日期 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -492,7 +489,7 @@ ...@@ -492,7 +489,7 @@
</div> </div>
</div> </div>
</th> </th>
<th style="width: 150px;"> <th style="width: 150px">
<div class="xflex"> <div class="xflex">
<span>账号 </span> <span>账号 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -501,7 +498,7 @@ ...@@ -501,7 +498,7 @@
</div> </div>
</div> </div>
</th> </th>
<th style="width: 101px;"> <th style="width: 101px">
<div class="xflex"> <div class="xflex">
<span>批次号 </span> <span>批次号 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -510,7 +507,7 @@ ...@@ -510,7 +507,7 @@
</div> </div>
</div> </div>
</th> </th>
<th style="width: 86px;"> <th style="width: 86px">
<div class="xflex"> <div class="xflex">
<span>文件状态 </span> <span>文件状态 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -519,7 +516,7 @@ ...@@ -519,7 +516,7 @@
</div> </div>
</div> </div>
</th> </th>
<th style="width: 76px;"> <th style="width: 76px">
<div class="xflex"> <div class="xflex">
<span>下载 </span> <span>下载 </span>
<div class="jiantou"> <div class="jiantou">
...@@ -534,7 +531,6 @@ ...@@ -534,7 +531,6 @@
</table> </table>
</div> </div>
<!-- 底部按钮组 --> <!-- 底部按钮组 -->
<div class="btn-group"> <div class="btn-group">
<button onclick="onBack()">返 回</button> <button onclick="onBack()">返 回</button>
...@@ -543,18 +539,20 @@ ...@@ -543,18 +539,20 @@
<!-- 温馨提示 --> <!-- 温馨提示 -->
<div class="tips-section"> <div class="tips-section">
<div class="tips-title">温馨提示</div> <div class="tips-title">温馨提示</div>
<p>1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。</p> <p>
<p>2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失效需重新查询下载。</p> 1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。
</p>
<p>
2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失效需重新查询下载。
</p>
</div> </div>
</body> </body>
</html> </html>
<script> <script>
let table = document.getElementById("resultTable"); let table = document.getElementById("resultTable");
table.style.width = "1145px"; table.style.width = "1145px";
table.style.tableLayout = "fixed"; // 关键！ table.style.tableLayout = "fixed"; // 关键！
function openFilter(element) { function openFilter(element) {
var isChecked = element.checked; var isChecked = element.checked;
var rightType = document.getElementById("rightType"); var rightType = document.getElementById("rightType");
...@@ -562,13 +560,13 @@ ...@@ -562,13 +560,13 @@
var conditionTB = document.getElementById("conditionTB"); var conditionTB = document.getElementById("conditionTB");
console.log("复选框当前状态:", isChecked); console.log("复选框当前状态:", isChecked);
if (isChecked) { if (isChecked) {
rightType.style.display = 'none'; rightType.style.display = "none";
rightTypes.style.display = 'inline-block'; rightTypes.style.display = "inline-block";
conditionTB.style.display = 'inline-block'; conditionTB.style.display = "inline-block";
} else { } else {
rightType.style.display = 'inline-block'; rightType.style.display = "inline-block";
rightTypes.style.display = 'none'; rightTypes.style.display = "none";
conditionTB.style.display = 'none'; conditionTB.style.display = "none";
} }
} }
......
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