Login.ets

使用@Entry、@Component结构

使用Column、Image、Text、TextInput、Button等UI组件

数据绑定与状态管理：定义user、pass两个变量用于存储用户手机号和密码

生命周期方法：aboutToAppear()：预留用于自动跳转到个人中心

每个TextInput都绑定onChange事件，更新user和password

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

接受注册页面传入的手机号(this.params['user'])

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

// 登录页面
@Entry
@Component
struct Login {
  // router.getParams()用于获取上一个页面传递过来的参数
  // as string[]表示将返回的结果强制转换为字符串数组类型
  params: string[] = router.getParams() as string[]
  // 如果params是有值的，就可以把this.params['user']的信息赋值给user，如果没有就为空
  user: string = this.params ? this.params['user'] : ''
  pass: string = ''

  // 第二步：接收登录页面传递的参数
  aboutToAppear() {
   // todo：如果用户一登录，则应该进入用户个人中心页面
  }

  build() {
    Column() {
      // 图片
      Image($r('app.media.img'))
        .width(100)
        .height(100)
        .margin({ top: 150 })
      // 文本Text
      Text('千锋影票')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor('#e92f4f')
        .margin({ top: 20 })

      // 两个文本输入框TextInput
      TextInput({ placeholder: '请输入手机号', text: this.user })
        .width('80%')
        .margin({ top: 20 })
        .onChange((value) => {
          //修改手机号变量信息
          this.user = value
        })

      TextInput({ placeholder: '请输入密码' })
        .width('80%')
        .margin({ top: 20 })
        .type(InputType.Password)
        .onChange((value) => {
          //修改密码变量信息
          this.pass = value
        })

      // 用户登录按钮button
      Button('用户登录')
        .width('80%')
        .backgroundColor('#e92f4f')
        .margin({ top: 20 })
        .onClick(() => {
          // todo:收集到user、pass的变量值，提交给服务端，进行用户账号注册

          //  登录成功,需要直接跳转到个人中心Index页面，让用户继续登录
          router.pushUrl({
            url: 'pages/Index'
          })

          //   登录失败，toast弹窗
          promptAction.showToast({
            message: '用户登录失败'
          })
        })


      // 文本Text
      Text('用户注册')
        .margin({ top: 10 })
        .fontColor('#e92f4f')
        .onClick(() => {
          // 点击之后，应用界面需要跳转到注册页面
          router.pushUrl({
            url: 'pages/knowledge/001-Reg'
          })
        })
    }.width('100%')
    .height('100%')
  }
}