Harmonyos5应用开发实战——订单状态组件开发（part1）

WOO
139 阅读1分钟

Harmonyos5应用开发实战——订单状态组件开发

文章内容概要

本文聚焦于HarmonyOS 5应用开发中的订单状态组件实现。该组件依据订单的不同状态（待支付、已完成、已取消）展示不同的界面内容，同时支持倒计时取消订单、支付、添加商品、再次下单等操作，为用户提供清晰的订单状态信息和便捷的操作入口。

核心功能介绍

1. 订单状态处理与倒计时

根据订单状态处理界面显示，若订单为待支付状态，启动倒计时，倒计时结束自动取消订单。

dealSate() {
  if (this.orderDetail.order?.dnState !== DnState.TO_BE_PAID) {
    return;
  }
  if (this.timer) {
    this.clearTimer()
  }
  let orderTime = new Date(this.orderDetail.order?.time!)
  orderTime.setMinutes(orderTime.getMinutes() + 30)
  let countdownSec = Math.floor((orderTime.getTime() - new Date().getTime()) / 1000)
  this.countdownSec = countdownSec >= 0 ? countdownSec : 0
  this.countdownMin = Math.floor(this.countdownSec / 60)
  this.timer = setInterval(() => {
    if (this.countdownSec <= 0) {
      this.clearTimer()
      cancelOrderUtil(this.orderDetail.order?.id ?? '')
      this.getOrderInfo()
      return
    }
    this.countdownSec--
    if (this.countdownSec > 60) {
      this.countdownMin = Math.floor(this.countdownSec / 60)
    } else {
      this.countdownMin = 0
    }
  }, 1000)
}
2. 不同状态按钮列表

针对不同订单状态，定义不同的按钮列表，每个按钮对应相应的操作回调。

private waitPayBtnList: Array<BtnType> = [
  {
    text: $r('app.string.pay'),
    color: $r('sys.color.font_on_primary'),
    backgroundColor: $r('sys.color.multi_color_09'),
    callback: () => {
      this.paySheetFlag = true
    },
  },
  {
    text: $r('app.string.add_good'),
    color: $r('sys.color.font_secondary'),
    backgroundColor: $r('sys.color.background_secondary'),
    callback: () => {
      if (this.orderDetail.order?.id) {
        HttpRequestApi.addGoods(this.orderDetail.order.id).then(() => {
          getMyCarUtil()
          this.pageStack.popToName('HomePage', 0)
        })
      } else {
        promptAction.showToast({ message: $r('app.string.order_not_exist') })
      }
    },
  },
  {
    text: $r('app.string.cancel'),
    color: $r('sys.color.font_secondary'),
    backgroundColor: $r('sys.color.background_secondary'),
    callback: (orderId: string) => {
      cancelOrderUtil(orderId).then((resp: number) => {
        let msg: Resource =
          resp === HttpCode.SUCCESS ? $r('app.string.cancel_success') : $r('app.string.cancel_failed')
        promptAction.showToast({ message: msg })
        if (resp !== 2) {
          this.getOrderInfo()
        }
      })
    },
  },
]
private finishedBtnList: Array<BtnType> = [
  {
    text: $r('app.string.one_more_order'),
    color: $r('sys.color.font_secondary'),
    backgroundColor: $r('sys.color.background_secondary'),
    callback: () => {
      this.pageStack.popToName('HomePage', 0)
    },
  },
]
```### Harmonyos5应用开发实战——订单状态组件开发

#### 文章内容概要
本文聚焦于HarmonyOS 5应用开发中的订单状态组件实现。该组件依据订单的不同状态（待支付、已完成、已取消）展示不同的界面内容，同时支持倒计时取消订单、支付、添加商品、再次下单等操作，为用户提供清晰的订单状态信息和便捷的操作入口。

#### 核心功能介绍

##### 1. 订单状态处理与倒计时
根据订单状态处理界面显示，若订单为待支付状态，启动倒计时，倒计时结束自动取消订单。
```typescript
dealSate() {
  if (this.orderDetail.order?.dnState !== DnState.TO_BE_PAID) {
    return;
  }
  if (this.timer) {
    this.clearTimer()
  }
  let orderTime = new Date(this.orderDetail.order?.time!)
  orderTime.setMinutes(orderTime.getMinutes() + 30)
  let countdownSec = Math.floor((orderTime.getTime() - new Date().getTime()) / 1000)
  this.countdownSec = countdownSec >= 0 ? countdownSec : 0
  this.countdownMin = Math.floor(this.countdownSec / 60)
  this.timer = setInterval(() => {
    if (this.countdownSec <= 0) {
      this.clearTimer()
      cancelOrderUtil(this.orderDetail.order?.id ?? '')
      this.getOrderInfo()
      return
    }
    this.countdownSec--
    if (this.countdownSec > 60) {
      this.countdownMin = Math.floor(this.countdownSec / 60)
    } else {
      this.countdownMin = 0
    }
  }, 1000)
}
2. 不同状态按钮列表

针对不同订单状态，定义不同的按钮列表，每个按钮对应相应的操作回调。

private waitPayBtnList: Array<BtnType> = [
  {
    text: $r('app.string.pay'),
    color: $r('sys.color.font_on_primary'),
    backgroundColor: $r('sys.color.multi_color_09'),
    callback: () => {
      this.paySheetFlag = true
    },
  },
  {
    text: $r('app.string.add_good'),
    color: $r('sys.color.font_secondary'),
    backgroundColor: $r('sys.color.background_secondary'),
    callback: () => {
      if (this.orderDetail.order?.id) {
        HttpRequestApi.addGoods(this.orderDetail.order.id).then(() => {
          getMyCarUtil()
          this.pageStack.popToName('HomePage', 0)
        })
      } else {
        promptAction.showToast({ message: $r('app.string.order_not_exist') })
      }
    },
  },
  {
    text: $r('app.string.cancel'),
    color: $r('sys.color.font_secondary'),
    backgroundColor: $r('sys.color.background_secondary'),
    callback: (orderId: string) => {
      cancelOrderUtil(orderId).then((resp: number) => {
        let msg: Resource =
          resp === HttpCode.SUCCESS ? $r('app.string.cancel_success') : $r('app.string.cancel_failed')
        promptAction.showToast({ message: msg })
        if (resp !== 2) {
          this.getOrderInfo()
        }
      })
    },
  },
]
private finishedBtnList: Array<BtnType> = [
  {
    text: $r('app.string.one_more_order'),
    color: $r('sys.color.font_secondary'),
    backgroundColor: $r('sys.color.background_secondary'),
    callback: () => {
      this.pageStack.popToName('HomePage', 0)
    },
  },
]
avatar
文章
阅读
粉丝