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

车辆对接

Browse Source
This commit is contained in:
wangshiming
2022-01-10 17:48:25 +08:00
parent 5f63353599
commit 9389402f6a
5 changed files with 180 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/app/routes/passport/components/retrieve-password/retrieve-password.component.html
View File

@ -1,115 +1,109 @@
<div class="main">
<page-grid>
<nz-steps [nzCurrent]="step" nzLabelPlacement="vertical" class="step-title">
<nz-steps [nzCurrent]="step" class="step-title">
<nz-step nzTitle="安全验证"></nz-step>
<nz-step nzTitle="重设密码"></nz-step>
<nz-step nzTitle="完成"></nz-step>
</nz-steps>
<div class="steps-content">
<ng-container *ngIf="step === 0">
<div nz-row>
<div nz-col nzOffset="7" nzMd="9">
<form nz-form [formGroup]="formGroup1" class="myForm">
<nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="phone">手机号</nz-form-label>
<nz-form-control nzSpan="18" nzErrorTip="请输入正确的手机号">
<input type="text" nz-input formControlName="phone" maxlength="11" nzSize="large"
placeholder="请输入手机号" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="smsVerifyCode">验证码</nz-form-label>
<nz-form-control nzSpan="18">
<nz-input-group [nzSuffix]="suffixTemplateInfo" nzSize="large">
<input type="text" nz-input formControlName="smsVerifyCode" maxlength="6" placeholder="请输入验证码" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzSpan="6" nzOffset="6">
<button class="btn-submit" [disabled]="!formGroup1.valid" [nzLoading]="service.http.loading" nz-button
nzBlock="true" nzType="primary" (click)="formSubmit()">
下一步
</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
</div>
<form nz-form [formGroup]="formGroup1" class="myForm">
<nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="phone">手机号</nz-form-label>
<nz-form-control nzSpan="18" nzErrorTip="请输入正确的手机号">
<nz-input-group nzPrefixIcon="user">
<input type="text" nz-input formControlName="phone" maxlength="11" placeholder="请输入手机号" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="smsVerifyCode">验证码</nz-form-label>
<nz-form-control nzSpan="18">
<div class="valid-code">
<nz-input-group nzPrefixIcon="lock">
<input [disabled]="true" type="text" nz-input formControlName="smsVerifyCode" maxlength="6" placeholder="请输入验证码" />
</nz-input-group>
<button
class="btn-code"
nz-button
nzType="link"
[disabled]="count > 0"
[nzLoading]="service.http.loading"
(click)="getCaptcha()"
>
{{ count > 0 ? '请等待' + count + 's' : ('获取验证码') }}
</button>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzSpan="18" nzOffset="6">
<button
class="btn-submit"
[disabled]="!formGroup1.valid"
[nzLoading]="service.http.loading"
nz-button
nzBlock="true"
nzType="primary"
(click)="formSubmit()"
>
下一步
</button>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
<!-- <app-captcha #dun [phone]="this.formGroup1.value.phone" (done)="captchaDone($event)"></app-captcha> -->
<ng-container *ngIf="step === 1">
<div nz-row>
<div nz-col nzOffset="7" nzMd="17">
<form nz-form [formGroup]="formGroup2" class="myForm">
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired nzFor="passWord">设置新密码</nz-form-label>
<nz-form-control nzSpan="8">
<nz-input-group [nzSuffix]="passWordType" nzSize="large">
<input nz-input [type]="isPassWordHide?'password':'text'" formControlName="passWord"
(ngModelChange)="validateConfirmPassword()" placeholder="请输入新密码" />
</nz-input-group>
<ng-template #passWordType>
<i nz-icon [nzType]="isPassWordHide?'eye-invisible':'eye'" (click)="isPassWordHide=!isPassWordHide"
nzTheme="outline" style="color: #bdb7b7;font-size: 18px;cursor: pointer;"></i>
<!-- <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
<ng-container *ngIf="control.hasError('minLength') || control.hasError('pattern')">
8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字!
</ng-container> -->
</ng-template>
</nz-form-control>
<div class="input-tootip">
<div *ngIf="formGroup2?.value?.passWord;else NodataTemplate">
<i *ngIf="formGroup2?.controls?.passWord?.errors" nz-icon nzType="close-circle" nzTheme="fill"
class="valid-icon"></i>
<i *ngIf="!formGroup2?.controls?.passWord?.errors" nz-icon nzType="check-circle" nzTheme="fill"
class="invalid-icon"></i>
</div>
<label class="tootip-label"> 8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字</label>
</div>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="4" nzRequired nzFor="passWordTo">重复新密码</nz-form-label>
<nz-form-control nzSpan="8" nzDisableAutoTips>
<nz-input-group [nzSuffix]="confirmPassWordType" nzSize="large">
<input nz-input [type]="isConfirmPassWordHide?'password':'text'" formControlName="passWordTo"
placeholder="再次输入密码" />
</nz-input-group>
<ng-template #confirmPassWordType>
<i nz-icon [nzType]="isConfirmPassWordHide?'eye-invisible':'eye'"
(click)="isConfirmPassWordHide=!isConfirmPassWordHide" nzTheme="outline"
style="color: #bdb7b7;font-size: 18px;cursor: pointer;"></i>
<!-- <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
<ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container> -->
</ng-template>
</nz-form-control>
<div class="input-tootip">
<div *ngIf="formGroup2?.value?.passWordTo;else NodataTemplate">
<i *ngIf="formGroup2?.controls?.passWordTo?.errors" nz-icon nzType="close-circle" nzTheme="fill"
class="valid-icon"></i>
<i *ngIf="!formGroup2?.controls?.passWordTo?.errors" nz-icon nzType="check-circle" nzTheme="fill"
class="invalid-icon"></i>
</div>
<label class="tootip-label">设置新密码与重复新密码保持一致</label>
</div>
</nz-form-item>
<nz-form-item>
<nz-form-control nzSpan="6" nzOffset="6">
<button [disabled]="!formGroup2.valid" [nzLoading]="service.http.loading" nz-button nzBlock="true"
nzType="primary" (click)="formSubmit()">
确认
</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
</div>
<form nz-form [formGroup]="formGroup2" class="myForm">
<nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="passWord">新的密码</nz-form-label>
<nz-form-control nzSpan="18" [nzErrorTip]="passwordErrorTpl">
<input
nz-input
type="password"
formControlName="passWord"
(ngModelChange)="validateConfirmPassword()"
placeholder="请输入密码"
/>
<ng-template #passwordErrorTpl let-control>
<ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
<ng-container *ngIf="control.hasError('minLength') || control.hasError('pattern')">
8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字!
</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="6" nzRequired nzFor="passWordTo">确认密码</nz-form-label>
<nz-form-control nzSpan="18" nzDisableAutoTips [nzErrorTip]="passwordToErrorTpl">
<input nz-input type="password" formControlName="passWordTo" placeholder="再次输入密码" />
<ng-template #passwordToErrorTpl let-control>
<ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
<ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzSpan="18" nzOffset="6">
<button
[disabled]="!formGroup2.valid"
[nzLoading]="service.http.loading"
nz-button
nzBlock="true"
nzType="primary"
(click)="formSubmit()"
>
下一步
</button>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
<ng-container *ngIf="step === 2">
<result [type]="result ? 'success' : 'error'" [title]="title" [description]="subTitle" style="margin-top: 3rem;margin-bottom: 5rem;">
<result [type]="result ? 'success' : 'error'" [title]="title" [description]="subTitle" style="margin-top: 3rem">
<ng-template #title>
<div class="title" style="font-size: 24px">
<!-- {{ 'app.register-result.msg' | translate: params }} -->
@ -126,19 +120,10 @@
立即登录
</button>
<!-- <button routerLink="/" nz-button nzSize="large">
{{ 'app.register-result.back-home' | translate }}
</button> -->
{{ 'app.register-result.back-home' | translate }}
</button> -->
</result>
</ng-container>
</div>
</page-grid>
</div>
<ng-template #suffixTemplateInfo>
<ng-container *ngIf="count < 1; else intervalTemplate">
<span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getCaptcha()">获取验证码</span>
</ng-container>
<ng-template #intervalTemplate> 请等待{{ count }}s </ng-template>
</ng-template>
<ng-template #NodataTemplate><label class="dot">●</label></ng-template>

106
src/app/routes/passport/components/retrieve-password/retrieve-password.component.less
View File

@ -1,51 +1,29 @@
@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%;
width: 100%;
height: 100%;
margin: 100px auto;
background-color: #fff;
margin : 100px auto;
.myForm {
margin-top : 3rem;
margin-bottom: 5rem;
width: 25rem;
margin: 5rem auto;
}
.steps-content {
margin-top : 16px;
border : 1px dashed #e9e9e9;
border-radius : 6px;
background-color: #ffffff;
min-height : 250px;
min-height: 250px;
margin-top: 16px;
background-color: #fafafa;
border: 1px dashed #e9e9e9;
border-radius: 6px;
// text-align: center;
}
@ -56,31 +34,45 @@
button {
margin-right: 8px;
}
.step-title{
padding: 8px;
}
}
}
.input-tootip {
width : 250px;
padding-left: 20px;
display : flex;
display : flex;
align-items : center;
.dot {
font-size: 21px;
color : #bdb8b8;
}
.content {
background-color: #f0f3f7;
}
.main {
max-width: 1200px;
margin: 0 auto;
}
.header {
background: #fff;
}
.layout {
min-height: 100vh;
}
.valid-icon {
color: rgb(217 0 27);
.logo {
display: flex;
margin: 16px 0;
line-height: 32px;
dt {
width: 95px;
height: 32px;
img {
vertical-align: top;
}
}
dd {
flex: 1;
margin-bottom: 0;
padding: 0 10px;
color: #1890ff;
font-weight: 500;
font-size: 24px;
}
}
.invalid-icon {
color: rgb(82 196 26);
}
.tootip-label {
margin-left: 8px;
font-size : 12px;
}
}

44
src/app/routes/passport/components/retrieve-password/retrieve-password.component.ts
View File

@ -1,6 +1,7 @@
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';
@ -8,9 +9,11 @@ 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;
@ -18,20 +21,18 @@ 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 {}
ngAfterViewInit(): void {
this.dun.init();
}
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) {
@ -43,7 +44,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({
@ -53,12 +54,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]],
});
}
@ -75,7 +76,7 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
submitForm1() {
for (const i in this.formGroup1.controls) {
if (this.formGroup1.controls[i]) {
if (true) {
this.formGroup1.controls[i].markAsDirty();
this.formGroup1.controls[i].updateValueAndValidity();
}
@ -87,14 +88,13 @@ 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 (this.formGroup2.controls[i]) {
if (true) {
this.formGroup2.controls[i].markAsDirty();
this.formGroup2.controls[i].updateValueAndValidity();
}
@ -145,22 +145,22 @@ export class UserRetrievePasswordComponent implements OnInit, AfterViewInit {
return;
}
if (this.formGroup1.value.phone) {
this.service
.request(`${this.service.$api_send_sms_by_mobile}`, { phoneNumber: this.formGroup1.value.phone })
this.service.http
.post(`${this.service.$getAccountSMVerificationCode}`, null, { phoneNumber: this.formGroup1.value.phone })
.subscribe((res: any) => {
// console.log(res, 'res');
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();
});

11
src/app/routes/passport/services/passport.service.ts
View File

@ -1,3 +1,11 @@
/*
* @Author: your name
* @Date: 2021-12-27 21:08:36
* @LastEditTime: 2022-01-10 17:36:25
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \tms-obc-web\src\app\routes\passport\services\passport.service.ts
*/
import { Injectable, Injector } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
@ -10,7 +18,8 @@ import { EAFileUtil } from 'src/app/shared/utils/file.util';
export class PassportService extends BaseService {
// 登录协议，服务订购协议
public $api_get_agreement = `/api/mdc/pbc/agreementInfo/getAgreementInfoByType?_allow_anonymous=true`;
// 未登录账号发送验证码
public $getAccountSMVerificationCode = `/api/mdc/cuc/userBasicInfo/forgetPassword/getAccountSMVerificationCode?_allow_anonymous=true`;
constructor(public injector: Injector) {
super(injector);
}

9
src/app/shared/services/business/user.service.ts
View File

@ -2,7 +2,7 @@
* @Description:
* @Author: wsm
* @Date: 2021-06-22 10:25:33
* @LastEditTime: 2021-12-08 16:56:20
* @LastEditTime: 2022-01-10 17:47:07
* @LastEditors: Please set LastEditors
* @Reference:
*/
@ -37,13 +37,16 @@ export class EAUserService extends BaseService {
// 获取协议信息
public $api_get_agreement_info = `/scce/pbc/pbc/agreementInfo/getAgreementInfoByType?_allow_anonymous=true`;
// 未登录验证身份
public $forgetPasswordVerifyIdentity = `/scm/cuc/cuc/userBasicInfo/forgetPassword/verifyIdentity?_allow_anonymous=true`;
public $forgetPasswordVerifyIdentity = `/api/mdc/cuc/userBasicInfo/forgetPassword/verifyIdentity?_allow_anonymous=true`;
// 通过手机号发送短信验证码
public $api_send_sms_by_mobile = `/api/mdc/pbc/smsSend/getSMVerificationCode?_allow_anonymous=true&_allow_badcode=true`;
// 未设置密码的用户设置用户密码
public $api_set_password = `/scce/cuc/cuc/userBasicInfo/setPassword`;
// 凭证修改密码
public $voucherUpdatePassword = `/scm/cuc/cuc/userBasicInfo/forgetPassword/voucherUpdatePassword?_allow_anonymous=true`;
// 未登录账号发送验证码
public $getAccountSMVerificationCode = `/api/mdc/cuc/userBasicInfo/forgetPassword/getAccountSMVerificationCode?_allow_anonymous=true`;
// 凭证修改密码
public $voucherUpdatePassword = `/api/mdc/cuc/userBasicInfo/forgetPassword/voucherUpdatePassword?_allow_anonymous=true`;
// 检测用户名是否存在
public $api_validate_username_exists = `/tms/cuc/cuc/userBasicInfo/checkUserName?_allow_badcode=true`;
// 获取当前用户信息