recycle3/src/app/auth/register/register.html

<div class="register-page">
  <div class="header">
    <button class="back-btn" (click)="goBack()">←</button>
    <div class="app-title">绿色回收</div>
    <div class="logo">♻️</div>
  </div>
  
  <div class="container">
    <h2 class="form-title">创建账户</h2>
    <p class="form-subtitle">加入我们，共同守护地球家园</p>
    
    <form #regForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="identity">选择身份</label>
        <div class="identity-options">
          <div 
            *ngFor="let option of identityOptions" 
            class="identity-option"
            [class.active]="registerForm.identity === option.value"
            (click)="selectIdentity(option.value)">
            <div class="identity-icon">{{option.icon}}</div>
            <div>{{option.label}}</div>
          </div>
        </div>
        <div class="error-message" [style.display]="formErrors.identity ? 'block' : 'none'">
          请选择身份类型
        </div>
      </div>
      
      <div class="form-group">
        <label for="account">账户信息</label>
        <div class="input-with-icon">
          <span class="input-icon">📱</span>
          <input 
            type="text" 
            id="account" 
            name="account"
            [(ngModel)]="registerForm.account"
            (blur)="validateAccount()"
            placeholder="手机号/邮箱/用户名" 
            required>
        </div>
        <div class="error-message" [style.display]="formErrors.account ? 'block' : 'none'">
          请输入有效的账户信息
        </div>
      </div>
      
      <div class="form-group">
        <label for="password">设置密码</label>
        <div class="input-with-icon">
          <span class="input-icon">🔒</span>
          <input 
            [type]="showPassword ? 'text' : 'password'" 
            id="password" 
            name="password"
            [(ngModel)]="registerForm.password"
            (input)="validatePassword()"
            placeholder="6-20位数字、字母或特殊字符" 
            required>
          <button 
            type="button" 
            class="password-toggle"
            (click)="togglePasswordVisibility('password')">
            {{showPassword ? '🙈' : '👁️'}}
          </button>
        </div>
        <div class="password-requirements">密码需包含6-20位字符，可使用数字、字母或特殊字符</div>
        <div class="error-message" [style.display]="formErrors.password ? 'block' : 'none'">
          密码不符合要求
        </div>
      </div>
      
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <div class="input-with-icon">
          <span class="input-icon">🔒</span>
          <input 
            [type]="showConfirmPassword ? 'text' : 'password'" 
            id="confirmPassword" 
            name="confirmPassword"
            [(ngModel)]="registerForm.confirmPassword"
            (input)="validateConfirmPassword()"
            placeholder="请再次输入密码" 
            required>
          <button 
            type="button" 
            class="password-toggle"
            (click)="togglePasswordVisibility('confirmPassword')">
            {{showConfirmPassword ? '🙈' : '👁️'}}
          </button>
        </div>
        <div class="error-message" [style.display]="formErrors.confirmPassword ? 'block' : 'none'">
          两次输入的密码不一致
        </div>
      </div>

      <!-- C端用户额外字段 -->
      <div *ngIf="registerForm.identity === 'user'">
        <div class="form-group">
          <label for="name">真实姓名</label>
          <div class="input-with-icon">
            <span class="input-icon">👤</span>
            <input 
              type="text" 
              id="name" 
              name="name"
              [(ngModel)]="registerForm.name"
              placeholder="请输入真实姓名">
          </div>
        </div>
        <div class="form-group">
          <label for="phone">手机号码</label>
          <div class="input-with-icon">
            <span class="input-icon">📱</span>
            <input 
              type="tel" 
              id="phone" 
              name="phone"
              [(ngModel)]="registerForm.phone"
              placeholder="请输入手机号码">
          </div>
        </div>
      </div>

      <!-- B端企业额外字段 -->
      <div *ngIf="registerForm.identity === 'business'">
        <div class="form-group">
          <label for="companyName">企业名称</label>
          <div class="input-with-icon">
            <span class="input-icon">🏢</span>
            <input 
              type="text" 
              id="companyName" 
              name="companyName"
              [(ngModel)]="registerForm.companyName"
              placeholder="请输入企业名称">
          </div>
        </div>
        <div class="form-group">
          <label for="companyCode">统一社会信用代码</label>
          <div class="input-with-icon">
            <span class="input-icon">📋</span>
            <input 
              type="text" 
              id="companyCode" 
              name="companyCode"
              [(ngModel)]="registerForm.companyCode"
              placeholder="请输入统一社会信用代码">
          </div>
        </div>
        <div class="form-group">
          <label for="contactPerson">联系人</label>
          <div class="input-with-icon">
            <span class="input-icon">👤</span>
            <input 
              type="text" 
              id="contactPerson" 
              name="contactPerson"
              [(ngModel)]="registerForm.contactPerson"
              placeholder="请输入联系人姓名">
          </div>
        </div>
        <div class="form-group">
          <label for="contactPhone">联系电话</label>
          <div class="input-with-icon">
            <span class="input-icon">📞</span>
            <input 
              type="tel" 
              id="contactPhone" 
              name="contactPhone"
              [(ngModel)]="registerForm.contactPhone"
              placeholder="请输入联系电话">
          </div>
        </div>
      </div>

      <!-- G端政府额外字段 -->
      <div *ngIf="registerForm.identity === 'government'">
        <div class="form-group">
          <label for="departmentName">部门名称</label>
          <div class="input-with-icon">
            <span class="input-icon">🏛️</span>
            <input 
              type="text" 
              id="departmentName" 
              name="departmentName"
              [(ngModel)]="registerForm.departmentName"
              placeholder="请输入部门名称">
          </div>
        </div>
        <div class="form-group">
          <label for="position">职位</label>
          <div class="input-with-icon">
            <span class="input-icon">💼</span>
            <input 
              type="text" 
              id="position" 
              name="position"
              [(ngModel)]="registerForm.position"
              placeholder="请输入职位">
          </div>
        </div>
        <div class="form-group">
          <label for="govPhone">办公电话</label>
          <div class="input-with-icon">
            <span class="input-icon">☎️</span>
            <input 
              type="tel" 
              id="govPhone" 
              name="govPhone"
              [(ngModel)]="registerForm.govPhone"
              placeholder="请输入办公电话">
          </div>
        </div>
        <div class="form-group">
          <label for="govEmail">政府邮箱</label>
          <div class="input-with-icon">
            <span class="input-icon">📧</span>
            <input 
              type="email" 
              id="govEmail" 
              name="govEmail"
              [(ngModel)]="registerForm.govEmail"
              placeholder="请输入政府邮箱">
          </div>
        </div>
      </div>
      
      <button type="submit" class="btn-register">注册账号</button>
    </form>
    
    <div class="login-link">
      已有账户？<a (click)="goToLogin()">立即登录</a>
    </div>
  </div>
  
  <div class="footer">
    注册即表示同意<a href="#">《用户协议》</a>和<a href="#">《隐私政策》</a>
  </div>
</div>