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

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

文章内容概要

本文聚焦于HarmonyOS 5应用开发中订单优惠信息展示组件的实现。该组件主要根据传入的订单信息，展示优惠券、新用户优惠或店铺优惠、餐盒费等优惠信息，同时根据订单状态显示实付金额和支付方式等内容，为用户提供清晰的订单费用明细。

核心功能介绍

1. 订单信息监听与更新

组件通过 @Watch 装饰器监听 orderInfo 属性的变化，当订单信息发生改变时，调用 orderInfoChange 方法更新内部的 order 状态。

@Prop @Watch('orderInfoChange') orderInfo: OrderModel
@State order: OrderModel = new OrderModel()

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

orderInfoChange() {
  this.order = this.orderInfo
}

2. 优惠券与优惠信息展示

根据订单信息，展示优惠券和新用户优惠或店铺优惠的金额。

Row() {
  Row() {
    Image($r('app.media.ic_order_coupon')).width(16).height(16)
    Text($r('app.string.coupon_label'))
      .fontSize($r('sys.float.Body_M'))
      .fontColor($r('sys.color.font_secondary'))
      .margin({ left: 4 })
  }

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

// 优惠
Row() {
  Row() {
    Image($r('app.media.ic_reduction')).width(16)
    Text(this.order.xyhMoney !== '0' ? $r('app.string.new_user_discount_label') :
    $r('app.string.store_discount_label'))
      .fontSize($r('sys.float.Body_M'))
      .fontColor($r('sys.color.font_secondary'))
      .margin({ left: 4 })
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
  }.layoutWeight(1)

  Text() {
    Span($r('app.string.currency_symbol_pre_params', '-')).fontSize($r('sys.float.Caption_S'))
    Span(this.order.xyhMoney !== '0' ? `${Number(this.order.xyhMoney)}` :
      `${Number(this.order.mjMoney)}`).fontSize($r('sys.float.Body_M'))
  }.fontColor($r('sys.color.multi_color_08')).fontWeight(FontWeight.Medium)
}
.width(Constants.FULL_SIZE)
.justifyContent(FlexAlign.SpaceBetween)