From 608f4cfead0e27208443c103a818a0a61921da23 Mon Sep 17 00:00:00 2001
From: youmengting <2080639302@qq.com>
Date: Thu, 23 Mar 2023 13:47:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/admin/login/login.module.ts           |   2 +
 .../admin/login/login/login.component.html    |  13 ++
 .../admin/login/login/login.component.less    |   6 +-
 src/app/admin/login/login/login.component.ts  |  18 ++-
 .../verification-code.component.html          |   5 +
 .../verification-code.component.scss          |   0
 .../verification-code.component.ts            | 123 ++++++++++++++++++
 .../verification-code.module.ts               |  14 ++
 src/environments/environment.ts               |   2 +-
 9 files changed, 179 insertions(+), 4 deletions(-)
 create mode 100644 src/app/common/verification-code/verification-code.component.html
 create mode 100644 src/app/common/verification-code/verification-code.component.scss
 create mode 100644 src/app/common/verification-code/verification-code.component.ts
 create mode 100644 src/app/common/verification-code/verification-code.module.ts

diff --git a/src/app/admin/login/login.module.ts b/src/app/admin/login/login.module.ts
index 20e6060..f3095b5 100644
--- a/src/app/admin/login/login.module.ts
+++ b/src/app/admin/login/login.module.ts
@@ -5,6 +5,7 @@ import { LoginRoutingModule } from './login-routing.module';
 import { LoginComponent } from './login/login.component';
 import {NgZorroAntdModule} from 'ng-zorro-antd';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { VerificationCodeModule } from 'src/app/common/verification-code/verification-code.module';
 
 
 @NgModule({
@@ -13,6 +14,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
     CommonModule,
     LoginRoutingModule,
     NgZorroAntdModule,
+    VerificationCodeModule,
     ReactiveFormsModule,
     FormsModule,
   ]
diff --git a/src/app/admin/login/login/login.component.html b/src/app/admin/login/login/login.component.html
index 40d020c..3ded497 100644
--- a/src/app/admin/login/login/login.component.html
+++ b/src/app/admin/login/login/login.component.html
@@ -22,6 +22,19 @@
             <input type="password" formControlName="password" placeholder="请输入您的密码">
           </div>
         </div>
+
+        <div class="form-item">
+          <div class="form-item-label"><h3>验&nbsp;证&nbsp;码</h3></div>
+          <div class="form-item-control" nz-row [nzGutter]="16">
+            <input nz-col nzSpan="14" type="text" formControlName="vertifyCode"  placeholder="请输入验证码">
+
+            <app-verification-code nz-col nzSpan="10" (validate)="validateFun($event)" ></app-verification-code>
+        
+          </div>
+        </div>
+
+        
+
         <!--<div class="forget-pwd">
 
           <a routerLink="/retrieveAdminPwd">忘记密码</a>
diff --git a/src/app/admin/login/login/login.component.less b/src/app/admin/login/login/login.component.less
index aee83c7..5ab3208 100644
--- a/src/app/admin/login/login/login.component.less
+++ b/src/app/admin/login/login/login.component.less
@@ -4,7 +4,7 @@
 }
 
 .header-block {
-  width: 1230px;
+//  width: 1230px;
   margin: 0 auto;
   overflow: hidden;
   background: #ffffff;
@@ -55,7 +55,9 @@
   .body-content-login {
     margin: -300px auto;
     width: 350px;
-    height: 400px;
+   // height: 400px;
+   padding:10px 0 20px;
+
     border-radius: 16px;
     box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.17);
     background: #ffffff;
diff --git a/src/app/admin/login/login/login.component.ts b/src/app/admin/login/login/login.component.ts
index d7c729c..70796c1 100644
--- a/src/app/admin/login/login/login.component.ts
+++ b/src/app/admin/login/login/login.component.ts
@@ -16,7 +16,8 @@ import {HttpClient} from '@angular/common/http';
 export class LoginComponent implements OnInit {
 
   loginForm: FormGroup; // 登录表单
-
+  code:string="";
+ 
   constructor(private store: LocalStorageService, // 数据请求
               private router: Router,  // 路由
               private form: FormBuilder, // 表单校验
@@ -30,6 +31,7 @@ export class LoginComponent implements OnInit {
     this.loginForm = this.form.group({
       loginName: [null, [Validators.required]],
       password: [null, [Validators.required]],
+      vertifyCode: [""]//验证码
     });
   }
 
@@ -37,6 +39,7 @@ export class LoginComponent implements OnInit {
    * 登录
    */
   submitLogin() {
+
     // tslint:disable-next-line:forin
     for (const i in this.loginForm.controls) {
       this.loginForm.controls[i].markAsDirty();
@@ -48,7 +51,15 @@ export class LoginComponent implements OnInit {
         nzContent: '请填写用户和密码',
       });
       return;
+    }else if(this.loginForm.value.vertifyCode=="" ||this.loginForm.value.vertifyCode.toLowerCase() !== this.code ){
+      this.modal.warning({
+        nzTitle: '提示',
+        nzContent: '请填写正确的验证码',
+      });
+      return;
     }
+
+
     this.loginService.userLogin(this.loginForm.value, data => {
       if (data['return_code'] === '000000') {
         data['return_data']['object']['menuList'] = data['return_data']['object']['menuList'].filter(o => o.showOnMobile == 0);
@@ -63,4 +74,9 @@ export class LoginComponent implements OnInit {
     });
 
   }
+
+  // 子组件验证方法
+  validateFun(str:string){
+    this.code=str
+  }
 }
diff --git a/src/app/common/verification-code/verification-code.component.html b/src/app/common/verification-code/verification-code.component.html
new file mode 100644
index 0000000..d7e4a2f
--- /dev/null
+++ b/src/app/common/verification-code/verification-code.component.html
@@ -0,0 +1,5 @@
+<div id="v_container" (click)="refresh()" style="width: 100px;height: 100%;display: flex;">
+  <canvas #verifyCanvas width="100" height="40" style="cursor: pointer;" ></canvas>
+</div>
+
+
diff --git a/src/app/common/verification-code/verification-code.component.scss b/src/app/common/verification-code/verification-code.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/common/verification-code/verification-code.component.ts b/src/app/common/verification-code/verification-code.component.ts
new file mode 100644
index 0000000..e35206b
--- /dev/null
+++ b/src/app/common/verification-code/verification-code.component.ts
@@ -0,0 +1,123 @@
+
+import { Component, ElementRef, ViewChild, OnInit,Output,EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-verification-code',
+  templateUrl: './verification-code.component.html',
+  styleUrls: ['./verification-code.component.scss']
+})
+
+export class VerificationCodeComponent implements OnInit {
+  @ViewChild('verifyCanvas') verifyCanvas: ElementRef;
+  @Output() validate = new EventEmitter()
+  // pushList(v:string){
+  //   console.log(this.inpValue)
+  //     this.validate.emit(v)
+  // }
+
+  codeLength = 4; // 设置验证码长度
+  options = {
+    // 默认options参数值
+    id: 'v_container', // 容器Id
+    canvasId: 'verifyCanvas', // canvas的ID
+    width: 100, // 默认canvas宽度
+    height: 40, // 默认canvas高度
+    type: 'blend', // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
+    code: '',
+    numArr: [],
+    letterArr: [],
+  };
+  ctx;
+  constructor() {}
+
+  ngOnInit() {}
+
+    ngAfterViewInit(){
+    this.ctx = this.verifyCanvas.nativeElement.getContext('2d');
+
+    this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',');
+    this.options.letterArr = this.getAllLetter();
+    this.refresh();
+  }
+
+  // 生成验证码
+  refresh() {
+    this.options.code = '';
+    this.ctx.textBaseline = 'middle';
+
+    this.ctx.fillStyle = this.randomColor(180, 240);
+    this.ctx.fillRect(0, 0, this.options.width, this.options.height);
+
+    let txtArr = [];
+    if (this.options.type === 'blend') {
+      // 判断验证码类型
+      txtArr = this.options.numArr.concat(this.options.letterArr);
+    } else if (this.options.type === 'number') {
+      txtArr = this.options.numArr;
+    } else {
+      txtArr = this.options.letterArr;
+    }
+
+    for (let i = 1; i <= this.codeLength; i++) {
+      const txt = txtArr[this.randomNum(0, txtArr.length)];
+      this.options.code += txt;
+      this.ctx.font = this.randomNum(this.options.height / 2, this.options.height) + 'px SimHei'; // 随机生成字体大小
+      this.ctx.fillStyle = this.randomColor(50, 160); // 随机生成字体颜色
+      this.ctx.shadowOffsetX = this.randomNum(-3, 3);
+      this.ctx.shadowOffsetY = this.randomNum(-3, 3);
+      this.ctx.shadowBlur = this.randomNum(-3, 3);
+      this.ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+      const x = (this.options.width / (this.codeLength + 1)) * i;
+      const y = this.options.height / 2;
+      const deg = this.randomNum(-30, 30);
+      // 设置旋转角度和坐标原点
+      this.ctx.translate(x, y);
+      this.ctx.rotate((deg * Math.PI) / 180);
+      this.ctx.fillText(txt, 0, 0);
+      // 恢复旋转角度和坐标原点
+      this.ctx.rotate((-deg * Math.PI) / 180);
+      this.ctx.translate(-x, -y);
+    }
+    // 绘制干扰线
+    for (let i = 0; i < 2; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    // 绘制干扰点
+    for (let i = 0; i < this.options.width / 2; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+
+
+    this.validate.emit(this.options.code.toLowerCase())
+
+  }
+
+ 
+  // 生成字母数组
+  getAllLetter() {
+    const letterStr =
+      'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z';
+    return letterStr.split(',');
+  }
+
+  // 生成一个随机数
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+
+  // 生成一个随机色
+  randomColor(min, max) {
+    const r = this.randomNum(min, max);
+    const g = this.randomNum(min, max);
+    const b = this.randomNum(min, max);
+    return 'rgb(' + r + ',' + g + ',' + b + ')';
+  }
+}
+
diff --git a/src/app/common/verification-code/verification-code.module.ts b/src/app/common/verification-code/verification-code.module.ts
new file mode 100644
index 0000000..c958456
--- /dev/null
+++ b/src/app/common/verification-code/verification-code.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VerificationCodeComponent } from './verification-code.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    VerificationCodeComponent
+  ],
+  declarations: [VerificationCodeComponent]
+})
+export class VerificationCodeModule { }
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 54aeb74..653c501 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  baseUrl: 'http://localhost:9302/brest/', // 测试环境服务器地址(请求数据地址)
+  baseUrl: 'https://hsgcs.dctpay.com/brest/', // 测试环境服务器地址(请求数据地址)
   orderUrl: 'https://hsgcs.dctpay.com/order/', // 测试环境服务器地址(请求数据地址)
   imageUrl: 'https://hsgcs.dctpay.com/filesystem/',
   key: 'https://hsgcs.dctpay.com/phone-recharge-H5/index.html?codeValue=',