Harmonyos5应用开发实战——订单商品卡片组件开发（part1）

Harmonyos5应用开发实战——订单商品卡片组件开发

文章内容概要

本文聚焦于HarmonyOS 5应用开发中订单商品卡片组件的实现。该组件主要用于展示订单中的商品信息，包括套餐商品、单品商品和必选商品，并根据商品类型进行分类展示，同时显示商品的基本信息、价格和数量等。

核心功能介绍

1. 商品分类展示

在组件初始化时，根据商品的类型（必选品、套餐、单品）对商品列表进行分类，分别存储在不同的状态变量中。

aboutToAppear(): void {
  this.goodList.forEach(item => {
    if (item.isMust === Constants.GOODS_MUST) {
      this.carMustGoodList.push(item);
    } else if (item.specType === GoodSpecEnum.PACKAGE_TYPE) {
      this.carPgkGoodList.push(item);
    } else {
      this.carGoodList.push(item);
    }
  });
}

2. 套餐商品展示

对于套餐商品，展示商品的基本信息、原价、折扣和实际价格，同时显示套餐内的具体商品组合。

@Component
export struct GoodPkgCard {
  @Prop goodInfo: CarGoodInfo | GoodsOfOrder;

  build() {
    Column() {
      Row() {
        Row() {
          Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.goodInfo.logo}`).width(50).height(50).borderRadius(8)
          Column() {
            Text(this.goodInfo.name)
              .fontSize($r('sys.float.Body_M'))
              .fontColor($r('sys.color.font_primary'))
              .fontWeight(FontWeight.Medium)
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis });

            Row() {
              Text(`x`)
                .fontSize($r('sys.float.Caption_M'))
                .fontColor($r('sys.color.font_secondary'))
              Text(`${this.goodInfo.num}`)
                .fontSize($r('sys.float.Caption_L'))
                .fontColor($r('sys.color.font_secondary'))
            }.alignItems(VerticalAlign.Bottom)
          }
          .margin({ left: 8 })
          .alignItems(HorizontalAlign.Start)
          .justifyContent(FlexAlign.SpaceBetween);
        }.layoutWeight(1);

        Row() {
          Text($r('app.string.currency_symbol_post_params',
            new Decimal(this.goodInfo.money2).mul(this.goodInfo.num!).toString()))
            .fontSize($r('sys.float.Caption_S'))
            .fontColor($r('sys.color.font_primary'))
            .decoration({
              type: TextDecorationType.LineThrough,
              color: $r('sys.color.font_secondary'),
            });
          Text($r('app.string.discount', this.goodInfo.discount))
            .fontSize($r('sys.float.Caption_L'))
            .fontColor($r('sys.color.multi_color_09'))
            .padding({
              left: 4,
              right: 4,
              top: 2,
              bottom: 2,
            })
            .borderWidth(1)
            .borderColor($r('sys.color.multi_color_09'))
            .borderRadius(4)
            .margin({ left: 4, right: 4 });
          Text() {
            Span($r('app.string.currency_symbol'))
              .fontSize($r('sys.float.Caption_S'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('sys.color.font_primary'))
            Span(new Decimal(this.goodInfo.money).mul(new Decimal(this.goodInfo.num)).toString())
              .fontSize($r('sys.float.Body_M'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('sys.color.font_primary'))
          };
        }.height(50).alignItems(VerticalAlign.Bottom);
      }.width(Constants.FULL_SIZE).justifyContent(FlexAlign.SpaceBetween);

      Column() {
        List({ space: 8 }) {
          ForEach(this.goodInfo.combination, (item: PackageSpec) => {
            ListItem() {
              Row() {
                Text(item.specName).fontSize($r('sys.float.Caption_L')).fontColor($r('sys.color.font_primary'))
                Text(`x${item.specNum}`).fontSize($r('sys.float.Caption_L')).fontColor($r('sys.color.font_secondary'))
              }.width(Constants.FULL_SIZE).justifyContent(FlexAlign.SpaceBetween);
            };
          }, (item: PackageSpec) => JSON.stringify(item));
        };
      }.margin({ top: 12 })
    };
  }
}