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

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

文章内容概要

本文聚焦于HarmonyOS 5应用开发中订单卡片组件的实现。该组件主要用于展示订单的详细信息，包括店铺名称、订单时间、商品列表、订单号等，同时根据订单状态提供不同的操作按钮，如支付、添加商品、取消订单、删除订单等。

核心功能介绍

1. 订单状态处理

在组件初始化时，根据订单的状态（待支付、已完成、已取消）设置订单类型的显示文本和支付金额。

dealState() {
  if (!this.orderItem.order?.dnState) {
    return
  }
  this.payMoney = this.orderItem.order?.money ?? '0'
  if (this.orderItem.order.dnState === DnState.TO_BE_PAID) {
    this.orderTypeStr = $r('app.string.to_be_paid')
  } else if (this.orderItem.order.dnState === DnState.COMPLETED) {
    this.orderTypeStr = $r('app.string.completed')
  } else {
    this.orderTypeStr = $r('app.string.canceled')
  }
}

aboutToAppear(): void {
  this.dealState()
}

2. 订单信息展示

展示订单的基本信息，包括店铺名称、订单时间、订单商品列表和订单号，同时提供订单号的复制功能。

// 店铺名称和订单时间
Row() {
  Column() {
    Row() {
      Text(this.storeInfo.name).fontColor($r('sys.color.font_primary')).fontSize($r('sys.float.Body_L'))
      Image($r('app.media.right_arrow')).width(16)
    }
    Text(this.orderItem.order?.time)
      .fontSize($r('sys.float.Caption_M'))
      .fontColor($r('sys.color.font_secondary'))
      .margin({ top: 2 })
  }.alignItems(HorizontalAlign.Start)

  Text(this.orderTypeStr)
    .fontSize($r('sys.float.Body_M'))
    .fontColor(this.orderItem.order?.dnState === DnState.TO_BE_PAID ? $r('sys.color.multi_color_09') :
    $r('sys.color.font_secondary'))
    .width(72)
    .height(28)
    .textAlign(TextAlign.Center)
    .borderRadius(8)
    .backgroundColor(this.orderItem.order?.dnState === DnState.TO_BE_PAID ? 'rgba(237,111,33,0.2) ' :
    $r('sys.color.background_secondary'))
}
.width(Constants.FULL_SIZE)
.justifyContent(FlexAlign.SpaceBetween)

// 订单商品
Row() {
  List({ space: 8 }) {
    ForEach(this.orderItem.good, (item: GoodsOfOrder) => {
      ListItem() {
        Row() {
          Image(`${CommonUrl.CLOUD_STORAGE_URL}${item.logo}`)
            .width(52)
            .height(52)
            .borderRadius(8)
          if (this.orderItem.good?.length === 1) {
            Column() {
              Text(item.name).fontSize($r('sys.float.Body_M')).fontColor($r('sys.color.font_primary'))
              Text(item.spec?.split(',').join(' | '))
                .fontSize($r('sys.float.Caption_M'))
                .fontColor($r('sys.color.font_secondary'))
                .margin({ top: 4 })
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis });
            }.height(52).margin({ left: 8 }).alignItems(HorizontalAlign.Start)
          }
        }
      }
    }, (item: GoodsOfOrder) => JSON.stringify(item))
  }
  .listDirection(Axis.Horizontal)
  .scrollBar(BarState.Off)
  .layoutWeight(1)

  Column() {
    Text() {
      Span($r('app.string.currency_symbol')).fontSize($r('sys.float.Caption_S'))
      Span(`${Number(this.orderItem.order?.money)}`).fontSize($r('sys.float.Body_M'))
    }
    .fontColor($r('sys.color.font_primary'))
    .fontWeight(FontWeight.Medium)

    Text($r('app.string.total_num', `${this.orderItem.num}`))
      .fontColor($r('sys.color.font_secondary')).fontSize($r('sys.float.Caption_M'))
  }
  .width(82)
  .height(82)
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.End)
}
.width(Constants.FULL_SIZE)

// 订单号
Row() {
  Text($r('app.string.order_id_label', `${this.orderItem.order?.orderNum}`))
    .fontSize($r('sys.float.Caption_M'))
    .fontColor($r('sys.color.font_secondary'))
  Image($r('app.media.copy'))
    .width(16)
    .height(16)
    .margin({ left: 4 })
    .onClick(() => {
      copyString(this.orderItem.order?.orderNum ?? '')
    })
}
.padding(4)
.width(Constants.FULL_SIZE)
.borderRadius(4)
.backgroundColor($r('sys.color.background_secondary'))