nova-live/projects/live-app/src/modules/login/login.component.html

<!-- 登录 -->
<ion-content fullscreen scroll-y="false" *ngIf="status == 'login'">
  <div class="container">
    <div class="logo">
      <img *ngIf="logo" [src]="logo" alt="" />
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/phone.png" alt="" />
      </div>
      <ion-input
        inputmode="tel"
        pattern="tel"
        type="tel"
        [(ngModel)]="loginInfo.mobile"
        placeholder="请输入手机号"
      >
      </ion-input>
    </div>
    <div class="input" *ngIf="type == 'code'">
      <div class="icon">
        <img src="img/security.png" alt="" />
      </div>
      <ion-input
        inputmode="numeric"
        placeholder="请输入验证码"
        [(ngModel)]="loginInfo.code"
      ></ion-input>
      <div
        class="captcha"
        (click)="sendVerifyCode(loginInfo.mobile)"
        *ngIf="!waitStatus"
      >
        获取验证码
      </div>
      <div class="captcha" *ngIf="waitStatus">{{ wait }}s</div>
    </div>
    <div class="input" *ngIf="type == 'password'">
      <div class="icon">
        <img src="img/password.png" alt="" />
      </div>
      <ion-input
        type="password"
        [(ngModel)]="loginInfo.password"
        maxlength="18"
        placeholder="请输入密码"
      ></ion-input>
    </div>
    <div class="submit" (click)="login()">登录</div>
    <div class="opts">
      <div class="code" (click)="changeType()">
        {{ type == "password" ? "短信验证登录" : "密码登录" }}
      </div>
      <div class="forget" (click)="status = 'forget'">忘记密码</div>
    </div>
    <div class="register" (click)="status = 'register'">
      还没有账号，去注册
      <div class="icon"><img src="img/login.png" alt="" /></div>
    </div>
  </div>
</ion-content>
<!-- 重置密码 -->
<ion-content fullscreen scroll-y="false" *ngIf="status == 'forget'">
  <div class="header">
    <ion-buttons slot="start" (click)="back()">
      <ion-icon
        name="chevron-back-outline"
        style="width: 24px; height: 24px; color: #222"
      ></ion-icon>
    </ion-buttons>
    <div class="title">忘记密码</div>
  </div>
  <div class="container" style="background-image: url('')">
    <div class="logo">
      <img *ngIf="logo" [src]="logo" alt="" />
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/phone.png" alt="" />
      </div>
      <ion-input
        inputmode="tel"
        pattern="tel"
        type="tel"
        [(ngModel)]="reset.mobile"
        placeholder="请输入手机号"
      ></ion-input>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/security.png" alt="" />
      </div>
      <ion-input
        inputmode="numeric"
        placeholder="请输入验证码"
        [(ngModel)]="reset.code"
      ></ion-input>
      <div
        class="captcha"
        (click)="sendVerifyCode(reset.mobile)"
        *ngIf="!waitStatus"
      >
        获取验证码
      </div>
      <div class="captcha" *ngIf="waitStatus">{{ wait }}s</div>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/password.png" alt="" />
      </div>
      <ion-input
        [type]="inputType"
        [(ngModel)]="reset.password"
        placeholder="6-20位数字，字母或符号组合"
      >
      </ion-input>
      <div class="watch" (click)="togglePassword()">
        <img
          src="{{
            inputType == 'password' ? '/img/hide.png' : '/img/show.png'
          }}"
          alt=""
        />
      </div>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/password.png" alt="" />
      </div>
      <ion-input
        type="password"
        [(ngModel)]="reset.confirmPassword"
        placeholder="请再次输入密码"
      ></ion-input>
    </div>
    <div class="submit" (click)="resetPassword()">重置密码</div>
    <div class="register" (click)="status = 'login'">
      返回登录
      <div class="icon"><img src="img/login.png" alt="" /></div>
    </div>
  </div>
</ion-content>
<!-- 注册账号 -->
<ion-content fullscreen *ngIf="status == 'register'">
  <div class="container" style="background-image: url('')">
    <div class="logo">
      <img *ngIf="logo" [src]="logo" alt="" />
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/phone.png" alt="" />
      </div>
      <ion-input
        inputmode="tel"
        pattern="tel"
        type="tel"
        [(ngModel)]="registerInfo.mobile"
        placeholder="请输入手机号"
      ></ion-input>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/security.png" alt="" />
      </div>
      <ion-input
        inputmode="numeric"
        placeholder="请输入验证码"
        [(ngModel)]="registerInfo.code"
      ></ion-input>
      <div
        class="captcha"
        (click)="sendVerifyCode(registerInfo.mobile)"
        *ngIf="!waitStatus"
      >
        获取验证码
      </div>
      <div class="captcha" *ngIf="waitStatus">{{ wait }}s</div>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/password.png" alt="" />
      </div>
      <ion-input
        [type]="inputType"
        [(ngModel)]="registerInfo.password"
        placeholder="6-18位数字，字母或符号组合"
      >
      </ion-input>
      <div class="watch" (click)="togglePassword()">
        <img
          src="{{
            inputType == 'password' ? '/img/show.png' : '/img/hide.png'
          }}"
          alt=""
        />
      </div>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/password.png" alt="" />
      </div>
      <ion-input
        type="password"
        [(ngModel)]="registerInfo.confirmPassword"
        placeholder="请再次输入密码"
      ></ion-input>
    </div>
    <div class="input">
      <div class="icon">
        <img src="img/invite.png" alt="" />
      </div>
      <ion-input
        type="text"
        [(ngModel)]="registerInfo.invite"
        placeholder="请输入邀请人（选填）"
      ></ion-input>
    </div>
    <div class="submit" style="margin-top: 0" (click)="registerUser()">
      立即注册
    </div>
    <div class="opts" style="justify-content: flex-end">
      <div
        class="forget"
        style="display: flex; align-items: center; color: #000000"
        (click)="status = 'login'"
      >
        已有账号，去登录
        <img
          style="
            width: 32px;
            height: 32px;
            transform: scale(0.5);
            margin-left: 5px;
          "
          src="img/login.png"
          alt=""
        />
      </div>
    </div>
    <div class="agreement">
      <ion-checkbox color="primary" [(ngModel)]="agreement"></ion-checkbox>
      <div class="content">
        注册即代表同意<span (click)="showAgreement()"
          >《爱聊线上平台用户服务及隐私协议》</span
        >
      </div>
    </div>
  </div>
</ion-content>