s202226701051/word-app/src/app/register/register.page.html

<div class="auth-route-shell ion-page">
<ion-content class="register-content" [fullscreen]="true">
  <div class="ocean-bg" aria-hidden="true"></div>
  <div class="floating-creatures" aria-hidden="true">
    <div class="creature fish-1">
      <img src="assets/icon/鲨鱼.svg" alt="" class="fish-svg" />
    </div>
    <div class="creature bubble-1"></div>
    <div class="creature bubble-2"></div>
    <div class="creature bubble-3"></div>
  </div>
  <div class="auth-page-inner">
  <div class="register-container">
    <div class="login-brand-logo">
      <img
        src="/assets/icon/logo.png"
        alt="词海游"
        class="login-brand-logo-img"
        width="400"
        height="156"
      />
    </div>
    
    <!-- 表单容器 - 白色圆角矩形 -->
    <div class="form-container">
      
      <!-- 步骤1：手机号 + 验证码 -->
      <div *ngIf="currentStep === 1">
        <h2 class="page-title">注册</h2>
        
        <!-- 手机号输入框 -->
        <div class="input-wrapper">
          <ion-input
            type="tel"
            placeholder="请输入手机号"
            [(ngModel)]="mobile"
            class="custom-input"
            [disabled]="isLoading">
            <ion-icon name="phone-portrait-outline" slot="start"></ion-icon>
          </ion-input>
          <div class="input-bottom-line"></div>
        </div>
        
        <!-- 验证码输入 + 获取按钮 -->
        <div class="code-wrapper">
          <div class="input-wrapper code-input">
            <ion-input
              type="text"
              placeholder="请输入验证码"
              [(ngModel)]="verificationCode"
              maxlength="6"
              class="custom-input"
              [disabled]="isLoading">
              <ion-icon name="time-outline" slot="start"></ion-icon>
            </ion-input>
            <div class="input-bottom-line"></div>
          </div>
          
          <button 
            class="code-button" 
            [class.active]="countdownSeconds === 0"
            (click)="sendCode()"
            [disabled]="countdownSeconds > 0 || isLoading || !mobile">
            {{ countdownSeconds > 0 ? countdownSeconds + '秒后重试' : '获取验证码' }}
          </button>
        </div>
        
        <!-- 继续按钮 - 文字不变化 -->
        <ion-button 
          expand="block"
          class="action-button"
          (click)="verifyCode()"
          [disabled]="!mobile || !verificationCode || isLoading">
          继续
        </ion-button>
      </div>
      
      <!-- 步骤2：设置密码 -->
      <div *ngIf="currentStep === 2">
        <h2 class="page-title">设置密码</h2>
        
        <!-- 密码输入框 -->
        <div class="input-wrapper">
          <ion-input
            type="password"
            placeholder="请输入密码"
            [(ngModel)]="password"
            class="custom-input"
            [disabled]="isLoading">
            <ion-icon name="lock-closed-outline" slot="start"></ion-icon>
          </ion-input>
          <div class="input-bottom-line"></div>
        </div>
        
        <!-- 确认密码输入框 -->
        <div class="input-wrapper">
          <ion-input
            type="password"
            placeholder="请再次输入密码"
            [(ngModel)]="confirmPassword"
            class="custom-input"
            [disabled]="isLoading">
            <ion-icon name="lock-closed-outline" slot="start"></ion-icon>
          </ion-input>
          <div class="input-bottom-line"></div>
        </div>
        
        <!-- 注册按钮 - 文字不变化 -->
        <ion-button 
          expand="block"
          class="action-button"
          (click)="register()"
          [disabled]="!password || !confirmPassword || isLoading">
          注册
        </ion-button>
      </div>
      
      <!-- 返回登录链接 -->
      <div class="back-link">
        <button class="link-button" (click)="goToLogin()">返回登录</button>
      </div>
    </div>
  </div>
  </div>
</ion-content>
</div>