Harmonyos5应用开发实战——优惠券选择页面开发（part2）

3. 标签页构建

使用 Tabs 组件创建两个标签页，分别显示可用和不可用的优惠券。每个标签页使用 List 组件展示优惠券列表。

Tabs({ index: this.currentIndex }) {
  TabContent() {
    List({ space: 8 }) {
      ForEach(this.myCouponsUsable, (item: MyCouponResp) => {
        ListItem() {
          CouponCard({
            coupon: item,
            isOrder: true,
            selectId: this.selectId,
            totalMoney: this.totalMoney,
            selectCoupon: (coupon: MyCouponResp) => {
              this.selectCoupon(coupon)
            },
          })
        }
      }, (item: MyCouponResp) => JSON.stringify(item))
    }.listStyle().scrollBar(BarState.Off)
  }.tabBar(this.tabBuilder(0, $r('app.string.can_use')))

  TabContent() {
    List({ space: 8 }) {
      ForEach(this.myCouponsUnUsable, (item: MyCouponResp) => {
        ListItem() {
          CouponCard({ coupon: item, isOrder: true, totalMoney: this.totalMoney })
        }
      }, (item: MyCouponResp) => JSON.stringify(item))
    }.listStyle().scrollBar(BarState.Off)
  }.tabBar(this.tabBuilder(1, $r('app.string.can_not_use')))
}

4. 优惠券选择与确认

当用户选择可用优惠券时，调用 selectCoupon 方法更新已选择的优惠券ID和优惠金额。点击确认按钮时，将选择的优惠券信息通过 pageStack.pop 方法返回。

selectCoupon(coupon: MyCouponResp) {
  this.selectId = coupon.couponId
  this.selectCouponMoney = coupon.reduce
}

// 确认按钮点击事件
Button($r('app.string.confirm'))
  .fontColor($r('sys.color.comp_background_list_card'))
  .fontSize($r('sys.float.Body_L'))
  .fontWeight(700)
  .height(32)
  .backgroundColor($r('sys.color.multi_color_09'))
  .padding({
    top: 8,
    left: 32,
    right: 32,
    bottom: 8,
  })
  .margin({ left: 12 })
  .onClick(() => {
    this.pageStack.pop({ selectId: this.selectId, reduce: this.selectCouponMoney })
  })

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了优惠券选择页面，为用户提供了便捷的优惠券选择体验。