HarmonyOS Next 中订单列表组件的开发实现（二）

3. 订单列表展示

在 build 方法中，使用 GridRow 和 GridCol 进行布局，根据订单状态筛选订单并展示。

build() {
  Column() {
    Scroll() {
      GridRow({
        columns: {
          sm: GridConstants.COLUMN_FOUR,
          md: GridConstants.COLUMN_EIGHT,
          lg: GridConstants.COLUMN_TWELVE
        }
      }) {
        GridCol({
          span: {
            sm: GridConstants.SPAN_FOUR,
            md: GridConstants.SPAN_EIGHT,
            lg: GridConstants.SPAN_EIGHT
          },
          offset: { lg: GridConstants.OFFSET_TWO }
        }) {
          Column() {
            if (this.status === OrderOperationStatus.ALLStatus ||
              this.orderList.filter(item => item.status === this.status).length > 0) {
              List() {
                ForEach(this.status === OrderOperationStatus.ALLStatus ?
                this.orderList : this.orderList.filter(item => item.status === this.status), (info: Order) => {
                  // 订单详情展示
                })
              }
            } else {
              Column() {
                EmptyComponent({ outerHeight: StyleConstants.FIFTY_HEIGHT })
              }
              .width(StyleConstants.FULL_WIDTH)
            }
            // 猜你喜欢商品列表展示
            Text($r('app.string.guess_like'))
              .fontSize($r('app.float.middle_font_size'))
              .margin({
                top: $r('app.float.vp_eight'),
                bottom: $r('app.float.vp_twelve'),
                left: $r('app.float.vp_sixteen')
              })
              .width(StyleConstants.FULL_WIDTH)
              .textAlign(TextAlign.Start)

            CommodityList({
              commodityList: this.commodityList,
              column: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ?
              StyleConstants.DISPLAY_TWO : StyleConstants.DISPLAY_THREE
            })
          }
        }
      }
    }
    .scrollBar(BarState.Off)
  }
  .margin({
    top: $r('app.float.vp_four'),
    left: $r('app.float.vp_twelve'),
    right: $r('app.float.vp_twelve')
  })
}

• GridRow 和 GridCol：实现响应式布局，根据屏幕尺寸调整列数。
• List 和 ForEach：循环展示订单列表。
• CommodityList：展示猜你喜欢的商品列表。

4. 订单操作按钮处理

根据订单状态显示不同的操作按钮，如支付和确认收货，并绑定相应的事件处理函数。

if (info.status === OrderOperationStatus.UN_PAY) {
  Button($r('app.string.pay_now'))
    .height($r('app.float.order_list_button_height'))
    .fontColor(Color.White)
    .backgroundColor($r('app.color.focus_color'))
    .borderRadius($r('app.float.vp_fourteen'))
    .onClick(() => {
      this.paymentHandler(info.orderId !== undefined ? info.orderId : '',
        OrderOperationStatus.DELIVERED, OrderDetailConstants.ORDER_PAY);
    })
} else if (info.status === OrderOperationStatus.DELIVERED) {
  Button($r('app.string.confirm_harvest'))
    .height($r('app.float.order_list_button_height'))
    .fontColor(Color.White)
    .backgroundColor($r('app.color.focus_color'))
    .borderRadius($r('app.float.vp_fourteen'))
    .onClick(() => {
      this.paymentHandler(info.orderId !== undefined ? info.orderId : '',
        OrderOperationStatus.RECEIPT, OrderDetailConstants.ORDER_CONFIRM);
    })
}

• Button：显示操作按钮。
• onClick：绑定点击事件，调用 paymentHandler 方法处理订单状态更新。

总结

通过上述代码实现，我们在 HarmonyOS Next 中完成了一个订单列表组件的开发。该组件可以展示订单列表、处理订单状态更新，并显示猜你喜欢的商品列表。开发者可以根据实际需求对代码进行扩展和优化，以满足不同应用场景的需求。