下载地址（文章指定相关附件）：www.pan38.com/dow/share.p… 提取密码：8334
其实这个是客户花了500定制的源码，那么现在我这边放着没用，但是又是最近才开发的所以直接分享出来，仅供娱乐学习参考用途哈，希望能帮助到一些人，用html+css+js实现的，非常简单。
源码部分：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收支详情 - 中国工商银行</title>
<link rel="stylesheet" href="income-styles.css">
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
<div class="nav-left">
<span class="back-btn" onclick="goBack()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
<div class="nav-center">
<div class="search-bar">
<span class="search-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="search-text">搜索关键词</span>
</div>
</div>
<div class="nav-right">
<div class="notification-icon">
<span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14v3a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H6a3 3 0 0 0-3 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 14v3a3 3 0 0 1-3 3h-1a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h1a3 3 0 0 1 3 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 14V9a9 9 0 0 1 18 0v5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
<div class="menu-icon" onclick="toggleEditMode()">
<span>⋯</span>
</div>
</div>
</div>
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-item" onclick="editUserName()">
<span id="userName">*荣华 ▼</span>
</div>
<div class="filter-item">
<span>全部账户 ▼</span>
</div>
<div class="filter-item">
<span>筛选 ▼</span>
</div>
<div class="filter-item">
<span>选择时间 ▼</span>
</div>
</div>
<!-- 月份标题 -->
<div class="month-header">
<span class="month-number">7</span>
<span class="month-text">月</span>
</div>
<!-- 交易记录列表 -->
<div class="transaction-list">
<!-- 8月9日周六 -->
<div class="transaction-item" onclick="editTransaction(this)">
<div class="date-info">
<div class="date-number">28</div>
<div class="date-day">周六</div>
</div>
<div class="transaction-icon consumption">
<span>⋯</span>
</div>
<div class="transaction-content">
<div class="transaction-title">消费</div>
<div class="transaction-subtitle">支付宝-郭昊强</div>
<div class="transaction-detail">工银储蓄卡6481 16:24:28</div>
</div>
<div class="transaction-amount negative">
<div class="amount">-100.00</div>
<div class="balance">余额: 98.84</div>
</div>
<div class="edit-checkbox">
<input type="checkbox" class="transaction-checkbox">
</div>
</div>
<div class="transaction-item" onclick="editTransaction(this)">
<div class="date-info"></div>
<div class="transaction-icon transfer">
<span>💳</span>
</div>
<div class="transaction-content">
<div class="transaction-title">财付通转账</div>
<div class="transaction-subtitle">财付通</div>
<div class="transaction-detail">工银储蓄卡6481 16:24:23</div>
</div>
<div class="transaction-amount positive">
<div class="amount">+100.00</div>
<div class="balance">余额: 198.84</div>
</div>
<div class="edit-checkbox">
<input type="checkbox" class="transaction-checkbox">
</div>
</div>
<!-- 8月7日周四 -->
<div class="transaction-item" onclick="editTransaction(this)">
<div class="date-info">
<div class="date-number">27</div>
<div class="date-day">周四</div>
</div>
<div class="transaction-icon consumption">
<span>⋯</span>
</div>
<div class="transaction-content">
<div class="transaction-title">消费</div>
<div class="transaction-subtitle">支付宝-特约商户</div>
<div class="transaction-detail">工银储蓄卡6481 15:27:04</div>
</div>
<div class="transaction-amount negative">
<div class="amount">-10.00</div>
<div class="balance">余额: 98.84</div>
</div>
<div class="edit-checkbox">
<input type="checkbox" class="transaction-checkbox">
</div>
</div>
<div class="transaction-item" onclick="editTransaction(this)">
<div class="date-info"></div>
<div class="transaction-icon finance">
<span>¥</span>
</div>
<div class="transaction-content">
<div class="transaction-title">理财</div>
<div class="transaction-subtitle">支付宝-蚂蚁（杭州）基金销售有限公司</div>
<div class="transaction-detail">工银储蓄卡6481 15:16:08</div>
</div>
<div class="transaction-amount negative">
<div class="amount"> -10.00</div>
<div class="balance">余额: 108.84</div>
</div>
<div class="edit-checkbox">
<input type="checkbox" class="transaction-checkbox">
</div>
</div>
<!-- 8月3日周日 -->
<div class="transaction-item" onclick="editTransaction(this)">
<div class="date-info">
<div class="date-number">26</div>
<div class="date-day">周日</div>
</div>
<div class="transaction-icon payment">
<span>💰</span>
</div>
<div class="transaction-content">
<div class="transaction-title">还款</div>
<div class="transaction-subtitle">京东支付-京东白条及金条业务网银平台</div>
<div class="transaction-detail">工银储蓄卡6481 14:12:17</div>
</div>
<div class="transaction-amount negative">
<div class="amount"> -220.07</div>
<div class="balance">余额: 118.84</div>
</div>
<div class="edit-checkbox">
<input type="checkbox" class="transaction-checkbox">
</div>
</div>
<div class="transaction-item" onclick="editTransaction(this)">
<div class="date-info"></div>
<div class="transaction-icon payment-green">
<span>💸</span>
</div>
<div class="transaction-content">
<div class="transaction-title">还款 0803090084812618</div>
<div class="transaction-detail">工银储蓄卡6481 09:17:11</div>
</div>
<div class="transaction-amount negative">
<div class="amount">-516.65</div>
<div class="balance">余额: 13028.18</div>
</div>
<div class="edit-checkbox">
<input type="checkbox" class="transaction-checkbox">
</div>
</div>
</div>
<!-- 编辑模式底部工具栏 -->
<div id="editToolbar" class="edit-toolbar">
<div class="edit-actions">
<button class="edit-btn" onclick="editSelectedItems()">编辑</button>
<button class="delete-btn" onclick="deleteSelectedItems()">删除</button>
<button class="cancel-btn" onclick="cancelEdit()">取消</button>
</div>
</div>
<!-- 交易详情全屏显示 -->
<div id="transactionDetail" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; z-index: 1000; overflow-y: auto;">
<!-- 头部导航 -->
<div style="background: white; padding: 44px 20px 16px 20px; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 100;">
<div style="display: flex; align-items: center; justify-content: space-between; position: relative;">
<span onclick="hideTransactionDetail()" style="cursor: pointer; padding: 4px;" title="返回">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</span>
<span style="font-size: 18px; font-weight: 500; color: #333; position: absolute; left: 50%; transform: translateX(-50%);">收支详情</span>
<div style="display: flex; align-items: center; gap: 16px;">
<span style="cursor: pointer; padding: 4px;" title="刷新">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="23 4 23 10 17 10"></polyline>
<polyline points="1 20 1 14 7 14"></polyline>
<path d="m20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
</svg>
</span>
<span style="cursor: pointer; padding: 4px;" title="导出">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</span>
</div>
</div>
</div>
<!-- 金额显示区域 -->
<div style="background: white; padding: 32px 20px; text-align: center; border-bottom: 1px solid #eee;">
<div id="detailAmount" style="font-size: 48px; font-weight: 300; margin-bottom: 8px; color: #999;">-220.07</div>
<div style="font-size: 16px; color: #999;">余额: <span id="detailBalance">118.84</span></div>
</div>
<!-- 基本详情 -->
<div style="background: white; margin-bottom: 12px;">
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易卡号</span>
<span id="detailCardNumber" style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">6212****1447</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易账户</span>
<span id="detailAccountNumber" style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">2010****1155</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易户名</span>
<span id="detailAccountName" style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">陈飞龙</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易时间</span>
<span id="detailTime" style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">2025-07-26 14:12:17</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">业务摘要</span>
<span id="detailBusinessSummary" style="font-size: 16px; color: #007AFF; text-align: right; flex: 1; margin-left: 20px;">还款</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易场所</span>
<span id="detailLocation" style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">京东支付-京东白条众金条业务网银平台</span>
</div>
<div style="padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易金额</span>
<span id="detailTransactionAmount" style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">220.07</span>
</div>
<button onclick="toggleExpandedDetails()" style="background: white; border: none; padding: 16px 20px; width: 100%; text-align: center; font-size: 16px; color: #007AFF; cursor: pointer; border-top: 1px solid #f0f0f0;">
<span id="expandText">查看全部 ▼</span>
</button>
</div>
<!-- 展开的详细信息 -->
<div id="expandedDetails" style="display: none; background: white; margin-bottom: 12px;">
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易流水号</span>
<span style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">20250803094431001</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易状态</span>
<span style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">成功</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">交易类型</span>
<span style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">网银转账</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">手续费</span>
<span style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">0.00</span>
</div>
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">对方户名</span>
<span style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">京东数字科技控股股份有限公司</span>
</div>
<div style="padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">对方账号</span>
<span style="font-size: 16px; color: #666; text-align: right; flex: 1; margin-left: 20px;">1109****8888</span>
</div>
</div>
<!-- 详情设置标题 -->
<div style="background: #f5f5f5; padding: 16px 20px;">
<span style="font-size: 16px; color: #999;">详情设置</span>
</div>
<!-- 详情设置项 -->
<div style="background: white; margin-bottom: 12px;">
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 24px; height: 24px; background: #E3F2FD; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2196F3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
<line x1="1" y1="10" x2="23" y2="10"></line>
</svg>
</div>
<span style="font-size: 16px; color: #333;">分类</span>
</div>
<span style="font-size: 16px; color: #007AFF;">信用卡还款 ›</span>
</div>
<div style="padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">不计入收支</span>
<div style="position: relative; width: 44px; height: 24px;">
<input type="checkbox" id="excludeFromTotal" style="opacity: 0; width: 0; height: 0;">
<span onclick="toggleExcludeSwitch()" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 24px; transition: 0.4s; display: block;">
<span id="switchDot" style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.4s; display: block;"></span>
</span>
</div>
</div>
</div>
<div style="background: white; margin-bottom: 12px;">
<div style="padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">订单咨询</span>
<span style="font-size: 16px; color: #007AFF;">›</span>
</div>
</div>
<!-- 备注区域 -->
<div style="background: white; margin-bottom: 12px;">
<div style="padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">备注</span>
<div style="display: flex; align-items: center; gap: 12px; flex: 1; margin-left: 20px;">
<input type="text" placeholder="0/50" maxlength="50" oninput="updateMemoCounter(this)" style="flex: 1; text-align: right; font-size: 16px; color: #666; background: none; border: none; outline: none;">
<span style="cursor: pointer; padding: 4px;" title="拍照">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m14.5 4-2 2H7a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-2.5l-2-2z"></path>
<circle cx="12" cy="13" r="3"></circle>
</svg>
</span>
</div>
</div>
<div style="padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 16px; color: #333;">图片备注</span>
<span style="color: #007AFF; cursor: pointer; display: flex; align-items: center; gap: 4px;" title="添加图片">
<span style="font-size: 16px;">添加图片</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#007AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</span>
</div>
</div>
<!-- 为您推荐 -->
<div style="background: white; padding: 20px;">
<div style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 16px;">为您推荐</div>
</div>
</div>
<!-- 编辑弹窗 -->
<div id="editModal" class="edit-modal">
<div class="modal-content">
<div class="modal-header">
<h3>编辑交易记录</h3>
<span class="close-btn" onclick="closeEditModal()">×</span>
</div>
<div class="modal-body">
<div class="form-group">
<label>交易类型</label>
<input type="text" id="editTitle" placeholder="请输入交易类型">
</div>
<div class="form-group">
<label>商户名称</label>
<input type="text" id="editSubtitle" placeholder="请输入商户名称">
</div>
<div class="form-group">
<label>交易金额</label>
<input type="number" id="editAmount" placeholder="请输入金额（正数为收入，负数为支出）" step="0.01">
</div>
<div class="form-group">
<label>交易时间</label>
<input type="datetime-local" id="editTime">
</div>
<div class="form-group">
<label>余额</label>
<input type="number" id="editBalance" placeholder="请输入余额" step="0.01">
</div>
</div>
<div class="modal-footer">
<button class="save-btn" onclick="saveEdit()">保存</button>
<button class="cancel-btn" onclick="closeEditModal()">取消</button>
</div>
</div>
</div>
<!-- 修改用户名弹窗 -->
<div id="userNameModal" class="edit-modal">
<div class="modal-content">
<div class="modal-header">
<h3>修改用户名</h3>
<span class="close-btn" onclick="closeUserNameModal()">×</span>
</div>
<div class="modal-body">
<div class="form-group">
<label>用户名</label>
<input type="text" id="newUserName" placeholder="请输入新的用户名">
</div>
</div>
<div class="modal-footer">
<button class="save-btn" onclick="saveUserName()">保存</button>
<button class="cancel-btn" onclick="closeUserNameModal()">取消</button>
</div>
</div>
</div>
<script>
let isEditMode = false;
let currentEditingItem = null;
function goBack() {
window.location.href = 'index.html';
}
function toggleEditMode() {
isEditMode = !isEditMode;
const checkboxes = document.querySelectorAll('.edit-checkbox');
const toolbar = document.getElementById('editToolbar');
if (isEditMode) {
checkboxes.forEach(checkbox => {
checkbox.style.display = 'block';
});
toolbar.style.display = 'block';
document.body.style.paddingBottom = '80px';
} else {
checkboxes.forEach(checkbox => {
checkbox.style.display = 'none';
checkbox.querySelector('input').checked = false;
});
toolbar.style.display = 'none';
document.body.style.paddingBottom = '0';
}
}
function editTransaction(item) {
if (!isEditMode) {
// 非编辑模式下，跳转到详情页面
viewTransactionDetail(item);
return;
}
event.stopPropagation();
currentEditingItem = item;
// 获取当前交易数据
const title = item.querySelector('.transaction-title').textContent;
const subtitle = item.querySelector('.transaction-subtitle').textContent;
const amountText = item.querySelector('.amount').textContent;
const amount = amountText.startsWith('-') ? '-' + amountText.replace(/[+-]/g, '') : amountText.replace(/[+-]/g, '');
const balance = item.querySelector('.balance').textContent.replace('余额: ', '');
const detail = item.querySelector('.transaction-detail').textContent;
// 解析时间
const timeMatch = detail.match(/(\d{2}):(\d{2}):(\d{2})/);
let timeValue = '';
if (timeMatch) {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
timeValue = `${year}-${month}-${day}T${timeMatch[0]}`;
}
// 填充表单
document.getElementById('editTitle').value = title;
document.getElementById('editSubtitle').value = subtitle;
document.getElementById('editAmount').value = amount;
document.getElementById('editTime').value = timeValue;
document.getElementById('editBalance').value = balance;
// 显示编辑弹窗
document.getElementById('editModal').style.display = 'flex';
}
// 查看交易详情
function viewTransactionDetail(item) {
// 添加随机延迟 500-1000毫秒
const delay = Math.floor(Math.random() * 500) + 500; // 500-999毫秒
setTimeout(() => {
// 获取交易信息
const title = item.querySelector('.transaction-title')?.textContent || '';
const subtitle = item.querySelector('.transaction-subtitle')?.textContent || '';
const amount = item.querySelector('.amount')?.textContent || '';
const balance = item.querySelector('.balance')?.textContent || '';
const detail = item.querySelector('.transaction-detail')?.textContent || '';
// 解析详情信息
const timeMatch = detail.match(/(\d{2}:\d{2}:\d{2})/);
const time = timeMatch ? timeMatch[1] : '';
// 填充详情内容
document.getElementById('detailAmount').textContent = amount.replace(' ', '').replace('', '').trim();
document.getElementById('detailBalance').textContent = balance.replace('余额: ', '');
document.getElementById('detailCardNumber').textContent = '6212****6481';
document.getElementById('detailAccountNumber').textContent = '2010****1155';
document.getElementById('detailAccountName').textContent = '陈飞龙';
document.getElementById('detailTime').textContent = '2025-07-26 ' + time;
document.getElementById('detailBusinessSummary').textContent = subtitle;
document.getElementById('detailLocation').textContent = title;
document.getElementById('detailTransactionAmount').textContent = amount.replace(/[+-]/g, '');
// 设置金额颜色
const detailAmountElement = document.getElementById('detailAmount');
detailAmountElement.className = '';
if (amount.includes('+')) {
detailAmountElement.style.color = '#00C851';
} else {
detailAmountElement.style.color = '#666';
}
// 显示详情区域
document.getElementById('transactionDetail').style.display = 'block';
// 滚动到详情区域
document.getElementById('transactionDetail').scrollIntoView({ behavior: 'smooth' });
}, delay);
}
// 隐藏交易详情
function hideTransactionDetail() {
document.getElementById('transactionDetail').style.display = 'none';
}
// 切换展开详情
function toggleExpandedDetails() {
const expandedDetails = document.getElementById('expandedDetails');
const expandText = document.getElementById('expandText');
if (expandedDetails.style.display === 'none' || expandedDetails.style.display === '') {
expandedDetails.style.display = 'block';
expandText.textContent = '收起 ▲';
} else {
expandedDetails.style.display = 'none';
expandText.textContent = '查看全部 ▼';
}
}
// 更新备注计数器
function updateMemoCounter(input) {
const currentLength = input.value.length;
input.placeholder = `${currentLength}/50`;
}
function editSelectedItems() {
const selectedItems = document.querySelectorAll('.transaction-checkbox:checked');
if (selectedItems.length === 0) {
alert('请选择要编辑的交易记录');
return;
}
if (selectedItems.length > 1) {
alert('请选择一条交易记录进行编辑');
return;
}
const item = selectedItems[0].closest('.transaction-item');
editTransaction(item);
}
function deleteSelectedItems() {
const selectedItems = document.querySelectorAll('.transaction-checkbox:checked');
if (selectedItems.length === 0) {
alert('请选择要删除的交易记录');
return;
}
if (confirm(`确定要删除选中的 ${selectedItems.length} 条交易记录吗？`)) {
selectedItems.forEach(checkbox => {
checkbox.closest('.transaction-item').remove();
});
// 删除后保存到缓存
saveTransactionsToCache();
cancelEdit();
}
}
function cancelEdit() {
toggleEditMode();
}
function closeEditModal() {
document.getElementById('editModal').style.display = 'none';
currentEditingItem = null;
}
function saveEdit() {
if (!currentEditingItem) return;
const title = document.getElementById('editTitle').value;
const subtitle = document.getElementById('editSubtitle').value;
const amount = document.getElementById('editAmount').value;
const time = document.getElementById('editTime').value;
const balance = document.getElementById('editBalance').value;
if (!title || !subtitle || !amount || !time || !balance) {
alert('请填写完整信息');
return;
}
// 更新显示内容
currentEditingItem.querySelector('.transaction-title').textContent = title;
currentEditingItem.querySelector('.transaction-subtitle').textContent = subtitle;
// 更新金额显示
const amountElement = currentEditingItem.querySelector('.amount');
const amountValue = parseFloat(amount);
const isPositive = amountValue >= 0;
const amountParent = amountElement.parentElement;
amountParent.className = isPositive ? 'transaction-amount positive' : 'transaction-amount negative';
// 保留"不计入"标签
const notIncluded = amountElement.querySelector('.not-included');
const displayAmount = Math.abs(amountValue).toFixed(2);
if (notIncluded) {
amountElement.innerHTML = notIncluded.outerHTML + ' ' + (isPositive ? '+' : '-') + displayAmount;
} else {
amountElement.textContent = (isPositive ? '+' : '-') + displayAmount;
}
// 更新余额
currentEditingItem.querySelector('.balance').textContent = '余额: ' + balance;
// 更新时间
const timeObj = new Date(time);
const timeStr = timeObj.toTimeString().substring(0, 8);
const detailElement = currentEditingItem.querySelector('.transaction-detail');
detailElement.textContent = detailElement.textContent.replace(/\d{2}:\d{2}:\d{2}/, timeStr);
// 保存到缓存
saveTransactionsToCache();
closeEditModal();
alert('编辑成功！');
}
// 阻止编辑模式下的点击事件冒泡
document.addEventListener('click', function(e) {
if (isEditMode && e.target.type === 'checkbox') {
e.stopPropagation();
}
});
// 页面加载时从缓存读取用户名
function loadUserNameFromCache() {
const savedUserName = localStorage.getItem('userName');
if (savedUserName) {
document.getElementById('userName').textContent = savedUserName + ' ▼';
}
}
// 保存交易记录到缓存
function saveTransactionsToCache() {
const transactions = [];
const items = document.querySelectorAll('.transaction-item');
items.forEach((item, index) => {
const title = item.querySelector('.transaction-title')?.textContent || '';
const subtitle = item.querySelector('.transaction-subtitle')?.textContent || '';
const amount = item.querySelector('.amount')?.textContent || '';
const balance = item.querySelector('.balance')?.textContent || '';
const detail = item.querySelector('.transaction-detail')?.textContent || '';
const dateInfo = item.querySelector('.date-info');
const dateNumber = dateInfo?.querySelector('.date-number')?.textContent || '';
const dateDay = dateInfo?.querySelector('.date-day')?.textContent || '';
transactions.push({
index: index,
title: title,
subtitle: subtitle,
amount: amount,
balance: balance,
detail: detail,
dateNumber: dateNumber,
dateDay: dateDay
});
});
localStorage.setItem('transactionRecords', JSON.stringify(transactions));
}
// 从缓存加载交易记录
function loadTransactionsFromCache() {
const savedTransactions = localStorage.getItem('transactionRecords');
if (!savedTransactions) return;
try {
const transactions = JSON.parse(savedTransactions);
const items = document.querySelectorAll('.transaction-item');
transactions.forEach(transaction => {
if (transaction.index < items.length) {
const item = items[transaction.index];
// 更新标题和副标题
const titleElement = item.querySelector('.transaction-title');
const subtitleElement = item.querySelector('.transaction-subtitle');
const detailElement = item.querySelector('.transaction-detail');
const amountElement = item.querySelector('.amount');
const balanceElement = item.querySelector('.balance');
if (titleElement) titleElement.textContent = transaction.title;
if (subtitleElement) subtitleElement.textContent = transaction.subtitle;
if (detailElement) detailElement.textContent = transaction.detail;
if (balanceElement) balanceElement.textContent = transaction.balance;
// 更新金额和样式
if (amountElement && transaction.amount) {
const isPositive = transaction.amount.includes('+');
const amountParent = amountElement.parentElement;
amountParent.className = isPositive ? 'transaction-amount positive' : 'transaction-amount negative';
amountElement.innerHTML = transaction.amount;
}
}
});
} catch (error) {
console.error('加载交易记录缓存失败:', error);
}
}
// 修改用户名功能
function editUserName() {
const currentName = document.getElementById('userName').textContent.replace(' ▼', '');
document.getElementById('newUserName').value = currentName;
document.getElementById('userNameModal').style.display = 'flex';
}
function closeUserNameModal() {
document.getElementById('userNameModal').style.display = 'none';
}
function saveUserName() {
const newName = document.getElementById('newUserName').value.trim();
if (!newName) {
alert('请输入用户名');
return;
}
// 保存到本地缓存
localStorage.setItem('userName', newName);
// 更新显示的用户名
document.getElementById('userName').textContent = newName + ' ▼';
closeUserNameModal();
alert('用户名修改成功！');
}
// 切换"不计入收支"开关
function toggleExcludeSwitch() {
const checkbox = document.getElementById('excludeFromTotal');
const switchSpan = checkbox.nextElementSibling;
const dot = document.getElementById('switchDot');
checkbox.checked = !checkbox.checked;
if (checkbox.checked) {
switchSpan.style.backgroundColor = '#007AFF';
dot.style.transform = 'translateX(20px)';
} else {
switchSpan.style.backgroundColor = '#ccc';
dot.style.transform = 'translateX(0px)';
}
}
// 页面加载完成后读取缓存
document.addEventListener('DOMContentLoaded', function() {
loadUserNameFromCache();
loadTransactionsFromCache();
});
</script>
</body>
</html>
