HarmonyOS ArkTS 实战实现一个社团活动签到与时长认证应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个社团活动签到与时长认证应用。应用可以发布社团活动扫码签到签退自动计算志愿时长时长认证审核并提供活动报名、签到记录、时长统计、证书生成等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍活动发布与管理在线报名活动扫码签到签退自动时长计算时长认证审核个人时长统计签到记录查询活动证书生成活动评价社团排行时长兑换消息通知定义数据结构interfaceActivity{id:number;title:string;clubName:string;time:string;location:string;needPeople:number;joinedPeople:number;duration:number;status:string;// 报名中/进行中/已结束cover:string;description:string;}interfaceSignRecord{id:number;activityId:number;activityTitle:string;signInTime:string;signOutTime:string;realDuration:number;status:string;// 已签到/已签退/待审核/已认证isCertified:boolean;}初始化页面状态StateprivatetabIndex:number0;StateprivatetotalDuration:number140;StateprivatecertifiedDuration:number126;StateprivateactivityCount:number28;Stateprivateactivities:Activity[][{id:1,title:校园文明督导志愿活动,clubName:青年志愿者协会,time:2026-07-25 09:00,location:校门口,needPeople:20,joinedPeople:15,duration:4,status:报名中,cover:,description:维护校园门口秩序引导新生报到},{id:2,title:图书馆整理书籍活动,clubName:图书馆志愿者队,time:2026-07-23 14:00,location:图书馆,needPeople:10,joinedPeople:10,duration:3,status:进行中,cover:,description:整理图书馆书籍上架归还图书},{id:3,title:社区敬老志愿服务,clubName:爱心社,time:2026-07-20 08:00,location:阳光社区,needPeople:15,joinedPeople:12,duration:6,status:已结束,cover:,description:看望社区老人陪伴聊天表演节目},];Stateprivaterecords:SignRecord[][{id:1,activityId:3,activityTitle:社区敬老志愿服务,signInTime:2026-07-20 08:00,signOutTime:2026-07-20 14:00,realDuration:6,status:已认证,isCertified:true},];StateprivatenextId:number10;报名活动privatejoinActivity(activityId:number):void{this.activitiesthis.activities.map(aa.idactivityId?{...a,joinedPeople:a.joinedPeople1}:a);}签到privatesignIn(activityId:number):void{constactivitythis.activities.find(aa.idactivityId);if(!activity)return;constrecord:SignRecord{id:this.nextId,activityId,activityTitle:activity.title,signInTime:newDate().toLocaleString(),signOutTime:,realDuration:0,status:已签到,isCertified:false};this.records[record,...this.records];this.nextId1;}签退并计算时长privatesignOut(recordId:number):void{constnownewDate();constrecordthis.records.find(rr.idrecordId);if(!record||!record.signInTime)return;conststartnewDate(record.signInTime);constdurationMath.round((now.getTime()-start.getTime())/(1000*60*60));this.recordsthis.records.map(rr.idrecordId?{...r,signOutTime:now.toLocaleString(),realDuration:duration,status:待审核}:r);}时长认证privatecertifyDuration(recordId:number):void{constrecordthis.records.find(rr.idrecordId);if(!record)return;this.recordsthis.records.map(rr.idrecordId?{...r,status:已认证,isCertified:true}:r);this.certifiedDurationrecord.realDuration;this.totalDurationrecord.realDuration;}活动卡片组件BuilderActivityCard(activity:Activity){Column({space:8}){Text(activity.title).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#18181B).width(100%)Row({space:4}){Text(activity.clubName).fontSize(12).fontColor(#71717A)Text(·${activity.duration}小时).fontSize(12).fontColor(#A1A1AA)}.width(100%)Row(){Text(${activity.location}).fontSize(12).fontColor(#71717A)Blank()Text(${activity.joinedPeople}/${activity.needPeople}人).fontSize(12).fontColor(activity.joinedPeopleactivity.needPeople?#EF4444:#10B981)}.width(100%).margin({top:4})Button(activity.status报名中?立即报名:activity.status进行中?签到:查看详情).width(100%).height(36).fontSize(14).backgroundColor(activity.status报名中?#18181B:activity.status进行中?#10B981:#A1A1AA).margin({top:8}).onClick((){if(activity.status报名中)this.joinActivity(activity.id);elseif(activity.status进行中)this.signIn(activity.id);})}.width(100%).padding(16).backgroundColor(#FAFAFA).borderRadius(12)}页面布局build(){Column(){// 顶部时长统计Row({space:12}){Column(){Text(${this.certifiedDuration}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#18181B)Text(认证时长(h)).fontSize(12).fontColor(#71717A)}.layoutWeight(1).padding(20).backgroundColor(#F4F4F5).borderRadius(12)Column(){Text(${this.activityCount}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#18181B)Text(参与活动).fontSize(12).fontColor(#71717A)}.layoutWeight(1).padding(20).backgroundColor(#F4F4F5).borderRadius(12)}.width(100%).padding(20)// Tab切换Row({space:20}){Text(活动大厅).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#18181B:#A1A1AA).onClick(()this.tabIndex0)Text(我的签到).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#18181B:#A1A1AA).onClick(()this.tabIndex1)}.width(100%).padding({left:20,right:20})// 内容区if(this.tabIndex0){List({space:12}){ForEach(this.activities,(activity:Activity){ListItem(){this.ActivityCard(activity)}})}.width(100%).padding(20).layoutWeight(1)}else{List({space:12}){ForEach(this.records,(record:SignRecord){ListItem(){Row(){Column({space:4}){Text(record.activityTitle).fontSize(14).fontWeight(FontWeight.Medium)Text(时长${record.realDuration}小时).fontSize(12).fontColor(#71717A)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text(record.status).fontSize(12).fontColor(record.isCertified?#10B981:#F59E0B).padding({left:8,right:8,top:4,bottom:4}).backgroundColor(record.isCertified?#D1FAE5:#FEF3C7).borderRadius(10)}.width(100%).padding(16).backgroundColor(#FAFAFA).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用最深锌色#18181B体现社团活动的正式、公益、严谨。顶部统计认证时长和活动数Tab切换活动大厅和我的签到活动卡片清晰展示信息签到记录显示认证状态。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了活动发布、报名、签到签退、时长自动计算、审核认证、统计等功能。掌握了Tab切换、列表卡片、状态流转、时长计算、认证流程等。后续可加入扫码签到、位置校验、电子证书、时长兑换、活动评价、社团排行等功能。