《仿盒马》app开发技术分享-- 用户登陆页面（静态）（20）

技术栈

Appgallery connect

开发准备

上一节我们实现了个人中心页面的静态展示，项目进行到这里呢，我们也是时候添加用户相关的内容了， 因为到了后期，我们的数据都是跟用户绑定的，各个用户之间的数据并不互通，现在为了实现我们的用户绑定制度，我们需要给应用添加一个用户登陆的入口的。

功能分析

用户登陆页面的内容相对来说比较简单，我们首先要实现的就是登陆页的静态页面，需要展示的内容不多，包括logo，账号密码的输入框，登陆按钮，请求状态等，之后我们会在页面中添加相应的业务逻辑使他更丰富一些

代码实现 import promptAction from '@ohos.promptAction';

@Entry @Component struct LoginPage { @State userId:string='' aboutToAppear(){ } @State message: string = 'login page' @State acc:string = '' @State psw:string = '' @State isShowProgress: boolean = true;

controller: TextInputController = new TextInputController()

login():void{ if (this.acc===''&&this.psw==='') { promptAction.showToast({message:"请输入账号或密码"}) return }else {

  this.isShowProgress=false

}

}

@Builder imageButton(src:String){ Button({type:ButtonType.Circle,stateEffect:true}){ Image(src.toString()) .height(20) .width(20) } .height(50) .width(50) }

build() { Row() { Column() {

    Image($r('app.media.logo'))
      .width(120).height(120).borderRadius(60)
    Text("登陆界面")
      .width(80)
      .fontSize(14)
      .fontColor("#333333")
      .margin({top:40})
      .fontWeight(FontWeight.Medium)

    TextInput({text:"15290959515",
      placeholder: '请输入账号'
    })
      .backgroundColor("#f6f6f6")
      .placeholderColor("#ff999595")
      .fontColor("#333333")
      .maxLength(11)
      .type(InputType.Number)
      .onChange((value: String) => {
        this.acc = value.toString()
      }).margin(20)

    TextInput({text:"123456",
      placeholder: '请输入密码'
    })
      .backgroundColor("#f6f6f6")
      .placeholderColor("#ff999595")
      .fontColor("#333333")
      .type(InputType.Password)
      .onChange((value: String) => {
        this.psw = value.toString()
      }).margin(20)



    Row() {
      Text('注册')
        .fontColor(Color.Blue)
        .fontSize(14)
        .margin(30)

      Text('忘记密码')
        .fontColor(Color.Blue)
        .fontSize(14)
        .margin(30)

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


    if (this.isShowProgress) {
      LoadingProgress()
        .width(60)
        .height(60)
        .backgroundColor(Color.Pink)
        .margin({ top: $r('app.float.login_progress_margin_top') })
    }
    Button('login',{type:ButtonType.Capsule,stateEffect:false})
      .onClick(()=>{
        this.isShowProgress=true

        this.login()

      })
      .fontColor(Color.White)
      .width('80%')
      .height(40)
      .margin(40)
      .backgroundColor(0xff0000)

    Blank()
    .margin(30)
  }
  .width('100%')}
.height('100%')
.backgroundColor('#FFFFFF')
.justifyContent(FlexAlign.Center)

} }

到这里我们的静态页面就实现完成了