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

相关推荐
请叫我小蜜蜂同学1 小时前
【鸿蒙】鸿蒙操作系统发展综述
华为·harmonyos
HMS Core2 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
华为·harmonyos
塞尔维亚大汉5 小时前
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄?
源码·harmonyos
别说我什么都不会5 小时前
【OpenHarmony】鸿蒙开发之FlexSearch
harmonyos
HarmonyOS小助手7 小时前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
HarmonyOS_SDK9 小时前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
harmonyos
别说我什么都不会9 小时前
【OpenHarmony】鸿蒙开发之epublib
harmonyos
塞尔维亚大汉9 小时前
鸿蒙内核源码分析(VFS篇) | 文件系统和谐共处的基础
源码·harmonyos
Georgewu1 天前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos
Georgewu1 天前
【HarmonyOS】Web 组件的 PDF 文档预览功能详解
harmonyos