HarmonyOS ArkTS 实战：实现一个校园体育场馆预约应用

HarmonyOS ArkTS 实战实现一个校园体育场馆预约应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园体育场馆预约应用。应用可以查看体育场馆羽毛球、篮球、网球、游泳等预约场地时间在线支付并提供预约记录、取消预约、场馆统计等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍场馆列表场地预约时间选择在线支付预约记录取消预约场馆状态我的预约开放时间使用统计定义数据结构interfaceVenue{id:number;name:string;type:string;location:string;price:number;openTime:string;image:string;totalCourts:number;availableCourts:number;}interfaceBooking{id:number;venueId:number;venueName:string;courtNo:string;date:string;startTime:string;endTime:string;price:number;status:string;bookTime:string;}初始化页面状态StateprivateselectedDate:string2026-07-19;StateprivateselectedTime:string14:00-15:00;StateprivatenextBookId:number10;Stateprivatebalance:number100;初始数据包含各类场馆和预约记录。预约场地privatebookCourt(venueId:number,venueName:string,price:number):void{constbooking:Booking{id:this.nextBookId,venueId,venueName,courtNo:String(Math.floor(Math.random()*8)1)号场,date:this.selectedDate,startTime:this.selectedTime.split(-)[0],endTime:this.selectedTime.split(-)[1],price,status:已预约,bookTime:newDate().toLocaleString()};this.bookings[booking,...this.bookings];this.balance-price;this.nextBookId;}取消预约privatecancelBooking(bookId:number,price:number):void{this.bookingsthis.bookings.map(bb.idbookId?{...b,status:已取消}:b);this.balanceprice*0.8;// 退款80%}签到入场privatecheckIn(bookId:number):void{this.bookingsthis.bookings.map(bb.idbookId?{...b,status:已使用}:b);}主题色翡翠绿#059669体现运动、健康、活力的感觉。统计数据可用场馆今日预约本周运动时长累计消费页面设计说明顶部运动统计场馆分类羽毛球/篮球/网球/游泳/乒乓球场馆卡片时间选择我的预约。不同运动类型用图标区分可预约用绿色已满用灰色。SDK配置API 24。运行项目entry/src/main/ets/pages/Index.ets项目总结实现了场馆查看、场地预约、时间选择、支付、取消、签到等功能。掌握了场馆预约流程、时间段选择、支付退款、状态管理等。后续可加入约球组队、教练预约、赛事报名、运动数据记录、场馆导航等功能。