企业官网建设流程全解析

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:string='2026-07-19';@StateprivateselectedTime:string='14:00-15:00';@StateprivatenextBookId:number=10;@Stateprivatebalance:number=100;

初始数据包含各类场馆和预约记录。

预约场地

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.bookings=this.bookings.map(b=>b.id===bookId?{...b,status:'已取消'}:b);this.balance+=price*0.8;// 退款80%}

签到入场

privatecheckIn(bookId:number):void{this.bookings=this.bookings.map(b=>b.id===bookId?{...b,status:'已使用'}:b);}

主题色：翡翠绿#059669，体现运动、健康、活力的感觉。

统计数据

• 可用场馆
• 今日预约
• 本周运动时长
• 累计消费

页面设计说明

顶部运动统计，场馆分类（羽毛球/篮球/网球/游泳/乒乓球），场馆卡片，时间选择，我的预约。不同运动类型用图标区分，可预约用绿色，已满用灰色。

SDK配置

API 24。

运行项目

entry/src/main/ets/pages/Index.ets

项目总结

实现了场馆查看、场地预约、时间选择、支付、取消、签到等功能。掌握了场馆预约流程、时间段选择、支付退款、状态管理等。后续可加入约球组队、教练预约、赛事报名、运动数据记录、场馆导航等功能。