鸿蒙实现登录后页面跳转

1、在实现实验二中登录界面的基础上，添加一个新页面；

2、点击“登录”按钮后跳转到新页面，并将登录结果作为参数传递到新页面；

3、如果登录成功，在新页面上显示欢迎语；

4、如果登录失败，在新页面上显示“登录失败，无操作权限”。

Index.ets
import router from '@ohos.router';
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct LoginPage {
  @State password: string = ''
  @State username: string = ''

  build() {

    Column() {
      Image($r("app.media.panada"))
        .width(100) // 设置图片宽度
        .height(100) // 设置图片高度
        .margin({
          bottom: 60 // 设置图片下方的外边距
        })
      Row() {
        Text("用户名")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Row() {
        Image($r("app.media.login")).width(30)

        TextInput({
          placeholder: "请输入用户名"
        }).width(200).onChange((val: string) => {
          this.username = val

        })
      }.margin({
        bottom: 8,
        top: 8
      }).width("100%")

      Divider().strokeWidth(4)

      Row() {
        Text("密码")
          .fontSize(18)
          .fontWeight(FontWeight.Bold).margin({
          bottom: 8,
          top: 8
        })
      }.width("100%")

      Row() {
        Image($r("app.media.pwd")).width(30)

        TextInput({
          placeholder: "请输入密码"
        }).width(200).onChange((val: string) => {
          this.password = val


        }).type(InputType.Password)
      }.width("100%")

      Divider().strokeWidth(4)
      Row() {
        Blank()
        Text("忘记密码？")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Button("登录").width("90%").height(60).backgroundColor(Color.Blue).onClick(() => {
        if (this.username == "admin" && this.password == "123456") {
          promptAction.showToast({
            message: "输入正确！"
          });
          // 假设您有一个用于页面导航的函数，这里用 router.pushUrl 作为示例
          router.pushUrl({
            url: "pages/Second",
            params: { // 传递参数到新页面
              loginResult: "登录成功！欢迎！"
            }
          });
        } else {
          promptAction.showToast({
            message: "输入错误，请重新输入！"
          });
          // 如果需要，也可以导航到同一个页面或另一个错误页面，并传递登录失败的信息
          router.pushUrl({
            url: "pages/Second", // 或者另一个错误页面
            params: {
              loginResult: "登录失败，无操作权限。"
            }
          });
        }
      });

      Text("第三方登录")
        .fontSize(18).margin({
        bottom: 40,
        top: 60
      })

      Row({ space: 8 }) {
        Image($r("app.media.qq")).width(60)
        Image($r("app.media.wechat")).width(60)

      }

      Text("立即注册")
        .fontSize(18).margin({
        top: 20,
      })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: 20,
      right: 20
    })
  }
}

Second.ets
import router from '@ohos.router';

@Entry
@Component
struct Second {

  @State tips:string = '点击返回到首页'
  @State data:string = router.getParams()?.['loginResult']

  build() {
    Row() {
      Column() {
        if(this.data != null){
          Text(this.data)
            .fontSize(30)
        }
        Button(this.tips)
          .width(200)
          .height(60)
          .fontColor(Color.White)
          .fontSize(20)
          .margin({
            top:20
          })
          .onClick(()=>{
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }