HarmonyOS Next 购物车组件开发实现(二)

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 中完成了一个购物车组件的开发。该组件可以展示商品列表,支持商品的选择、数量修改、删除和结算等功能。开发者可以根据实际需求对代码进行扩展和优化,以满足不同应用场景的需求。

相关推荐
SuperHeroWu75 小时前
【HarmonyOS 5】鸿蒙检测系统完整性
华为·harmonyos·模拟器·系统完整性·越狱设备
京东云开发者5 小时前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
harmonyos
前端付豪6 小时前
2、ArkTS 是什么?鸿蒙最强开发语言语法全讲解(附实操案例)
前端·后端·harmonyos
zhujiaming6 小时前
鸿蒙端应用适配使用开源flutter值得注意的一些问题
前端·flutter·harmonyos
前端付豪6 小时前
8、鸿蒙动画开发实战:做一个会跳舞的按钮!(附动效示意图)
前端·后端·harmonyos
前端付豪6 小时前
3、构建你的第一个鸿蒙组件化 UI 页面:实现可复用的卡片组件(附实战代码)
前端·后端·harmonyos
前端付豪6 小时前
7、打造鸿蒙原生日历组件:自定义 UI + 数据交互(附实操案例与效果图)
前端·后端·harmonyos
北海zx7 小时前
HarmonyNext:如何在鸿蒙上录屏后进行音视频编码
harmonyos
别说我什么都不会8 小时前
【仓颉三方库】音视频开发—— ijkplayer-ffi
harmonyos
王二蛋与他的张大花11 小时前
HarmonyOS运动开发:如何监听用户运动步数数据
harmonyos