实现预约会见应用鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例是对标预约会见类产品，以此开发的行业通用Demo，实现基础的注册、登录、一二级页面布局参考等功能，工程以feature方式进行模块化设计。本示例是使用ArkTS编写的预约会见类产品UI页面，方便开发者后续进行进一步开发。

实现预约会见应用源码链接

效果预览

使用说明

打开应用后，用户可以根据需求查看应用。开发者可以根据此示例后续进行进一步开发。

实现思路

1. 进入页面后进入登陆注册页面，如果没有注册会提醒用户注册。

if (!this.checkPhoneRegistrationFlag) {
  AlertDialog.show(
    {
      title: '温馨提示',
      subtitle: '',
      message: '您的手机号码' + this.accountName + '还未注册,是否现在就注册？',
      autoCancel: true,
      alignment: DialogAlignment.Center,
      gridCount: 4,
      showInSubWindow: true,
      isModal: true,
      offset: { dx: 0, dy: -20 },
      buttonDirection: DialogButtonDirection.HORIZONTAL,
      ...
    }
  )
}

2. 页面下方提供Tab栏优化页面跳转。

Tabs({
  barPosition: BarPosition.End,
  index: this.currentIndex
}) {
  TabContent() {
    PublicNoticePage();
  }
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  .tabBar(this.TabBarBuilder(this.tabBarsInfo.getTabList()[0], 0))
  ...
}
.vertical(false)
.onChange((index: number) => {
  this.currentIndex = index;
})
.barHeight($r('app.float.bar_height'))
.barWidth(CommonConstants.FULL_PERCENT)
.scrollable(false)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
.clip(false)

3. 后续具体使用可在应用中自行查看。