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

相关推荐
小喷友4 小时前
第4章 数据与存储
前端·app·harmonyos
小小小小小星21 小时前
鸿蒙开发核心功能模块全解析:从架构到实战应用
harmonyos
奶糖不太甜21 小时前
鸿蒙开发问题之纯血鸿蒙自启动步骤详解
harmonyos
xq95271 天前
鸿蒙next 获取versionCode和versionName
harmonyos
鸿蒙小白龙1 天前
openharmony之恢复出厂设置需求总结
harmonyos·鸿蒙·鸿蒙系统
深海的鲸同学 luvi1 天前
【HarmonyOS】H5 实现在浏览器中正常跳转 AppLinking 至应用
华为·harmonyos
zhanshuo2 天前
HarmonyOS 实战:学会在鸿蒙中使用第三方 JavaScript 库(附完整 Demo)
harmonyos
zhanshuo2 天前
鸿蒙应用权限处理全攻略:从配置到相机拍照,一篇文章讲透
harmonyos
AlbertZein2 天前
HarmonyOS5 凭什么学鸿蒙—— GetContext
架构·harmonyos
森之鸟2 天前
flutter项目适配鸿蒙
flutter·华为·harmonyos