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

3. 单品商品展示

对于单品商品，展示商品的基本信息、规格和实际价格。

@Component
export struct GoodsCard {
  @Prop goodInfo: CarGoodInfo;

  build() {
    Row() {
      Row() {
        Image(`${CommonUrl.CLOUD_STORAGE_URL}${this.goodInfo.logo}`).width(50).height(50).borderRadius(8);
        Column() {
          Column() {
            Text(this.goodInfo.name)
              .fontSize($r('sys.float.Body_M'))
              .fontColor($r('sys.color.font_primary'))
              .fontWeight(FontWeight.Medium)
            Text(this.goodInfo.spec?.split(',').join(' | '))
              .fontSize($r('sys.float.Caption_M'))
              .fontColor($r('sys.color.font_secondary'))
              .margin({ top: 4 })
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis });
          }.alignItems(HorizontalAlign.Start)

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

      Row() {
        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(48).alignItems(VerticalAlign.Bottom);
    }.width(Constants.FULL_SIZE).justifyContent(FlexAlign.SpaceBetween);
  }
}

4. 必选商品展示

必选商品的展示方式与单品商品类似，但在列表上方会显示“必选品”的提示信息。

if (this.carMustGoodList.length) {
  // 必选品详情
  Column() {
    Text($r('app.string.must_good'))
      .fontSize($r('sys.float.Body_M'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_primary'))
    List({ space: 16 }) {
      ForEach(this.carMustGoodList, (goodInfo: CarGoodInfo | GoodsOfOrder) => {
        ListItem() {
          GoodsCard({ goodInfo });
        };
      }, (orderInfo: CarGoodInfo | GoodsOfOrder) => orderInfo.id);
    }.margin({ top: 12 });
  }.cardStyle().alignItems(HorizontalAlign.Start);
}

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了订单商品卡片组件，为用户提供了清晰的订单商品信息展示体验。