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:number=6;准备初始数据，让应用运行后可以直接展示完整流程：
@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:string=this.nameText.trim();conststudentNo:string=this.numberText.trim();constreportDate:string=this.dateText.trim();if(studentName.length===0||studentNo.length===0||reportDate.length===0){return;}constrecord:CardRecord={id:this.nextId,studentName,studentNo,reportDate,reason:this.reason,status:'待审核'};this.records=[record,...this.records];this.nextId+=1;this.nameText='';this.numberText='';this.dateText='';}新申请默认处于“待审核”状态。
办理状态流转
校园卡补办流程如下：
待审核 -> 制卡中 -> 待领取 -> 已领取使用以下方法更新办理状态：
privateadvanceStatus(id:number):void{this.records=this.records.map((item:CardRecord)=>{if(item.id===id){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.filterType===text?Color.White:'#344054').backgroundColor(this.filterType===text?'#B45309':'#E8EEF7').borderRadius(8).onClick(()=>{this.filterType=text;});}统计申请数量
使用filter统计指定状态的申请数量：
privategetCount(status:string):number{returnthis.records.filter((item:CardRecord)=>item.status===status).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.records=this.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 页面布局
后续还可以加入身份认证、挂失确认弹窗、校园卡余额显示、办理提醒、二维码领取和本地数据持久化等功能。
