reg.ets

使用@Entry、@Component结构

使用Column、Navigation(导航组件)、Text、TextInput、Button等UI组件

数据绑定与状态管理：定义user、code、password、nickname等四个变量用于存储用户输入信息

生命周期方法：aboutToAppear()：用于判断用户是否登录

每个TextInput都绑定onChange事件，将用户输入保存到对应的变量中

完成相应的页面跳转，并把成功失败信息用 toast 提示

向登录页面传递注册成功的手机号(params:{user:this.user})

import { promptAction, router, } from '@kit.ArkUI'

// 注册页面
@Entry
@Component
struct Register {
  user: string = '' // 存放手机号
  code: string = '' // 存放校验码
  password: string = '' //存放密码
  nickName: string = '' //存放用户昵称


  aboutToAppear(): void {
    //todo； 当前函数可以用于判断用户是否登录，未登录用户允许注册，登录用户跳转到个人中心

  }

  build() {
    Column() {
      // 导航栏
      Navigation()
        .title('用户注册')
        .height(50)
        .titleMode(NavigationTitleMode.Mini)
        .foregroundColor(Color.Red)// 修改标题颜色为红色
        .onClick(() => {
          // 需要跳转回上一页/也可以具体指定跳转到登录页面
          router.back({
            url: 'pages/knowledge/002-Login'
          })
        })

      // 一个文本Text
      Text('用户注册')
        .fontColor('#e92f4f')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 150 })

      // 放置4个文本输入框*获取按钮
      Row() {
        TextInput({ placeholder: '请输入手机号' })// .width('80%')
          .layoutWeight(1)
          .padding(10)// onChange事件，当文本输入框内容发生改变时，将输入框内容保存到user变量中
          .onChange((value) => {
            this.user = value
          })
        Button('获取').backgroundColor('#e92f4f').onClick(() => {
          //   todo:需要获取到this.user手机号，把这个手机号交给服务端，让服务端发送一个手机号对应的校验码给手机
        })
      }.width('80%').justifyContent(FlexAlign.SpaceBetween).margin({ top: 30 })

      TextInput({ placeholder: '请输入校验码' })
        .width('80%')
        .margin({ top: 20 })
        .onChange((value) => {
          this.code = value
        })

      TextInput({ placeholder: '请输入密码' })
        .width('80%')
        .margin({ top: 20 })
        .type(InputType.Password)
        .onChange((value) => {
          this.password = value
        })

      TextInput({ placeholder: '请输入用户昵称' })
        .width('80%')
        .margin({ top: 20 })
        .onChange((value) => {
          this.nickName = value
        })
      // 用户注册+按钮
      Button('用户注册')
        .backgroundColor('#e92f4f')
        .width('80%')
        .margin({ top: 20 })
        .onClick(() => {
          // 点击按钮之后，显示一个toast弹窗(页面底部)，去告知用户注册失败
          promptAction.showToast({
            message: '注册失败',
            duration: 2000, //弹窗需要显示多少时间
          })
          // 给按钮赋予一个点击事件，收集手机号-user变量、校验码、用户密码、用户昵称，并打印出来
          // todo：提交给服务端，进行用户注册
          console.log('用户注册按钮点击时-user变量的值=' + this.user)
          console.log('code=' + this.code)
          console.log('password=' + this.password)
          console.log('nickName=' + this.nickName)

          //   根据注册的结果，如果成功跳转到登录页面，todo：需要能告知登录页面(刚注册成功的账号)
          router.pushUrl({
            url: 'pages/knowledge/002-Login',
            // 第一步：传递的参数，要去登录页面中接收
            params:{user:this.user}
          })
          promptAction.showToast({
            // 失败则toast弹窗提示用户注册失败
            message: '注册失败'
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}