HarmonyOS 鸿蒙Next实现购物车功能
HarmonyOS 鸿蒙Next实现购物车功能
在上一节我们实现了商城的分类功能，实现了商品类别的信息的展示，现在我们的应用已经有两个导航类目可以点击了，现在我们要实现的功能是，当我们点击底部导航购物车选项时，我们要加载购物车相关的内容，以列表的形式展示到页面上
现在我们来看一下我们要实现的样式
购物车的业务逻辑非常的复杂，这里我们先实现一个简单的购物车，然后再对购物车功能进行完善。
首先我们对购物车业务逻辑进行分析
一条数据包含了店铺的信息和店铺是否选中的状态，店铺下方是当前店铺的商品以及选中状态，状态有全选，同时有另一种状态，当我们取消了店铺下商品的选中后，店铺的选中状态也随之取消，初始状态下，商品和店铺都是未选中状态
首先定义好变量，一个商品总价和商品流的详情，因为我们需要改变数组中对象的数据所以我们需要用到@ObservedV2和@Trace装饰器，就可以实现深层次的监听
export class Test{
pos:number=0
name:string=’’
@Trace check:boolean=false
@Trace childList:ChileBean[]=[]
}
export class ChileBean{
child_pos:number=0
name:string=’’
price:number=0
img:string=’’
@Trace child_check:boolean=false
@Trace num:number=1
maxAmount:number=0
activitiesAmount:number=0
couponPrice:number=0
constructor(child_pos?:number,name?:string,price?:number,couponPrice?:number,img?:string,child_check?: boolean,num?:number,maxAmount?:number,activitiesAmount?:number) {
this.child_pos = child_pos!
this.name = name!
this.price = price!
this.couponPrice= couponPrice!
this.img=this.img!
this.child_check = child_check!
this.num=num!
this.maxAmount=maxAmount!
this.activitiesAmount=activitiesAmount!
}
}
我们创建好数据后，在页面的生命周期中填充数据
aboutToAppear() {
const digitalAppliancesChildren:ChileBean[] = [
new ChileBean(0, “相机”, 1998,1500,‘网络图片地址’,false,1,100,5),
new ChileBean(0, “电视”, 6889,3500,‘网络图片地址’, false,1,10,3),
new ChileBean(0, “手机”, 9999,8888,‘网络图片地址’, false,1,100,-1)
];
// 创建食品生鲜的子项
const freshFoodChildren:ChileBean[] = [
new ChileBean(1, “带鱼”, 27,25,‘网络图片地址’, false,1,10,2),
new ChileBean(1, “螃蟹”, 36,30, ‘网络图片地址’,false,1,10,3),
new ChileBean(1, “大虾”, 19,15,‘网络图片地址’,false,1,20,10)
];
this.arrAy.push(this.createTest(0, “数码电器”, digitalAppliancesChildren));
this.arrAy.push(this.createTest(1, “食品生鲜”, freshFoodChildren));
}
数据准备好后使用list组件进行数据的填充并且加入布局展示数据（代码如下）
List({space:10}) {
ForEach(this.arrAy, (item: Test, index: number) => {
ListItem() {
Column() {
Row() {
Checkbox({ name: ‘checkbox1’ + index, group: ‘checkboxGroup’+index})
.selectedColor("#ffd95112")
.select(item.check)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
})
.width(20)
.height(20)
Text(item.name)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor($r(‘app.color.color_red’))
.width(‘100%’)
.onClick(() => {
showToast(item.name)
})
}
List({space:10}) {
ForEach(item.childList, (child: ChileBean, child_index: number) => {
ListItem() {
Row() {
Checkbox({ name: ‘checkbox1’ + child_index, group: ‘checkboxGroup’ + child_index })
.select(child.child_check)
.selectedColor("#ffd95112")
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
})
.width(20)
.height(20)
Image(child.img)
.height(90)
.width(90)
.border({width:1,color:Color.Blue,radius:10})
Column({space:10}){
Text(child.name)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor($r(‘app.color.tab_text_normal’))
Row(){
Text(){
Span(‘￥’)
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor("#ffe5570b")
Span(""+child.couponPrice)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor("#ffe5570b")
}
if (child.activitiesAmount>-1){
if (child.num>child.activitiesAmount) {
Text(“x”+child.activitiesAmount)
}
}
}
if (child.activitiesAmount>-1){
if (child.num>child.activitiesAmount) {
Row(){
Text(){
Span(‘￥’)
.fontSize(14)
.fontWeight(FontWeight.Bold)
.fontColor("#ffe5570b")
Span(""+child.price)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor("#ffe5570b")
}
Text(“x”+Number(child.num-child.activitiesAmount))
}
}
}
}
.margin({left:10})
.alignItems(HorizontalAlign.Start)
Blank()
}
.padding({left:10,right:20})
.alignItems(VerticalAlign.Center)
.width(‘100%’)
.justifyContent(FlexAlign.SpaceBetween)
}
})
}
}
}
})
}
当我们选中商品，或者取消商品的时候，我们需要对价格进行一个展示和计算，下面我们来实现一个自定义的结算模块，结算模块我们需要有一个全选按钮，一个提交按钮，一个商品价格计算的组件，当我们没有商品选择的时候，给提交按钮一个置灰和点击添加商品提示。
Row(){
Checkbox({ name: ‘checkbox_all’ , group: ‘checkboxGroup_all’})
.selectedColor("#ffd95112")
.select(this.isALlCheck())
.shape(CheckBoxShape.CIRCLE)
.width(25)
.height(25)
.onChange((value: boolean) => {
})
Text(“全选”)
.fontSize(16)
Blank()
Text(“提交”)
.border({radius:20})
.width(90)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(this.getSelectedChildCount()>0?"#ffe5570b":"#ffc3bdbd")
.height(45)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
showToast(“未选择商品”)
})
.margin({right:10})
}
.width(‘100%’)
.justifyContent(FlexAlign.SpaceBetween)
执行代码后展示如下所示
更多关于HarmonyOS 鸿蒙Next实现购物车功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS 鸿蒙Next实现购物车功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
《农物购》app开发技术分享《九》-- HarmonyOS 鸿蒙Next购物车基础实现
在HarmonyOS鸿蒙系统中实现《农物购》app的购物车基础功能，需利用鸿蒙的ArkUI框架，通过ETS（Enhanced TypeScript）语言进行界面开发。
首先，定义购物车数据模型，包括商品ID、名称、数量及总价等属性。在ArkUI中，通过@Entry、@Component等装饰器定义页面组件，并使用@State管理购物车状态。
购物车页面需展示已选商品列表，并支持增加、减少商品数量及删除商品操作。这些功能可通过绑定数据模型至UI组件实现，利用事件监听机制处理用户交互，如点击按钮增加或减少商品数量。
为实现商品数量的动态更新，需监听购物车状态变化，并在状态变化时重新渲染UI。HarmonyOS提供了响应式数据绑定机制，可自动处理此类更新。
同时，购物车页面还需提供结算功能，点击结算按钮后，可跳转至结算页面或显示结算信息。结算逻辑需根据购物车中商品的总价进行计算。
以上为基础实现思路，具体代码需根据实际需求编写。若遇到技术难题，可查阅鸿蒙官方文档或参考相关开发案例。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
