Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2021-12-08 19:15:15 +08:00
parent e94c4486ea
commit 2637bcbf02
10 changed files with 239 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/routes/passport/components/login/login.component.html
View File

@ -1,56 +1,81 @@
<div class="body-box">
<div></div>
<div>
<img class="box-header" [src]="imageUrl" alt="" srcset="" />
<div nz-row class="box-content">
<div nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="12"
[style]="{ 'background-image': 'url(./assets/images/user/login-image.png)', 'background-size': '100%' }"></div>
<div nz-col nzXs="22" nzSm="20" nzMd="16" nzLg="12" class="form-box">
<h1 class="title">运营管理后台</h1>
<nz-tabset (nzSelectChange)="switch($event)">
<nz-tab nzTitle="手机号登录">
<sf #captchaSF [layout]="'vertical'" [schema]="captchaSchema" [ui]="captchaUI" [button]="'none'">
<ng-template sf-template="smsCode" let-me let-ui="ui" let-schema="schema">
<nz-input-group nzSearch [nzPrefix]="prefixTemplateMail" [nzSuffix]="suffixTemplateInfo">
<input nz-input type="text" placeholder="请输入验证码" [attr.id]="me.id" [disabled]="me.disabled"
[attr.disabled]="me.disabled" [nzSize]="ui.size" [ngModel]="me.formProperty.value"
(ngModelChange)="me.setValue($event)" />
</nz-input-group>
<ng-template #prefixTemplateMail>
<i nz-icon nzType="mail"></i>
<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)"
placeholder="请输入手机号" />
</nz-input-group>
<ng-template #inputClearTpl>
<i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="i.value"
(click)="i.setValue(null)"></i>
</ng-template>
</ng-template>
</ng-template>
</sf>
</nz-tab>
<nz-tab nzTitle="账户密码登录">
<sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'"></sf>
</nz-tab>
</nz-tabset>
<button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
[nzLoading]="userSrv?.http?.loading" nzBlock style="border-radius: 4px">
登录
</button>
<div class="other">
<p>
<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="请输入密码" />
</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)"
placeholder="请输入手机号" />
</nz-input-group>
<ng-template #inputClearTpl>
<i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="i.value"
(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" placeholder="验证码" [attr.id]="me.id" [disabled]="me.disabled"
[attr.disabled]="me.disabled" [nzSize]="ui.size" [ngModel]="me.formProperty.value"
(ngModelChange)="me.setValue($event)" />
</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 class="other text-right">
<a class="forgetPwd" routerLink="/passport/retrieve-password">忘记密码</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<!-- Copyright © 2015-2020 星链380star.com 版权所有 | 粤ICP备16120630号 -->
深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p>
</div>
</div>
<ng-template #suffixTemplateInfo>
<ng-container *ngIf="count < 1; else intervalTemplate">
<span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getCaptcha()">获取验证码</span>
<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>