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

相关推荐
whysqwhw1 小时前
鸿蒙 任意类型转字符串
harmonyos
程序员潘Sir3 小时前
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
harmonyos·鸿蒙
高心星20 小时前
鸿蒙5.0应用开发——V2装饰器@Provider和@Consumer的使用
harmonyos
ChinaDragon1 天前
HarmonyOS:ArkTS卡片页面刷新
harmonyos
HMSCore1 天前
通知语音播报功能,解锁全新体验
harmonyos
HarmonyOS_SDK1 天前
通知语音播报功能,解锁全新体验
harmonyos
高心星1 天前
鸿蒙5.0应用开发——V2装饰器@ObservedV2和@Trace的使用
harmonyos
城中的雾1 天前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos