edit

2021-12-08 19:15:15 +08:00
parent e94c4486ea
commit 2637bcbf02
10 changed files with 239 additions and 102 deletions
--- a/src/app/routes/passport/components/login/login.component.html
+++ b/src/app/routes/passport/components/login/login.component.html
@ -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>
--- a/src/app/routes/passport/components/login/login.component.less
+++ b/src/app/routes/passport/components/login/login.component.less
@ -5,26 +5,36 @@
  flex-direction        : column;
  justify-content       : space-between;
  width                 : 100%;
-  max-width             : 1080px;
-  height                : 100%;
+  max-width             : 960px;
+  height                : calc(100vh - 64px);
  margin                : auto;
-  padding               : 50px 0 80px;
  -webkit-box-orient    : vertical;

-  .box-header {
-    max-width    : 240px;
-    max-height   : 48px;
-    margin-bottom: 36px;
-  }
-
  .box-content {
-    width : 100%;
-    height: 560px;
+    width        : 100%;
+    height       : 600px;
+    border-radius: 0px 16px 16px 0px;
+
+    .login-logo {
+      width : 310px;
+      height: 600px;
+    }
+
+    .login-box {
+      flex            : 1;
+      background-color: #fff;
+
+      .login-box-content {
+        max-width: 434px;
+        margin   : auto;
+        padding  : 88px 0 38px;
+      }
+    }

    .form-box {
-      margin          : 0 auto;
-      padding         : 40px 88px 40px;
-      background-color: #fff;
+      margin : 0 auto;
+      padding: 40px 88px 40px;
+

      .title {
        margin-bottom: 30px;
@ -51,9 +61,32 @@
  }
 }

+.forgetPwd {
+  font-weight: 400;
+  color      : #26282A;
+  font-size  : 14px;
+  text-align : center;
+  cursor     : pointer;
+}
+
+.agreement {
+  text-align: center;
+  font-size : 12px;
+  color     : #86909C;
+  margin-top: 88px;
+
+  a {
+    color: #E60012;
+  }
+}
+
 ::ng-deep {
  passport-login {
-    background-color: #f0f4f7;
+    background-color: #F8FBFD;
+  }
+
+  .pro-passport {
+    min-height: calc(100vh - 64px);
  }
 }

@ -71,33 +104,90 @@

  // tabs样式调整
  .ant-tabs-nav-list {
-    justify-content: space-between;
-    width          : 281px;
-    margin         : auto;
+    width: 281px;

    .ant-tabs-tab-btn {
-      font-size: 18px;
+      font-size  : 24px;
+      color      : #86909C;
+      font-weight: 500;
    }

-    .ant-tabs-tab {
-      margin: 0;
-    }
+  }
+
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #26282A;
+  }
+
+  .ant-tabs-tab {
+    padding: 8px 0;
  }

  .ant-tabs-top>.ant-tabs-nav {
-    margin: 0 0 30px 0;
+    margin: 0 0 38px 0;

    .ant-tabs-ink-bar {
-      height: 4px;
+      background: #26282A;
    }
  }

-  .ant-tabs-top>.ant-tabs-nav::before {
-    border-bottom: 0;
+  // input 框样式修改
+  nz-input-group {
+    height       : 44px;
+    font-size    : 14px;
+    border-radius: 4px;
+    border-color : #E5E6EB;
+    box-shadow   : none;
  }

-  nz-input-group {
-    height   : 50px;
-    font-size: 16px;
+  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
+    border-color: #E5E6EB;
  }
+
+  .ant-input {
+    padding      : 10px 16px;
+    border-color : #E5E6EB;
+    border-radius: 4px;
+    font-size    : 14px;
+    box-shadow   : none;
+  }
+
+  .ant-form-item {
+    margin-bottom: 32px;
+  }
+
+  .ant-form-item-with-help {
+    margin-bottom: 0 !important;
+  }
+
+  .ant-form-item-explain,
+  .ant-form-item-extra {
+    min-height : 32px;
+    line-height: 2;
+  }
+
+  // 按钮样式修改
+  .ant-btn {
+    padding: 0 16px 12px;
+  }
+
+  .ant-btn-primary {
+    color        : #fff;
+    background   : #26282A;
+    border-color : #26282A;
+    font-size    : 14px;
+    line-height  : 40px;
+    height       : 44px;
+    border-radius: 4px
+  }
+}
+
+@media (max-width: 990px) {
+  .box-content {
+
+    .login-logo {
+      width : 0px !important;
+      height: 0px !important;
+    }
+  }
+
 }
--- a/src/app/routes/passport/components/login/login.component.ts
+++ b/src/app/routes/passport/components/login/login.component.ts
@ -33,9 +33,10 @@ export class UserLoginComponent implements OnInit, OnDestroy {
  captchaUI!: SFUISchema;
  count = 0;
  type = 0;
+
+  isPasswordType = true;
  // vcode = null;

-  imageUrl = './assets/images/user/logo.png';
  copyright = '';
  constructor(
    public userSrv: EAUserService,
@ -69,22 +70,21 @@ export class UserLoginComponent implements OnInit, OnDestroy {
        username: {
          title: '',
          type: 'string',
-          maxLength: 30,
+          maxLength: 11,
          ui: {
-            placeholder: '请输入您的账号',
-            prefixIcon: 'user',
-            size: 'large'
-          } as SFStringWidgetSchema
+            widget: 'custom',
+            size: 'large',
+            errors: { required: '请输入手机号', format: '手机号格式错误' }
+          }
        },
        password: {
          title: '',
          type: 'string',
          ui: {
-            placeholder: '请输入您的密码',
-            prefixIcon: 'lock',
-            type: 'password',
-            size: 'large'
-          } as SFStringWidgetSchema
+            widget: 'custom',
+            size: 'large',
+            errors: { required: '请输入密码' }
+          }
        }
        // sc: {
        //   title: '',
@ -117,11 +117,11 @@ export class UserLoginComponent implements OnInit, OnDestroy {
          format: 'mobile',
          maxLength: 11,
          ui: {
-            placeholder: '请输入您的手机号',
-            prefixIcon: 'mobile',
+            placeholder: '请输入手机号',
+            widget: 'custom',
            size: 'large',
            errors: { required: '请输入手机号！', format: '手机号格式错误' }
-          } as SFStringWidgetSchema
+          }
        },
        smsCode: {
          title: '',
@ -184,17 +184,17 @@ export class UserLoginComponent implements OnInit, OnDestroy {
   */
  submit(): void {
    if (this.type === 0) {
-      this.captchaSF.validator({ emitError: true });
-      if (!this.captchaSF.valid) {
-        return;
-      }
-      this.userSrv.loginByMobile(this.captchaSF.value.phone, this.captchaSF.value.smsCode, this.captchaSF.value.sc);
-    } else {
      this.accountSF.validator({ emitError: true });
      if (!this.accountSF.valid) {
        return;
      }
      this.userSrv.loginByAccount(this.accountSF.value.username, this.accountSF.value.password);
+    } else {
+      this.captchaSF.validator({ emitError: true });
+      if (!this.captchaSF.valid) {
+        return;
+      }
+      this.userSrv.loginByMobile(this.captchaSF.value.phone, this.captchaSF.value.smsCode, this.captchaSF.value.sc);
    }
    // this.router.navigateByUrl('/');
    /*  if (!this.accountSF.valid && !this.captchaSF.valid) {
@ -212,6 +212,10 @@ export class UserLoginComponent implements OnInit, OnDestroy {

  ngOnDestroy(): void {}

+  changeInputType(a: any) {
+    console.log(a);
+  }
+
  private createInterval() {
    this.count = 59;
    interval(1000)
--- a/src/app/routes/passport/passport-routing.module.ts
+++ b/src/app/routes/passport/passport-routing.module.ts
@ -12,6 +12,11 @@ const routes: Routes = [
    path: 'passport',
    component: LayoutPassportComponent,
    children: [
+      {
+        path: 'login',
+        component: UserLoginComponent,
+        data: { title: '登录' }
+      },
      {
        path: 'agreement',
        component: OrderAgreementComponent,
@ -23,11 +28,6 @@ const routes: Routes = [
        data: { title: '忘记密码' }
      }
    ]
-  },
-  {
-    path: 'passport/login',
-    component: UserLoginComponent,
-    data: { title: '登录' }
  }
 ];

--- a/src/app/routes/usercenter/components/freight/list/detail/detail.component.html
+++ b/src/app/routes/usercenter/components/freight/list/detail/detail.component.html
@ -176,16 +176,16 @@
  <sv-container col="3" class="mt16">
    <sv-title>企业开票信息</sv-title>
    <sv label="开户银行">
-      {{ detailData?.name }}
+      {{ detailData?.createBank }}
    </sv>
    <sv label="银行账户">
      {{ detailData?.bankAccount }}
    </sv>
    <sv label="注册电话">
-      {{ detailData?.validStartTime }}
+      {{ detailData?.registerPhone }}
    </sv>
    <sv label="注册地址">
-      {{ detailData?.validStartTime }}
+      {{ detailData?.registerAddress }}
    </sv>
  </sv-container>
 </nz-card>