Skip to content

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

交易明细页面万层

Co-authored-by: 's avatarCopilot <copilot@github.com>
parent f813e614
Expand all Show whitespace changes
Inline Side-by-side
Showing with 280 additions and 36 deletions
account_detail.html
View file @ bf18719d
......@@ -4,6 +4,7 @@
<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>
* {
......@@ -61,10 +62,6 @@
/* gap: 10px; */
}
.form-row .dateimg {
width: 27px;
height: 27px;
}
.form-label {
width: 120px;
......@@ -103,10 +100,6 @@
border-top: 8px solid #b0b0b0;
}
.form-select option:first-child {
color: #eee;
}
.form-select.hide {
appearance: none;
}
......@@ -218,6 +211,27 @@
.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>
......@@ -243,75 +257,82 @@
<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>明细</option>
<select class="form-select" name="voucherType">
<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" class="form-input small x-small" value="20260428">
<input type="text" id="startDate" 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" class="form-input small x-small" value="20260428">
<input type="text" id="endDate" 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 endDate" type="date" /> -->
</div>
<div class="radio-group">
<label><input type="radio" name="dateRange" /> 最近7天</label>
<label><input type="radio" name="dateRange" /> 最近14天</label>
<label><input type="radio" name="dateRange" /> 最近30天</label>
<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">
<input type="text" class="form-input small" name="amtFrom">
<span class="px-2">-</span>
<input type="text" class="form-input small">
<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> 全部</label>
<label><input type="radio" name="direction"> 转入</label>
<label><input type="radio" name="direction"> 转出</label>
<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="reversal" checked> 显示</label>
<label><input type="radio" name="reversal"> 不显示</label>
<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">
<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">
<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">
<input type="text" class="form-input wide" name="remark">
<span class="form-tip">录入生僻字</span>
</div>
<input type="date" id="dateInput" />
<div class="form-row">
<label class="form-label">交易摘要：</label>
<select class="form-select hide" style="width: 200px;">
<option>请选择</option>
<option>请选择</option>
<select class="form-select hide" style="width: 200px;" name="summary">
<option>请选择</option>
</select>
<div class="select-down-icon">
......@@ -320,9 +341,9 @@
</div>
<div class="form-row">
<label class="form-label">起止明细编号：</label>
<input type="text" class="form-input small">
<input type="text" class="form-input small" name="detailFrom">
<span class="px-2">-</span>
<input type="text" class="form-input small">
<input type="text" class="form-input small" name="detailTo">
<span class="form-question">？</span>
</div>
......@@ -330,10 +351,10 @@
<div class="btn-group">
<button onclick="onAccount(1)">确定</button>
<button onclick="onAccount(2)">返回</button>
<button onclick="onAccount(3)">查询长期</button>
<button onclick="onAccount(3)" type="submit">查询长期</button>
</div>
</form>
</div>
<input type="date" />
<!-- 温馨提示 -->
<div class="tips-section">
......@@ -341,18 +362,64 @@
<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('startDate').value = result || '未选择';
}
});
const pickerEnd = new CalendarPlugin({
trigger: '#eDate',
onSelect: function (date) {
const result = date.replaceAll('-', '');
document.getElementById('endDate').value = result || '未选择';
}
});
// const dateStartInput = document.querySelector('.startDate');
// const dateEndInput = document.querySelector('.endDate');
// const startDate = document.querySelector('#startDate');
// const endDate = document.querySelector('#endDate');
// dateStartInput.addEventListener('change', function() {
// const result = this.value.replaceAll('-', '');
// startDate.value = result; // 格式：YYYYMMDD
// });
// dateEndInput.addEventListener('change', function() {
// const result = this.value.replaceAll('-', '');
// endDate.value = result; // 格式：YYYYMMDD
// });
const form = document.getElementById('myForm');
function onAccount(number) {
if (number == 2) {
window.history.back();
}
if (number == 3) {
form.addEventListener('submit', async (e) => {
e.preventDefault(); // 阻止页面刷新
// 方式1：使用 FormData 自动搜集
const formData = new FormData(form);
console.log(4444, Object.fromEntries(formData.entries()));
localStorage.setItem('accountQueryParams', JSON.stringify(Object.fromEntries(formData.entries())));
setTimeout(() => {
window.location.href = './account_list.html'
}, 500);
});
}
}
</script>
\ No newline at end of file
account_list.html
View file @ bf18719d
......@@ -396,7 +396,7 @@
</body>
</html>
<script>
console.log(2222, localStorage.getItem('accountQueryParams'))
function onBack(){
window.history.back();
}
......
calendar-plugin/calendar.css 0 → 100644
View file @ bf18719d
/* calendar.css - 日历插件样式 */
.calendar-plugin-container {
position: relative;
display: inline-block;
}
.calendar-plugin-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: #f0f2f5;
border: 1px solid #d1d9e6;
border-radius: 8px;
font-size: 14px;
color: #1f2a3e;
cursor: pointer;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
transition: background 0.2s;
}
.calendar-plugin-trigger:hover {
background-color: #e6e9f0;
}
.calendar-plugin-popup {
position: absolute;
z-index: 9999;
background: #ffffff;
border: 1px solid #c5c5c5;
width: 230px;
font-family: system-ui, sans-serif;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s;
pointer-events: none;
}
.calendar-plugin-popup.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.calendar-plugin-inner {
padding: 4px 10px 2px 10px;
position: relative;
}
.calendar-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 13px;
}
.calendar-nav-header .date-num {
padding-top: 6px;
color: #1f93d5;
}
.calendar-nav-header .date-text {
padding-top: 6px;
}
.year-month-area {
font-size: 18px;
font-weight: 560;
color: #1e2f3e;
background: #f8fafc;
padding: 4px 12px;
border-radius: 24px;
}
.nav-group {
display: flex;
justify-content: space-between;
gap: 6px;
padding: 4px 8px;
}
.nav-icon-btn {
background: transparent;
border: none;
font-size: 12px;
cursor: pointer;
/* width: 28px; */
border-radius: 20px;
}
.lashen {
transform: scaleY(1.8);
}
.nav-icon-btn.today {
font-size: 14px;
width: auto;
background: #1f93d5;
color: #fff;
border: none;
border-radius: 0;
padding: 3px 14px;
}
/* .nav-icon-btn:hover {
background: #e2e8f0;
} */
.flex {
display: flex;
align-items: center;
gap: 20px;
}
.action-buttons {
display: flex;
gap: 12px;
margin-bottom: 18px;
}
.action-btn {
flex: 1;
background: #FFFFF5;
border: none;
padding: 3px 30px;
cursor: pointer;
color: #626262;
position: absolute;
bottom: 40px;
right: 14px
}
.action-btn:hover {
background: #e2e8f0;
}
.week-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 4px;
font-size: 14px;
color: #fff;
background-color: #1f93d5;
line-height: 28px;
}
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 6px;
}
.day-cell {
text-align: center;
padding: 4px 0;
font-size: 14px;
cursor: pointer;
/* border-radius: 24px; */
color: #4b5563;
}
.day-cell:hover {
background: #eef2ff;
}
.day-cell.other-month {
color: #b9c8e8;
}
.day-cell.selected {
background: #1f93d5;
color: white;
}
.footer-tip {
font-size: 10px;
color: #9aaebe;
text-align: center;
border-top: 1px solid #ecf3fa;
padding-top: 8px;
}
/* .calendar-plugin-popup::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: white;
border-left: 1px solid #c5c5c5;
border-top: 1px solid #c5c5c5;
transform: rotate(45deg);
top: -6px;
left: 20px;
} */
.popup-arrow-bottom::before {
top: auto;
bottom: -6px;
transform: rotate(225deg);
}
\ No newline at end of file
calendar-plugin/calendar.js 0 → 100644
View file @ bf18719d
This diff is collapsed.
date.html 0 → 100644
View file @ bf18719d
This diff is collapsed.
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