初始化项目，完成登陆注册页面

2026-05-07 17:26:30 +08:00
parent 9a6d59eb1d
commit a7cd4d908c
38 changed files with 836 additions and 0 deletions
--- a/entry/src/main/ets/pages/RegisterPage.ets
+++ b/entry/src/main/ets/pages/RegisterPage.ets
@@ -0,0 +1,174 @@
+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);
+  }
+}