Harmonyos5应用开发实战——订单页面构建（part2）

3. 订单列表展示

使用 List 和 ForEach 组件遍历订单数据列表，展示每个订单的详细信息，包括下单时间、订单状态、图片、类型、尺寸、价格等。代码如下：

Column() {
  List() {
    ForEach(OrderData, (item: Order) => {
      ListItem() {
        RelativeContainer() {
          Flex({ justifyContent: FlexAlign.SpaceBetween }) {
            Text(`下单时间：${item.time}`)
              .fontFamily('HarmonyHeiTi')
              .fontSize(12)
              .fontWeight(400)
              .fontColor('rgba(0,0,0,0.6)')
              .lineHeight(16)
              .margin({ top: '16lpx', left: '16lpx' })

            Text(`${item.status}`)
              .fontFamily('HarmonyHeiTi')
              .fontSize(12)
              .fontWeight(400)
              .fontColor('#E84026')
              .lineHeight(16)
              .margin({ top: '16lpx', right: '16lpx' })
          }
          // ... 其他布局代码
        }
        // ... 其他布局代码
      }
      // ... 其他布局代码
    })
  }
  // ... 其他布局代码
}

4. 订单状态与操作按钮

根据订单状态判断是否显示“取消订单”和“立即支付”按钮，若订单状态为未支付，则显示这两个按钮。代码如下：

if (item.status === Status.Unpaid) {
  Row() {
    Button('取消订单')
      .width('88lpx')
      .height('28lpx')
      .borderRadius(30)
      .fontSize(12)
      .fontColor('rgba(0,0,0,0.9)')
      .backgroundColor('rgba(0,0,0,0.05)')

    Button('立即支付')
      .width('88lpx')
      .height('28lpx')
      .borderRadius(30)
      .fontSize(12)
      .fontColor('rgba(255,255,255,1)')
      .backgroundColor('rgba(10,89,247,1)')
      .margin({ left: '16lpx' })
  }
  .alignRules({
    top: { anchor: "__container__", align: VerticalAlign.Top },
    left: { anchor: "__container__", align: HorizontalAlign.Start }
  })
  .margin({ top: '134lpx', left: '120lpx' })
}

通过以上代码，开发者可以在HarmonyOS Next应用中实现一个完整的订单页面，包括页面布局、导航操作、订单列表展示和订单状态处理等功能。