企业官网建设流程全解析

HarmonyOS ArkTS 实战：实现一个校园文艺演出抢票应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园文艺演出抢票应用。

应用可以查看演出信息，在线选座抢票，获取电子票，检票入场，并提供余票显示、演出统计、收藏演出等功能。

项目使用 DevEco Studio 开发，适配 API 23 及以上版本。

运行效果

功能介绍

• 演出信息浏览
• 在线选座
• 抢票功能
• 电子票
• 扫码检票
• 余票显示
• 收藏演出
• 我的票夹
• 演出提醒
• 抢票统计

定义数据结构

interfaceSeat{row:number;col:number;status:string;price:number;}interfaceShow{id:number;name:string;time:string;location:string;poster:string;description:string;price:number[];totalSeats:number;soldSeats:number;seats:Seat[][];isCollected:boolean;status:string;}interfaceTicket{id:number;showId:number;showName:string;seat:string;price:number;qrCode:string;buyTime:string;status:string;checkTime:string;}

初始化页面状态

@StateprivateselectedSeats:Seat[]=[];@StateprivatenextTicketId:number=10;

初始数据包含演出信息、座位图和已购票。

选座购票

privateselectSeat(seat:Seat):void{if(seat.status!=='可选')return;constexists=this.selectedSeats.find(s=>s.row===seat.row&&s.col===seat.col);if(exists){this.selectedSeats=this.selectedSeats.filter(s=>!(s.row===seat.row&&s.col===seat.col));}else{if(this.selectedSeats.length>=4)return;this.selectedSeats=[...this.selectedSeats,seat];}}privatebuyTickets(showId:number,showName:string):void{this.selectedSeats.forEach(seat=>{constticket:Ticket={id:this.nextTicketId,showId,showName,seat:`${seat.row}排${seat.col}座`,price:seat.price,qrCode:'T'+Date.now()+this.nextTicketId,buyTime:newDate().toLocaleString(),status:'未检票',checkTime:''};this.tickets=[ticket,...this.tickets];this.nextTicketId++;});this.selectedSeats=[];}

检票

privatecheckTicket(ticketId:number):void{this.tickets=this.tickets.map(t=>t.id===ticketId?{...t,status:'已检票',checkTime:newDate().toLocaleString()}:t);}

主题色：洋红色#C026D3，体现文艺、演出、艺术的感觉。

统计数据

• 即将演出
• 已购票数
• 已观看
• 收藏演出

页面设计说明

顶部演出海报轮播，演出列表，选座界面（座位图），我的票夹（电子票二维码）。座位用不同颜色区分：可选白色、已售灰色、已选洋红色。

SDK配置

API 24。

运行项目

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

项目总结

实现了演出浏览、在线选座、抢票、电子票、检票等功能。掌握了座位图布局、选座逻辑、二维码展示、抢票流程等。后续可加入实名认证、转赠、演出评论、周边商品、现场互动等功能。