Harmonyos5应用开发实战——订单优惠信息展示组件开发（part2）

3. 餐盒费展示

如果订单类型为自提，展示餐盒费信息。

if (Number(this.order.orderType) === OrderTypeEnum.PICKING) {
  Row() {
    Row() {
      Image($r('app.media.ic_takeaway')).width(16)
      Text($r('app.string.packing_box'))
        .fontSize($r('sys.float.Body_M'))
        .fontColor($r('sys.color.font_secondary'))
        .margin({ left: 4 })
    }

    Text() {
      Span($r('app.string.currency_symbol')).fontSize($r('sys.float.Caption_S'))
      Span(`${this.order.boxMoney}`).fontSize($r('sys.float.Body_M'))
    }.fontColor($r('sys.color.multi_color_08')).fontWeight(FontWeight.Medium)
  }
  .width(Constants.FULL_SIZE)
  .justifyContent(FlexAlign.SpaceBetween)
}

4. 不同订单状态下的信息展示

根据订单状态，展示不同的信息。如果订单未完成，展示优惠金额和应付金额；如果订单已完成，展示支付方式和实付金额。

if (Number(this.order.dnState) === OrderStateEnum.noFinished) {
  Divider().margin({ top: 8 })
  // 实付金额
  Row() {
    Text() {
      Span($r('app.string.discount_money')).fontSize($r('sys.float.Body_M')).lineHeight(20)
      Span($r('app.string.currency_symbol'))
        .fontSize(8)
        .fontWeight(FontWeight.Medium)
        .lineHeight(14)
        .margin({ left: 4 })
      Span(this.order.reductionMoney?.toString())
        .fontSize($r('sys.float.Body_M'))
        .fontWeight(FontWeight.Medium)
        .lineHeight(20)
    }.fontColor($r('sys.color.multi_color_08'))

    Text() {
      Span($r('app.string.should_pay')).fontSize($r('sys.float.Body_M')).lineHeight(20)
      Span($r('app.string.currency_symbol'))
        .fontSize(8)
        .fontWeight(FontWeight.Medium)
        .lineHeight(14)
        .margin({ left: 4 })
      Span(`${this.order.money}`)
        .fontSize($r('sys.float.Body_M'))
        .fontWeight(FontWeight.Medium)
        .lineHeight(20)
    }.fontColor($r('sys.color.font_primary')).margin({ left: 20 })
  }
  .width(Constants.FULL_SIZE)
  .padding({ top: 16 })
  .justifyContent(FlexAlign.End)
  .constraintSize({ maxWidth: Constants.FULL_SIZE })
} else {
  // 支付方式
  Row() {
    Text($r('app.string.pay_type'))
      .fontSize($r('sys.float.Body_M'))
      .fontColor($r('sys.color.font_secondary'))

    Text($r('app.string.huawei_pay'))
      .fontSize($r('sys.float.Body_M'))
      .fontColor($r('sys.color.font_primary'))
      .fontWeight(FontWeight.Medium)
  }
  .width(Constants.FULL_SIZE)
  .justifyContent(FlexAlign.SpaceBetween)

  // 实付金额
  Row() {
    Text($r('app.string.real_pay')).fontSize($r('sys.float.Body_M')).fontColor($r('sys.color.font_secondary'))
    Row() {
      Text($r('app.string.currency_symbol'))
        .fontSize($r('sys.float.Caption_S'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('sys.color.font_secondary'))
      Text(`${Number(this.order.money)}`)
        .fontSize($r('sys.float.Body_M'))
        .fontColor($r('sys.color.font_primary'))
    }
  }
  .justifyContent(FlexAlign.End)
  .width(Constants.FULL_SIZE)
  .justifyContent(FlexAlign.SpaceBetween)
}

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了订单优惠信息展示组件，为用户提供了清晰的订单费用明细展示。