175 lines
4.5 KiB
Plaintext
175 lines
4.5 KiB
Plaintext
import { router } from '@kit.ArkUI';
|
||
|
||
@Entry
|
||
@Component
|
||
struct RegisterPage {
|
||
@State username: string = '';
|
||
@State password: string = '';
|
||
@State confirmPassword: string = '';
|
||
@State isLoading: boolean = false;
|
||
|
||
build() {
|
||
Column() {
|
||
// 顶部导航栏
|
||
Row() {
|
||
Text('←')
|
||
.fontSize(24)
|
||
.fontColor('#333333')
|
||
.onClick(() => {
|
||
router.back();
|
||
})
|
||
|
||
Text('注册账号')
|
||
.fontSize(18)
|
||
.fontWeight(FontWeight.Medium)
|
||
.fontColor('#333333')
|
||
.layoutWeight(1)
|
||
.textAlign(TextAlign.Center)
|
||
|
||
// 占位，保持标题居中
|
||
Text('')
|
||
.fontSize(24)
|
||
.width(24)
|
||
}
|
||
.width('100%')
|
||
.height(56)
|
||
.padding({ left: 16, right: 16 })
|
||
.alignItems(VerticalAlign.Center)
|
||
|
||
// 表单区域
|
||
Column() {
|
||
// 账号
|
||
Column() {
|
||
Text('账号')
|
||
.fontSize(14)
|
||
.fontColor('#333333')
|
||
.margin({ bottom: 8 })
|
||
|
||
TextInput({ placeholder: '请输入手机号/邮箱', text: this.username })
|
||
.height(48)
|
||
.fontSize(16)
|
||
.backgroundColor('#F5F6F7')
|
||
.borderRadius(8)
|
||
.padding({ left: 16, right: 16 })
|
||
.onChange((value: string) => {
|
||
this.username = value;
|
||
})
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Start)
|
||
|
||
// 密码
|
||
Column() {
|
||
Text('密码')
|
||
.fontSize(14)
|
||
.fontColor('#333333')
|
||
.margin({ bottom: 8 })
|
||
|
||
TextInput({ placeholder: '请输入密码（至少6位）', text: this.password })
|
||
.height(48)
|
||
.fontSize(16)
|
||
.backgroundColor('#F5F6F7')
|
||
.borderRadius(8)
|
||
.padding({ left: 16, right: 16 })
|
||
.type(InputType.Password)
|
||
.onChange((value: string) => {
|
||
this.password = value;
|
||
})
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Start)
|
||
.margin({ top: 20 })
|
||
|
||
// 确认密码
|
||
Column() {
|
||
Text('确认密码')
|
||
.fontSize(14)
|
||
.fontColor('#333333')
|
||
.margin({ bottom: 8 })
|
||
|
||
TextInput({ placeholder: '请再次输入密码', text: this.confirmPassword })
|
||
.height(48)
|
||
.fontSize(16)
|
||
.backgroundColor('#F5F6F7')
|
||
.borderRadius(8)
|
||
.padding({ left: 16, right: 16 })
|
||
.type(InputType.Password)
|
||
.onChange((value: string) => {
|
||
this.confirmPassword = value;
|
||
})
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Start)
|
||
.margin({ top: 20 })
|
||
|
||
// 密码不一致提示
|
||
if (this.confirmPassword.length > 0 && this.password !== this.confirmPassword) {
|
||
Text('两次输入的密码不一致')
|
||
.fontSize(12)
|
||
.fontColor('#FF4D4F')
|
||
.margin({ top: 8 })
|
||
}
|
||
|
||
// 注册按钮
|
||
Button(this.isLoading ? '注册中...' : '注册')
|
||
.width('100%')
|
||
.height(48)
|
||
.fontSize(16)
|
||
.fontColor(Color.White)
|
||
.backgroundColor('#4E6EF2')
|
||
.borderRadius(24)
|
||
.margin({ top: 36 })
|
||
.enabled(!this.isLoading && this.isFormValid())
|
||
.opacity(this.isFormValid() ? 1 : 0.6)
|
||
.onClick(() => {
|
||
this.handleRegister();
|
||
})
|
||
|
||
// 返回登录
|
||
Row() {
|
||
Text('已有账号？')
|
||
.fontSize(14)
|
||
.fontColor('#999999')
|
||
Text('返回登录')
|
||
.fontSize(14)
|
||
.fontColor('#4E6EF2')
|
||
.fontWeight(FontWeight.Medium)
|
||
.onClick(() => {
|
||
router.back();
|
||
})
|
||
}
|
||
.width('100%')
|
||
.justifyContent(FlexAlign.Center)
|
||
.margin({ top: 20 })
|
||
}
|
||
.width('100%')
|
||
.padding({ left: 32, right: 32 })
|
||
.margin({ top: 24 })
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
.backgroundColor(Color.White)
|
||
}
|
||
|
||
private isFormValid(): boolean {
|
||
return this.username.length > 0
|
||
&& this.password.length >= 6
|
||
&& this.password === this.confirmPassword;
|
||
}
|
||
|
||
private handleRegister(): void {
|
||
if (!this.isFormValid()) {
|
||
return;
|
||
}
|
||
|
||
this.isLoading = true;
|
||
|
||
// 模拟注册请求
|
||
setTimeout(() => {
|
||
this.isLoading = false;
|
||
// 注册成功，返回登录页
|
||
router.back();
|
||
}, 1500);
|
||
}
|
||
}
|