#HarmonyOS NEXT体验官#HarmoneyOS Next实现购物车模块原创

凌晨2点

发布于 2024-8-4 14:02

浏览

0收藏

背景

最近逛论坛和各种技术站发现大家对商城类应用搜索的频率非常高，在商城开发领域深耕多年的我为了造福一方码农，不得不出手相助了，那么今天就为大家带来商城应用开发中比较重要的一个功能模块，就是我们的购物车模块，购物车模块主要负责已添加商品的数量以及选中状态的查看以及我们商品价格的计算，首先让我们看效果图

#HarmonyOS NEXT体验官#HarmoneyOS Next实现购物车模块-鸿蒙开发者社区

可以看到这是某平台的购物车效果图，分别有商品选择和价格计算两个模块。在其他平台想必大家开发起来早已经烂熟于心，那在我们的HarmoneyOS上又该如何实现呢？

开发准备

硬件：

支持api12的HarmoneyOS NEXT系统的手机或者平板

软件：

DevEco Studio NEXT 5.0.3.403

Api 12语言：方舟编程语言（ArkTs）

UI开发框架：

方舟UI框架，ArkUI

开发分析

购物车有商品列表和价格计算，所以我们的组件结构是在自定义组件中使用list列表实现商品分类，在自定义价格计算组件中去实时计算列表中随动的商品价格

代码实现

首先定义好我们需要的变量，一个商品总价和商品流的详情，因为我们需要改变数组中对象的数据所以我们需要用到@ObjectLink + @Observed ，@Observed声明的实体类如下

@State allMoney:number=0//已选商品总价
 @Observed
export class Product {
  checked: boolean;
  name: string;
  price: number;
  num: number;
  id: number;
  img: string;

  constructor(
    checked: boolean,
    name: string,
    price: number,
    num: number,
    id: number,
    img: string
  ) {
    this.checked = checked;
    this.name = name;
    this.price = price;
    this.num = num;
    this.id = id;
    this.img = img;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

然后我们在页面的生命周期中填充数据

aboutToAppear(): void {
    let product1: Product = new Product(true,
坚果',
     9,
     1,
     0,
     'https://tse2-mm.cn.bing.net/th/id/OIP-C.2gR5bCXHLK6Pi4CMzt5XnQHaE8?w=372&h=203&c=7&r=0&o=5&dpr=2&pid=1.7')
    let product2: Product = new Product( true,
小零食',
      19,
      1,
      0,
      'https://tse2-mm.cn.bing.net/th/id/OIP-C.2gR5bCXHLK6Pi4CMzt5XnQHaE8?w=372&h=203&c=7&r=0&o=5&dpr=2&pid=1.7')

    this.productList.push(product1)
    this.productList.push(product2)

    this.allMoney= this.areAllCheckTrue(this.productList)

  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

数据准备好后使用list组件进行数据的填充并且加入布局展示数据（代码如下）

List(){
ForEach(this.productList,(item:ESObject,index:number)=>{
ListItem(){
           //自定义组件
  itemList({item:item,index:index,call:()=>{
             this.allMoney= this.areAllCheckTrue(this.productList)
            }})
}

})
}
.margin({top:10})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

条目信息我们创建一个自定义组件来实现（代码如下）

@Component
export  struct itemList{
  @ObjectLink item:Product
  @State index:number=0;
  call:()=>void=()=>{}
  build() {
    Row(){
      Checkbox({ name: 'checkbox1', group: 'checkboxGroup'+this.index })
        .select(true)
        .selectedColor(0xed6f21)
        .shape(CheckBoxShape.CIRCLE)
        .onChange((value: boolean) => {
          this.item.checked=value
          this.call()
          console.info('Checkbox1 change is' + value)
        })

      Image( this.item.img)
        .height(90)
        .width(90)
      Column(){
        Text( this.item.name)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)

        Text(){
          Span("¥")
            .fontColor(Color.Red)
          Span(String( this.item.price))
            .fontColor(Color.Red)

        }
        .margin({top:40})
      }
      .margin({left:10})

      Blank()

      Row(){
        Button("+")
          .width(40)
          .height(20)
          .fontColor(Color.White)
          .onClick(()=>{
            this.item.num++
            this.call()

          })

        Text(String( this.item.num))
        Button("-")
          .width(40)
          .height(20)
          .fontColor(Color.White)
          .onClick(()=>{
            this.item.num--
            this.call()

          })
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }

}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.

这时候我们的购物车数据就显示出来了（效果如下）

#HarmonyOS NEXT体验官#HarmoneyOS Next实现购物车模块-鸿蒙开发者社区

接下来实现底部的价格计算模块

Row(){
总价：")
        Text(String(this.allMoney))
          .fontSize(20)
          .fontColor(Color.Red)
        Blank()
结算")
          .fontColor(Color.White)
          .backgroundColor(Color.Red)
      }
      .margin({bottom:10})
      .padding({left:10,right:10})
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

保存后效果如下

#HarmonyOS NEXT体验官#HarmoneyOS Next实现购物车模块-鸿蒙开发者社区

然后定义价格计算的方法实现

areAllCheckTrue(products: Product[]): number {
    let all:number=0
  for (const product of products) {
    if (product.checked) {
      all+=product.price*product.num
    }
  }
  return  all;
}1.
2.
3.
4.
5.
6.
7.
8.
9.

通过遍历数组的数据拿到商品价格与数量的结果，然后在页面上赋值给我们定义的总价参数。

#HarmonyOS NEXT体验官#HarmoneyOS Next实现购物车模块-鸿蒙开发者社区