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

相关推荐
SuperHeroWu710 小时前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
Georgewu10 小时前
【HarmonyOS】ArkUI-X 跨平台框架入门详解(一)
harmonyos
SuperHeroWu710 小时前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
Georgewu10 小时前
【HarmonyOS】ArkUI-X一套代码跑多端的跨平台方案概念详解
harmonyos
zhanshuo15 小时前
HarmonyOS NEXT 智能场景识别实战:让设备主动思考的关键技术揭秘
harmonyos
zhanshuo19 小时前
HarmonyOS分布式能力全解析:手机一放下,音箱自动响起!
harmonyos
zhanshuo19 小时前
基于HarmonyOS的智能灯光控制系统设计:从定时触发到动作联动全流程实战
harmonyos
weixin_5412999420 小时前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
Georgewu20 小时前
【HarmonyOS】元服务概念详解
harmonyos
Georgewu1 天前
【HarmonyOS】元服务入门详解 (一)
harmonyos