diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts index 2530194..8a63567 100644 --- 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 @query('zero') zero!: HTMLButtonElement @queryAll('span') span!: NodeListOf - @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 | Map ): 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`
-

${this.changeText}密码

+

${this.changeText}

@@ -71,8 +87,8 @@ export class StarLockNumber extends LitElement {
-

取消

-

删除

+

${this.cancelNote}

+

${this.deleteNote}

` @@ -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 = '更改密码' } - } +} } diff --git a/src/components/digicipher/index.ts b/src/components/digicipher/index.ts new file mode 100644 index 0000000..00b9a75 --- /dev/null +++ b/src/components/digicipher/index.ts @@ -0,0 +1 @@ +export * from './digicipher.js' diff --git a/src/components/digicipher/package.json b/src/components/digicipher/package.json new file mode 100644 index 0000000..d244953 --- /dev/null +++ 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" +} diff --git a/src/components/pattern-view/index.ts b/src/components/pattern-view/index.ts new file mode 100644 index 0000000..419b74a --- /dev/null +++ b/src/components/pattern-view/index.ts @@ -0,0 +1 @@ +export * from './pattern-view.js' diff --git a/src/components/pattern-view/package.json b/src/components/pattern-view/package.json new file mode 100644 index 0000000..3a234dd --- /dev/null +++ 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" +}