HarmonyOS ArkTS 实战：实现一个校园外卖柜与取餐提醒应用

HarmonyOS ArkTS 实战校园外卖柜与取餐提醒完整实现摘要项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望学习工具类应用开发的 HarmonyOS 开发者开发环境DevEco Studio Next / API 24代码规模单页面约 600 行可直接运行通过本项目你将掌握工具类应用的状态流转与数据建模倒计时与超时提醒机制的实现柜位可视化布局与状态展示大数字突出显示的视觉设计订单生命周期的完整管理逻辑目录[一、项目概述与功能架构][1.1 应用场景与项目价值][1.2 完整功能清单][1.3 技术选型说明][二、数据结构设计][2.1 柜位模型 Cabinet][2.2 外卖订单模型 TakeawayOrder][2.3 设计思路说明][三、核心功能实现详解][3.1 外卖存入与取件码生成][3.2 取餐确认与状态流转][3.3 超时检测与提醒机制][3.4 柜位状态统计][四、UI 设计与交互体验][4.1 整体布局结构][4.2 主题色与视觉规范][4.3 状态视觉区分表][五、关键技术点解析][5.1 订单状态机设计][5.2 取件码的安全设计考量][六、常见问题与优化建议][七、项目总结与扩展方向][附录运行方式]一、项目概述与功能架构1.1 应用场景与项目价值随着校园外卖需求的爆发式增长外卖配送最后一百米成为痛点。外卖柜作为智能末端配送设施有效解决了骑手等待、学生取餐时间不匹配、餐品丢失等问题。本项目基于 HarmonyOS ArkTS 实现了一个校园外卖柜管理与取餐提醒应用模拟了从外卖存入、取件码生成、超时提醒到确认取餐的完整业务流程。项目核心价值效率提升价值可视化展示柜位使用情况减少学生找柜时间体验优化价值主动推送取餐提醒和超时预警避免餐品变质技术学习价值涵盖状态机、倒计时、数据统计等典型工具类应用技术点1.2 完整功能清单功能模块具体功能实现难度⭐订单管理外卖存入、取餐确认、订单查询⭐⭐提醒功能取件码展示、超时提醒、存放通知⭐⭐⭐柜位管理柜位状态查询、可视化展示、使用率统计⭐⭐⭐历史记录取餐历史、存放记录、异常记录⭐⭐异常处理异常上报、问题件标记、超时统计⭐⭐⭐个人设置手机号绑定、提醒设置、一键开柜⭐⭐1.3 技术选型说明技术维度选型方案选型理由开发语言ArkTS类型安全适合复杂业务逻辑开发状态管理State 装饰器轻量高效满足单页面状态管理需求时间处理Date 原生 API无需额外依赖满足倒计时和超时计算数据存储内存状态演示项目简化生产环境需对接后端最低版本API 24兼容主流 HarmonyOS Next 设备⚠️ 注意本项目为前端演示版本取件码生成、柜位分配等逻辑均在本地模拟。真实场景中这些逻辑应由后端服务统一管控确保数据一致性和安全性。二、数据结构设计2.1 柜位模型 Cabinet柜位是外卖柜的物理单元有大小规格和使用状态之分。/** * 外卖柜柜位数据模型 * 描述单个柜格的物理属性和使用状态 */interfaceCabinet{id:string;// 柜位编号如 A-01、B-12size:string;// 柜格尺寸小 | 中 | 大status:string;// 使用状态空闲 | 占用 | 维护中}2.2 外卖订单模型 TakeawayOrder外卖订单是核心业务实体贯穿存入、待取、已取整个生命周期。/** * 外卖订单数据模型 * 记录外卖从存入到取走的完整信息 */interfaceTakeawayOrder{id:number;// 订单自增IDorderNo:string;// 订单编号shopName:string;// 商家名称foodName:string;// 餐品名称riderName:string;// 骑手姓名cabinetId:string;// 存放柜位编号pickupCode:string;// 取件码4位数字storeTime:string;// 存入时间expireTime:string;// 超时时间status:string;// 订单状态待取餐 | 已取餐 | 已超时phone:string;// 收货人手机号}2.3 设计思路说明为什么取件码采用4位数字这是一个典型的用户体验与安全性的平衡决策记忆成本4位数字是大多数人短期记忆的舒适区看一眼就能记住安全性4位数字有10000种组合在柜位数量有限的场景下足够安全输入效率纯数字键盘输入比字母数字混合码更快行业惯例主流快递柜、外卖柜普遍采用4-6位取件码关于柜位尺寸分级的设计小/中/大三种规格对应不同餐品类型小格饮品、小吃、小份餐中格标准单人餐、快餐盒最常用大格多人餐、大份披萨、蛋糕等大件这种分级设计提高了柜位利用率避免大材小用。三、核心功能实现详解3.1 页面状态初始化/** * 页面状态变量定义 */StateprivatephoneText:string;// 绑定的手机号StateprivatenextOrderId:number5;// 下一个订单IDStateprivateorders:TakeawayOrder[][];// 订单列表Stateprivatecabinets:Cabinet[][];// 柜位列表3.2 外卖存入与取件码生成骑手将外卖放入柜格后系统自动生成取件码并计算超时时间。/** * 模拟外卖存入柜位 * 自动生成4位取件码设置30分钟超时 * param shop 商家名称 * param food 餐品名称 * param cabinet 柜位编号 */privatestoreTakeaway(shop:string,food:string,cabinet:string):void{// 1. 生成4位随机取件码1000-9999constcodeString(Math.floor(Math.random()*9000)1000);// 2. 计算存入时间和超时时间默认30分钟constnownewDate();constexpirenewDate(now.getTime()30*60000);// 3. 组装订单对象constorder:TakeawayOrder{id:this.nextOrderId,orderNo:WDate.now(),// 订单号前缀W 时间戳shopName:shop,foodName:food,riderName:骑手,cabinetId:cabinet,pickupCode:code,storeTime:now.toLocaleString(),expireTime:expire.toLocaleString(),status:待取餐,phone:this.phoneText};// 4. 新订单插入列表头部this.orders[order,...this.orders];this.nextOrderId;// 5. 更新对应柜位状态为占用this.updateCabinetStatus(cabinet,占用);}设计要点解析取件码生成算法Math.random() * 9000 1000确保生成的是4位数避免出现前导零超时时间计算使用时间戳加法30 * 60000计算30分钟后的毫秒数准确可靠订单号规则前缀WTakeaway 时间戳保证全局唯一性3.3 取餐确认与状态流转用户输入取件码或点击取餐按钮后订单状态从待取餐变为已取餐同时释放柜位。/** * 确认取餐 * 更新订单状态并释放对应柜位 * param orderId 订单ID */privatepickupOrder(orderId:number):void{// 1. 找到目标订单获取柜位编号consttargetOrderthis.orders.find(oo.idorderId);if(!targetOrder)return;// 2. 更新订单状态为已取餐this.ordersthis.orders.map(oo.idorderId?{...o,status:已取餐}:o);// 3. 释放柜位更新为空闲状态this.updateCabinetStatus(targetOrder.cabinetId,空闲);}/** * 更新指定柜位的状态 * param cabinetId 柜位编号 * param status 新状态 */privateupdateCabinetStatus(cabinetId:string,status:string):void{this.cabinetsthis.cabinets.map(cc.idcabinetId?{...c,status}:c);}3.4 超时检测与提醒机制定时检测订单是否超时超时的订单标记并高亮提醒。/** * 检测超时订单 * 遍历所有待取餐订单比较当前时间和超时时间 */privatecheckExpiredOrders():void{constnownewDate();this.ordersthis.orders.map(o{// 只检查待取餐状态的订单if(o.status待取餐){constexpireTimenewDate(o.expireTime);if(now.getTime()expireTime.getTime()){// 已超时更新状态return{...o,status:已超时};}}returno;});}/** * 获取剩余分钟数 * 用于展示距离超时还有多久 * param expireTimeStr 超时时间字符串 */privategetRemainingMinutes(expireTimeStr:string):number{constnownewDate().getTime();constexpirenewDate(expireTimeStr).getTime();returnMath.max(0,Math.ceil((expire-now)/60000));}3.5 柜位使用率统计/** * 统计柜位使用情况 * 返回空闲、占用、维护中的数量 */privategetCabinetStats(){consttotalthis.cabinets.length;constfreethis.cabinets.filter(cc.status空闲).length;constoccupiedthis.cabinets.filter(cc.status占用).length;constmaintenancethis.cabinets.filter(cc.status维护中).length;return{total,free,occupied,maintenance};}四、UI 设计与交互体验4.1 整体布局结构┌─────────────────────────┐ │ 顶部数据统计栏 │ ← 待取餐/今日已取/超时/可用柜位 ├─────────────────────────┤ │ │ │ 待取餐高亮卡片 │ ← 大号取件码 倒计时视觉焦点 │ │ ├─────────────────────────┤ │ 柜位可视化网格 │ ← 颜色区分空闲/占用状态 ├─────────────────────────┤ │ 历史订单列表 │ ← 按时间倒序展示 └─────────────────────────┘4.2 主题色与视觉规范主色调琥珀色 #F59E0B选择琥珀色作为主题色的设计考量品类联想琥珀色/橙黄色天然关联美食、外卖、餐品的视觉意象用户一眼就能识别应用属性提醒属性暖色调具有天然的注意力吸引效果适合取餐提醒这类时效性强的功能情绪传递橙色传递温暖、便捷、高效的心理感受契合外卖柜省时省心的产品定位状态扩展性琥珀色向红色渐变自然可平滑过渡到超时警告的红色状态辅助色规范待取餐主色#F59E0B琥珀色已取餐状态#10B981薄荷绿超时警告#EF4444警示红空闲柜位#E5E7EB浅灰占用柜位#F59E0B主色4.3 状态视觉区分表订单状态卡片背景文字颜色标签样式视觉优先级待取餐浅琥珀色渐变深琥珀色琥珀色实心标签最高大号展示已取餐白色深灰色绿色空心标签普通已超时浅红色背景深红色红色闪烁标签高警告级柜位状态格子颜色边框样式交互提示空闲#F3F4F6 浅灰灰色细边框点击查看详情占用#FEF3C7 浅琥珀琥珀色边框显示存入时间维护中#FEE2E2 浅红红色虚线边框不可用提示五、关键技术点解析5.1 订单状态机设计外卖订单的生命周期是一个典型的有限状态机FSM。状态流转图存入 → 待取餐 → 已取餐正常路径 ↘ 已超时异常路径状态流转规则待取餐 → 已取餐用户确认取餐时触发待取餐 → 已超时系统检测到超过超时时间时触发已取餐 / 已超时均为终态不可逆转⚠️ 注意真实生产环境中状态流转必须由后端通过原子操作控制前端只能展示不能直接修改防止并发操作导致状态错乱。5.2 取件码的安全设计考量取件码是外卖柜的核心安全机制设计时需要考虑多个维度随机性必须使用密码学安全的随机数生成器防止被预测时效性取件码应与订单绑定取餐后立即失效不可重复使用重试限制连续输错多次后应锁定防止暴力尝试一次性每个取件码只能使用一次取餐即刻作废本项目作为演示版本简化了安全机制生产环境务必接入后端验证。六、常见问题与优化建议踩坑点 1时间格式化时区问题问题表现不同设备上显示的存入时间不一致解决方案统一使用服务端时间或明确标注时区前端仅做展示不做计算踩坑点 2倒计时性能消耗问题表现多个订单同时倒计时导致页面卡顿解决方案使用单个全局定时器统一更新而非每个订单单独开定时器踩坑点 3取件码重复概率问题表现随机生成的取件码可能与现有未取餐订单重复解决方案生成后校验唯一性重复则重新生成踩坑点 4柜位分配不合理问题表现小餐品分配到大柜位造成资源浪费解决方案增加餐品尺寸预估按尺寸匹配对应规格柜位优化方向接入蓝牙开柜功能实现手机靠近自动开柜增加扫码取件扫描柜位二维码直接开门实现柜格预约功能高峰时段提前锁定柜位增加消毒记录展示提升用户卫生安全感七、项目总结与扩展方向核心收获通过完成外卖柜与取餐提醒项目你将掌握工具类应用的状态机设计思想倒计时与超时检测的实现方案可视化网格布局的构建方法大数字突出显示的视觉设计技巧后续扩展功能蓝牙开柜基于蓝牙近场感知手机靠近自动开门扫码取餐扫描柜位二维码直接验证身份开柜柜格预约高峰时段提前预约确保有柜可用消毒记录展示每个柜位的消毒时间增强信任感⭐外卖评价取餐后可对餐品和配送服务进行评价多渠道提醒短信、推送、震动等多方式提醒取餐运行效果