HarmonyOS引导页登陆页以及tabbar的代码说明 登陆页2

代码：这里的prompt.showToast是弹出提示，@Extend(TextInput) 的功能是对TextInput做了公用的样式。isShowProgress是用来控制isShowProgress，出来一个等待效果
`

import prompt from ‘@ohos.promptAction’;
import router from ‘@ohos.router’;
import CommonConstants from ‘…/common/constants/CommonConstants’;
/**

• 样式TextInput
  /
  @Extend(TextInput)
  function inputStyle() {
  .placeholderColor($r{(}^{\prime }app.color.placeholde{r}_{c}olo{r}^{\prime })).height($r(‘app.float.login_input_height’))
  .fontSize($r{(}^{\prime }app.float.bi{g}_{t}ex{t}_{s}iz{e}^{\prime })).backgroundColor($r(‘app.color.background’))
  .width(CommonConstants.FULL_PARENT)
  .padding({ left: CommonConstants.INPUT_PADDING_LEFT })
  .margin({ top: $r(‘app.float.input_margin_top’) })
  }
  /*
• 样式
  */
  @Extend(Line)
  function lineStyle() {
  .width(CommonConstants.FULL_PARENT)
  .height($r{(}^{\prime }app.float.lin{e}_{h}eigh{t}^{\prime })).backgroundColor($r(‘app.color.line_color’))
  }

@Extend(Text)
function blueTextStyle() {
.fontColor($r{(}^{\prime }app.color.logi{n}_{b}lu{e}_{t}ex{t}_{c}olo{r}^{\prime })).fontSize($r(‘app.float.small_text_size’))
.fontWeight(FontWeight.Medium)
}

/**

• 登陆界面
  */
  @Entry
  @Component
  struct LoginPage {
  @State account: string = ‘’;
  @State password: string = ‘’;
  @State isShowProgress: boolean = false;
  private timeOutId: number = -1;

@Builder
imageButton(src: Resource) {
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image(src)
}
.height($r{(}^{\prime }app.float.othe{r}_{l}ogi{n}_{i}mag{e}_{s}iz{e}^{\prime })).width($r(‘app.float.other_login_image_size’))
.backgroundColor($r(‘app.color.background’))
}

login(): void {
if (this.account === ‘’ || this.password === ‘’) {
prompt.showToast({
message: ‘输入帐号密码不能为空’
})
} else {
this.isShowProgress = true;
if (this.timeOutId === -1) {
this.timeOutId = setTimeout(() => {
this.isShowProgress = false;
this.timeOutId = -1;
router.pushUrl({ url: ‘pages/MainPage’ });
}, CommonConstants.LOGIN_DELAY_TIME);
}
}
}

aboutToDisappear() {
clearTimeout(this.timeOutId);
this.timeOutId = -1;
}

build() {
Column() {
Image($r{(}^{\prime }app.media.im{g}^{\prime })).width($r(‘app.float.logo_image_size’))
.height($r(‘app.float.logo_image_size’))
.margin({ top: $r(‘app.float.logo_margin_top’), bottom: KaTeX parse error: Expected 'EOF', got '}' at position 35: …argin_bottom') }?) Text(r(‘app.string.login_page’))
.fontSize($r{(}^{\prime }app.float.pag{e}_{t}itl{e}_{t}ex{t}_{s}iz{e}^{\prime })).fontWeight(FontWeight.Medium).fontColor($r(‘app.color.title_text_color’))
Text($r{(}^{\prime }app.string.logi{n}_{m}or{e}^{\prime })).fontSize($r(‘app.float.normal_text_size’))
.fontColor($r(‘app.color.login_more_text_color’))
.margin({ bottom: $r(‘app.float.login_more_margin_bottom’), top: $r(‘app.float.login_more_margin_top’) })

  TextInput({ placeholder: $r('app.string.account') })
    .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
    .type(InputType.Number)
    .inputStyle()
    .onChange((value: string) => {
      this.account = value;
    })
  Line().lineStyle()

  TextInput({ placeholder: $r('app.string.password') })
    .maxLength(CommonConstants.INPUT_PASSWORD_LENGTH)
    .type(InputType.Password)
    .inputStyle()
    .onChange((value: string) => {
      this.password = value;
    })
  Line().lineStyle()

  Row() {
    Text($r('app.string.message_login')).blueTextStyle()
    Text($r('app.string.forgot_password')).blueTextStyle()
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .width(CommonConstants.FULL_PARENT)
  .margin({ top: $r('app.float.forgot_margin_top') })

  Button($r('app.string.login'), { type: ButtonType.Capsule })
    .width(CommonConstants.BUTTON_WIDTH)
    .height($r('app.float.login_button_height'))
    .fontSize($r('app.float.normal_text_size'))
    .fontWeight(FontWeight.Medium)
    .backgroundColor($r('app.color.login_button_color'))
    .margin({ top: $r('app.float.login_button_margin_top'), bottom: $r('app.float.login_button_margin_bottom') })
    .onClick(() => {
      this.login();
    })
  Text($r('app.string.register_account'))
    .fontColor($r('app.color.login_blue_text_color'))
    .fontSize($r('app.float.normal_text_size'))
    .fontWeight(FontWeight.Medium)

  if (this.isShowProgress) {
    LoadingProgress()
      .color($r('app.color.loading_color'))
      .width($r('app.float.login_progress_size'))
      .height($r('app.float.login_progress_size'))
      .margin({ top: $r('app.float.login_progress_margin_top') })
  }

  Blank()
  Text($r('app.string.other_login_method'))
    .fontColor($r('app.color.other_login_text_color'))
    .fontSize($r('app.float.little_text_size'))
    .fontWeight(FontWeight.Medium)
    .margin({ top: $r('app.float.other_login_margin_top'), bottom: $r('app.float.other_login_margin_bottom') })
  Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {
    this.imageButton($r('app.media.login_method1'))
    this.imageButton($r('app.media.login_method2'))
    this.imageButton($r('app.media.login_method3'))
  }
}
.backgroundColor($r('app.color.background'))
.height(CommonConstants.FULL_PARENT)
.width(CommonConstants.FULL_PARENT)
.padding({
  left: $r('app.float.page_padding_hor'),
  right: $r('app.float.page_padding_hor'),
  bottom: $r('app.float.login_page_padding_bottom')
})

}
}`