Skip to content

B
buildbank-replica
Commit 1c41ac0b authored by 秦垚玲's avatar 秦垚玲
Browse files
Options

fix:电子回单调整及头部导航增加延迟方法

parent 3b969441
Hide whitespace changes
Inline Side-by-side
Showing with 685 additions and 266 deletions
electronic_receipt.html
View file @ 1c41ac0b
......@@ -23,6 +23,7 @@
li, ul {
list-style: none;
}
#wrapper { visibility: visible; } /* 初始时不可见 */
/* 顶部导航栏 */
.top-nav {
......@@ -504,6 +505,8 @@
</head>
<body>
<div id="wrapper">
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > <span class="breadcrumb_item">电子回单查询</span>
......@@ -616,7 +619,7 @@
</div>
</div>
<div class="showForm1">
<div class="form-row showForm1">
<div class="form-row">
<label class="form-label"
>交易方向：</label
>
......@@ -659,21 +662,82 @@
</div>
</div>
</div>
<div class="showForm2">
<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>
</div>
</div>
<div class="showForm2">
<div class="form-row mt-20 ">
<label class="form-label"><span class="required">*</span>付款账号：</label>
<input type="text" class="form-input wide" name="counterName" />
</div>
</div>
<div class="showForm2">
<div class="form-row mt-20 ">
<label class="form-label"><span class="required">*</span>交易流水号：</label>
<input type="text" class="form-input wide" name="counterName" />
</div>
</div>
<div class="showForm2">
<div class="form-row">
<label class="form-label"
><span class="required">*</span>交易日期：</label
>
<input
type="text"
id="dateFrom"
class="form-input"
name="dateFrom"
oninput="startDate = this.value"
onblur="handleBlur('dateFrom')"
/>
<div class="date-picker" id="sDate">
<img class="dateimg" src="./images/date.png" alt="" />
</div>
</div>
</div>
<div class="showForm2">
<div class="form-row ">
<label class="form-label"><span class="required">*</span>文件格式：</label>
<div class="radio-group">
<label
><input type="radio" name="direction" checked value="all" />
PDF</label
>
<label
><input type="radio" name="direction" value="in" /> OFD</label
>
<label
><input type="radio" name="direction" value="out" /> PDF+OFD</label
>
</div>
</div>
</div>
<div class="showForm3">
<div class="form-row ">
<label class="form-label"
><span class="required">*</span>账 号：</label
>
<select class="form-select" style="width: 565px;">
<option value="1">42050110239900001031 中科软盈（武汉）科技有限公司</option>
</select>
</div>
</div>
<div class="showForm3">
<div class="form-row mt-20 ">
<label class="form-label"></label>
<input type="text" class="form-input wide" name="counterName" placeholder="请输入模糊账号或模糊账户名称" />
<span class="form-tip">模糊搜索</span>
</div>
</div>
<div style="height: 90px"></div>
......@@ -682,22 +746,33 @@
确定
</button>
<button type="button" class="buttonx yy">更正回期查询</button>
<button type="button" class="buttonx yy showForm1">更正回期查询</button>
</form>
</div>
</div>
<!-- 温馨提示 -->
<div class="tips-section">
<div class="tips-section showForm1">
<div class="tips-title">温馨提示</div>
<p>电子回单可作为记账凭证，如您已通过银行柜台取得相应纸质回单，请注意核对，勿重复记账</p>
</div>
<script src="./calendar-plugin/calendar.js"></script>
<div class="tips-section showForm2">
<div class="tips-title">温馨提示</div>
<p>1.本功能提供查询您的交易对手的建行交易确认信息。</p>
<p>2.交易流水号可由交易对手提供，或者账户明细中查询。</p>
</div>
</div>
<script src="./calendar-plugin/calendar.js"></script>
</body>
</html>
<script>
// setTimeout(function() {
// document.getElementById('wrapper').style.visibility = 'visible'; // 3秒后变为可见
// }, 1000); // 1000毫秒后执行
function sendHeight() {
const pageHeight = Math.ceil(Math.max(
document.body.scrollHeight,
......
index.html
View file @ 1c41ac0b
......@@ -5951,27 +5951,42 @@ function isNewVersion()
else
return false;
}
// 增加延迟
let canClick = true;
// 展示账户信息
function showAccount(){
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "none";
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "block";
// 重要 重新赋值
accountBox.src = "account.html";
if (canClick) {
canClick = false;
console.log('Button clicked');
setTimeout(function() {
canClick = true; // 设置标志，允许再次点击
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "none";
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "block";
// 重要 重新赋值
accountBox.src = "account.html";
}, 1000); // 1000毫秒后执行
}
}
// 展示电子回单查询
function showReceipt(){
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "none";
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "block";
// 重要 重新赋值
accountBox.src = "electronic_receipt.html";
if (canClick) {
canClick = false;
console.log('Button clicked');
// 增加延迟
setTimeout(function() {
canClick = true; // 设置标志，允许再次点击
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "none";
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "block";
// 重要 重新赋值
accountBox.src = "electronic_receipt.html";
}, 1000); // 1000毫秒后执行
}
}
......@@ -9780,12 +9795,14 @@ function whzqProcess(menuId){
// 展示首页信息
function showHome(){
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "none";
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "block";
// 增加延迟
setTimeout(function() {
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "none";
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "block";
}, 1000);
}
//数据采集，一级菜单，点击事件
......@@ -9859,15 +9876,33 @@ function SJCJ_MENU_2(menuId,link_type,pageName){
// $("#touch_element_position").val("");
// doCcvecCollect();
// 跳转中间页
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "none";
// let homeBox = document.getElementById("homeBox");
// homeBox.style.display = "none";
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "block";
// let accountBox = document.getElementById("accountBox");
// accountBox.style.display = "block";
// 重要 重新赋值
accountBox.src = "middle.html";
// accountBox.src = "middle.html";
// 增加延迟
setTimeout(function() {
// 跳转中间页
let homeBox = document.getElementById("homeBox");
homeBox.style.display = "none";
let accountBox = document.getElementById("accountBox");
accountBox.style.display = "block";
accountBox.src = "middle.html"; // 1秒后变为可见
}, 1000); // 1000毫秒后执行
if(pageName) {
localStorage.setItem('middleName',pageName)
}
......
unit_receipt.html
View file @ 1c41ac0b
......@@ -18,6 +18,7 @@
body {
background-color: #ffffff;
padding: 0;
}
li, ul {
list-style: none;
......@@ -183,103 +184,132 @@
/* 查询表单 */
.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 {
.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;
margin-right: 10px;
font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif !important;
}
.form-label .required {
color: red;
margin-right: 4px;
}
.form-input,
.form-select {
padding: 5px 8px 5px 10px;
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;
font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif !important;
input {
margin-right: 5px;
}
}
.form-tip {
margin-left: 40px;
margin-right: 10px;
display: inline-block;
color: #0066b3;
cursor: pointer;
line-height: 24px;
vertical-align: middle;
padding-left: 22px;
background: url(./images/find.png) left no-repeat;
font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif !important;
}
/* .form-question {
position: relative;
cursor: pointer;
margin-left: 8px;
display: inline-block;
width: 16px;
height: 16px;
box-sizing: content-box;
line-height: 16px;
text-align: center;
border-radius: 50%;
background-color: #1f93d5;
color: #fff;
padding-left: 4px;
transition: all 0.2s;
} */
.form-question {
position: relative;
cursor: pointer;
margin-left: 8px;
display: inline-block;
......@@ -301,97 +331,166 @@
margin-left: 70px;
}
/* 按钮组 */
.btn-group {
display: flex;
gap: 20px;
margin: 30px 0;
padding-left: 120px;
}
.buttonx,
.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;
}
.buttonx {
position: absolute;
}
.xx {
left: 120px;
bottom: 34px;
}
.yy {
left: 264px;
bottom: 34px;
}
.zz {
left: 390px;
bottom: -57px;
}
/* 温馨提示 */
.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;
}
#myForm {
position: relative;
}
/* 气泡框 */
.bubble {
position: absolute;
bottom: calc(100% + 14px);
left: -25px;
width: 150px;
padding: 10px 5px;
text-align: left;
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 {
margin-left: 30px;
}
.question2 {
margin-left: 70px;
}
/* 按钮组 */
.btn-group {
display: flex;
gap: 20px;
margin: 30px 0;
padding-left: 120px;
}
.buttonx,
.btn-group button {
box-sizing: content-box;
height: 35px;
min-width: 60px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
border: 0;
cursor: pointer;
color: #FFF;
margin-right: 15px;
font-weight: bold;
background-color: #1f93d5;
font-size: 1em;
vertical-align: middle;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.buttonx {
position: absolute;
}
.xx {
left: 120px;
bottom: 34px;
}
.yy {
left: 245px;
bottom: 34px;
}
.zz {
left: 370px;
bottom: 34px;
}
/* 温馨提示 */
.tips-section {
background-color: #f7fafd;
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;
font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif !important;
}
.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;
}
#myForm {
position: relative;
}
</style>
</head>
......@@ -400,28 +499,99 @@
<div class="breadcrumb">
当前位置：账户查询 > <span class="breadcrumb_item">单位结算卡回单查询</span>
</div>
<!-- 账户信息卡片 -->
<ul class="tabMenuBox">
<li class="tabMenu">
<div style="display: block;">
<!-- 账户信息卡片 -->
<ul class="tabMenuBox">
<li class="tabMenu">
<span></span>
<a href="./electronic_receipt.html">电子回单查询</a>
</li>
<li id="tabMenuCur">
<span></span>
<a href="javascript:void(0)">单位结算卡回单查询</a>
</li>
<li class="tabMenu">
<span></span>
<a href="./electronic_receipt.html">电子回单查询</a>
</li>
<li id="tabMenuCur">
<span></span>
<a href="javascript:void(0)">单位结算卡回单查询</a>
</li>
<li class="tabMenu">
<span></span>
<a href="./history_receipt.html">历史回单查询</a>
</li>
</ul>
<a href="./history_receipt.html">历史回单查询</a>
</li>
</ul>
<!-- 查询表单 -->
<div class="form-container">
<form id="myForm">
<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"
oninput="startDate = this.value"
onblur="handleBlur('dateFrom')"
/>
<div class="date-picker" id="sDate">
<img class="dateimg" src="./images/date.png" alt="" />
</div>
<span>-</span>
<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">
<img class="dateimg" src="./images/date.png" alt="" />
<!-- <input class="date-input dateTo" type="date" /> -->
</div>
<span class="form-question question1"
>？
<span class="bubble">
请输入或选择最近一年半内日期；每次查询时间段不超过3个月；日期标准输入格式<br />20180101，表示2018年1月1日
</span>
</span>
</div>
<div class="form-row ">
<label class="form-label"
><span class="required">*</span>账 号：</label
>
<select class="form-select" style="width: 565px;">
</select>
</div>
<div class="form-row mt-20 ">
<label class="form-label"></label>
<input type="text" class="form-input wide" name="counterName" placeholder="请输入模糊账号或模糊账户名称" />
<span class="form-tip">模糊搜索</span>
</div>
<div style="height: 90px"></div>
<!-- 按钮组 -->
<button class="buttonx xx" onclick="onAccount(1)" type="submit">
确定
</button>
</form>
</div>
</div>
<!-- 温馨提示 -->
<div class="tips-section">
<!-- <div class="tips-section">
<div class="tips-title">温馨提示</div>
<p>1.本功能提供查询您的交易对手的建行交易确认信息。</p>
<p>2.交易流水号可由交易对手提供，或者账户明细中查询。</p>
<p>电子回单可作为记账凭证，如您已通过银行柜台取得相应纸质回单，请注意核对，勿重复记账</p>
</div> -->
<script src="./calendar-plugin/calendar.js"></script>
</body>
......@@ -440,25 +610,163 @@ function sendHeight() {
}
window.addEventListener('load', sendHeight);
// 日期格式
function getTodayYYYYMMDD() {
const now = new Date();
const y = now.getFullYear();
var yesterday = new Date(now); // 复制当前日期
yesterday.setDate(yesterday.getDate() - 1); // 设置为前一天
const m = String(yesterday.getMonth() + 1).padStart(2, "0");
const d = String(yesterday.getDate()).padStart(2, "0");
return `${y}${m}${d}`;
}
const form = document.getElementById('myForm');
function onSubmit() {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
const formData = new FormData(form);
localStorage.setItem('historyQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => {
window.location.href = './history_balance.html'
}, 500);
});
// 页面加载默认赋值
window.addEventListener("DOMContentLoaded", () => {
const today = getTodayYYYYMMDD();
startDate = today;
endDate = today;
document.getElementById("dateFrom").value = startDate;
document.getElementById("dateTo").value = endDate;
});
/**
* 解析 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);
return;
}
// formn表单返回
document.getElementById('backButton').addEventListener('click', function() {
window.history.back();
if (dateId === "dateFrom") {
startDate = startDate;
document.getElementById(dateId).value = startDate;
} else {
endDate = endDate;
document.getElementById(dateId).value = endDate;
}
};
const pickerStart = new CalendarPlugin({
trigger: "#sDate",
onSelect: function (date) {
startDate = date.replaceAll("-", "");
handleBlur("dateFrom");
},
});
const pickerEnd = new CalendarPlugin({
trigger: "#eDate",
onSelect: function (date) {
endDate = date.replaceAll("-", "");
handleBlur("dateTo");
},
});
// 快速日期
document.querySelectorAll("input[name=quickDate]").forEach((el) => {
el.addEventListener("change", () => {
const days = parseInt(el.value, 10);
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0"); // 补零
const day = String(now.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
const today = new Date(formattedDate);
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");
startDate = fmt(from);
endDate = fmt(today);
document.getElementById("dateFrom").value = startDate;
document.getElementById("dateTo").value = endDate;
});
});
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.localStorage.setItem("dateFrom", startDate);
// window.location.href = "./account_list.html";
// }, 500);
});
}
if (number == 2) {
window.history.back();
return false;
}
if (number == 3) {
console.log(33333);
window.location.href = "./account_detail-long.html";
return false;
}
}
</script>
\ 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