车辆对接

2022-01-10 17:48:25 +08:00
parent 5f63353599
commit 9389402f6a
5 changed files with 180 additions and 191 deletions
--- 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,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-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">
-                  <nz-input-group [nzSuffix]="suffixTemplateInfo" nzSize="large">
-                    <input type="text" nz-input formControlName="smsVerifyCode" maxlength="6" placeholder="请输入验证码" />
+              <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="6" nzOffset="6">
-                  <button class="btn-submit" [disabled]="!formGroup1.valid" [nzLoading]="service.http.loading" nz-button
-                    nzBlock="true" nzType="primary" (click)="formSubmit()">
+            <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>
-          </div>
-        </div>
      </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>
+            <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-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> -->
+            <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>
-                <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()">
-                    确认
+            <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>
-          </div>
-        </div>
      </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 }} -->
@ -133,12 +127,3 @@
    </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>
--- 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,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;
+}
+
+.logo {
+  display: flex;
+  margin: 16px 0;
+  line-height: 32px;
+  dt {
+    width: 95px;
+    height: 32px;
+    img {
+      vertical-align: top;
    }
-
-  .valid-icon {
-    color: rgb(217 0 27);
  }
-
-  .invalid-icon {
-    color: rgb(82 196 26);
-  }
-
-  .tootip-label {
-    margin-left: 8px;
-    font-size  : 12px;
+  dd {
+    flex: 1;
+    margin-bottom: 0;
+    padding: 0 10px;
+    color: #1890ff;
+    font-weight: 500;
+    font-size: 24px;
  }
 }
+
--- 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,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();
      });
--- a/src/app/routes/passport/services/passport.service.ts
+++ b/src/app/routes/passport/services/passport.service.ts
@ -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);
  }
--- a/src/app/shared/services/business/user.service.ts
+++ b/src/app/shared/services/business/user.service.ts
@ -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`;
  // 获取当前用户信息