HarmonyOS ArkTS 实战：实现一个实习证明开具审核应用

HarmonyOS ArkTS 实战实现一个实习证明开具审核应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个实习证明开具审核应用。应用可以申请开具实习证明上传实习材料查看审核进度下载电子证明并提供历史申请、模板下载、审核流程、常见问题等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍实习证明申请实习信息填写材料上传审核进度查询电子证明下载历史申请记录证明模板下载审核流程查看辅导员审核学院盖章常见问题消息通知定义数据结构interfaceCertificateApplication{id:number;companyName:string;position:string;startTime:string;endTime:string;supervisor:string;supervisorPhone:string;workContent:string;materials:string[];status:string;// 草稿/待审核/辅导员审核/学院审核/已开具/已驳回applyTime:string;approveTime:string;certificateUrl:string;rejectReason:string;}初始化页面状态StateprivatetabIndex:number0;StateprivatecompanyName:string;Stateprivateposition:string;StateprivatestartTime:string2026-06-01;StateprivateendTime:string2026-08-31;Stateprivatesupervisor:string;StateprivatesupervisorPhone:string;StateprivateworkContent:string;Stateprivateapplications:CertificateApplication[][{id:1,companyName:上海字节跳动科技有限公司,position:前端开发实习生,startTime:2026-06-01,endTime:2026-08-31,supervisor:张经理,supervisorPhone:138****1234,workContent:参与HarmonyOS应用开发负责页面实现和接口对接,materials:[实习协议.pdf,实习鉴定表.pdf],status:已开具,applyTime:2026-07-01,approveTime:2026-07-05,certificateUrl:,rejectReason:},];StateprivatenextId:number10;提交申请privatesubmitApplication():void{if(!this.companyName||!this.position||!this.supervisor)return;constapp:CertificateApplication{id:this.nextId,companyName:this.companyName,position:this.position,startTime:this.startTime,endTime:this.endTime,supervisor:this.supervisor,supervisorPhone:this.supervisorPhone,workContent:this.workContent,materials:[],status:待审核,applyTime:newDate().toLocaleDateString(),approveTime:,certificateUrl:,rejectReason:};this.applications[app,...this.applications];this.companyName;this.position;this.supervisor;this.workContent;this.nextId1;}状态颜色privategetStatusColor(status:string):string{if(status已驳回)return#DC2626;if(status.includes(审核))return#F59E0B;if(status已开具)return#059669;return#64748B;}申请卡片组件BuilderApplicationCard(app:CertificateApplication){Column({space:10}){Row(){Text(app.companyName).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#581C87).layoutWeight(1)Text(app.status).fontSize(11).fontColor(Color.White).padding({left:8,right:8,top:3,bottom:3}).backgroundColor(this.getStatusColor(app.status)).borderRadius(10)}.width(100%)Text(岗位${app.position}).fontSize(13).fontColor(#7E22CE).width(100%)Text(实习时间${app.startTime}至${app.endTime}).fontSize(12).fontColor(#9333EA)Text(直属领导${app.supervisor}).fontSize(12).fontColor(#9333EA)if(app.rejectReason){Text(驳回原因${app.rejectReason}).fontSize(12).fontColor(#DC2626).width(100%)}if(app.status已开具){Button(下载电子证明).width(100%).height(36).fontSize(14).backgroundColor(#581C87).margin({top:4})}}.width(100%).padding(16).backgroundColor(#FAF5FF).borderRadius(12)}页面布局build(){Column(){Text( 实习证明开具).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#581C87).width(100%).padding(20)// TabRow({space:20}){Text(申请记录).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#581C87:#94A3B8).onClick(()this.tabIndex0)Text(新申请).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#581C87:#94A3B8).onClick(()this.tabIndex1)Text(办理指南).fontSize(16).fontWeight(this.tabIndex2?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex2?#581C87:#94A3B8).onClick(()this.tabIndex2)}.width(100%).padding({left:20,right:20})if(this.tabIndex0){List({space:12}){ForEach(this.applications,(a:CertificateApplication){ListItem(){this.ApplicationCard(a)}})}.width(100%).padding(20).layoutWeight(1)}elseif(this.tabIndex1){Scroll(){Column({space:16}){TextInput({text:this.companyName,placeholder:实习单位全称}).width(100%).height(44).backgroundColor(#FAF5FF).onChange((v:string)this.companyNamev)TextInput({text:this.position,placeholder:实习岗位}).width(100%).height(44).backgroundColor(#FAF5FF).onChange((v:string)this.positionv)TextInput({text:this.startTime,placeholder:开始时间}).width(100%).height(44).backgroundColor(#FAF5FF)TextInput({text:this.endTime,placeholder:结束时间}).width(100%).height(44).backgroundColor(#FAF5FF)TextInput({text:this.supervisor,placeholder:直属领导姓名}).width(100%).height(44).backgroundColor(#FAF5FF).onChange((v:string)this.supervisorv)TextInput({text:this.supervisorPhone,placeholder:直属领导电话}).width(100%).height(44).backgroundColor(#FAF5FF).onChange((v:string)this.supervisorPhonev)TextArea({text:this.workContent,placeholder:实习工作内容简述}).width(100%).height(100).backgroundColor(#FAF5FF).onChange((v:string)this.workContentv)Button( 上传实习材料实习协议/鉴定表).width(100%).height(50).fontSize(14).backgroundColor(#EDE9FE).fontColor(#581C87)Button(提交申请).width(100%).height(48).fontSize(16).backgroundColor(#581C87).margin({top:10}).onClick(()this.submitApplication())}.width(100%).padding(20)}.layoutWeight(1)}else{List({space:10}){ListItem(){Column({space:8}){Text( 办理流程).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#581C87)Text(1. 填写实习信息并上传材料\n2. 辅导员审核1-2个工作日\n3. 学院审核盖章2-3个工作日\n4. 电子证明生成可下载打印,{fontSize:12,fontColor:#7E22CE})}.width(100%).padding(16).backgroundColor(#FAF5FF).borderRadius(12)}ListItem(){Column({space:8}){Text( 所需材料).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#581C87)Text(• 实习协议盖章扫描件\n• 实习鉴定表单位盖章\n• 实习报告如有,{fontSize:12,fontColor:#7E22CE})}.width(100%).padding(16).backgroundColor(#FAF5FF).borderRadius(12)}}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用purple-900#581C87深紫色体现行政办公的正式、规范。紫色系表单办理流程清晰列出下载按钮醒目。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了证明申请、材料上传、审核进度、电子证明下载、办理指南等功能。掌握了长文本输入、文件上传按钮、多步骤流程展示、表单验证等。后续可加入电子签章、PDF预览、消息推送、模板下载、批量申请、纸质证明领取预约等功能。