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应用中成功开发了订单页面,为用户提供了便捷的商品选择和订单处理体验。

相关推荐
No Silver Bullet1 小时前
HarmonyOS NEXT开发进阶(十四):HarmonyOS应用开发者基础认证试题集汇总及答案解析
华为·harmonyos
鸿蒙布道师11 小时前
鸿蒙NEXT开发Base64工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
The 旺12 小时前
《HarmonyOS Next开发实战:从零构建响应式Todo应用的基石》
华为·harmonyos
Industio_触觉智能13 小时前
鸿蒙北向开发OpenHarmony5.0 DevEco Studio开发工具安装与配置
harmonyos·鸿蒙系统·openharmony·开源鸿蒙·鸿蒙开发·嵌入式开发板
秋叶先生_17 小时前
HarmonyOS NEXT——【鸿蒙监听网络状态变化】
华为·harmonyos·鸿蒙
东林知识库17 小时前
鸿蒙NEXT小游戏开发:围住神经猫
harmonyos
zacksleo18 小时前
鸿蒙Flutter开发故事:不,你不需要鸿蒙化
flutter·harmonyos
别说我什么都不会19 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起sts end请求
物联网·嵌入式·harmonyos
悬空八只脚1 天前
React-Native开发鸿蒙NEXT-本地与沙盒加载bundle
harmonyos
鸿蒙布道师1 天前
鸿蒙NEXT开发日志工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei