HarmonyOS ArkTS 实战：实现一个校园超市线上购物配送应用

HarmonyOS ArkTS 实战实现一个校园超市线上购物配送应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园超市线上购物配送应用。应用可以浏览超市商品加入购物车下单结算配送到寝并提供商品分类、购物车管理、订单跟踪、配送员接单、评价等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍商品分类浏览商品搜索购物车管理商品数量增减下单结算配送到寝订单状态跟踪配送员接单订单评价优惠券使用收货地址管理历史订单定义数据结构interfaceProduct{id:number;name:string;price:number;category:string;image:string;sales:number;stock:number;}interfaceCartItem{productId:number;productName:string;price:number;quantity:number;selected:boolean;}interfaceOrder{id:number;items:CartItem[];totalPrice:number;address:string;status:string;createTime:string;deliveryTime:string;}初始化页面状态StateprivatetabIndex:number0;StateprivatecurrentCategory:string零食饮料;StateprivatesearchKeyword:string;Stateprivatecategories:string[][零食饮料,日用百货,文具用品,方便速食,水果生鲜];Stateprivateproducts:Product[][{id:1,name:可口可乐330ml,price:3.5,category:零食饮料,image:,sales:2341,stock:100},{id:2,name:乐事薯片原味,price:6.0,category:零食饮料,image:,sales:1892,stock:80},{id:3,name:抽纸3包装,price:12.9,category:日用百货,image:,sales:987,stock:50},{id:4,name:中性笔10支装,price:8.8,category:文具用品,image:,sales:756,stock:200},];Stateprivatecart:CartItem[][];Stateprivateorders:Order[][{id:1,items:[{productId:1,productName:可口可乐330ml,price:3.5,quantity:2,selected:true}],totalPrice:7,address:1号楼302,status:已送达,createTime:2026-07-21 15:30,deliveryTime:2026-07-21 16:00},];StateprivatenextOrderId:number10;加入购物车privateaddToCart(productId:number):void{constproductthis.products.find(pp.idproductId);if(!product)return;constexistthis.cart.find(cc.productIdproductId);if(exist){this.cartthis.cart.map(cc.productIdproductId?{...c,quantity:c.quantity1}:c);}else{this.cart[...this.cart,{productId,productName:product.name,price:product.price,quantity:1,selected:true}];}}修改数量privatechangeQuantity(productId:number,delta:number):void{this.cartthis.cart.map(c{if(c.productId!productId)returnc;constnewQtyc.quantitydelta;returnnewQty0?{...c,quantity:newQty}:c;}).filter(cc.quantity0);}结算下单privatesubmitOrder(address:string):void{constselectedthis.cart.filter(cc.selected);if(selected.length0)return;consttotalselected.reduce((sum,c)sumc.price*c.quantity,0);constorder:Order{id:this.nextOrderId,items:selected,totalPrice:total,address,status:待接单,createTime:newDate().toLocaleString(),deliveryTime:};this.orders[order,...this.orders];this.cartthis.cart.filter(c!c.selected);this.nextOrderId1;}商品卡片组件BuilderProductItem(product:Product){Row({space:12}){Column().width(80).height(80).backgroundColor(#F1F5F9).borderRadius(8)Column({space:4}){Text(product.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(#334155)Text(已售${product.sales}).fontSize(12).fontColor(#94A3B8)Row(){Text(¥${product.price.toFixed(1)}).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#EF4444)Blank()Button().width(28).height(28).fontSize(18).backgroundColor(#334155).borderRadius(14).onClick(()this.addToCart(product.id))}.width(100%).margin({top:8})}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width(100%).padding(12).backgroundColor(#F8FAFC).borderRadius(12)}页面布局build(){Column(){// 搜索栏TextInput({placeholder:搜索商品}).width(100%).height(40).margin(20).backgroundColor(#F1F5F9).borderRadius(20)if(this.tabIndex0){Row(){// 分类侧边栏Column(){ForEach(this.categories,(cat:string){Text(cat).fontSize(14).fontColor(this.currentCategorycat?#334155:#64748B).fontWeight(this.currentCategorycat?FontWeight.Bold:FontWeight.Normal).width(100%).padding(16).backgroundColor(this.currentCategorycat?Color.White:#F8FAFC).onClick(()this.currentCategorycat)})}.width(100).backgroundColor(#F8FAFC)// 商品列表List({space:8}){ForEach(this.products.filter(pp.categorythis.currentCategory),(p:Product){ListItem(){this.ProductItem(p)}})}.layoutWeight(1).padding(12)}.layoutWeight(1)}elseif(this.tabIndex1){// 购物车List({space:8}){ForEach(this.cart,(item:CartItem){ListItem(){Row(){Text(item.productName).fontSize(14).layoutWeight(1)Text(¥${item.price}).fontSize(14).fontColor(#EF4444)Row({space:8}){Button(-).width(28).height(28).fontSize(16).backgroundColor(#E2E8F0).fontColor(#334155).onClick(()this.changeQuantity(item.productId,-1))Text(${item.quantity}).fontSize(14)Button().width(28).height(28).fontSize(16).backgroundColor(#334155).onClick(()this.changeQuantity(item.productId,1))}}.width(100%).padding(16).backgroundColor(#F8FAFC).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)// 结算栏Row(){Text(合计¥${this.cart.filter(cc.selected).reduce((s,c)sc.price*c.quantity,0).toFixed(1)}).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#EF4444)Blank()Button(去结算).height(40).backgroundColor(#334155).onClick(()this.submitOrder(1号楼302))}.width(100%).padding(20).backgroundColor(Color.White)}else{// 订单List({space:8}){ForEach(this.orders,(order:Order){ListItem(){Column({space:8}){Row(){Text(订单#${order.id}).fontSize(14).fontWeight(FontWeight.Medium)Blank()Text(order.status).fontSize(12).fontColor(#10B981)}Text(order.address).fontSize(12).fontColor(#64748B)Text(¥${order.totalPrice.toFixed(1)}).fontSize(14).fontColor(#EF4444).fontWeight(FontWeight.Bold)}.width(100%).padding(16).backgroundColor(#F8FAFC).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}// 底部TabRow(){Column(){Text().fontSize(20)Text(商品).fontSize(12)}.layoutWeight(1).onClick(()this.tabIndex0)Column(){Text(️${this.cart.length0?this.cart.length:}).fontSize(20)Text(购物车).fontSize(12)}.layoutWeight(1).onClick(()this.tabIndex1)Column(){Text().fontSize(20)Text(订单).fontSize(12)}.layoutWeight(1).onClick(()this.tabIndex2)}.width(100%).height(60).backgroundColor(Color.White)}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用slate-700#334155体现超市购物的简洁、实用。左侧分类右侧商品列表的经典电商布局购物车和订单Tab切换底部导航清晰。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了商品浏览、购物车、下单、订单跟踪等电商核心功能。掌握了分类侧边栏、购物车数量增减、价格计算、Tab导航、列表布局等。后续可加入优惠券、地址管理、配送员接单、商品评价、拼团秒杀、库存提醒等功能。