Harmonyos5应用开发实战——购物车列表组件开发（part2）

3. 购物车商品列表展示

使用 List 组件展示购物车中的商品列表，每个商品项通过 CarCard 组件进行渲染。

List({ space: 8 }) {
  ForEach(this.myCar.res, (carGoodInfo: CarGoodInfo) => {
    ListItem() {
      CarCard({ carGoodInfo: carGoodInfo })
    }
  }, (carGoodInfo: CarGoodInfo, index: number) => `${carGoodInfo.id}+${carGoodInfo.num}`)
  // 购物车占位
  ListItem() {
    Row().width(Constants.FULL_SIZE).height(60)
  }
}

4. 商品卡片组件 CarCard

CarCard 组件用于展示单个商品的详细信息，包括商品图片、名称、规格、价格以及商品数量的增减按钮。

@Component
struct CarCard {
  @StorageProp('myCar') myCar: GetMyCarResp = new GetMyCarResp()
  @Consume('mustGoodsCtrl') mustGoodsCtrl: MustGoodsController
  @Consume('dishesList') dishesList: Array<DishesType>
  @ObjectLink carGoodInfo: CarGoodInfo

  build() {
    Row() {
      Row() {
        Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.carGoodInfo.logo}`).width(60).height(60)
        Column() {
          Column() {
            Text(this.carGoodInfo.name)
              .fontSize($r('sys.float.Body_M'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('sys.color.font_primary'))
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .layoutWeight(1)
            Text() {
              Span($r('app.string.selected'))
              Span(this.carGoodInfo.spec?.split(',').join(' | ')).margin({ left: 2 })
            }
            .fontSize($r('sys.float.Caption_M'))
            .fontColor($r('sys.color.font_secondary'))
            .margin({ top: 2 })
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          }.alignItems(HorizontalAlign.Start).layoutWeight(1)

          Text() {
            Span($r('app.string.currency_symbol'))
              .fontSize($r('sys.float.Caption_M'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('sys.color.font_primary'))
            Span(`${Number(this.carGoodInfo.money)}`)
              .fontSize($r('sys.float.Body_M'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('sys.color.font_primary'))
          }.margin({ top: 6 })
        }
        .margin({ left: 12 })
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.SpaceBetween)
        .height(60)
        .layoutWeight(1)
      }.layoutWeight(1)

      Row() {
        Image($r('app.media.ic_subtract')).width(24).onClick(() => {
          if (this.carGoodInfo?.id && this.carGoodInfo?.num) {
            updateMyCarUtil(this.carGoodInfo?.id, Number(this.carGoodInfo?.num) - 1)
          }
        })
        Text(this.carGoodInfo.num)
          .margin({ left: 12, right: 12 })
          .fontSize($r('sys.float.Body_L'))
          .fontColor($r('sys.color.font_primary'))
          .fontWeight(FontWeight.Medium)
        Image($r('app.media.add_car')).width(24).onClick(() => {
          if (this.carGoodInfo?.id && this.carGoodInfo?.num) {
            updateMyCarUtil(this.carGoodInfo?.id, Number(this.carGoodInfo?.num) + 1)
          } else {
            console.error(`GoodInfo not in disheList: ${JSON.stringify(this.carGoodInfo.goodId)}.`);
            return
          }
        })
      }.justifyContent(FlexAlign.End)
    }.width(Constants.FULL_SIZE).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Bottom)
  }
}

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了购物车列表组件，为用户提供了便捷的购物车操作体验。