HarmonyOS ArkTS 实战实现一个校园教材征订与发放应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园教材征订与发放应用。应用可以查看教材目录在线选订教材查看发放通知扫码领书并提供教材评价、二手教材、退订申请、费用统计等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍教材目录浏览按课程筛选在线选订教材购物车管理教材费用统计发放通知查看扫码领书领书记录教材评价二手教材推荐退订申请教材信息查询定义数据结构interfaceTextbook{id:number;name:string;course:string;author:string;publisher:string;isbn:string;price:number;required:boolean;cover:string;}interfaceTextbookOrder{id:number;items:{textbookId:number;name:string;price:number}[];totalPrice:number;semester:string;status:string;// 待确认/已确认/已发放/已领取orderTime:string;receiveTime:string;}初始化页面状态StateprivatetabIndex:number0;StateprivatecurrentCourse:string全部课程;StateprivatetotalPrice:number0;Stateprivatecourses:string[][全部课程,高等数学,大学英语,计算机基础,程序设计,大学物理];Stateprivatetextbooks:Textbook[][{id:1,name:高等数学第七版上册,course:高等数学,author:同济大学数学系,publisher:高等教育出版社,isbn:9787040396639,price:45.6,required:true,cover:},{id:2,name:新视野大学英语读写教程1,course:大学英语,author:郑树棠,publisher:外语教学与研究出版社,isbn:9787513556819,price:42.9,required:true,cover:},{id:3,name:大学计算机基础,course:计算机基础,author:杨振山,publisher:高等教育出版社,isbn:9787040396640,price:38.5,required:true,cover:},{id:4,name:C程序设计第五版,course:程序设计,author:谭浩强,publisher:清华大学出版社,isbn:9787302481447,price:39.0,required:true,cover:},];Stateprivatecart:number[][];Stateprivateorders:TextbookOrder[][{id:1,items:[{textbookId:1,name:高等数学第七版上册,price:45.6}],totalPrice:45.6,semester:2025-2026-2,status:已领取,orderTime:2026-02-15,receiveTime:2026-02-28},];StateprivatenextId:number10;加入购物车privateaddToCart(textbookId:number):void{if(!this.cart.includes(textbookId)){this.cart[...this.cart,textbookId];this.calculateTotal();}}移除购物车privateremoveFromCart(textbookId:number):void{this.cartthis.cart.filter(idid!textbookId);this.calculateTotal();}计算总价privatecalculateTotal():void{this.totalPricethis.cart.reduce((sum,id){constbookthis.textbooks.find(tt.idid);returnsum(book?book.price:0);},0);}提交订单privatesubmitOrder():void{if(this.cart.length0)return;constitemsthis.cart.map(id{constbookthis.textbooks.find(tt.idid)!;return{textbookId:id,name:book.name,price:book.price};});constorder:TextbookOrder{id:this.nextId,items,totalPrice:this.totalPrice,semester:2026-2027-1,status:待确认,orderTime:newDate().toLocaleDateString(),receiveTime:};this.orders[order,...this.orders];this.cart[];this.totalPrice0;this.nextId1;}领书privatereceiveBooks(orderId:number):void{this.ordersthis.orders.map(oo.idorderId?{...o,status:已领取,receiveTime:newDate().toLocaleDateString()}:o);}教材卡片组件BuilderTextbookCard(book:Textbook){Row({space:12}){Column().width(70).height(90).backgroundColor(#FFF7ED).borderRadius(8)Column({space:4}){Row(){Text(book.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(#431407).layoutWeight(1)if(book.required){Text(必修).fontSize(10).fontColor(Color.White).padding({left:6,right:6,top:2,bottom:2}).backgroundColor(#EA580C).borderRadius(8)}}.width(100%)Text(${book.author}|${book.publisher}).fontSize(11).fontColor(#9A3412).maxLines(1)Text(book.course).fontSize(11).fontColor(#C2410C)Row(){Text(¥${book.price.toFixed(1)}).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#EA580C)Blank()if(this.cart.includes(book.id)){Button(已选).fontSize(12).height(32).backgroundColor(#FDBA74).enabled(false)}else{Button(选订).fontSize(12).height(32).backgroundColor(#431407).onClick(()this.addToCart(book.id))}}.width(100%).margin({top:4})}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width(100%).padding(12).backgroundColor(#FFEDD5).borderRadius(12)}页面布局build(){Column(){Text(教材征订).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#431407).width(100%).padding(20)// 课程筛选Scroll(Axis.Horizontal){Row({space:8}){ForEach(this.courses,(c:string){Text(c).fontSize(13).fontColor(this.currentCoursec?Color.White:#431407).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(this.currentCoursec?#431407:#FED7AA).borderRadius(16).onClick(()this.currentCoursec)})}}.scrollBar(BarState.Off).width(100%).padding({left:20,right:20})// TabRow({space:20}){Text(选订教材).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#431407:#94A3B8).onClick(()this.tabIndex0)Text(我的订单).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#431407:#94A3B8).onClick(()this.tabIndex1)}.width(100%).padding({left:20,right:20,top:16})if(this.tabIndex0){List({space:10}){ForEach(this.textbooks.filter(tthis.currentCourse全部课程||t.coursethis.currentCourse),(b:Textbook){ListItem(){this.TextbookCard(b)}})}.width(100%).padding(20).layoutWeight(1)if(this.cart.length0){Row(){Text(已选${this.cart.length}本合计¥${this.totalPrice.toFixed(1)}).fontSize(14).fontColor(Color.White)Blank()Button(提交订单).height(40).backgroundColor(#EA580C).onClick(()this.submitOrder())}.width(100%).padding(20).backgroundColor(#431407)}}else{List({space:12}){ForEach(this.orders,(o:TextbookOrder){ListItem(){Column({space:8}){Row(){Text(订单#${o.id}|${o.semester}).fontSize(14).fontWeight(FontWeight.Medium)Blank()Text(o.status).fontSize(12).fontColor(o.status已领取?#059669:#F59E0B)}Text(${o.items.length}本教材合计¥${o.totalPrice.toFixed(1)}).fontSize(12).fontColor(#9A3412)if(o.status已发放){Button(扫码领书).width(100%).height(36).fontSize(14).backgroundColor(#431407).onClick(()this.receiveBooks(o.id))}}.width(100%).padding(16).backgroundColor(#FFEDD5).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用orange-950#431407深橙色体现教材的温暖、知识感。橙色系卡片必修标签红色突出底部结算栏固定。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了教材浏览、选订、购物车、订单、领书等功能。掌握了横向筛选、购物车逻辑、价格计算、订单状态等。后续可加入教材评价、二手书交易、PDF样章、教材推荐、退订申请、发放通知推送等功能。