html+js 实现生活缴费页面模板
响应式 支持手机和电脑
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生活缴费平台</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- Tailwind 配置 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#165DFF',secondary: '#36BFFA',success: '#00B42A',warning: '#FF7D00',danger: '#F53F3F',neutral: {100: '#F2F3F5',200: '#E5E6EB',300: '#C9CDD4',400: '#86909C',500: '#4E5969',600: '#272E3B',700: '#1D2129',}},fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif'],},boxShadow: {'card': '0 4px 20px rgba(0, 0, 0, 0.08)','card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',}},}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.transition-all-300 {transition: all 300ms ease-in-out;}.bg-gradient-primary {background: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);}.text-balance {text-wrap: balance;}}</style>
</head><body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen"><!-- 头部导航 --><header class="bg-white shadow-sm sticky top-0 z-50"><div class="container mx-auto px-4 py-4 flex justify-between items-center"><div class="flex items-center space-x-2"><i class="fa fa-credit-card text-primary text-2xl"></i><h1 class="text-xl font-bold text-neutral-700">生活缴费平台</h1></div><div class="flex items-center space-x-6"><button class="text-neutral-500 hover:text-primary transition-all-300"><i class="fa fa-bell-o"></i></button><button class="text-neutral-500 hover:text-primary transition-all-300"><i class="fa fa-user-o"></i></button></div></div></header><!-- 主内容区 --><main class="container mx-auto px-4 py-8 max-w-5xl"><!-- 步骤指示器 --><div class="mb-10"><div class="flex justify-between items-center relative"><div class="absolute left-0 right-0 top-1/2 h-1 bg-neutral-200 -z-10"></div><div class="absolute left-0 h-1 bg-primary transition-all duration-500" id="progress-bar" style="width: 0%; top: 1/2; z-10"></div><div class="step-indicator flex flex-col items-center" data-step="1"><div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2"><i class="fa fa-map-marker"></i></div><span class="text-sm font-medium text-primary">选择城市</span></div><div class="step-indicator flex flex-col items-center" data-step="2"><div class="w-10 h-10 rounded-full bg-neutral-200 text-neutral-500 flex items-center justify-center mb-2"><i class="fa fa-list-alt"></i></div><span class="text-sm font-medium text-neutral-500">缴费类型</span></div><div class="step-indicator flex flex-col items-center" data-step="3"><div class="w-10 h-10 rounded-full bg-neutral-200 text-neutral-500 flex items-center justify-center mb-2"><i class="fa fa-search"></i></div><span class="text-sm font-medium text-neutral-500">查询</span></div><div class="step-indicator flex flex-col items-center" data-step="4"><div class="w-10 h-10 rounded-full bg-neutral-200 text-neutral-500 flex items-center justify-center mb-2"><i class="fa fa-file-text-o"></i></div><span class="text-sm font-medium text-neutral-500">账单</span></div></div></div><!-- 步骤内容区 --><div class="bg-white rounded-xl shadow-card p-6 md:p-8 transition-all-300"><!-- 步骤1: 选择城市 --><div id="step-1" class="step-content"><h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-neutral-700 mb-6">选择您的城市</h2><div class="mb-6"><div class="relative"><input type="text" id="city-search" placeholder="搜索城市..." class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300"><i class="fa fa-search absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400"></i></div></div><div class="mb-6"><h3 class="text-neutral-500 font-medium mb-3">热门城市</h3><div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3" id="hot-cities"><!-- 城市将通过JS动态生成 --></div></div><div><h3 class="text-neutral-500 font-medium mb-3">按省份选择</h3><div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3" id="provinces"><!-- 省份将通过JS动态生成 --></div></div><div class="mt-8 flex justify-end"><button id="to-step-2" class="px-6 py-3 bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-all-300 opacity-50 cursor-not-allowed">下一步 <i class="fa fa-arrow-right ml-1"></i></button></div></div><!-- 步骤2: 选择缴费类型 --><div id="step-2" class="step-content hidden"><h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-neutral-700 mb-6">选择缴费类型</h2><div class="mb-4 text-neutral-500">当前城市: <span id="selected-city-display" class="font-medium text-neutral-700">未选择</span></div><div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6" id="payment-types"><!-- 缴费类型将通过JS动态生成 --></div><div class="mt-8 flex justify-between"><button id="back-to-step-1" class="px-6 py-3 border border-neutral-200 text-neutral-600 rounded-lg hover:bg-neutral-50 transition-all-300"><i class="fa fa-arrow-left mr-1"></i> 上一步</button><button id="to-step-3" class="px-6 py-3 bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-all-300 opacity-50 cursor-not-allowed">下一步 <i class="fa fa-arrow-right ml-1"></i></button></div></div><!-- 步骤3: 查询页面 --><div id="step-3" class="step-content hidden"><h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-neutral-700 mb-6">查询缴费信息</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"><div><p class="text-neutral-500 mb-1">城市</p><p id="query-city" class="font-medium"></p></div><div><p class="text-neutral-500 mb-1">缴费类型</p><p id="query-type" class="font-medium"></p></div></div><div id="query-form" class="space-y-4 mt-6"><!-- 查询表单将根据缴费类型动态生成 --></div><div class="mt-8 flex justify-between"><button id="back-to-step-2" class="px-6 py-3 border border-neutral-200 text-neutral-600 rounded-lg hover:bg-neutral-50 transition-all-300"><i class="fa fa-arrow-left mr-1"></i> 上一步</button><button id="to-step-4" class="px-6 py-3 bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-all-300">查询账单 <i class="fa fa-search ml-1"></i></button></div></div><!-- 步骤4: 账单页面 --><div id="step-4" class="step-content hidden"><h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-neutral-700 mb-6">您的账单信息</h2><div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"><div class="bg-neutral-50 p-4 rounded-lg"><p class="text-neutral-500 mb-1">城市</p><p id="bill-city" class="font-medium"></p></div><div class="bg-neutral-50 p-4 rounded-lg"><p class="text-neutral-500 mb-1">缴费类型</p><p id="bill-type" class="font-medium"></p></div><div class="bg-neutral-50 p-4 rounded-lg"><p class="text-neutral-500 mb-1">户号</p><p id="bill-account" class="font-medium"></p></div></div><div id="bills-container" class="space-y-6"><!-- 账单信息将通过JS动态生成 --></div><div class="mt-8 flex justify-between"><button id="back-to-step-3" class="px-6 py-3 border border-neutral-200 text-neutral-600 rounded-lg hover:bg-neutral-50 transition-all-300"><i class="fa fa-arrow-left mr-1"></i> 返回查询</button><button id="pay-bill" class="px-8 py-3 bg-success text-white rounded-lg shadow-sm hover:bg-success/90 transition-all-300">立即缴费 <i class="fa fa-money ml-1"></i></button></div></div></div></main><!-- 页脚 --><footer class="bg-white mt-12 py-8 border-t border-neutral-200"><div class="container mx-auto px-4 text-center text-neutral-500 text-sm"><p>© 生活缴费平台 版权所有</p><p class="mt-2">客服热线: 400-***-4567</p></div></footer><!-- 缴费成功弹窗 --><div id="success-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"><div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 transform transition-all-300 scale-95 opacity-0" id="modal-content"><div class="text-center"><div class="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4"><i class="fa fa-check text-2xl text-success"></i></div><h3 class="text-xl font-bold text-neutral-700 mb-2">缴费成功</h3><p class="text-neutral-500 mb-6">您已成功完成缴费，账单信息已更新</p><button id="close-modal" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300">完成</button></div></div></div><script>// 模拟数据 - 城市和省份const cityData = {hotCities: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '重庆', '南京', '西安', '苏州', '天津'],provinces: [{ name: '北京市', cities: ['北京'] },{ name: '上海市', cities: ['上海'] },{ name: '广东省', cities: ['广州', '深圳', '珠海', '汕头', '佛山', '韶关'] },{ name: '江苏省', cities: ['南京', '无锡', '徐州', '常州', '苏州', '南通'] },{ name: '浙江省', cities: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴'] },{ name: '四川省', cities: ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳'] },{ name: '山东省', cities: ['济南', '青岛', '淄博', '枣庄', '东营', '烟台'] },{ name: '河南省', cities: ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁'] },{ name: '湖北省', cities: ['武汉', '黄石', '十堰', '宜昌', '襄阳', '鄂州'] },{ name: '湖南省', cities: ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳'] },{ name: '河北省', cities: ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定'] },{ name: '陕西省', cities: ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安'] }]};// 模拟数据 - 缴费类型const paymentTypes = [{ id: 'water', name: '水费', icon: 'fa-tint', color: '#165DFF',formFields: [{ name: '户号', key: 'account', type: 'text', placeholder: '请输入水费户号' }]},{ id: 'electricity', name: '电费', icon: 'fa-bolt', color: '#FF7D00',formFields: [{ name: '户号', key: 'account', type: 'text', placeholder: '请输入电费户号' },{ name: '缴费单位', key: 'company', type: 'select', options: ['国家电网', '南方电网', '地方电力公司'] }]},{ id: 'gas', name: '燃气费', icon: 'fa-fire', color: '#F53F3F',formFields: [{ name: '户号', key: 'account', type: 'text', placeholder: '请输入燃气费户号' },{ name: '燃气公司', key: 'company', type: 'select', options: ['天然气公司', '液化气公司', '煤气公司'] }]}];// 模拟数据 - 账单信息function generateBills(account, type) {const months = ['1月', '2月', '3月', '4月', '5月', '6月'];const currentMonth = new Date().getMonth();return months.slice(0, currentMonth + 1).map((month, index) => {const year = new Date().getFullYear();const isPaid = index < currentMonth;let usage, amount;// 根据不同类型生成不同的用量和金额switch(type) {case 'water':usage = Math.floor(Math.random() * 10) + 5; // 5-15吨amount = (usage * 3.8).toFixed(2); // 每吨3.8元break;case 'electricity':usage = Math.floor(Math.random() * 100) + 50; // 50-150度amount = (usage * 0.58).toFixed(2); // 每度0.58元break;case 'gas':usage = Math.floor(Math.random() * 15) + 5; // 5-20立方米amount = (usage * 2.5).toFixed(2); // 每立方米2.5元break;}return {id: `bill-${index + 1}`,month: `${year}年${month}`,usage: usage,amount: amount,isPaid: isPaid,dueDate: isPaid ? `${year}年${month}15日` : `${year}年${months[currentMonth]}25日`};});}// 存储用户选择的数据const userSelections = {city: null,paymentType: null,formData: {}};// DOM元素const elements = {progressBar: document.getElementById('progress-bar'),stepIndicators: document.querySelectorAll('.step-indicator'),stepContents: document.querySelectorAll('.step-content'),hotCitiesContainer: document.getElementById('hot-cities'),provincesContainer: document.getElementById('provinces'),citySearch: document.getElementById('city-search'),selectedCityDisplay: document.getElementById('selected-city-display'),paymentTypesContainer: document.getElementById('payment-types'),queryCity: document.getElementById('query-city'),queryType: document.getElementById('query-type'),queryForm: document.getElementById('query-form'),billsContainer: document.getElementById('bills-container'),billCity: document.getElementById('bill-city'),billType: document.getElementById('bill-type'),billAccount: document.getElementById('bill-account'),successModal: document.getElementById('success-modal'),modalContent: document.getElementById('modal-content')};// 按钮const buttons = {toStep2: document.getElementById('to-step-2'),backToStep1: document.getElementById('back-to-step-1'),toStep3: document.getElementById('to-step-3'),backToStep2: document.getElementById('back-to-step-2'),toStep4: document.getElementById('to-step-4'),backToStep3: document.getElementById('back-to-step-3'),payBill: document.getElementById('pay-bill'),closeModal: document.getElementById('close-modal')};// 初始化页面function init() {renderHotCities();renderProvinces();renderPaymentTypes();setupEventListeners();}// 渲染热门城市function renderHotCities() {elements.hotCitiesContainer.innerHTML = '';cityData.hotCities.forEach(city => {const cityElement = document.createElement('button');cityElement.className = 'py-2 px-3 rounded-lg border border-neutral-200 hover:border-primary hover:text-primary transition-all-300 text-center';cityElement.textContent = city;cityElement.addEventListener('click', () => selectCity(city));elements.hotCitiesContainer.appendChild(cityElement);});}// 渲染省份function renderProvinces() {elements.provincesContainer.innerHTML = '';cityData.provinces.forEach(province => {const provinceElement = document.createElement('div');provinceElement.className = 'province-item';const provinceName = document.createElement('button');provinceName.className = 'text-left py-2 px-3 w-full rounded-lg border border-neutral-200 hover:border-primary hover:text-primary transition-all-300 flex justify-between items-center';provinceName.innerHTML = `${province.name} <i class="fa fa-chevron-down text-xs"></i>`;const citiesList = document.createElement('div');citiesList.className = 'cities-list mt-2 grid grid-cols-2 gap-2 hidden';province.cities.forEach(city => {const cityElement = document.createElement('button');cityElement.className = 'py-1 px-2 text-sm rounded border border-neutral-200 hover:border-primary hover:text-primary transition-all-300';cityElement.textContent = city;cityElement.addEventListener('click', () => selectCity(city));citiesList.appendChild(cityElement);});provinceName.addEventListener('click', () => {citiesList.classList.toggle('hidden');const icon = provinceName.querySelector('i');icon.classList.toggle('fa-chevron-down');icon.classList.toggle('fa-chevron-up');});provinceElement.appendChild(provinceName);provinceElement.appendChild(citiesList);elements.provincesContainer.appendChild(provinceElement);});}// 渲染缴费类型function renderPaymentTypes() {elements.paymentTypesContainer.innerHTML = '';paymentTypes.forEach(type => {const typeCard = document.createElement('div');typeCard.className = 'payment-type-card border border-neutral-200 rounded-xl p-6 text-center cursor-pointer hover:shadow-card-hover transition-all-300 hover:border-primary/30';typeCard.dataset.type = type.id;typeCard.innerHTML = `<div class="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center" style="background-color: ${type.color}20"><i class="fa ${type.icon} text-2xl" style="color: ${type.color}"></i></div><h3 class="font-medium text-lg">${type.name}</h3>`;typeCard.addEventListener('click', () => selectPaymentType(type));elements.paymentTypesContainer.appendChild(typeCard);});}// 渲染查询表单function renderQueryForm(type) {elements.queryForm.innerHTML = '';if (!type) return;type.formFields.forEach(field => {const fieldGroup = document.createElement('div');if (field.type === 'text') {fieldGroup.innerHTML = `<label for="${field.key}" class="block text-neutral-600 mb-1.5">${field.name}</label><input type="${field.type}" id="${field.key}" class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300"placeholder="${field.placeholder}" data-field="${field.key}">`;} else if (field.type === 'select') {let optionsHtml = '';field.options.forEach(option => {optionsHtml += `<option value="${option}">${option}</option>`;});fieldGroup.innerHTML = `<label for="${field.key}" class="block text-neutral-600 mb-1.5">${field.name}</label><select id="${field.key}" class="w-full px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300"data-field="${field.key}"><option value="">请选择${field.name}</option>${optionsHtml}</select>`;}elements.queryForm.appendChild(fieldGroup);});// 添加表单输入监听const formInputs = elements.queryForm.querySelectorAll('[data-field]');formInputs.forEach(input => {input.addEventListener('input', updateFormData);});}// 渲染账单信息function renderBills() {const { city, paymentType, formData } = userSelections;if (!city || !paymentType || !formData.account) return;elements.billCity.textContent = city;elements.billType.textContent = paymentType.name;elements.billAccount.textContent = formData.account;const bills = generateBills(formData.account, paymentType.id);elements.billsContainer.innerHTML = '';bills.forEach(bill => {const billCard = document.createElement('div');billCard.className = 'border border-neutral-200 rounded-xl p-6 transition-all-300 hover:shadow-card';const statusClass = bill.isPaid ? 'text-success' : 'text-danger';const statusText = bill.isPaid ? '已缴费' : '待缴费';const statusIcon = bill.isPaid ? 'fa-check-circle' : 'fa-exclamation-circle';let usageUnit = '';switch(paymentType.id) {case 'water': usageUnit = '吨'; break;case 'electricity': usageUnit = '度'; break;case 'gas': usageUnit = '立方米'; break;}billCard.innerHTML = `<div class="flex justify-between items-start mb-4"><h3 class="font-medium text-lg">${bill.month}账单</h3><span class="flex items-center ${statusClass}"><i class="fa ${statusIcon} mr-1"></i> ${statusText}</span></div><div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-neutral-600"><div><p class="text-sm text-neutral-500">用量</p><p class="font-medium">${bill.usage} ${usageUnit}</p></div><div><p class="text-sm text-neutral-500">金额</p><p class="font-medium">¥${bill.amount}</p></div><div><p class="text-sm text-neutral-500">${bill.isPaid ? '缴费日期' : '截止日期'}</p><p class="font-medium">${bill.dueDate}</p></div></div>${!bill.isPaid ? `<div class="mt-4 pt-4 border-t border-neutral-100 flex justify-end"><button class="pay-this-bill px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300 text-sm"data-amount="${bill.amount}" data-month="${bill.month}">立即支付 ¥${bill.amount}</button></div>` : ''}`;elements.billsContainer.appendChild(billCard);});// 添加单账单支付事件const payButtons = elements.billsContainer.querySelectorAll('.pay-this-bill');payButtons.forEach(button => {button.addEventListener('click', function() {const amount = this.dataset.amount;const month = this.dataset.month;showSuccessModal(amount, month);});});}// 切换步骤function goToStep(stepNumber) {// 更新进度条elements.progressBar.style.width = `${(stepNumber - 1) * 33.33}%`;// 更新步骤指示器elements.stepIndicators.forEach(indicator => {const indicatorStep = parseInt(indicator.dataset.step);const circle = indicator.querySelector('div');const text = indicator.querySelector('span');if (indicatorStep < stepNumber) {// 已完成的步骤circle.classList.remove('bg-neutral-200', 'text-neutral-500');circle.classList.add('bg-primary', 'text-white');text.classList.remove('text-neutral-500');text.classList.add('text-primary');} else if (indicatorStep === stepNumber) {// 当前步骤circle.classList.remove('bg-neutral-200', 'text-neutral-500');circle.classList.add('bg-primary', 'text-white');text.classList.remove('text-neutral-500');text.classList.add('text-primary');} else {// 未完成的步骤circle.classList.remove('bg-primary', 'text-white');circle.classList.add('bg-neutral-200', 'text-neutral-500');text.classList.remove('text-primary');text.classList.add('text-neutral-500');}});// 显示当前步骤内容，隐藏其他步骤elements.stepContents.forEach(content => {const contentStep = parseInt(content.id.split('-')[1]);if (contentStep === stepNumber) {content.classList.remove('hidden');} else {content.classList.add('hidden');}});// 滚动到顶部window.scrollTo({ top: 0, behavior: 'smooth' });}// 选择城市function selectCity(city) {userSelections.city = city;// 更新UIelements.selectedCityDisplay.textContent = city;// 重置之前的选择样式document.querySelectorAll('#hot-cities button, .cities-list button').forEach(btn => {btn.classList.remove('bg-primary/10', 'border-primary', 'text-primary');});// 设置当前选择样式const selectedBtn = Array.from(document.querySelectorAll('#hot-cities button, .cities-list button')).find(btn => btn.textContent === city);if (selectedBtn) {selectedBtn.classList.add('bg-primary/10', 'border-primary', 'text-primary');}// 启用下一步按钮buttons.toStep2.classList.remove('opacity-50', 'cursor-not-allowed');}// 选择缴费类型function selectPaymentType(type) {userSelections.paymentType = type;// 重置之前的选择样式document.querySelectorAll('.payment-type-card').forEach(card => {card.classList.remove('border-primary', 'bg-primary/5');});// 设置当前选择样式const selectedCard = document.querySelector(`.payment-type-card[data-type="${type.id}"]`);if (selectedCard) {selectedCard.classList.add('border-primary', 'bg-primary/5');}// 启用下一步按钮buttons.toStep3.classList.remove('opacity-50', 'cursor-not-allowed');}// 更新表单数据function updateFormData() {const formInputs = elements.queryForm.querySelectorAll('[data-field]');formInputs.forEach(input => {userSelections.formData[input.dataset.field] = input.value;});}// 显示成功弹窗function showSuccessModal(amount, month) {elements.successModal.classList.remove('hidden');setTimeout(() => {elements.modalContent.classList.remove('scale-95', 'opacity-0');elements.modalContent.classList.add('scale-100', 'opacity-100');}, 10);}// 隐藏成功弹窗function hideSuccessModal() {elements.modalContent.classList.remove('scale-100', 'opacity-100');elements.modalContent.classList.add('scale-95', 'opacity-0');setTimeout(() => {elements.successModal.classList.add('hidden');// 刷新账单列表以反映缴费状态renderBills();}, 300);}// 设置事件监听器function setupEventListeners() {// 步骤切换按钮buttons.toStep2.addEventListener('click', () => {if (userSelections.city) {goToStep(2);}});buttons.backToStep1.addEventListener('click', () => goToStep(1));buttons.toStep3.addEventListener('click', () => {if (userSelections.paymentType) {elements.queryCity.textContent = userSelections.city;elements.queryType.textContent = userSelections.paymentType.name;renderQueryForm(userSelections.paymentType);goToStep(3);}});buttons.backToStep2.addEventListener('click', () => goToStep(2));buttons.toStep4.addEventListener('click', () => {renderBills();goToStep(4);});buttons.backToStep3.addEventListener('click', () => goToStep(3));buttons.payBill.addEventListener('click', () => {// 找到第一个未缴费的账单const firstUnpaidBill = elements.billsContainer.querySelector('.pay-this-bill');if (firstUnpaidBill) {const amount = firstUnpaidBill.dataset.amount;const month = firstUnpaidBill.dataset.month;showSuccessModal(amount, month);}});// 弹窗关闭按钮buttons.closeModal.addEventListener('click', hideSuccessModal);// 城市搜索elements.citySearch.addEventListener('input', (e) => {const searchTerm = e.target.value.toLowerCase();if (!searchTerm) {renderHotCities();return;}// 搜索所有城市const allCities = [...cityData.hotCities];cityData.provinces.forEach(province => {allCities.push(...province.cities);});// 去重并筛选const uniqueCities = [...new Set(allCities)];const filteredCities = uniqueCities.filter(city => city.toLowerCase().includes(searchTerm));// 显示搜索结果elements.hotCitiesContainer.innerHTML = '';if (filteredCities.length > 0) {filteredCities.forEach(city => {const cityElement = document.createElement('button');cityElement.className = 'py-2 px-3 rounded-lg border border-neutral-200 hover:border-primary hover:text-primary transition-all-300 text-center';cityElement.textContent = city;cityElement.addEventListener('click', () => selectCity(city));elements.hotCitiesContainer.appendChild(cityElement);});} else {elements.hotCitiesContainer.innerHTML = '<p class="col-span-full text-center text-neutral-500 py-4">未找到匹配的城市</p>';}});}// 初始化document.addEventListener('DOMContentLoaded', init);</script>
</body>
</html>