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:number=0;@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:number=10;

加入购物车

privateaddToCart(productId:number):void{constproduct=this.products.find(p=>p.id===productId);if(!product)return;constexist=this.cart.find(c=>c.productId===productId);if(exist){this.cart=this.cart.map(c=>c.productId===productId?{...c,quantity:c.quantity+1}:c);}else{this.cart=[...this.cart,{productId,productName:product.name,price:product.price,quantity:1,selected:true}];}}

修改数量

privatechangeQuantity(productId:number,delta:number):void{this.cart=this.cart.map(c=>{if(c.productId!==productId)returnc;constnewQty=c.quantity+delta;returnnewQty>0?{...c,quantity:newQty}:c;}).filter(c=>c.quantity>0);}

结算下单

privatesubmitOrder(address:string):void{constselected=this.cart.filter(c=>c.selected);if(selected.length===0)return;consttotal=selected.reduce((sum,c)=>sum+c.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.cart=this.cart.filter(c=>!c.selected);this.nextOrderId+=1;}

商品卡片组件

@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.tabIndex===0){Row(){// 分类侧边栏Column(){ForEach(this.categories,(cat:string)=>{Text(cat).fontSize(14).fontColor(this.currentCategory===cat?'#334155':'#64748B').fontWeight(this.currentCategory===cat?FontWeight.Bold:FontWeight.Normal).width('100%').padding(16).backgroundColor(this.currentCategory===cat?Color.White:'#F8FAFC').onClick(()=>this.currentCategory=cat)})}.width(100).backgroundColor('#F8FAFC')// 商品列表List({space:8}){ForEach(this.products.filter(p=>p.category===this.currentCategory),(p:Product)=>{ListItem(){this.ProductItem(p)}})}.layoutWeight(1).padding(12)}.layoutWeight(1)}elseif(this.tabIndex===1){// 购物车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(c=>c.selected).reduce((s,c)=>s+c.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.tabIndex=0)Column(){Text(`🛍️${this.cart.length>0?this.cart.length:''}`).fontSize(20)Text('购物车').fontSize(12)}.layoutWeight(1).onClick(()=>this.tabIndex=1)Column(){Text('📋').fontSize(20)Text('订单').fontSize(12)}.layoutWeight(1).onClick(()=>this.tabIndex=2)}.width('100%').height(60).backgroundColor(Color.White)}.width('100%').height('100%').backgroundColor(Color.White)}

页面设计说明

主题色采用slate-700#334155，体现超市购物的简洁、实用。左侧分类+右侧商品列表的经典电商布局，购物车和订单Tab切换，底部导航清晰。

SDK配置

API 24，compatibleSdkVersion: “6.1.1(24)”

运行项目

将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。

项目总结

实现了商品浏览、购物车、下单、订单跟踪等电商核心功能。掌握了分类侧边栏、购物车数量增减、价格计算、Tab导航、列表布局等。后续可加入优惠券、地址管理、配送员接单、商品评价、拼团秒杀、库存提醒等功能。