HarmonyOS ArkTS 实战实现一个校园学生证挂失与补办进度应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园学生证挂失与补办进度应用。应用可以登记学生证挂失、卡片损坏和信息更新申请展示审核、制卡、领取等办理进度并支持状态筛选、数据统计和删除记录。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能新增校园卡补办申请填写学生姓名和学号填写申请提交时间选择遗失挂失、卡片损坏和信息更新原因审核补办申请更新制卡状态更新待领取状态确认学生已经领取校园卡按待审核、制卡中和待领取筛选统计申请总数、待审核数量和待领取数量删除无效申请记录定义数据结构首先定义校园卡申请记录的数据结构interfaceCardRecord{id:number;studentName:string;studentNo:string;reportDate:string;reason:string;status:string;}字段说明如下id申请记录的唯一编号studentName学生姓名studentNo学生学号reportDate提交申请的时间reason补办原因status当前办理状态初始化页面状态使用State保存输入内容、补办原因和筛选条件StateprivatenameText:string;StateprivatenumberText:string;StateprivatedateText:string;Stateprivatereason:string遗失挂失;StateprivatefilterType:string全部;StateprivatenextId:number6;准备初始数据让应用运行后可以直接展示完整流程Stateprivaterecords:CardRecord[][{id:1,studentName:李同学,studentNo:2024010821,reportDate:07-15 09:20,reason:遗失挂失,status:待审核},{id:2,studentName:王同学,studentNo:2023021564,reportDate:07-14 14:10,reason:卡片损坏,status:制卡中},{id:3,studentName:张同学,studentNo:2024010372,reportDate:07-13 11:40,reason:遗失挂失,status:待领取},{id:4,studentName:陈同学,studentNo:2022012908,reportDate:07-12 16:30,reason:信息更新,status:已领取}];添加补办申请用户填写姓名、学号和申请时间后可以提交新的校园卡补办申请privateaddRecord():void{conststudentName:stringthis.nameText.trim();conststudentNo:stringthis.numberText.trim();constreportDate:stringthis.dateText.trim();if(studentName.length0||studentNo.length0||reportDate.length0){return;}constrecord:CardRecord{id:this.nextId,studentName,studentNo,reportDate,reason:this.reason,status:待审核};this.records[record,...this.records];this.nextId1;this.nameText;this.numberText;this.dateText;}新申请默认处于“待审核”状态。办理状态流转校园卡补办流程如下待审核 - 制卡中 - 待领取 - 已领取使用以下方法更新办理状态privateadvanceStatus(id:number):void{this.recordsthis.records.map((item:CardRecord){if(item.idid){letstatus:string待审核;if(item.status待审核){status制卡中;}elseif(item.status制卡中){status待领取;}elseif(item.status待领取){status已领取;}return{id:item.id,studentName:item.studentName,studentNo:item.studentNo,reportDate:item.reportDate,reason:item.reason,status};}returnitem;});}不同状态下页面会显示不同的操作按钮Button(item.status待审核?审核通过:item.status制卡中?完成制卡:item.status待领取?确认领取:已完成);筛选办理记录页面支持按办理进度筛选privategetFilteredRecords():CardRecord[]{if(this.filterType待审核){returnthis.records.filter((item:CardRecord)item.status待审核);}if(this.filterType制卡中){returnthis.records.filter((item:CardRecord)item.status制卡中);}if(this.filterType待领取){returnthis.records.filter((item:CardRecord)item.status待领取);}returnthis.records;}筛选按钮封装如下BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#B45309:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}统计申请数量使用filter统计指定状态的申请数量privategetCount(status:string):number{returnthis.records.filter((item:CardRecord)item.statusstatus).length;}顶部统计区域展示申请总数、等待审核和等待领取数量this.StatCard(申请总数,${this.records.length},#B45309,#FFFBEB);this.StatCard(等待审核,${this.getCount(待审核)},#D97706,#FFF7E8);this.StatCard(等待领取,${this.getCount(待领取)},#7C3AED,#F4F3FF);设置状态颜色不同办理状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status待审核){return#D97706;}if(status制卡中){return#2563EB;}if(status待领取){return#7C3AED;}return#059669;}颜色含义如下橙色等待审核蓝色正在制卡紫色等待领取绿色已经领取红色遗失挂失原因删除申请记录不再需要的申请记录可以删除privatedeleteRecord(id:number):void{this.recordsthis.records.filter((item:CardRecord)item.id!id);}删除后列表和统计数据会自动更新。使用列表展示申请使用List和ForEach渲染筛选后的申请记录List({space:10}){ForEach(this.getFilteredRecords(),(item:CardRecord){ListItem(){this.CardItem(item)}},(item:CardRecord)item.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) }entry 模块中的运行系统也要保持一致{ apiType: stageMode, targets: [ { name: default, runtimeOS: HarmonyOS } ] }运行项目使用 DevEco Studio 打开项目然后找到entry/src/main/ets/pages/Index.ets等待项目同步完成点击右侧的Preview按钮即可查看运行效果。项目总结本文使用 HarmonyOS 和 ArkTS 实现了一个校园学生证挂失与补办进度应用。项目实现了补办申请、原因选择、审核、制卡、领取、状态筛选、数据统计和删除等功能。通过这个项目可以掌握ArkTS 接口定义State状态管理TextInput输入组件List和ForEach列表渲染map和filter数组操作状态流转设计自定义Builder组件HarmonyOS 页面布局后续还可以加入身份认证、挂失确认弹窗、校园卡余额显示、办理提醒、二维码领取和本地数据持久化等功能。