HarmonyOS ArkTS 实战实现一个校园助学贷款申请与还款应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园助学贷款申请与还款应用。应用可以在线申请贷款查看审批进度贷款合同查看在线还款并提供还款计划、逾期提醒、贷款计算器、政策咨询等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍贷款产品介绍在线申请贷款材料上传审批进度查询贷款合同查看还款计划在线还款逾期提醒贷款计算器政策咨询历史贷款记录征信说明定义数据结构interfaceLoanApplication{id:number;type:string;amount:number;year:number;reason:string;applyTime:string;status:string;// 草稿/待审核/审核中/已通过/已拒绝/已放款progress:number;}interfaceRepaymentPlan{id:number;loanId:number;period:number;dueDate:string;amount:number;principal:number;interest:number;status:string;// 待还款/已还款/逾期}初始化页面状态StateprivatetabIndex:number0;StateprivatetotalLoan:number32000;StateprivatetotalRepaid:number8000;StateprivatenextDueAmount:number1200;StateprivatenextDueDate:string2026-09-20;Stateprivateapplications:LoanApplication[][{id:1,type:生源地助学贷款,amount:16000,year:2024,reason:学费和住宿费,applyTime:2024-08-15,status:已放款,progress:100},{id:2,type:校园地助学贷款,amount:16000,year:2025,reason:学费和住宿费,applyTime:2025-08-20,status:已放款,progress:100},];Stateprivateplans:RepaymentPlan[][{id:1,loanId:1,period:1,dueDate:2026-09-20,amount:1200,principal:1000,interest:200,status:待还款},{id:2,loanId:1,period:2,dueDate:2027-09-20,amount:1200,principal:1000,interest:200,status:待还款},];StateprivatenextId:number10;申请贷款privateapplyLoan(type:string,amount:number,year:number,reason:string):void{constapp:LoanApplication{id:this.nextId,type,amount,year,reason,applyTime:newDate().toLocaleDateString(),status:待审核,progress:20};this.applications[app,...this.applications];this.nextId1;}还款privaterepay(planId:number):void{constplanthis.plans.find(pp.idplanId);if(!plan)return;this.plansthis.plans.map(pp.idplanId?{...p,status:已还款}:p);this.totalRepaidplan.amount;}计算月供privatecalculateMonthlyPayment(principal:number,annualRate:number,years:number):number{constmonthlyRateannualRate/12;constnyears*12;returnprincipal*monthlyRate*Math.pow(1monthlyRate,n)/(Math.pow(1monthlyRate,n)-1);}申请卡片组件BuilderApplicationCard(app:LoanApplication){Column({space:8}){Row(){Text(app.type).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#450A0A)Blank()Text(app.status).fontSize(12).fontColor(app.status已放款?#059669:#F59E0B).padding({left:8,right:8,top:4,bottom:4}).backgroundColor(app.status已放款?#D1FAE5:#FEF3C7).borderRadius(10)}.width(100%)Text(金额¥${app.amount}|${app.year}学年).fontSize(13).fontColor(#7F1D1D)Progress({value:app.progress,total:100,type:ProgressType.Linear}).width(100%).color(#DC2626).backgroundColor(#FEE2E2)}.width(100%).padding(16).backgroundColor(#FEF2F2).borderRadius(12)}页面布局build(){Column(){// 顶部贷款概览Column({space:12}){Text(我的助学贷款).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.White)Row({space:20}){Column(){Text(¥${this.totalLoan}).fontSize(24).fontWeight(FontWeight.Bold).fontColor(Color.White)Text(贷款总额).fontSize(12).fontColor(#FECACA)}Column(){Text(¥${this.totalRepaid}).fontSize(24).fontWeight(FontWeight.Bold).fontColor(Color.White)Text(已还金额).fontSize(12).fontColor(#FECACA)}Column(){Text(¥${this.nextDueAmount}).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#FBBF24)Text(下期应还).fontSize(12).fontColor(#FECACA)}}.width(100%)}.width(100%).padding(20).backgroundColor(#450A0A)// TabRow({space:20}){Text(我的申请).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#450A0A:#94A3B8).onClick(()this.tabIndex0)Text(还款计划).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#450A0A:#94A3B8).onClick(()this.tabIndex1)}.width(100%).padding({left:20,right:20,top:20})if(this.tabIndex0){List({space:12}){ForEach(this.applications,(a:LoanApplication){ListItem(){this.ApplicationCard(a)}})}.width(100%).padding(20).layoutWeight(1)Button( 新申请).width(90%).height(48).fontSize(16).backgroundColor(#450A0A).borderRadius(24).margin({bottom:20}).onClick(()this.applyLoan(校园地助学贷款,16000,2026,学费住宿费))}else{List({space:12}){ForEach(this.plans,(p:RepaymentPlan){ListItem(){Row(){Column({space:4}){Text(第${p.period}期).fontSize(15).fontWeight(FontWeight.Medium)Text(到期${p.dueDate}).fontSize(12).fontColor(#7F1D1D)Text(本金¥${p.principal} 利息¥${p.interest}).fontSize(12).fontColor(#94A3B8)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Column({space:4}){Text(¥${p.amount}).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#DC2626)if(p.status待还款){Button(还款).fontSize(12).height(32).backgroundColor(#DC2626).onClick(()this.repay(p.id))}else{Text(已还款).fontSize(12).fontColor(#059669)}}}.width(100%).padding(16).backgroundColor(#FEF2F2).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用red-950#450A0A深红色体现金融贷款的严谨、正式。顶部深色区域展示贷款概览进度条显示审批进度还款计划清晰列出每期金额。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了贷款申请、审批进度、还款计划、在线还款、贷款计算等功能。掌握了进度条组件、金融计算、状态流转、深色顶部设计等。后续可加入材料上传、合同电子签、自动扣款、征信查询、政策问答、毕业确认等功能。