bbq/src/app/routes/passport/components/login/login.component.html

<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-01-10 19:33:37
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-01-18 17:24:43
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\passport\\components\\login\\login.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->

<div class="body-box">
  <div></div>
  <div>
    <div class="box-content d-flex">
      <!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
      <div class="login-box">
        <div class="login-box-content">
          <nz-tabset (nzSelectChange)="switch($event)">
            <nz-tab nzTitle="密码登录">
              <sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'">
                <ng-template sf-template="username" let-i let-ui="ui" let-schema="schema">
                  <nz-input-group [nzSuffix]="inputClearTpl">
                    <input
                      type="text"
                      nz-input
                      [ngModel]="i.value"
                      (ngModelChange)="i.setValue($event)"
                      (keyup.enter)="submit()"
                      placeholder="请输入手机号"
                    />
                  </nz-input-group>
                  <ng-template #inputClearTpl>
                    <i
                      nz-icon
                      class="ant-input-clear-icon"
                      nzTheme="fill"
                      nzType="close-circle"
                      *ngIf="i.value"
                      style="font-size: 16px"
                      (click)="i.setValue(null)"
                    ></i>
                  </ng-template>
                </ng-template>
                <ng-template sf-template="password" let-i let-ui="ui" let-schema="schema">
                  <nz-input-group [nzSuffix]="inputClearTpl">
                    <input
                      [type]="isPasswordType ? 'password' : 'text'"
                      nz-input
                      [ngModel]="i.value"
                      (ngModelChange)="i.setValue($event)"
                      placeholder="请输入密码"
                      (keyup.enter)="submit()"
                    />
                  </nz-input-group>
                  <ng-template #inputClearTpl>
                    <i
                      *ngIf="i.value && isPasswordType"
                      nz-icon
                      class="ant-input-clear-icon"
                      style="font-size: 18px"
                      nzType="eye"
                      nzTheme="fill"
                      (click)="isPasswordType = false"
                    ></i>
                    <i
                      *ngIf="i.value && !isPasswordType"
                      nz-icon
                      class="ant-input-clear-icon"
                      style="font-size: 18px"
                      nzType="eye-invisible"
                      nzTheme="fill"
                      (click)="isPasswordType = true"
                    ></i>
                  </ng-template>
                </ng-template>
              </sf>
            </nz-tab>
            <nz-tab nzTitle="验证码登录">
              <sf #captchaSF [layout]="'vertical'" [schema]="captchaSchema" [ui]="captchaUI" [button]="'none'">
                <ng-template sf-template="phone" let-i let-ui="ui" let-schema="schema">
                  <nz-input-group [nzSuffix]="inputClearTpl">
                    <input
                      type="text"
                      nz-input
                      [ngModel]="i.value"
                      (ngModelChange)="i.setValue($event)"
                      (keyup.enter)="submit()"
                      placeholder="请输入手机号"
                    />
                  </nz-input-group>
                  <ng-template #inputClearTpl>
                    <i
                      nz-icon
                      class="ant-input-clear-icon"
                      nzTheme="fill"
                      nzType="close-circle"
                      *ngIf="i.value"
                      style="font-size: 16px"
                      (click)="i.setValue(null)"
                    ></i>
                  </ng-template>
                </ng-template>
                <ng-template sf-template="smsCode" let-me let-ui="ui" let-schema="schema">
                  <nz-input-group nzSearch [nzSuffix]="suffixTemplateInfo">
                    <input
                      nz-input
                      type="text"
                      [maxLength]="6"
                      placeholder="验证码"
                      [attr.id]="me.id"
                      [disabled]="me.disabled"
                      [attr.disabled]="me.disabled"
                      [nzSize]="ui.size"
                      [ngModel]="me.formProperty.value"
                      (ngModelChange)="me.setValue($event)"
                      (keyup.enter)="submit()"
                    />
                  </nz-input-group>
                </ng-template>
              </sf>
            </nz-tab>
          </nz-tabset>
          <button
            nz-button
            type="button"
            nzType="primary"
            nzSize="large"
            (click)="submit()"
            [nzLoading]="userSrv?.http?.loading"
            nzBlock
            class="mt-md"
          >
            登录
          </button>
          <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
          <p class="agreement">
            登录即代表您同意 <a target="_blank" [routerLink]="['/passport/agreement']" [queryParams]="{ type: 1 }">《平台服务协议》</a>
            <a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="box-footer">
    深圳市怡亚通供应链股份有限公司 版权所有
    <p [innerHTML]="copyright"></p>
  </div>
</div>

<ng-template #suffixTemplateInfo>
  <ng-container *ngIf="count < 1; else intervalTemplate">
    <span class="msg-btn" style="color: #26282a; cursor: pointer; font-size: 14px" (click)="getCaptcha()">获取验证码</span>
  </ng-container>
  <ng-template #intervalTemplate> 请等待{{ count }}s </ng-template>
</ng-template>