Harmonyos5应用开发实战——餐饮订单确认页实现（part2）

3. 用户交互处理

支持用户选择订单类型（堂食或打包）、餐桌、用餐人数和备注等信息，并根据用户选择更新订单信息。

Row() {
  Image($r('app.media.store_dining')).width(40)
  Column() {
    Text($r('app.string.store_dining'))
      .fontSize($r('sys.float.Body_M'))
      .fontWeight(FontWeight.Medium)
      .fontColor($r('sys.color.font_primary'))
      .lineHeight(16)
    Text($r('app.string.store_dining_desc'))
      .fontSize($r('sys.float.Caption_M'))
      .fontColor($r('sys.color.font_secondary'))
      .lineHeight(12)
      .margin({ top: 4 })
  }.margin({ left: 8 }).alignItems(HorizontalAlign.Start)
}
.width(150)
.height(64)
.padding(12)
.borderWidth(1)
.borderRadius(12)
.borderColor(this.orderType === OrderTypeEnum.STORE_DINING ? $r('app.color.mainColor') : '#CCCCCC')
.backgroundColor(this.orderType === OrderTypeEnum.STORE_DINING ? '#0DED6F21' : '#ffffff')
.onClick(() => {
  if (this.orderType !== OrderTypeEnum.STORE_DINING) {
    this.orderType = OrderTypeEnum.STORE_DINING
    let boxMoney = this.myCar?.boxMoney ?? 0
    this.totalMoney = new Decimal(this.totalMoney).sub(boxMoney).toNumber()
  }
})

此代码实现了订单类型选择的交互，当用户点击堂食选项时，会更新订单类型并重新计算实付金额。

4. 优惠券选择

用户可以点击选择优惠券，选择后会更新订单总金额。

Row() {
  Row() {
    Image($r('app.media.vouchers')).width(16)
    Text($r('app.string.coupon_label'))
      .fontSize($r('sys.float.Body_M'))
      .fontColor($r('sys.color.font_primary'))
      .lineHeight(20)
      .margin({ left: 8 })
  }

  Row() {
    if (!this.selectCouponMoney || this.selectCouponMoney === '0') {
      Text($r('app.string.select_coupon'))
        .fontSize($r('sys.float.Body_S'))
        .fontColor($r('sys.color.font_secondary'))
    } else {
      Text() {
        Span($r('app.string.currency_symbol_pre_params', '-'))
          .fontSize(8)
          .fontWeight(FontWeight.Medium)
          .lineHeight(14)
        Span(`${Number(this.selectCouponMoney)}`)
          .fontSize($r('sys.float.Body_M'))
          .fontWeight(FontWeight.Medium)
          .lineHeight(20)
      }.fontColor('#E84026')
    }
    Image($r('app.media.right')).width(16)
  }.onClick(() => {
    this.pageStack.pushPath({
      name: 'SelectCouponPage',
      param: { totalMoney: (this.myCar.money ?? 0), selectId: this.selectCouponId } as CouponRouter,
      onPop: (popInfo: PopInfo) => {
        // 先还原总价格后再减去优惠券金额
        this.totalMoney = new Decimal(this.totalMoney).add(this.selectCouponMoney).toNumber()
        let result = popInfo.result as CouponRouter
        this.selectCouponId = result.selectId
        this.selectCouponMoney = result.reduce
        this.totalMoney = new Decimal(this.totalMoney).sub(this.selectCouponMoney).toNumber()
      },
    })
  })
}

代码实现了优惠券选择的交互，点击后跳转到优惠券选择页面，选择完成返回时更新订单总金额。

5. 下单操作

用户点击提交订单按钮后，会进行一系列校验，若校验通过则调用下单接口完成订单创建。

Button($r('app.string.commit_order'))
  .fontSize($r('sys.float.Body_L'))
  .fontWeight(700)
  .fontColor($r('sys.color.comp_background_list_card'))
  .padding({
    left: 21,
    right: 21,
    top: 8,
    bottom: 8,
  })
  .margin({ left: 16 })
  .backgroundColor($r('sys.color.multi_color_09'))
  .onClick(() => {
    if (this.storeType === StoreType.SCAN_TYPE) {
      if (!this.tableId) {
        this.tableSheetShow = true
        return
      }
    }
    if (!this.dinerNum) {
      this.dinerSheetShow = true
      return
    }
    this.paySheetFlag = true
  })
  .bindSheet($$this.paySheetFlag, paySheetBuilder(this.totalMoney, (flag: boolean) => {
    if (flag) {
      this.confirmOrder()
    }
    this.paySheetFlag = false
  }), {
    height: 397,
    blurStyle: BlurStyle.Thick,
    showClose: false,
  })

该代码段展示了提交订单按钮的交互逻辑，先进行餐桌和用餐人数的校验，若通过则弹出支付确认框，确认后调用confirmOrder方法完成下单。