HarmonyOS Next 购物车组件开发实现（二）

Amazing_Ruby2025-03-31 15:56

3. 结算功能

typescript 复制代码

settleAccounts() {
  const orderList = this.products
    .filter((item: Product, index: number) =>
      item.id === this.selectProducts[index].key && this.selectProducts[index].selected === true)
    .map((item: Product) => {
      let returnParams: Order = {
        orderId: item.id,
        commodityId: Number.parseInt(item.commodityId),
        price: item.price,
        count: item.count,
        specifications: item.specifications,
        image: item.img[0],
        description: item.description,
        title: item.name
      }
      return returnParams;
    });
  Logger.info('settleAccounts orderList length: ' + orderList.length);
  this.pageInfo.pushPath({name: 'ConfirmOrderPage', param: orderList})
}

settleAccounts：筛选出选中的商品，生成订单列表，并跳转到确认订单页面。

4. 商品数量修改与删除

typescript 复制代码

onChangeCount = (count: number, info: Product): void => {
  let updateShopCartParams: UpdateShopProps = {
    id: info.id,
    count: count
  };
  this.localDataManager.updateShopCart(updateShopCartParams);
  this.needUpdateShopCart();
}

@Builder
ItemDelete(item: Product) {
  Flex({
    direction: FlexDirection.Column,
    justifyContent: FlexAlign.Center,
    alignItems: ItemAlign.End
  }) {
    Column() {
      Image($r('app.media.ic_trash'))
        .width($r('app.float.vp_twenty_four'))
        .height($r('app.float.vp_twenty_four'))
        .margin({ bottom: $r('app.float.vp_ten') })
      Text($r('app.string.delete'))
        .fontSize($r('app.float.small_font_size'))
        .fontColor(Color.White)
    }
    .padding({ right: $r('app.float.vp_fourteen') })
  }
  .onClick(() => {
    this.products = this.localDataManager.deleteShopCart([item.id]);
  })
  .height($r('app.float.item_delete_height'))
  .width($r('app.float.item_delete_width'))
  .backgroundColor($r('app.color.focus_color'))
  .borderRadius($r('app.float.vp_sixteen'))
  .margin({ left: $r('app.float.item_delete_margin_left') })
}

onChangeCount：修改商品数量，并更新本地数据，然后调用 needUpdateShopCart 方法更新购物车。
ItemDelete：构建删除商品的按钮，点击时调用本地数据管理器的 deleteShopCart 方法删除商品。

总结

通过上述代码实现，我们在 HarmonyOS Next 中完成了一个购物车组件的开发。该组件可以展示商品列表，支持商品的选择、数量修改、删除和结算等功能。开发者可以根据实际需求对代码进行扩展和优化，以满足不同应用场景的需求。