Harmonyos5应用开发实战——优惠券卡片组件的实现（part2）

3. 用户交互处理

组件支持用户选择优惠券和查看使用说明。

if (this.isOrder) {
  if (Number(this.coupon.full) <= this.totalMoney) {
    Radio({ value: '', group: 'radioGroup' })
      .checked(this.selectId === this.coupon.couponId)
      .radioStyle({
        checkedBackgroundColor: $r('sys.color.multi_color_09'),
      })
      .height(20)
      .width(20)
      .onChange(() => {
        this.selectCoupon(this.coupon)
      })
  }
} else {
  Column() {
    Text($r('app.string.use_now'))
      .fontSize($r('sys.float.Body_M'))
      .fontColor($r('sys.color.multi_color_09'))
      .borderRadius(8)
      .backgroundColor('rgba(237,111,33,0.2) ')
      .padding({
        left: 8,
        right: 8,
        top: 4,
        bottom: 4,
      })
      .onClick(() => {
        this.pageStack.popToName('HomePage', TabBarType.HOMEPAGE)
      })
  }.margin({ top: 8, right: 8 })
}

Row() {
  Text($r('app.string.instruction'))
    .fontColor($r('sys.color.font_secondary'))
    .fontSize($r('sys.float.Caption_M'))
  Image(this.showInstruction ? $r('app.media.ic_up') : $r('app.media.ic_down'))
    .width(12)
    .margin({ left: 4 })
}.margin({ top: 8 })
.onClick(() => {
  this.showInstruction = !this.showInstruction
})

当处于订单场景且满足使用门槛时，用户可以通过单选框选择优惠券；在非订单场景下，用户可以点击“立即使用”按钮返回首页。同时，用户还可以点击“使用说明”来展开或收起优惠券的使用说明。

4. 状态展示

组件会根据优惠券的使用状态和可用性展示不同的图标和样式。

if (this.coupon.state === CouponStateEnum.USED) {
  Image($r('app.media.ic_coupon_used')).width(60)
} else if (new Date(this.coupon.endTime).getTime() < new Date().getTime()) {
  Image($r('app.media.ic_coupon_expired')).width(60)
}

.opacity((!this.isOrder && this.canUseCoupon()) ||
  (this.isOrder && this.canUseCoupon() && Number(this.coupon.full) <= this.totalMoney) ? 1 : 0.4)
.backgroundImage(this.canUseCoupon() ? $r('app.media.bg_coupon') : $r('app.media.bg_coupon_unusable'))

如果优惠券已使用或已过期，会显示相应的图标；同时，根据优惠券的可用性设置不同的透明度和背景图片，以直观地展示优惠券的状态。