简单登录页

import router from '@ohos.router'
import Prompt from '@system.prompt'
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Login {
  @State message: string = '欢迎登录'
  @State user: string = ''
  @State password: string = ''

  @State otherData:Array<string> = [
    '微信','QQ','手机'
  ]

  build() {
    Row() {
      Column() {
        Image($r('app.media.app_icon')).width(80).height(80)

        Text(this.message).fontSize(30).fontWeight(FontWeight.Bold).margin(20)

        TextInput({placeholder:"请输入用户名"})
          .inputStyle()
          .onChange((value)=> {
              this.user = value
        })

        TextInput({placeholder:"请输入密码"})
          .type(InputType.Password)
          .inputStyle()
          .onChange(value => {
            this.password = value
        })

        Row(){
          Text('短信验证码登录').fontSize(18).fontColor('#007dee')
          Text('忘记密码').fontSize(18).fontColor('#007dee')
        }.width('100%').justifyContent(FlexAlign.SpaceBetween).margin(20)


        Button('登录',{
          type:ButtonType.Capsule
        }).width('90%').onClick(() => {

          if(this.user == '' || this.password  ==''){
            promptAction.showToast({
              message:'用户名或密码不能为空',
              duration:3000
            })
          }else {
            //登录逻辑
            router.replaceUrl({
              url:"pages/Index"
            })
          }

        })

        Row(){
          Text('其他登录方式').fontSize(18).fontColor('#007dee')
        }.margin(20)


        Row(){

          ForEach(this.otherData,(item:string,index:number)=>{
            Button(item,{
              type:ButtonType.Circle
            }).btnStyle().onClick(() => {
              //登录逻辑
              console.log(item)
            })
          },(item:string) => JSON.stringify(item))

        }.justifyContent(FlexAlign.SpaceBetween).width('100%')

      }
      .width('100%').padding(20)
    }
    .height('100%')
  }
}


@Extend(TextInput) function inputStyle(){
  .placeholderColor('#999').maxLength(10).padding(12).margin(10)
}

@Extend(Button) function btnStyle(){
  .width(80).height(80)
}