HarmonyOS ArkTS 实战：实现一个校园洗衣房预约与支付应用

HarmonyOS ArkTS 实战：实现一个校园洗衣房预约与支付应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园洗衣房预约与支付应用。

应用可以查看洗衣机状态，预约洗衣时间，在线支付，洗衣完成提醒，并提供洗衣记录、烘干预约、故障报修等功能。

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

运行效果

功能介绍

• 洗衣机状态查看
• 洗衣预约
• 在线支付
• 完成提醒
• 烘干预约
• 洗衣记录
• 故障报修
• 剩余时间
• 洗衣液购买
• 洗衣统计

定义数据结构

interfaceWasher{id:number;number:string;location:string;status:string;mode:string;remainTime:number;price:number;}interfaceLaundryOrder{id:number;washerId:number;washerNumber:string;mode:string;startTime:string;endTime:string;price:number;status:string;}

初始化页面状态

@StateprivatenextOrderId:number=20;@Stateprivatebalance:number=50;

初始数据包含洗衣机状态和洗衣订单。

预约洗衣

privatestartLaundry(washerId:number,washerNumber:string,mode:string,price:number):void{constduration=mode==='快洗'?30:mode==='标准洗'?45:60;constorder:LaundryOrder={id:this.nextOrderId,washerId,washerNumber,mode,startTime:newDate().toLocaleString(),endTime:newDate(Date.now()+duration*60*1000).toLocaleString(),price,status:'洗衣中'};this.orders=[order,...this.orders];this.balance-=price;this.nextOrderId++;}

完成洗衣

privatefinishLaundry(orderId:number):void{this.orders=this.orders.map(o=>o.id===orderId?{...o,status:'已完成'}:o);}

主题色：深天蓝#0284C7，体现干净、清洁、水的感觉。

统计数据

• 可用洗衣机
• 使用中
• 本月洗衣次数
• 消费金额

页面设计说明

顶部洗衣房洗衣机网格状态（绿色空闲/蓝色使用中/灰色故障），预约模式选择，支付按钮，洗衣中倒计时，我的订单。洗衣机状态一目了然，倒计时大字显示，完成有推送提醒。

SDK配置

API 24。

运行项目

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

项目总结

实现了洗衣机状态查看、预约洗衣、支付、完成提醒、订单记录等功能。掌握了网格状态展示、倒计时、状态颜色区分、订单管理等。后续可加入烘干预约、洗衣液配送、排队提醒、多人拼单、洗衣消毒等功能。