HarmonyOS ArkTS 实战实现一个校园水电费查询缴费应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园水电费查询缴费应用。应用可以查询每月水电用量和费用在线缴费查看缴费记录并提供用量统计、欠费提醒和账单明细等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍本项目实现了以下功能查询每月水电费账单查看水电用量明细在线缴费查看缴费记录用量趋势统计欠费提醒按月份查询统计已缴、未缴、欠费金额单价设置账单导出定义数据结构首先定义账单记录的数据结构interfaceBillRecord{id:number;month:string;dormNumber:string;waterUsage:number;electricUsage:number;waterFee:number;electricFee:number;totalFee:number;status:string;payTime:string;payMethod:string;}字段说明如下BillRecord账单记录id账单编号month账单月份dormNumber宿舍号waterUsage用水量吨electricUsage用电量度waterFee水费元electricFee电费元totalFee总费用元status状态未缴费/已缴费/已逾期payTime缴费时间payMethod支付方式初始化页面状态使用State保存宿舍号、单价、筛选月份StateprivatedormNumberText:string3号楼 302;StateprivatewaterPrice:number3.5;StateprivateelectricPrice:number0.6;StateprivatefilterStatus:string全部;StateprivatecurrentUserId:string2023001;StateprivatenextBillId:number5;准备一些初始账单数据Stateprivatebills:BillRecord[][{id:1,month:2026-07,dormNumber:3号楼 302,waterUsage:8,electricUsage:120,waterFee:28,electricFee:72,totalFee:100,status:未缴费,payTime:,payMethod:},{id:2,month:2026-06,dormNumber:3号楼 302,waterUsage:6,electricUsage:85,waterFee:21,electricFee:51,totalFee:72,status:已缴费,payTime:2026-06-15 14:30,payMethod:微信支付},{id:3,month:2026-05,dormNumber:3号楼 302,waterUsage:7,electricUsage:95,waterFee:24.5,electricFee:57,totalFee:81.5,status:已缴费,payTime:2026-05-18 09:15,payMethod:支付宝},{id:4,month:2026-04,dormNumber:3号楼 302,waterUsage:5,electricUsage:60,waterFee:17.5,electricFee:36,totalFee:53.5,status:已逾期,payTime:,payMethod:}];生成新账单每月自动生成新账单privategenerateBill():void{constnownewDate();constmonth${now.getFullYear()}-${String(now.getMonth()1).padStart(2,0)};constexiststhis.bills.some(bb.monthmonth);if(exists)return;constwaterUsageMath.floor(Math.random()*10)5;constelectricUsageMath.floor(Math.random()*100)50;constwaterFeeMath.round(waterUsage*this.waterPrice*10)/10;constelectricFeeMath.round(electricUsage*this.electricPrice*10)/10;constbill:BillRecord{id:this.nextBillId,month,dormNumber:this.dormNumberText,waterUsage,electricUsage,waterFee,electricFee,totalFee:Math.round((waterFeeelectricFee)*10)/10,status:未缴费,payTime:,payMethod:};this.bills[bill,...this.bills];this.nextBillId1;}缴费功能用户可以缴纳水电费privatepayBill(billId:number,method:string):void{constnownewDate();constpayTime${now.getFullYear()}-${String(now.getMonth()1).padStart(2,0)}-${String(now.getDate()).padStart(2,0)}${String(now.getHours()).padStart(2,0)}:${String(now.getMinutes()).padStart(2,0)};this.billsthis.bills.map((bill:BillRecord){if(bill.idbillIdbill.status!已缴费){return{id:bill.id,month:bill.month,dormNumber:bill.dormNumber,waterUsage:bill.waterUsage,electricUsage:bill.electricUsage,waterFee:bill.waterFee,electricFee:bill.electricFee,totalFee:bill.totalFee,status:已缴费,payTime,payMethod:method};}returnbill;});}筛选账单按状态筛选账单privategetFilteredBills():BillRecord[]{if(this.filterStatus全部){returnthis.bills;}returnthis.bills.filter((b:BillRecord)b.statusthis.filterStatus);}筛选按钮封装BuilderFilterButton(text:string){Button(text).height(32).padding({left:14,right:14}).fontSize(12).fontColor(this.filterStatustext?Color.White:#344054).backgroundColor(this.filterStatustext?#4338CA:#EEF2FF).borderRadius(16).onClick((){this.filterStatustext;});}统计数据统计已缴、未缴、欠费金额privategetUnpaidAmount():number{returnthis.bills.filter(bb.status未缴费||b.status已逾期).reduce((sum,b)sumb.totalFee,0);}privategetPaidAmount():number{returnthis.bills.filter(bb.status已缴费).reduce((sum,b)sumb.totalFee,0);}privategetOverdueCount():number{returnthis.bills.filter(bb.status已逾期).length;}privategetTotalWaterUsage():number{returnthis.bills.reduce((sum,b)sumb.waterUsage,0);}privategetTotalElectricUsage():number{returnthis.bills.reduce((sum,b)sumb.electricUsage,0);}顶部统计区域展示待缴金额、已缴金额、逾期账单、累计用电this.StatCard(待缴金额,¥${this.getUnpaidAmount().toFixed(1)},#DC2626,#FEF2F2);this.StatCard(已缴金额,¥${this.getPaidAmount().toFixed(1)},#059669,#ECFDF5);this.StatCard(逾期账单,${this.getOverdueCount()}个,#D97706,#FFF7E8);this.StatCard(累计用电,${this.getTotalElectricUsage()}度,#4338CA,#EEF2FF);设置状态颜色不同账单状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status已缴费){return#059669;}if(status已逾期){return#DC2626;}return#D97706;}privategetStatusBgColor(status:string):ResourceColor{if(status已缴费){return#DCFCE7;}if(status已逾期){return#FEE2E2;}return#FEF3C7;}绿色已缴费红色已逾期橙色未缴费靛蓝色页面主题色使用列表展示账单使用List和ForEach渲染账单列表List({space:12}){ForEach(this.getFilteredBills(),(bill:BillRecord){ListItem(){this.BillCard(bill)}},(bill:BillRecord)bill.id.toString());}.width(100%).layoutWeight(1).scrollBar(BarState.Off);每个账单卡片包含月份、宿舍号、用水量/用电量、水费/电费、总金额、状态和缴费按钮。页面设计说明应用使用靛蓝色作为主题色体现生活服务、稳重可靠的感觉。页面主要分为以下区域顶部宿舍信息费用统计区域用量概览状态筛选账单列表缴费弹窗页面采用浅灰色背景和白色卡片。待缴金额使用醒目的红色已缴使用绿色逾期使用红色警示用水量使用蓝色水滴图标用电量使用黄色闪电图标费用使用大号字体突出显示。SDK 配置本项目使用 HarmonyOS API 24满足 API 23 及以上要求{ name: default, compatibleSdkVersion: 6.1.1(24), runtimeOS: HarmonyOS, targetSdkVersion: 6.1.1(24), compileSdkVersion: 6.1.1(24) }运行项目使用 DevEco Studio 打开项目然后找到entry/src/main/ets/pages/Index.ets等待项目同步完成点击右侧的Preview按钮即可查看应用效果。项目总结本文使用 HarmonyOS 和 ArkTS 实现了一个校园水电费查询缴费应用。项目实现了账单查询、用量统计、在线缴费、缴费记录、欠费提醒、状态筛选、金额统计等功能。通过这个项目可以掌握ArkTS 接口定义State状态管理费用计算逻辑List和ForEach列表渲染reduce数组统计支付流程模拟自定义Builder组件HarmonyOS 生活服务类应用布局后续还可以加入用电预警、用量对比图表、自动代扣、电子发票、报修联动、公摊费用、室友AA分摊和历史用量分析等功能。
