企业官网建设流程全解析

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:number=0;@StateprivatetotalDuration:number=140;@StateprivatecertifiedDuration:number=126;@StateprivateactivityCount:number=28;@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:number=10;

报名活动

privatejoinActivity(activityId:number):void{this.activities=this.activities.map(a=>a.id===activityId?{...a,joinedPeople:a.joinedPeople+1}:a);}

签到

privatesignIn(activityId:number):void{constactivity=this.activities.find(a=>a.id===activityId);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.nextId+=1;}

签退并计算时长

privatesignOut(recordId:number):void{constnow=newDate();constrecord=this.records.find(r=>r.id===recordId);if(!record||!record.signInTime)return;conststart=newDate(record.signInTime);constduration=Math.round((now.getTime()-start.getTime())/(1000*60*60));this.records=this.records.map(r=>r.id===recordId?{...r,signOutTime:now.toLocaleString(),realDuration:duration,status:'待审核'}:r);}

时长认证

privatecertifyDuration(recordId:number):void{constrecord=this.records.find(r=>r.id===recordId);if(!record)return;this.records=this.records.map(r=>r.id===recordId?{...r,status:'已认证',isCertified:true}:r);this.certifiedDuration+=record.realDuration;this.totalDuration+=record.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.joinedPeople>=activity.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.tabIndex===0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===0?'#18181B':'#A1A1AA').onClick(()=>this.tabIndex=0)Text('我的签到').fontSize(16).fontWeight(this.tabIndex===1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===1?'#18181B':'#A1A1AA').onClick(()=>this.tabIndex=1)}.width('100%').padding({left:20,right:20})// 内容区if(this.tabIndex===0){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 24，compatibleSdkVersion: “6.1.1(24)”

运行项目

将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。

项目总结

实现了活动发布、报名、签到签退、时长自动计算、审核认证、统计等功能。掌握了Tab切换、列表卡片、状态流转、时长计算、认证流程等。后续可加入扫码签到、位置校验、电子证书、时长兑换、活动评价、社团排行等功能。