HarmonyOS应用开发实战：基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0（Next）】

import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
@Entry
@Component
struct Login {
  @State message: string = 'Hello World'

  private userName: string = ''
  private password: string = ''

  @State loadingWidth: number = 0

  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width(100)
          .height(100)
        Text('登陆界面')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .margin(15)
        Text('登录找以使用更多服务')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor("#a0a0a0")
        Column(){
          TextInput({placeholder: '账号'})
            .maxLength(10)
            .margin({bottom: 20})
            .onChange((value: string) => {
              this.userName = value
            })
          TextInput({placeholder: '密码'})
            .type(InputType.Password)
            .maxLength(10)
            .margin({bottom: 20})
            .onChange((value: string) => {
              this.password = value
            })
          Row(){
            Text('短信验证登录')
              .fontColor("#007dff")
            Text('忘记密码')
              .fontColor("#007dff")
          }.justifyContent(FlexAlign.SpaceBetween).width("100%")
          Button('登录')
            .width('100%')
            .margin({top: 70})
            .onClick(() => {
              if(this.userName.trim() == '') {
                promptAction.showToast({
                  message: '账户不能为空！',
                  duration: 2000
                })
                return
              }

              if(this.password.trim() == '') {
                promptAction.showToast({
                  message: '密码不能为空！',
                  duration: 2000
                })
                return
              }
              this.loadingWidth = 60
              setTimeout(() => {
                if(this.userName.trim() === 'admin' && this.password.trim() === '123456'){
                  router.replaceUrl({
                    url: "pages/Index"
                  })
                }else {
                  promptAction.showToast({
                    message: '账户或密码错误',
                    duration: 2000
                  })
                }
                this.loadingWidth = 0
              },2000)

            })
          Text('注册账号')
            .fontColor('#258ffe')
            .margin(15)
          LoadingProgress()
            .color('#007dfe')
            .height(this.loadingWidth)
            .width(this.loadingWidth)
          Text('其他方式登录')
            .fontColor('#a0a0a0')
            .fontWeight(FontWeight.Bold)
            .fontSize(13)
            .margin({top: 10})
          Row(){
            Button('方式一', {type: ButtonType.Circle})
              .height(65)
              .backgroundColor('#efefef')
              .fontColor('#000000')
              .border({
                width: 1
              })
            Button('方式二', {type: ButtonType.Circle})
              .height(65)
              .backgroundColor('#efefef')
              .fontColor('#000000')
              .border({
                width: 1
              })
            Button('方式三', {type: ButtonType.Circle})
              .height(65)
              .backgroundColor('#efefef')
              .fontColor('#000000')
              .border({
                width: 1
              })
          }.justifyContent(FlexAlign.SpaceAround)
          .width('100%')
          .margin({top: 15})
        }.width("90%").margin({top: 30})
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#efefef')
  }
}