Merge pull request #49 in YR/star-web-components from feature-digicipher to master

* commit 'a5471be9bae4a856c206e666299c4370f7bcab5e':
  TASK: #111576 数字密码2分钟内记录用户输入次数

src/components/digicipher/digicipher-style.ts

@@ -49,6 +49,7 @@ export const sharedStyles: CSSResult = css`
     top: 68%;
   }
   button {
+    position: relative;
     width: 70px;
     height: 70px;
     border-radius: 50%;
@@ -99,16 +100,16 @@ export const sharedStyles: CSSResult = css`
     top: 23%;
   }
   .grid {
-    position: relative;
+    position: absolute;
     display: grid;
     grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9' '. 0 .';
     gap: 20px;
-    margin: 0 118px;
+    margin: 0 124px;
   }
 
   .cancel,
   .delete {
-    position: relative;
+    position: absolute;
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
@@ -117,14 +118,13 @@ export const sharedStyles: CSSResult = css`
     height: 23.5px;
     line-height: 23.5px;
     font-size: 18px;
+    top: 73%;
   }
   .cancel {
     left: 27%;
-    top: 5%;
   }
   .delete {
     left: 65.5%;
-    top: -3.5%;
   }
   .cancel:hover,
   .delete:hover {
@@ -173,10 +173,10 @@ export const sharedStyles: CSSResult = css`
   /*密码输入正确后动效*/
   @keyframes suctip {
     0% {
-      transform: translateY(0);
+      transform: translate(-50%, -50%);
     }
     100% {
-      transform: translateY(-1000px);
+      transform: translate(-50%, -300%);
     }
   }
 `

src/components/digicipher/digicipher.ts

@@ -20,7 +20,10 @@ export class StarLockNumber extends LitElement {
 
   @property({type: Boolean}) locked = false
   @property({type: Number}) tried = 0
+  @property({type: Number}) time = 0
+  @property({type: Number}) errors = 0
   @property({type: Number}) clicks = 0
+  @property({type: Number}) second = 120
   @property({type: Number}) _number = 0
   @property({type: Number}) clickNumber = 0
   @property({type: String}) color = ''
@@ -28,6 +31,10 @@ export class StarLockNumber extends LitElement {
   @property({type: String}) guess = ''
   @property({type: String}) passwd = '123456'
 
+  constructor() {
+    super()
+  }
+
   render() {
     return html`
       <div id="slideUp">
@@ -63,6 +70,16 @@ export class StarLockNumber extends LitElement {
       </div>
     `
   }
+  timer() {
+    this.time = setInterval(() => {
+      if (--this.second <= 0) {
+        clearInterval(this.time)
+        this.second = 120
+        this.tried = 0
+      }
+      console.log(this.second)
+    }, 1000)
+  }
 
   touchStart(e: TouchEvent) {
     e.preventDefault()
@@ -81,12 +98,20 @@ export class StarLockNumber extends LitElement {
       }
       //密码错误
       if (this.clicks == 6 && this.guess !== this.passwd) {
+        //第一次密码错误开始计时120秒
+        if (this.tried == 0) {
+          this.second = 120
+          this.timer()
+        }
         //输错密码5次后锁定屏幕
-        if (this.tried <= 5) {
-          this.tried++
-          console.log('密码错误 已尝试' + this.tried + '次')
-          this.locked = this.tried >= 5 ? true : false
+        if (this.tried++ < 4) {
+          this.locked = false
+          console.log('密码错误 已尝试' + this.tried + '次', this.locked)
         } else {
+          console.log('密码错误 已尝试' + this.tried + '次')
+          this.locked = true
+          clearInterval(this.time)
+          console.log('locked = ' + this.locked + ' 进入已锁定')
           this.tried = 0
         }
         // 抖动反馈
@@ -119,7 +144,10 @@ export class StarLockNumber extends LitElement {
       this.guess = ''
       this.clicks = 0
     }
+    //密码正确
     if (this.guess === this.passwd) {
+      clearInterval(this.time)
+      this.tried = 0
       for (let j = 0; j < 10; j++) {
         this.buttons[j].removeAttribute('style')
       }