diff --git a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html index 2b60f0bf..78fa0486 100644 --- a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html +++ b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.html @@ -1,109 +1,116 @@
- + +
-
- - 手机号 - - - - - - - - 验证码 - -
- - - - -
- - - - - - - -
+
+
+
+ + 手机号 + + + + + + 验证码 + + + + + + + + + + + +
+
+
-
- - 新的密码 - - - - 请输入确认密码! - - 8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字! - - - - - - 确认密码 - - - - 请输入确认密码! - 两次输入的密码不一致! - - - - - - - - -
+
+
+
+ + 设置新密码 + + + + + + + + + +
+
+ + +
+ +
+ + + 重复新密码 + + + + + + + + + +
+
+ + +
+ +
+ + + + + + +
+
+
- +
@@ -120,10 +127,19 @@ 立即登录 + {{ 'app.register-result.back-home' | translate }} + -->
+ + + + 获取验证码 + + 请等待{{ count }}s + + + \ No newline at end of file diff --git a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less index 7c8d01de..31408925 100644 --- a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less +++ b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.less @@ -1,29 +1,51 @@ -@import '~@delon/theme/index'; - :host { + ::ng-deep { + .ant-steps { + margin: 0 auto; + width : 500px; + } + + .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-tail::after { + background-color: #999494; + } + + .ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-tail::after { + background-color: #999494; + } + + .ant-spin-container { + background-color: #f8f8f8; + } + + .ant-form-item-label>label { + height: 40px; + } + + } + .main { max-width: 1200px; - margin: 0 auto; - overflow: hidden; + margin : 0 auto; + overflow : hidden; } page-grid { - width: 100%; - height: 100%; - margin: 100px auto; + width : 100%; + height : 100%; background-color: #fff; + margin : 100px auto; .myForm { - width: 25rem; - margin: 5rem auto; + margin-top : 3rem; + margin-bottom: 5rem; } .steps-content { - min-height: 250px; - margin-top: 16px; - background-color: #fafafa; - border: 1px dashed #e9e9e9; - border-radius: 6px; + margin-top : 16px; + border : 1px dashed #e9e9e9; + border-radius : 6px; + background-color: #ffffff; + min-height : 250px; // text-align: center; } @@ -34,45 +56,31 @@ button { margin-right: 8px; } - .step-title{ - padding: 8px; - } } } +.input-tootip { + width : 250px; + padding-left: 20px; + display : flex; + display : flex; + align-items : center; -.content { - background-color: #f0f3f7; -} -.main { - max-width: 1200px; - margin: 0 auto; -} -.header { - background: #fff; -} -.layout { - min-height: 100vh; -} - -.logo { - display: flex; - margin: 16px 0; - line-height: 32px; - dt { - width: 95px; - height: 32px; - img { - vertical-align: top; - } + .dot { + font-size: 21px; + color : #bdb8b8; } - dd { - flex: 1; - margin-bottom: 0; - padding: 0 10px; - color: #1890ff; - font-weight: 500; - font-size: 24px; - } -} + .valid-icon { + color: rgb(217 0 27); + } + + .invalid-icon { + color: rgb(82 196 26); + } + + .tootip-label { + margin-left: 8px; + font-size : 12px; + } +} \ No newline at end of file diff --git a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts index e919081d..39516c75 100644 --- a/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts +++ b/src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts @@ -1,7 +1,6 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { Router } from '@angular/router'; -import { CaptchaComponent } from '@shared'; import { interval } from 'rxjs'; import { take } from 'rxjs/operators'; import { EAUserService } from 'src/app/shared/services/business/user.service'; @@ -9,11 +8,9 @@ import { EAUserService } from 'src/app/shared/services/business/user.service'; @Component({ selector: 'app-routes-password-retrieve-password', templateUrl: './retrieve-password.component.html', - styleUrls: ['./retrieve-password.component.less'], + styleUrls: ['./retrieve-password.component.less'] }) export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { - @ViewChild('dun', { static: false }) - private dun!: CaptchaComponent; step = 0; count = 0; interval$: any; @@ -21,18 +18,20 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { formGroup2!: FormGroup; confirmPasswordValidator!: ValidatorFn; result = true; + + isPassWordHide = true; + isConfirmPassWordHide = true; + constructor(private fb: FormBuilder, public service: EAUserService, private router: Router, private cdr: ChangeDetectorRef) {} - ngAfterViewInit(): void { - this.dun.init(); - } + ngAfterViewInit(): void {} ngOnInit() { this.initForm(); } initForm() { - this.confirmPasswordValidator = (control) => { + this.confirmPasswordValidator = control => { if (!control.value) { return { error: true, required: true }; } else if (control.value !== this.formGroup2.controls.passWord.value) { @@ -44,7 +43,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { this.formGroup1 = this.fb.group({ phone: [null, [Validators.required]], smsVerifyCode: [null, [Validators.required]], - voucher: [null, [Validators.required]], + voucher: [null, [Validators.required]] }); this.formGroup2 = this.fb.group({ @@ -54,12 +53,12 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { Validators.required, Validators.maxLength(16), Validators.minLength(8), - Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$'), - ], + Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$') + ] ], passWordTo: [null, [this.confirmPasswordValidator, Validators.maxLength(16), Validators.minLength(8)]], voucher: [null, [Validators.required]], - phone: [null, [Validators.required]], + phone: [null, [Validators.required]] }); } @@ -76,7 +75,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { submitForm1() { for (const i in this.formGroup1.controls) { - if (true) { + if (this.formGroup1.controls[i]) { this.formGroup1.controls[i].markAsDirty(); this.formGroup1.controls[i].updateValueAndValidity(); } @@ -88,13 +87,14 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { if (this.formGroup1.valid) { const param = Object.assign({}, this.formGroup1.value); this.service.http.post(this.service.$forgetPasswordVerifyIdentity, param).subscribe((res: any) => { + // console.log(res, 'submitForm1'); if (res.success === true) { this.formGroup2.patchValue( { voucher: res.data.voucher, - phone: this.formGroup1.value.phone, + phone: this.formGroup1.value.phone }, - { onlySelf: true }, + { onlySelf: true } ); this.step = 1; // clearInterval(this.interval$); @@ -108,7 +108,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { submitForm2() { for (const i in this.formGroup2.controls) { - if (true) { + if (this.formGroup2.controls[i]) { this.formGroup2.controls[i].markAsDirty(); this.formGroup2.controls[i].updateValueAndValidity(); } @@ -152,15 +152,15 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { if (res.success) { this.formGroup1.patchValue( { - voucher: res?.data?.voucher, + voucher: res?.data?.voucher }, - { onlySelf: true }, + { onlySelf: true } ); if (res?.data?.code === '1') { this.codeCountDown(); this.service.msgSrv.success('验证码已发送到该账号绑定的手机号！'); } else if (res?.data?.code === '503046') { - this.dun.popUp(); + // this.dun.popUp(); } else { this.service.msgSrv.error('获取验证码失败!'); } @@ -176,7 +176,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit { this.count = 59; interval(1000) .pipe(take(60)) - .subscribe((x) => { + .subscribe(x => { this.count = 59 - (x + 1); this.cdr.detectChanges(); });