HarmonyOS Next 中订单支付页面的开发实现（一）

HarmonyOS Next 中订单支付页面的开发实现

概述

在 HarmonyOS Next 应用开发里，构建订单支付页面是电商类应用的常见需求。下面将介绍如何构建一个订单支付页面，用于展示订单状态、商品信息、费用信息，并处理订单支付和确认收货操作。

核心代码功能及对应代码段

1. 组件定义与数据管理

定义 PayOrder 组件，通过 @StorageProp 存储断点信息，@Consume 获取订单列表和页面信息，@Link 绑定总价格。使用单例模式获取本地数据管理器。

@Component
export struct PayOrder {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
  @Consume('orderList') data: Order[];
  @Link totalPrice: number;
  private localDataManager: LocalDataManager = LocalDataManager.instance();
  @Consume('pageInfo') pageInfos: NavPathStack
}

• @StorageProp：存储断点信息，用于响应式布局。
• @Consume：获取共享数据，如订单列表和页面信息。
• @Link：绑定总价格，实现数据的双向绑定。
• LocalDataManager.instance()：获取本地数据管理器的单例实例。

2. 订单状态展示

OrderStatus 方法用于展示订单的状态、描述和创建时间。

@Builder OrderStatus() {
  Row() {
    Column() {
      Text(OrderDetailConstants.STATUS_ENUM[this.data[0].status !== undefined?this.data[0].status:0])
        .fontSize($r('app.float.big_font_size'))
        .margin({ bottom: $r('app.float.vp_two') })
        .fontColor(Color.White)
      Text(OrderDetailConstants.STATUS_DESC_ENUM[this.data[0]?.status !== undefined?this.data[0]?.status:0])
        .fontSize($r('app.float.smaller_font_size'))
        .opacity(StyleConstants.SIXTY_OPACITY)
        .margin({ bottom: $r('app.float.vp_two') })
        .fontColor(Color.White)
      Text(this.data[0].createTime !== undefined ?
        formatDate(new Date(this.data[0].createTime).valueOf(), OrderDetailConstants.DATE_FORMAT) : '')
        .fontSize($r('app.float.smaller_font_size'))
        .opacity(StyleConstants.SIXTY_OPACITY)
        .fontColor(Color.White)
    }
    .alignItems(HorizontalAlign.Start)

    Blank()
    Image($r("app.media.ic_pay_bag"))
      .width($r('app.float.pay_image_width'))
      .height($r('app.float.pay_image_height'))
      .margin({ right: $r('app.float.vp_twenty') })
    Image($r('app.media.ic_arrow_right'))
      .width($r('app.float.vp_twelve'))
      .height($r('app.float.vp_twenty_four'))
  }
  .padding($r('app.float.vp_twelve'))
  .width(StyleConstants.FULL_WIDTH)
}

• OrderDetailConstants.STATUS_ENUM 和 OrderDetailConstants.STATUS_DESC_ENUM：根据订单状态显示对应的状态文本和描述。
• formatDate：格式化订单创建时间。