TASK:113634 - 优化数字锁屏组件逻辑，符合使用条件，添加数字/图案锁屏组件编译配置

2022-10-13 19:25:51 +08:00 · 2022-10-13 19:25:51 +08:00 · 299fccc37b
parent 8c5bbddac0
commit 299fccc37b
5 changed files with 161 additions and 110 deletions
--- a/src/components/digicipher/digicipher.ts
+++ b/src/components/digicipher/digicipher.ts
@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
 import {customElement, property, query, queryAll} from 'lit/decorators.js'
-import {sharedStyles} from './digicipher-style'
+import {sharedStyles} from './digicipher-style.js'

@customElement('star-digicipher')
 export class StarLockNumber extends LitElement {
@ -11,15 +11,16 @@ export class StarLockNumber extends LitElement {
  @queryAll('button') buttons!: NodeListOf<HTMLButtonElement>
  @query('zero') zero!: HTMLButtonElement
  @queryAll('span') span!: NodeListOf<HTMLSpanElement>
-  @query('spanContainer') spanContainer!: HTMLDivElement
+  @query('.spanContainer') spanContainer!: HTMLDivElement
  @query('#parent') parent!: HTMLDivElement
  @query('.delete') _delete!: HTMLParagraphElement
  @query('.cancel') cancel!: HTMLParagraphElement
  @query('.topText') topText!: HTMLParagraphElement
  @query('.screen') screen!: HTMLDivElement

-  @property({type: Boolean}) locked = false
-  @property({type: Boolean}) saveMode = false
+  @property({type: String}) mode = "default"
+  @property({type: String}) cancelNote = "取消"
+  @property({type: String}) deleteNote = "删除"
  @property({type: Boolean}) confirm = false
  @property({type: Number}) tried = 0
  @property({type: Number}) time = 0
@ -38,14 +39,29 @@ export class StarLockNumber extends LitElement {
  protected firstUpdated(
    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
  ): void {
-    console.log(this.saveMode)
-    this.changeText = this.saveMode ? '更改' : '输入'
+    switch(this.mode){
+      case "create":
+        this.changeText = '新建密码';
+        break;
+      case "verify":
+      case "comfirm":
+        this.changeText = '输入密码';
+        break;
+      case "default":
+        this.changeText = '星光麒麟密码组件'
+    }
+    this.spanContainer.style.visibility = `visible`
+    this.parent.style.visibility = `visible`
+    this.addEventListener('passcode-create-success',this)
+    this.addEventListener('passcode-verify-success',this)
+    this.addEventListener('passcode-verify-error',this)
+    this.addEventListener('passcode-reset',this)
  }

  render() {
    return html`
      <div id="slideUp">
-        <p class="topText">${this.changeText}密码</p>
+        <p class="topText">${this.changeText}</p>
        <div class="spanContainer">
          <span id="sOne"></span>
          <span id="sTwo"></span>
@ -71,8 +87,8 @@ export class StarLockNumber extends LitElement {
            <button data-num="8">8</button>
            <button data-num="9">9</button>
          </div>
-          <p class="cancel" id="lockCancel">取消</p>
-          <p class="delete">删除</p>
+          <p class="cancel" id="lockCancel">${this.cancelNote}</p>
+          <p class="delete">${this.deleteNote}</p>
        </div>
      </div>
    `
@ -87,6 +103,50 @@ export class StarLockNumber extends LitElement {
      console.log(this.second)
    }, 1000)
  }
+  handleEvent(event: CustomEvent) {
+    switch (event.type) {
+      case 'passcode-create-success':
+        this.guess = ''
+        this.clicks = 0
+        this.spanContainer.style.visibility = `hidden`;
+        this.parent.style.visibility = `hidden`;
+        this.changeText = '保存成功';
+        break
+      case 'passcode-verify-success':
+        this.guess = ''
+        this.clicks = 0
+        for (let i = 0; i < 6; i++) {
+          this.changeBgColor('#F4F4F4', i, 0.4)
+        }
+        break
+      case 'passcode-verify-error':
+             // 抖动反馈
+        for (let i = 0; i < 10; i++) {
+          this.buttons[i].style.setProperty('animation', 'errtips .5s')
+        }
+        //清空密码且删除抖动反馈
+        for (let i = 0; i < 6; i++) {
+          this.changeBgColor('#F4F4F4', i, 0.4)
+        }
+        this.guess = ''
+        this.clicks = 0
+        break
+        case 'passcode-reset':
+          this.guess = ''
+          this.clicks = 0
+          for (let i = 0; i < 6; i++) {
+            this.changeBgColor('#F4F4F4', i, 0.4)
+          }
+          if(this.mode == "create"){
+          this.changeText = '新建密码'
+          this.spanContainer.style.visibility = `visible`
+          this.parent.style.visibility = `visible`
+          }else{
+            this.changeText = '输入密码'
+          }
+      break
+    }
+  }

  touchStart(e: TouchEvent) {
    e.preventDefault()
@ -96,105 +156,38 @@ export class StarLockNumber extends LitElement {
      this.makeZero()
      //点击反馈
      this.changeNumberBgColor()
-      if (this.clicks < 6) {
+      if (this.clicks < 5) {
        //圆点变化
-        this.changeBgColor('#333333', this.clicks, 1)
+        this.changeBgColor('#F4F4F4', this.clicks, 1)
        this.clicks += 1
        this.guess += (e.target as HTMLElement).dataset.num
-        // console.log('输入后为：', this.guess)
-      }
-      //进入存储模式，输入6次数字后存储密码，圆点变色
-      if (this.saveMode && this.clicks == 6) {
-        if (!this.confirm) {
-          this.changePasswd()
-        } else {
-          this.confirmPasswd()
+      }else if (this.clicks == 5){
+        if (this.mode == "create"){
+          if (!this.confirm) {
+            this.changePasswd()
+          } else {
+            this.confirmPasswd()
+          }
+        }else if(this.mode == "verify"){
+          this.dispatchPasswd()
        }
      }
-      //密码错误
-      // if (this.clicks == 6 && this.guess !== this.passwd && !this.saveMode) {
-      if (this.clicks == 6 && !this.saveMode) {
-        //第一次密码错误开始计时120秒
-        if (this.tried == 0) {
-          this.second = 120
-          this.timer()
-        }
-        //输错密码5次后 --- 锁定屏幕
-        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
-          this.dispatchEvent(
-            new CustomEvent('star-digicipher-locked', {
-              detail: {
-                value: this.passwd,
-              },
-              bubbles: true,
-              composed: true,
-            })
-          )
-          // 跳转到已锁屏页面
-          // window.location.href = '#locked'
-        }
-        // 抖动反馈
-        // for (let i = 0; i < 10; i++) {
-        //   this.buttons[i].style.setProperty('animation', 'errtips .5s')
-        // }
-        //清空密码且删除抖动反馈
-        for (let i = 0; i < 6; i++) {
-          this.changeBgColor('#000000', i, 0.2)
-        }
-        this.guess = ''
-        this.clicks = 0
-      }
    } else if ((e.target as Element).className === 'delete') {
      if (this.clicks == 0) {
-        // console.log('不可再删除')
      } else {
        this.clicks -= 1
-        this.changeBgColor('#000000', this.clicks, 0.2)
+        this.changeBgColor('#F4F4F4', this.clicks, 0.4)
        this.guess = this.guess.slice(0, -1)
-        // console.log('删除后为：', this.guess)
      }
    } else if ((e.target as Element).className === 'cancel') {
      //点击取消，返回锁屏
-      console.log('返回锁屏')
      //   this.makeZero()
      for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
+        this.changeBgColor('#F4F4F4', i, 0.4)
      }
      this.guess = ''
      this.clicks = 0
    }
-    //密码正确
-    if (this.guess === this.passwd && !this.saveMode) {
-      clearInterval(this.time)
-      this.tried = 0
-      for (let j = 0; j < 10; j++) {
-        this.buttons[j].removeAttribute('style')
-      }
-      // console.log('密码正确')
-      for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
-      }
-      this.guess = ''
-      this.clicks = 0
-      this.slideUp.style.setProperty('animation', 'suctip .6s')
-      this.dispatchEvent(
-        new CustomEvent('star-digicipher-success', {
-          detail: {
-            value: this.passwd,
-          },
-          bubbles: true,
-          composed: true,
-        })
-      )
-    }
  }
  touchEnd(e: TouchEvent) {
    if ((e.target as Element).tagName === 'BUTTON') {
@ -219,32 +212,48 @@ export class StarLockNumber extends LitElement {
      this.buttons[j].removeAttribute('style')
    }
  }
-  //更改密码
-  changePasswd() {
-    // this.savewd = this.guess
-    // console.log('this.savewd = ', this.savewd)
-    for (let i = 0; i < 6; i++) {
-      this.changeBgColor('#000000', i, 0.2)
-    }
+
+  //发送密码
+  dispatchPasswd(){
+    this.passwd = this.guess
    this.guess = ''
    this.clicks = 0
+    this.dispatchEvent(
+      new CustomEvent('star-digicipher-passcode-verify', {
+        detail: {
+          value: this.passwd,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+  //更改密码
+  changePasswd() {
+    this.savewd = this.guess
+    this.clicks = 0
+    for (let i = 0; i < 6; i++) {
+      this.changeBgColor('#F4F4F4', i, 0.4)
+    }
+    this.guess = ''
+
    this.confirm = true
-    this.changeText = '确认'
+    this.changeText = '确认密码'
  }
  //确认密码
  confirmPasswd() {
-    // if (this.savewd == this.guess) {
-    if (1) {
-      // this.passwd = this.savewd
+    if (this.savewd.toString() == this.guess.toString() ) {
+    // if (1) {
+      this.passwd = this.savewd
      this.savewd = ''
      for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
+        this.changeBgColor('#F4F4F4', i, 0.4)
      }
      this.guess = ''
      this.clicks = 0
-      console.log('新密码设置成功：', this.passwd)
+      this.changeText = '新建密码'
      this.dispatchEvent(
-        new CustomEvent('star-digicipher-savesuccess', {
+        new CustomEvent('star-digicipher-passcode-create', {
          detail: {
            value: this.passwd,
          },
@ -253,18 +262,14 @@ export class StarLockNumber extends LitElement {
        })
      )
    } else {
-      // console.log('两次密码输入不一致，请重新设置密码')
-      // console.log('this.savewd = ', this.savewd)
      for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
+        this.changeBgColor('#F4F4F4', i, 0.4)
      }
      this.guess = ''
      this.clicks = 0
      this.savewd = ''
-      // console.log('this.savewd', this.savewd)
-      // console.log('this.passwd', this.passwd)
      this.confirm = false
-      this.changeText = '更改'
+      this.changeText = '更改密码'
    }
-  }
+}
 }
--- a/src/components/digicipher/index.ts
+++ b/src/components/digicipher/index.ts
@ -0,0 +1 @@
+export * from './digicipher.js'
--- a/src/components/digicipher/package.json
+++ b/src/components/digicipher/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/digicipher",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./digicipher.js": {
+      "default": "./digicipher.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/pattern-view/index.ts
+++ b/src/components/pattern-view/index.ts
@ -0,0 +1 @@
+export * from './pattern-view.js'
--- a/src/components/pattern-view/package.json
+++ b/src/components/pattern-view/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/pattern",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./pattern-view.js": {
+      "default": "./pattern-view.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}