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%')
}