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:string='2023001';@StateprivatenextReserveId:number=10;

准备一些初始讲座数据：

@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{constname=this.nameText.trim();conststudentId=this.studentIdText.trim();constcollege=this.collegeText.trim();constphone=this.phoneText.trim();if(name.length===0||studentId.length===0){return;}this.lectures=this.lectures.map((lecture:Lecture)=>{if(lecture.id===lectureId&&lecture.status==='预约中'&&lecture.reservations.length<lecture.maxPeople){constalreadyReserved=lecture.reservations.some(r=>r.studentId===studentId);if(alreadyReserved)returnlecture;constnewReserve:Reservation={id:this.nextReserveId,lectureId,studentId,name,college,phone,status:'已预约',reserveTime:newDate().toISOString().split('T')[0],checkInTime:''};this.nextReserveId+=1;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.lectures=this.lectures.map((lecture:Lecture)=>{if(lecture.id===lectureId&&lecture.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(r=>r.id!==reserveId),isCollected:lecture.isCollected};}returnlecture;});}privatecheckIn(lectureId:number,reserveId:number):void{constnow=newDate();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.lectures=this.lectures.map((lecture:Lecture)=>{if(lecture.id===lectureId){constupdatedReserves=lecture.reservations.map(r=>{if(r.id===reserveId&&r.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.lectures=this.lectures.map((lecture:Lecture)=>{if(lecture.id===lectureId){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(l=>l.isCollected);}returnthis.lectures.filter(l=>l.category===this.selectedCategory);}privategetMyReservations():Reservation[]{letmyReserves:Reservation[]=[];this.lectures.forEach(l=>{l.reservations.forEach(r=>{if(r.studentId===this.currentUserId){if(this.filterMyStatus==='全部'||r.status===this.filterMyStatus){myReserves.push({...r,lectureTitle:l.title});}}});});returnmyReserves;}

分类按钮封装：

@BuilderCategoryButton(text:string){Button(text).height(32).padding({left:14,right:14}).fontSize(12).fontColor(this.selectedCategory===text?Color.White:'#344054').backgroundColor(this.selectedCategory===text?'#BE185D':'#FCE7F3').borderRadius(16).onClick(()=>{this.selectedCategory=text;});}

统计数据

privategetTotalReservations():number{returnthis.lectures.reduce((sum,l)=>sum+l.reservations.length,0);}privategetCheckInCount():number{letcount=0;this.lectures.forEach(l=>{l.reservations.forEach(r=>{if(r.status==='已签到')count++;});});returncount;}privategetCheckInRate():string{consttotal=this.getTotalReservations();if(total===0)return'0%';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)" }