Harmonyos5应用开发实战——卡片组件的交互与展示（part2）

3. 订单卡片展示

订单卡片根据店铺类型展示不同的信息，如桌号或取餐号。底部有一个“查看订单详情”按钮，点击该按钮会跳转到订单详情页面。

@Builder
orderCard() {
  Column() {
    this.storeTitle();
    Column() {
      if (this.storeType === this.STORE_TYPE_SCAN) {
        Image($r('app.media.card_store_table')).width(18).height(18);
        Text(this.storeTable)
          .fontColor($r('app.color.store_table_font'))
          .fontSize(20)
          .lineHeight(30)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 2 })
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis });
      } else {
        Text($r('app.string.order_pick_num'))
          .fontColor($r('sys.color.font_secondary'))
          .fontSize($r('sys.float.Body_M'))
          .fontWeight(FontWeight.Medium);
        Text(this.orderPickNum)
          .fontColor($r('app.color.store_table_font'))
          .fontSize(20)
          .lineHeight(30)
          .fontWeight(FontWeight.Medium)
          .margin({ top: 2 })
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis });
      }
    }.margin({ top: 8 }).alignItems(HorizontalAlign.Start).width(this.FULL_PERCENT).layoutWeight(1);

    Row() {
      Text($r('app.string.goOrderDetail'))
        .fontSize($r('sys.float.Body_S'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('app.color.orderBtn'))
    }
    .justifyContent(FlexAlign.Center)
    .width(this.FULL_PERCENT)
    .padding({ top: 4, bottom: 4 })
    .backgroundColor($r('app.color.goOrderDetailBg'))
    .margin({ top: 20 })
    .borderRadius(14)
    .onClick(() => {
      postCardAction(this, {
        action: this.ACTION_TYPE,
        abilityName: this.ABILITY_NAME,
        params: { url: 'OrderDetailPage', params: { orderId: this.orderId } },
      });
    });
  }
  .backgroundImage($r('app.media.card_bg'))
  .backgroundImageSize(ImageSize.Cover)
  .width(this.FULL_PERCENT)
  .height(this.FULL_PERCENT)
  .displayPriority(this.DISPLAY_PRIORITY_ONE)
  .flexGrow(this.FLEX_GROW_VALUE)
  .padding(12)
  .onClick(() => {
    postCardAction(this, {
      action: this.ACTION_TYPE,
      abilityName: this.ABILITY_NAME,
      params: { targetPage: 'funB' },
    });
  });
}

4. 店铺标题展示

storeTitle 方法用于展示店铺标题，包含店铺logo和店铺名称。

@Builder
storeTitle() {
  Row() {
    Image($r('app.media.card_store_logo')).width(20).height(20).borderRadius(4);
    Text(this.storeName ? this.storeName : $r('app.string.storeName'))
      .fontSize($r('sys.float.Body_M'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_primary'))
      .lineHeight(20)
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .margin({ left: 8 });
  }.width(this.FULL_PERCENT);
}

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了一个具有不同展示样式和交互功能的卡片组件，为用户提供了良好的视觉和操作体验。