From c1cd0db9594eda6d01007658c7464679345b1e51 Mon Sep 17 00:00:00 2001 From: yuanchongjun Date: Thu, 1 Dec 2022 02:01:34 +0800 Subject: [PATCH] =?UTF-8?q?features=20-=20=E8=B0=83=E6=95=B4lock=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/digicipher/digicipher.ts | 67 +++++++++++++++------ src/components/pattern-view/pattern-view.ts | 16 ++--- 2 files changed, 56 insertions(+), 27 deletions(-) diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts index 5e4531b..e340c68 100644 --- a/src/components/digicipher/digicipher.ts +++ b/src/components/digicipher/digicipher.ts @@ -4,7 +4,13 @@ import { CSSResultArray, PropertyValueMap, } from '../base/star-base-element.js' -import {customElement, property, query, queryAll} from 'lit/decorators.js' +import { + customElement, + property, + query, + queryAll, + state, +} from 'lit/decorators.js' import {sharedStyles} from './digicipher-style.js' @customElement('star-digicipher') @@ -12,6 +18,7 @@ export class StarLockNumber extends StarBaseElement { public static override get styles(): CSSResultArray { return [sharedStyles] } + @state() svmode: boolean = false @query('#slideUp') slideUp!: HTMLDivElement @queryAll('button') buttons!: NodeListOf @query('zero') zero!: HTMLButtonElement @@ -24,12 +31,12 @@ export class StarLockNumber extends StarBaseElement { @query('p') text!: HTMLParagraphElement @query('.screen') screen!: HTMLDivElement @query('.bottomText') bottomText!: HTMLParagraphElement - @property({type: Boolean}) saveMode = false + @property({type: Boolean, reflect: true}) savemode = false @property({type: String}) verifyError = '' @property({type: Number}) verifyErrorCounter = 1 @property({type: String}) cancelNote = '取消' @property({type: String}) deleteNote = '删除' - @property({type: Boolean}) confirm = false + @property({type: Boolean, reflect: true}) confirm = false @property({type: Number}) tried = 0 @property({type: Number}) time = 0 @property({type: Number}) errors = 0 @@ -44,10 +51,32 @@ export class StarLockNumber extends StarBaseElement { @property({type: String}) passwd = '' @property({type: String}) savewd = '' + // protected update(changedProperties: PropertyValueMap | Map): void { + // super.update(changedProperties) + // if (this.savemode) { + // this.changeText = '请输入数字锁屏密码' + // /* this.slideUp.style.setProperty('top', 'var(--auto-370px)') */ + // this.spanContainer.style.setProperty( + // 'margin', + // 'var(--auto-80px) 0 var(--auto-100px) 0' + // ) + // this.text.style.setProperty('font-size', 'var(--auto-32px)') + // this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)') + // } else { + // this.changeText = '输入密码' + // } + // for (let i = 0; i < 6; i++) { + // this.savemode + // ? this.changeBgColor('#000000', i, 0.1) + // : this.changeBgColor('#F4F4F4', i, 0.4) + // } + // this.spanContainer.style.visibility = `visible` + // this.parent.style.visibility = `visible` + // } protected firstUpdated( _changedProperties: PropertyValueMap | Map ): void { - if (this.saveMode) { + if (this.savemode) { this.changeText = this.$l('please-enter-the-digital-lockscreen-password') this.spanContainer.style.setProperty( 'margin', @@ -59,7 +88,7 @@ export class StarLockNumber extends StarBaseElement { this.changeText = '输入密码' } for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -134,7 +163,7 @@ export class StarLockNumber extends StarBaseElement { this.guess = '' this.clicks = 0 for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -159,7 +188,7 @@ export class StarLockNumber extends StarBaseElement { } //清空密码且删除抖动反馈 for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -170,7 +199,7 @@ export class StarLockNumber extends StarBaseElement { this.guess = '' this.clicks = 0 for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -190,7 +219,7 @@ export class StarLockNumber extends StarBaseElement { this.changeNumberBgColor() if (this.clicks < 5) { //圆点变化 - this.saveMode + this.savemode ? this.changeBgColor('#000000', this.clicks, 1) : this.changeBgColor('#F4F4F4', this.clicks, 1) this.clicks += 1 @@ -200,11 +229,11 @@ export class StarLockNumber extends StarBaseElement { this.guess += (e.target as HTMLElement).dataset.num // console.log('guess', this.guess) for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } - if (this.saveMode) { + if (this.savemode) { if (!this.confirm) { this.changePasswd() } else { @@ -219,7 +248,7 @@ export class StarLockNumber extends StarBaseElement { } else { this.clicks -= 1 this.guess = this.guess.slice(0, -1) - this.saveMode + this.savemode ? this.changeBgColor('#000000', this.clicks, 0.1) : this.changeBgColor('#F4F4F4', this.clicks, 0.4) } @@ -227,7 +256,7 @@ export class StarLockNumber extends StarBaseElement { //点击取消，返回锁屏 this.makeZero() for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -257,14 +286,14 @@ export class StarLockNumber extends StarBaseElement { removeNumberBgColor() { if (this.clickNumber == 0) this.clickNumber = 10 this.buttons[this.clickNumber - 1].classList.remove('block') - if (this.saveMode) { + if (this.savemode) { this.buttons[this.clickNumber - 1].classList.remove('setting') } } changeNumberBgColor() { if (this.clickNumber == 0) this.clickNumber = 10 this.buttons[this.clickNumber - 1].classList.add('block') - if (this.saveMode) { + if (this.savemode) { this.buttons[this.clickNumber - 1].classList.add('setting') } } @@ -283,7 +312,7 @@ export class StarLockNumber extends StarBaseElement { this.guess = '' this.clicks = 0 for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -302,7 +331,7 @@ export class StarLockNumber extends StarBaseElement { this.savewd = this.guess this.clicks = 0 for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -317,7 +346,7 @@ export class StarLockNumber extends StarBaseElement { this.passwd = this.savewd this.savewd = '' for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } @@ -335,7 +364,7 @@ export class StarLockNumber extends StarBaseElement { ) } else { for (let i = 0; i < 6; i++) { - this.saveMode + this.savemode ? this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4) } diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts index d3a4404..f1bd875 100644 --- a/src/components/pattern-view/pattern-view.ts +++ b/src/components/pattern-view/pattern-view.ts @@ -32,9 +32,9 @@ export class StarPatternView extends StarBaseElement { this.Draw() } } - @property({type: Boolean}) saveMode = false + @property({type: Boolean, reflect: true}) savemode = false @property({type: Boolean}) lessfour = false - @property({type: Boolean}) confirm = false + @property({type: Boolean, reflect: true}) confirm = false @property({type: Number}) errors = 0 @property({type: Number}) top = 0 @property({type: Number}) R = (35 / 600) * document.body.offsetWidth @@ -53,7 +53,7 @@ export class StarPatternView extends StarBaseElement { @property({type: String}) cancel = '取消' @property({type: String}) lessfourinfo = '' render() { - if (!this.saveMode) { + if (!this.savemode) { return html`

${this.changeText}

@@ -92,7 +92,7 @@ export class StarPatternView extends StarBaseElement { _changedProperties: PropertyValueMap | Map ): void { //settings中，图形密码上下的文字以及图形密码的位置都有所变化 - if (this.saveMode) { + if (this.savemode) { this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)') this.text.style.setProperty('font-size', 'var(--auto-32px)') this.errorinfo.style.setProperty('margin-top', 'var(--auto-100px)') @@ -106,7 +106,7 @@ export class StarPatternView extends StarBaseElement { this.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2 this.createCirclePoint(this.X, this.Y) this.Draw() - this.changeText = this.saveMode + this.changeText = this.savemode ? this.$l('please-draw-a-pattern') : this.$l('draw-a-pattern') this.addEventListener('passcode-create-success', this) @@ -185,14 +185,14 @@ export class StarPatternView extends StarBaseElement { }) } touchEnd(_e: TouchEvent) { - if (this.saveMode && this.passwd.length < 4) { + if (this.savemode && this.passwd.length < 4) { this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.getRed = true this.lessfourinfo = this.$l('connect-at-least-four-points') } else { this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) //进入存储模式 - if (this.saveMode) { + if (this.savemode) { this.getRed = false if (!this.confirm) { this.changePasswd() @@ -248,7 +248,7 @@ export class StarPatternView extends StarBaseElement { //大圆 this.cxt.beginPath() this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true) - this.cxt.fillStyle = this.saveMode + this.cxt.fillStyle = this.savemode ? 'rgba(0,0,0,0.04)' : 'rgba(244,244,244,0.2)' this.cxt.fill()