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

相关推荐
爱笑的眼睛119 小时前
HarmonyOS 应用开发新范式:深入探索 Stage 模型与 ArkUI 声明式开发
华为·harmonyos
祥睿夫子14 小时前
零基础搞定 ArkTS 类与对象!保姆级教程:定义→创建→测试全流程 + 代码示例
harmonyos
程序员潘Sir17 小时前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
萌虎不虎17 小时前
【鸿蒙(openHarmony)自定义音频播放器的开发使用说明】
华为·音视频·harmonyos
李洋-蛟龙腾飞公司17 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos
HarmonyOS_SDK19 小时前
打破场景边界,支付宝联合实况窗提供全新出行服务体验
harmonyos
安卓开发者19 小时前
鸿蒙NEXT应用数据持久化全面解析:从用户首选项到分布式数据库
数据库·分布式·harmonyos
森之鸟19 小时前
开发中使用——鸿蒙播放本地mp3文件
华为·harmonyos
前端世界21 小时前
HarmonyOS 数据处理性能优化:算法 + 异步 + 分布式实战
算法·性能优化·harmonyos