HarmonyOS ArkTS 实战：实现一个校园讲座预约与签到应用

HarmonyOS ArkTS 实战实现一个校园讲座预约与签到应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园讲座预约与签到应用。应用可以预约讲座查看讲座信息扫码签到取消预约并提供讲座分类、预约统计和签到率统计等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍本项目实现了以下功能浏览讲座信息查看讲座时间地点预约讲座取消预约现场签到生成签到码按分类筛选讲座按状态筛选我的预约统计预约人数、签到人数签到率计算收藏讲座定义数据结构首先定义讲座和预约的数据结构interfaceReservation{id:number;lectureId:number;studentId:string;name:string;college:string;phone:string;status:string;reserveTime:string;checkInTime:string;}interfaceLecture{id:number;title:string;speaker:string;description:string;category:string;time:string;location:string;maxPeople:number;organizer:string;posterColor:string;status:string;reservations:Reservation[];isCollected:boolean;}字段说明如下Reservation预约记录id预约编号lectureId讲座编号studentId学号name姓名college学院phone电话status状态已预约/已签到/已取消reserveTime预约时间checkInTime签到时间Lecture讲座id讲座编号title讲座标题speaker主讲人description讲座简介category分类学术/就业/人文/科技/艺术time讲座时间location地点maxPeople人数上限organizer主办方posterColor海报颜色status状态预约中/进行中/已结束reservations预约列表isCollected是否收藏初始化页面状态使用State保存输入内容、分类选择StateprivatenameText:string;StateprivatestudentIdText:string;StateprivatecollegeText:string;StateprivatephoneText:string;StateprivateselectedCategory:string全部;StateprivatefilterMyStatus:string全部;StateprivatecurrentUserId:string2023001;StateprivatenextReserveId:number10;准备一些初始讲座数据Stateprivatelectures:Lecture[][{id:1,title:HarmonyOS生态与开发前景,speaker:张教授,description:介绍HarmonyOS操作系统的发展历程、技术架构和未来生态,category:科技,time:2026-07-20 14:00,location:图书馆报告厅,maxPeople:200,organizer:计算机学院,posterColor:#BE185D,status:预约中,isCollected:false,reservations:[{id:1,lectureId:1,studentId:2023001,name:王同学,college:计算机学院,phone:138****1234,status:已预约,reserveTime:2026-07-15,checkInTime:}]},{id:2,title:大学生职业规划与求职技巧,speaker:李HR,description:知名企业HR分享简历制作、面试技巧和职业规划经验,category:就业,time:2026-07-22 18:30,location:大学生活动中心,maxPeople:300,organizer:就业指导中心,posterColor:#2563EB,status:预约中,isCollected:true,reservations:[]},{id:3,title:红楼梦与中国传统文化,speaker:王教授,description:从红楼梦看中国传统文化的博大精深,category:人文,time:2026-07-18 19:00,location:文科楼201,maxPeople:100,organizer:文学院,posterColor:#D97706,status:已结束,isCollected:false,reservations:[{id:2,lectureId:3,studentId:2022005,name:赵同学,college:文学院,phone:136****3456,status:已签到,reserveTime:2026-07-10,checkInTime:2026-07-18 18:45}]}];预约讲座用户可以预约讲座privatereserveLecture(lectureId:number):void{constnamethis.nameText.trim();conststudentIdthis.studentIdText.trim();constcollegethis.collegeText.trim();constphonethis.phoneText.trim();if(name.length0||studentId.length0){return;}this.lecturesthis.lectures.map((lecture:Lecture){if(lecture.idlectureIdlecture.status预约中lecture.reservations.lengthlecture.maxPeople){constalreadyReservedlecture.reservations.some(rr.studentIdstudentId);if(alreadyReserved)returnlecture;constnewReserve:Reservation{id:this.nextReserveId,lectureId,studentId,name,college,phone,status:已预约,reserveTime:newDate().toISOString().split(T)[0],checkInTime:};this.nextReserveId1;return{id:lecture.id,title:lecture.title,speaker:lecture.speaker,description:lecture.description,category:lecture.category,time:lecture.time,location:lecture.location,maxPeople:lecture.maxPeople,organizer:lecture.organizer,posterColor:lecture.posterColor,status:lecture.status,reservations:[newReserve,...lecture.reservations],isCollected:lecture.isCollected};}returnlecture;});this.nameText;this.studentIdText;this.collegeText;this.phoneText;}取消预约和签到privatecancelReservation(lectureId:number,reserveId:number):void{this.lecturesthis.lectures.map((lecture:Lecture){if(lecture.idlectureIdlecture.status预约中){return{id:lecture.id,title:lecture.title,speaker:lecture.speaker,description:lecture.description,category:lecture.category,time:lecture.time,location:lecture.location,maxPeople:lecture.maxPeople,organizer:lecture.organizer,posterColor:lecture.posterColor,status:lecture.status,reservations:lecture.reservations.filter(rr.id!reserveId),isCollected:lecture.isCollected};}returnlecture;});}privatecheckIn(lectureId:number,reserveId:number):void{constnownewDate();constcheckInTime${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.lecturesthis.lectures.map((lecture:Lecture){if(lecture.idlectureId){constupdatedReserveslecture.reservations.map(r{if(r.idreserveIdr.status已预约){return{id:r.id,lectureId:r.lectureId,studentId:r.studentId,name:r.name,college:r.college,phone:r.phone,status:已签到,reserveTime:r.reserveTime,checkInTime};}returnr;});return{id:lecture.id,title:lecture.title,speaker:lecture.speaker,description:lecture.description,category:lecture.category,time:lecture.time,location:lecture.location,maxPeople:lecture.maxPeople,organizer:lecture.organizer,posterColor:lecture.posterColor,status:lecture.status,reservations:updatedReserves,isCollected:lecture.isCollected};}returnlecture;});}收藏讲座privatetoggleCollect(lectureId:number):void{this.lecturesthis.lectures.map((lecture:Lecture){if(lecture.idlectureId){return{id:lecture.id,title:lecture.title,speaker:lecture.speaker,description:lecture.description,category:lecture.category,time:lecture.time,location:lecture.location,maxPeople:lecture.maxPeople,organizer:lecture.organizer,posterColor:lecture.posterColor,status:lecture.status,reservations:lecture.reservations,isCollected:!lecture.isCollected};}returnlecture;});}筛选讲座privategetFilteredLectures():Lecture[]{if(this.selectedCategory全部){returnthis.lectures;}if(this.selectedCategory我收藏的){returnthis.lectures.filter(ll.isCollected);}returnthis.lectures.filter(ll.categorythis.selectedCategory);}privategetMyReservations():Reservation[]{letmyReserves:Reservation[][];this.lectures.forEach(l{l.reservations.forEach(r{if(r.studentIdthis.currentUserId){if(this.filterMyStatus全部||r.statusthis.filterMyStatus){myReserves.push({...r,lectureTitle:l.title});}}});});returnmyReserves;}分类按钮封装BuilderCategoryButton(text:string){Button(text).height(32).padding({left:14,right:14}).fontSize(12).fontColor(this.selectedCategorytext?Color.White:#344054).backgroundColor(this.selectedCategorytext?#BE185D:#FCE7F3).borderRadius(16).onClick((){this.selectedCategorytext;});}统计数据privategetTotalReservations():number{returnthis.lectures.reduce((sum,l)suml.reservations.length,0);}privategetCheckInCount():number{letcount0;this.lectures.forEach(l{l.reservations.forEach(r{if(r.status已签到)count;});});returncount;}privategetCheckInRate():string{consttotalthis.getTotalReservations();if(total0)return0%;returnMath.round((this.getCheckInCount()/total)*100)%;}顶部统计区域展示讲座总数、预约人数、已签到、签到率this.StatCard(讲座总数,${this.lectures.length},#BE185D,#FDF2F8);this.StatCard(预约人数,${this.getTotalReservations()},#2563EB,#EFF6FF);this.StatCard(已签到,${this.getCheckInCount()},#059669,#ECFDF5);this.StatCard(签到率,this.getCheckInRate(),#D97706,#FFF7E8);设置状态颜色privategetStatusColor(status:string):ResourceColor{if(status预约中||status已预约)return#2563EB;if(status进行中||status已签到)return#059669;if(status已取消)return#6B7280;return#6B7280;}privategetStatusBgColor(status:string):ResourceColor{if(status预约中||status已预约)return#DBEAFE;if(status进行中||status已签到)return#DCFCE7;return#F3F4F6;}蓝色预约中/已预约绿色进行中/已签到灰色已结束/已取消玫红色页面主题色页面设计说明应用使用玫红色作为主题色体现学术讲座、文化活动的氛围。页面主要分为以下区域顶部标题数据统计区域讲座分类筛选讲座列表我的预约预约/签到弹窗页面采用浅灰色背景和白色卡片。讲座使用彩色海报区域主讲人、时间、地点使用图标文字展示预约进度条展示报名情况签到状态使用绿色对勾标记。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列表渲染百分比计算和签到率统计进度条展示预约人数自定义Builder组件HarmonyOS 活动类应用布局后续还可以加入扫码签到、讲座提醒、学分认定、讲座评价、讲座回放、座位选择、邀请函生成和讲座日历等功能。