Harmonyos5应用开发实战——订单页面开发(part2)

3. 页面索引变化处理

当页面索引发生变化时,调用 chooseRefresh 函数,确保必要信息的选择提示正常显示。

typescript 复制代码
currentIndexChange() {
  if (this.currentIndex === TabBarType.HOMEPAGE) {
    this.chooseRefresh()
  }
}
4. 页面构建与组件使用

在页面构建过程中,使用了多个自定义组件,如 TitleCompContainerComp 等,并根据条件显示购物车、优惠活动等组件。

typescript 复制代码
build() {
  NavDestination() {
    Stack() {
      Column() {
        TitleComp()
        ContainerComp().layoutWeight(1)
      }
      .height(Constants.FULL_SIZE)
      .width(Constants.FULL_SIZE)
      .bindSheet($$this.tableSheetShow,
        CustomSelectSheetBuilder($r('app.string.pick_table'), this.tableList.map((item) => {
          return item.name ?? '';
        }), (select: ResourceStr) => {
          this.confirmTable(select);
        }), {
          height: 408,
          blurStyle: BlurStyle.Thick,
          showClose: false,
        });

      MyCarListComp({
        close: () => {
          this.showCarList = false
        },
      }).visibility(this.showCarList ? Visibility.Visible : Visibility.Hidden)
      // 购物车
      MyCarComp({ showCarList: this.showCarList })
        .visibility(this.myCar.res?.length ? Visibility.Visible : Visibility.Hidden)
      // 优惠活动
      ShopDiscountComp().visibility(this.showShopDiscount ? Visibility.Visible : Visibility.Hidden)

    }.alignContent(Alignment.Bottom)
    .bindSheet($$this.dinerSheetShow,
      CustomSelectSheetBuilder($r('app.string.pick_dinner_num'), $r('app.strarray.diner_num'),
        (select: ResourceStr) => {
          this.confirmDiner(select);
        }), {
        height: 408,
        blurStyle: BlurStyle.Thick,
        showClose: false,
      });
  }
  .hideTitleBar(true)
}
5. 选择桌号和用餐人数的确认处理

当用户选择桌号或用餐人数后,进行相应的信息更新和处理。

typescript 复制代码
confirmTable(select: ResourceStr) {
  if (select) {
    let table = this.tableList.find(item => item.name === select)
    this.tableId = table?.id ?? '';
    getTableInfoUtil(this.tableId).then((res) => {
      this.tableInfo = res;
    });
  }
  this.tableSheetShow = false
  if (!this.dinerNum) {
    this.dinerSheetShow = true
  }
}

confirmDiner(select: ResourceStr) {
  if (select) {
    this.dinerNum = select;
  } else {
    this.dinerNum = this.dinerNum || $r('app.string.diner_num_default');
  }
  this.dinerSheetShow = false
}

通过以上核心功能的实现,在HarmonyOS 5应用中成功开发了订单页面,为用户提供了便捷的商品选择和订单处理体验。

相关推荐
高心星5 小时前
HarmonyOS 5.0应用开发——MVVM模式的应用
harmonyos·mvvm·鸿蒙5.0·备忘录应用
别说我什么都不会5 小时前
【仓颉三方库】工具类—— compress4cj
harmonyos
别说我什么都不会5 小时前
【仓颉三方库】工具类—— uuid4cj
harmonyos
__Benco12 小时前
OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明
人工智能·harmonyos
NapleC1 天前
HarmonyOS:一多能力介绍:一次开发,多端部署
华为·harmonyos
我爱学习_zwj1 天前
【鸿蒙HarmonyOS】深入理解router与Navigation
华为·harmonyos
NapleC1 天前
HarmonyOS:1.7
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师1 天前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei