Harmonyos5应用开发实战——顶部组件的功能实现（part2）

3. 优惠券领取功能

initCoupons 方法会过滤出可领取的优惠券，并将其存储在 showCouponList 中。用户点击优惠券时，如果该优惠券未被领取，会调用 getLqCouponsUtil 方法领取优惠券，并更新优惠券列表。

initCoupons() {
  // 过滤可领取的优惠券 1.剩余数量大于0 2.类型为优惠券  3.适用范围店内、外卖和店内
  this.showCouponList = this.couponList?.filter(item => Number(item.stock) > 0 && item.type === Constants.COUPON &&
  [Constants.COUPON_TYPE_STORE, Constants.COUPON_TYPE_ALL].includes(item.couponsType)) ?? []
}

// 优惠券列表
ForEach(this.showCouponList, (item: CouponResp, index: number) => {
  ListItem() {
    if (Number(item.stock) > 0) {
      Column() {
        // 优惠券金额和名称
        Text() {
          Span($r('app.string.currency_symbol'))
            .fontColor($r('sys.color.font_on_primary'))
            .fontSize($r('sys.float.Caption_M'))
          Span(`${Number(item.reduce)}`)
            .fontColor($r('sys.color.font_on_primary'))
            .fontSize($r('sys.float.Subtitle_L'))
        }
        Text(item.name)
          .fontColor($r('sys.color.font_on_primary'))
          .fontSize(8)
          .margin({ top: 2 })
        Column() {
          // 领取按钮
          Text(item.state === Constants.COUPON_STATE_NOT_COLLECT ? $r('app.string.claim_now') :
          $r('app.string.collected'))
            .fontColor($r('sys.color.multi_color_09'))
            .fontSize($r('sys.float.Caption_S'))
            .opacity(item.state === Constants.COUPON_STATE_NOT_COLLECT ? 1 : 0.6)
            .backgroundColor(item.state === Constants.COUPON_STATE_NOT_COLLECT ? '#FFFFFF' : '#99FFFFFF')
            .margin({ top: 9 })
            .borderRadius(7)
            .padding({
              left: 6,
              right: 6,
              top: 2,
              bottom: 2,
            })
        }
      }
      .width(68)
      .backgroundImage($r(`app.media.coupon_${index % 4}`))
      .padding({ top: 4, bottom: 4 })
      .backgroundImageSize({ width: 68, height: 63 })
      .onClick(() => {
        if (item.state === Constants.COUPON_STATE_NOT_COLLECT) {
          getLqCouponsUtil(item.id).then(() => {
            promptAction.showToast({ message: $r('app.string.claiming_succeeded') })
            this.getCoupons()
          }).catch((e: string) => {
            let msg = e ?? $r('app.string.claiming_failed')
            promptAction.showToast({ message: msg })
          })
        }
      })
    }
  }
}, (item: string, index: number) => JSON.stringify(item))

4. 商品搜索功能

使用 Search 组件实现商品搜索功能，用户输入搜索关键字时，会根据关键字过滤商品列表。

Search({ value: $$this.searchText, placeholder: $r('app.string.search_goods') })
  .textFont({ size: $r('sys.float.Body_L') })
  .width(Constants.FULL_SIZE)
  .placeholderFont({ size: $r('sys.float.Body_L') })
  .maxLength(20)
  .onChange((value: string) => {
    if (value) {
      this.dishesList = this.dishesList.map((item) => {
        item.good = item.good.filter(i => i.name?.includes(value))
        return item
      })
    } else {
      this.dishesList = JSON.parse(JSON.stringify(this.dishesListOri))
    }
  })

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了一个功能丰富的顶部组件，为用户提供了良好的交互体验。##### 3. 订单操作按钮 根据订单状态显示不同的操作按钮，如待支付状态下显示支付、添加商品和取消订单按钮，已完成状态下显示删除订单和再次下单按钮，其他状态下显示联系商家按钮。

Row() {
  if (this.storeType === StoreType.PICK_NUM_TYPE && this.orderItem.order?.dnState === DnState.COMPLETED) {
    Text() {
      Span($r('app.string.pick_good_id'))
      Span(`${this.orderItem.order?.oid}`)
    }.fontSize($r('sys.float.Body_M')).fontColor($r('sys.color.font_primary'))
  }
  // 订单操作按钮
  Row({ space: 8 }) {
    if (this.orderItem.order?.dnState === DnState.TO_BE_PAID) {
      Text($r('app.string.pay'))
        .border({
          width: 1,
          color: $r('sys.color.multi_color_09'),
        })
        .height(28)
        .width(72)
        .fontSize($r('sys.float.Body_M'))
        .textAlign(TextAlign.Center)
        .fontColor($r('sys.color.multi_color_09'))
        .borderRadius(14)
        .onClick(() => {
          this.paySheetFlag = true
        })
        .bindSheet($$this.paySheetFlag, paySheetBuilder(Number(this.payMoney ?? 0), (flag: boolean) => {
          if (flag) {
            this.confirmOrder()
          }
          this.paySheetFlag = false
        }), {
          height: 397,
          blurStyle: BlurStyle.Thick,
          showClose: false,
        })
      Text($r('app.string.add_good'))
        .border({
          width: 1,
          color: $r('sys.color.multi_color_09'),
        })
        .height(28)
        .width(72)
        .fontSize($r('sys.float.Body_M'))
        .textAlign(TextAlign.Center)
        .fontColor($r('sys.color.multi_color_09'))
        .borderRadius(14)
        .onClick(() => {
          if (this.orderItem.order?.id) {
            HttpRequestApi.addGoods(this.orderItem.order.id).then((resp: number) => {
              if (resp === HttpCode.SUCCESS) {
                getMyCarUtil()
                this.pageStack.replacePathByName('HomePage', null)
              } else if (resp === HttpCode.STATUE_ERROR) {
                promptAction.showToast({ message: $r('app.string.order_statue_error') })
                this.getMyOrder()
              }
            })
          } else {
            promptAction.showToast({ message: $r('app.string.order_not_exist') })
          }
        })
      Text($r('app.string.cancel'))
        .border({
          width: 1,
          color: $r('sys.color.font_secondary'),
        })
        .height(28)
        .width(72)
        .fontSize($r('sys.float.Body_M'))
        .textAlign(TextAlign.Center)
        .fontColor($r('sys.color.font_secondary'))
        .borderRadius(14)
        .onClick(() => {
          cancelOrderUtil(this.orderItem.order?.id || '').then((resp: number) => {
            let msg: Resource = $r('app.string.cancel_success')
            if (resp === HttpCode.SUCCESS) {
              this.getMyOrder()
            } else if (resp === HttpCode.STATUE_ERROR) {
              promptAction.showToast({ message: $r('app.string.order_statue_error') })
              this.getMyOrder()
              return
            } else {
              msg = $r('app.string.cancel_failed')
            }
            promptAction.showToast({ message: msg })
          })
        })
    } else if (this.orderItem.order?.dnState === DnState.COMPLETED) {
      Text($r('app.string.delete_order'))
        .border({
          width: 1,
          color: $r('sys.color.font_secondary'),
        })
        .height(28)
        .width(72)
        .fontSize($r('sys.float.Body_M'))
        .textAlign(TextAlign.Center)
        .fontColor($r('sys.color.font_secondary'))
        .borderRadius(14)
        .onClick(() => {
          promptAction.showDialog({
            title: $r('app.string.delete_order'),
            message: $r('app.string.delete_confirm'),
            buttons: [
              {
                text: $r('app.string.cancel'),
                color: $r('sys.color.font_primary'),
              },
              {
                text: $r('app.string.confirm'),
                color: $r('sys.color.multi_color_09'),
              },
            ],
          }, (err, data) => {
            if (err) {
              console.error('showDialog err: ' + err);
              return;
            }
            if (data.index === 1) {
              if (this.orderItem.order?.id) {
                HttpRequestApi.deleteOrder(this.orderItem.order.id).then(() => {
                  this.getMyOrder()
                })
              } else {
                promptAction.showToast({ message: $r('app.string.order_not_exist') })
              }
            }
            console.info('showDialog success callback, click button: ' + data.index);
          });
        })
      Text($r('app.string.one_more_order'))
        .border({
          width: 1,
          color: $r('sys.color.multi_color_09'),
        })
        .height(28)
        .width(72)
        .fontSize($r('sys.float.Body_M'))
        .textAlign(TextAlign.Center)
        .fontColor($r('sys.color.multi_color_09'))
        .borderRadius(14)
        .onClick(() => {
          this.currentIndex = 0
        })
    } else {
      Text($r('app.string.contact_store'))
        .border({
          width: 1,
          color: $r('sys.color.multi_color_09'),
        })
        .height(28)
        .width(72)
        .fontSize($r('sys.float.Body_M'))
        .textAlign(TextAlign.Center)
        .fontColor($r('sys.color.multi_color_09'))
        .borderRadius(14)
        .onClick(() => {
          this.callTelSheet = true
        })
        .bindSheet($$this.callTelSheet, CallTelDialogBuilder(this.storeInfo.tel!, () => {
          this.callTelSheet = false
        }), {
          height: 309,
          blurStyle: BlurStyle.Thick,
          showClose: false,
        });
    }
  }.layoutWeight(1).justifyContent(FlexAlign.End)
}
.width(Constants.FULL_SIZE)
.margin({ top: 12 })
.justifyContent(FlexAlign.SpaceBetween)

4. 支付功能

点击支付按钮后，弹出支付面板，确认支付后调用华为支付接口进行支付。

confirmOrder() {
  // 拉华为支付
  HttpRequestApi.getHuaweiPayInfo(this.orderItem.order?.id ?? '').then((resp: number) => {
    if (resp === HttpCode.SUCCESS) {
      promptAction.showToast({ message: $r('app.string.pay_success') })
      this.getMyOrder()
    } else if (resp === HttpCode.STATUE_ERROR) {
      promptAction.showToast({ message: $r('app.string.order_statue_error') })
      this.getMyOrder()
    } else {
      promptAction.showToast({ message: $r('app.string.pay_failed') })
    }
  }).catch((e: BusinessError) => {
    console.error(`getHuaweiPayInfo error: ${JSON.stringify(e)}.`);
    promptAction.showToast({ message: $r('app.string.pay_failed_msg', JSON.stringify(e)) })
  })
}

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了订单卡片组件，为用户提供了便捷的订单管理体验。