TASK: #126261 锁屏组件恢复原先版本
This commit is contained in:
duanzhijiang
parent
c241564595
commit
5964243593
|
|
@ -3,46 +3,24 @@
|
|||
工作职责：
|
||||
|
||||
- 由 0-9 数字组成的数字密码
|
||||
- 默认密码为 `123456`
|
||||
- 点击数字反馈，输入成功上滑，输入错误抖动反馈
|
||||
- 两分钟内记忆用户输入次数，如 : 用户输入 3 次错误密码后，两分钟内继续输入 2 次将锁定，两分钟后则还原 5 次机会
|
||||
- 两分钟内记忆用户输入次数，如 : 用户输入 3 次错误密码后，两分钟内用户输入 2 次将锁定，两分钟后还原 5 次机会
|
||||
|
||||
## 使用
|
||||
|
||||
type : 不同仅仅是改变了圆点以及按钮的颜色
|
||||
title : 密码上方文字
|
||||
warning : 密码下方文字(红色)
|
||||
|
||||
1. 锁屏应用
|
||||
|
||||
```html
|
||||
<star-digicipher
|
||||
type="lockscreen"
|
||||
title="创建密码"
|
||||
warning="密码不匹配，请重新设置"
|
||||
></star-digicipher>
|
||||
```
|
||||
|
||||
2. 设置应用
|
||||
|
||||
```html
|
||||
<star-digicipher
|
||||
type="setting"
|
||||
title="创建密码"
|
||||
warning="密码不匹配，请重新设置"
|
||||
></star-digicipher>
|
||||
```
|
||||
|
||||
**输入六次密码** : 发送事件 `star-digicipher-passwd` **value:** `this.passwd`<br>
|
||||
1. 默认情况
|
||||
|
||||
```
|
||||
发出的事件：
|
||||
'lockscreen-cancel-button' ---> 点击取消，清空密码。
|
||||
'star-digicipher-passcode-error-fifth' ---> 密码失败5次后。
|
||||
'star-digicipher-passwd' ---> 点击6次数字按钮，发送密码。
|
||||
|
||||
接收事件：
|
||||
'passcode-create-success' ---> 创建密码成功
|
||||
'digicipher-passcode-verify-success' ---> 解锁成功
|
||||
'digicipher-passcode-verify-error' ---> 解锁失败
|
||||
'passcode-reset' ---> 重置密码
|
||||
<star-digicipher></star-digicipher>
|
||||
```
|
||||
|
||||
2. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
|
||||
|
||||
```
|
||||
<star-digicipher saveMode></star-digicipher>
|
||||
```
|
||||
|
||||
解锁成功：`star-digicipher-unlocksuccess` **value:** `this.passwd`<br>
|
||||
解锁 5 次失败，跳转已锁定：`star-digicipher-locked` **value:** `false`<br>
|
||||
完成存储：`star-digicipher-savesuccess` **value:** `this.passwd`
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ export const sharedStyles: CSSResult = css`
|
|||
font-size: var(--auto-40px);
|
||||
color: #292929;
|
||||
}
|
||||
#content {
|
||||
#slideUp {
|
||||
/* position: relative;
|
||||
top: var(--auto-596px); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -27,6 +29,7 @@ export const sharedStyles: CSSResult = css`
|
|||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background: #f4f4f4;
|
||||
opacity: 0.3;
|
||||
}
|
||||
#parent {
|
||||
margin: auto;
|
||||
|
|
@ -96,6 +99,7 @@ export const sharedStyles: CSSResult = css`
|
|||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: var(--auto-50px) 0 var(--auto-90px) 0;
|
||||
}
|
||||
|
||||
.cancel,
|
||||
|
|
@ -111,6 +115,7 @@ export const sharedStyles: CSSResult = css`
|
|||
font-weight: 400;
|
||||
color: red;
|
||||
line-height: var(--auto-36px);
|
||||
margin-top: var(--auto-254px);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class StarLockNumber extends StarBaseElement {
|
|||
return [sharedStyles]
|
||||
}
|
||||
@state() svmode: boolean = false
|
||||
@query('#content') content!: HTMLDivElement
|
||||
@query('#slideUp') slideUp!: HTMLDivElement
|
||||
@queryAll('button') buttons!: NodeListOf<HTMLButtonElement>
|
||||
@query('zero') zero!: HTMLButtonElement
|
||||
@queryAll('span') span!: NodeListOf<HTMLSpanElement>
|
||||
|
|
@ -28,50 +28,69 @@ export class StarLockNumber extends StarBaseElement {
|
|||
@query('.delete') _delete!: HTMLParagraphElement
|
||||
@query('.cancel') cancel!: HTMLParagraphElement
|
||||
@query('.topText') topText!: HTMLParagraphElement
|
||||
@query('p') p!: HTMLParagraphElement
|
||||
@query('p') text!: HTMLParagraphElement
|
||||
@query('.screen') screen!: HTMLDivElement
|
||||
@query('.bottomText') bottomText!: HTMLParagraphElement
|
||||
@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, reflect: true}) confirm = 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}) changeText = ''
|
||||
@property({type: String}) color = ''
|
||||
@property({type: String}) opacity = ''
|
||||
@property({type: String}) guess = ''
|
||||
@property({type: String}) passwd = ''
|
||||
@property({type: String}) title = ''
|
||||
@property({type: String}) warning = ''
|
||||
@property({type: String}) type = ''
|
||||
@property({type: String}) savewd = ''
|
||||
|
||||
// protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): 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<any> | Map<PropertyKey, unknown>
|
||||
): void {
|
||||
/* 锁屏和设置的不同 */
|
||||
if (this.type == 'setting') {
|
||||
if (this.savemode) {
|
||||
this.changeText = this.$l('please-enter-the-digital-lockscreen-password')
|
||||
this.spanContainer.style.setProperty(
|
||||
'margin',
|
||||
'var(--auto-80px) 0 var(--auto-100px) 0'
|
||||
)
|
||||
this.p.style.setProperty('font-size', 'var(--auto-32px)')
|
||||
this.text.style.setProperty('font-size', 'var(--auto-32px)')
|
||||
this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)')
|
||||
} else if (this.type == 'lockscreen') {
|
||||
this.spanContainer.style.setProperty(
|
||||
'margin',
|
||||
'var(--auto-50px) 0 var(--auto-90px) 0'
|
||||
)
|
||||
this.p.style.setProperty('font-size', 'var(--auto-40px)')
|
||||
this.bottomText.style.setProperty('margin-top', 'var(--auto-254px)')
|
||||
} else {
|
||||
this.changeText = this.$l('enter-password')
|
||||
}
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.spanContainer.style.visibility = `visible`
|
||||
this.parent.style.visibility = `visible`
|
||||
|
|
@ -83,9 +102,9 @@ export class StarLockNumber extends StarBaseElement {
|
|||
|
||||
render() {
|
||||
return html`
|
||||
<div id="content">
|
||||
<div id="slideUp">
|
||||
<div id="textcenter">
|
||||
<p class="topText">${this.title}</p>
|
||||
<p class="topText">${this.changeText}</p>
|
||||
</div>
|
||||
<div class="spanContainer">
|
||||
<span id="sOne"></span>
|
||||
|
|
@ -116,11 +135,21 @@ export class StarLockNumber extends StarBaseElement {
|
|||
<button class="0" id="zero" data-num="0">0</button>
|
||||
<p class="delete">${this.$l('delete')}</p>
|
||||
</div>
|
||||
<p class="bottomText">${this.warning}</p>
|
||||
<p class="bottomText">${this.verifyError}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
timer() {
|
||||
this.time = window.setInterval(() => {
|
||||
if (--this.second <= 0) {
|
||||
clearInterval(this.time)
|
||||
this.second = 120
|
||||
this.tried = 0
|
||||
}
|
||||
/* console.log(this.second) */
|
||||
}, 1000)
|
||||
}
|
||||
handleEvent(event: CustomEvent) {
|
||||
switch (event.type) {
|
||||
case 'passcode-create-success':
|
||||
|
|
@ -128,20 +157,15 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.clicks = 0
|
||||
this.spanContainer.style.visibility = `hidden`
|
||||
this.parent.style.visibility = `hidden`
|
||||
// this.title = this.$l('create-password-success')
|
||||
this.changeText = this.$l('create-password-success')
|
||||
break
|
||||
case 'digicipher-passcode-verify-success':
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
break
|
||||
case 'digicipher-passcode-verify-error':
|
||||
|
|
@ -164,14 +188,9 @@ export class StarLockNumber extends StarBaseElement {
|
|||
}
|
||||
//清空密码且删除抖动反馈
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
|
|
@ -180,14 +199,9 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.guess = ''
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.spanContainer.style.visibility = `visible`
|
||||
this.parent.style.visibility = `visible`
|
||||
|
|
@ -197,59 +211,54 @@ export class StarLockNumber extends StarBaseElement {
|
|||
|
||||
touchStart(e: TouchEvent) {
|
||||
e.preventDefault()
|
||||
// 点击数字，圆点变色并输出
|
||||
if ((e.target as Element).tagName === 'BUTTON') {
|
||||
this.clickNumber = Number((e.target as HTMLElement).dataset.num)
|
||||
this.makeZero()
|
||||
//点击反馈
|
||||
this.changeNumberBgColor()
|
||||
if (this.clicks < 5) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', this.clicks, 0.8)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', this.clicks, 1)
|
||||
break
|
||||
}
|
||||
//圆点变化
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', this.clicks, 1)
|
||||
: this.changeBgColor('#F4F4F4', this.clicks, 1)
|
||||
this.clicks += 1
|
||||
this.guess += (e.target as HTMLElement).dataset.num
|
||||
// console.log('###this.guess', this.guess)
|
||||
} else if (this.clicks == 5) {
|
||||
this.guess += (e.target as HTMLElement).dataset.num
|
||||
// console.log('guess', this.guess)
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
if (this.savemode) {
|
||||
if (!this.confirm) {
|
||||
this.changePasswd()
|
||||
} else {
|
||||
this.confirmPasswd()
|
||||
}
|
||||
} else {
|
||||
this.dispatchPasswd()
|
||||
}
|
||||
this.dispatchPasswd()
|
||||
}
|
||||
} else if ((e.target as Element).className === 'delete') {
|
||||
if (this.clicks !== 0) {
|
||||
if (this.clicks == 0) {
|
||||
} else {
|
||||
this.clicks -= 1
|
||||
this.guess = this.guess.slice(0, -1)
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', this.clicks, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', this.clicks, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', this.clicks, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', this.clicks, 0.4)
|
||||
}
|
||||
} else if ((e.target as Element).className === 'cancel') {
|
||||
//点击取消，返回锁屏
|
||||
this.makeZero()
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
|
|
@ -277,20 +286,20 @@ export class StarLockNumber extends StarBaseElement {
|
|||
removeNumberBgColor() {
|
||||
if (this.clickNumber == 0) this.clickNumber = 10
|
||||
this.buttons[this.clickNumber - 1].classList.remove('block')
|
||||
if (this.type == 'setting') {
|
||||
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.type == 'setting') {
|
||||
if (this.savemode) {
|
||||
this.buttons[this.clickNumber - 1].classList.add('setting')
|
||||
}
|
||||
}
|
||||
makeZero() {
|
||||
//抖动、滑动属性清零
|
||||
this.content.removeAttribute('style')
|
||||
this.slideUp.removeAttribute('style')
|
||||
for (let j = 0; j < 10; j++) {
|
||||
this.buttons[j].removeAttribute('style')
|
||||
}
|
||||
|
|
@ -298,19 +307,14 @@ export class StarLockNumber extends StarBaseElement {
|
|||
|
||||
//发送密码
|
||||
dispatchPasswd() {
|
||||
console.log(`send passwd ======> ${this.guess}`)
|
||||
this.passwd = this.guess
|
||||
// console.log('send passwd', this.passwd)
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.changeBgColor('#000000', i, 0.1)
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
break
|
||||
}
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-digicipher-passwd', {
|
||||
|
|
@ -322,4 +326,54 @@ export class StarLockNumber extends StarBaseElement {
|
|||
})
|
||||
)
|
||||
}
|
||||
//更改密码
|
||||
changePasswd() {
|
||||
this.savewd = this.guess
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.confirm = true
|
||||
this.changeText = this.$l('verify-new-password')
|
||||
this.verifyError = ''
|
||||
}
|
||||
//确认密码
|
||||
confirmPasswd() {
|
||||
if (this.savewd.toString() == this.guess.toString()) {
|
||||
this.passwd = this.savewd
|
||||
this.savewd = ''
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
this.changeText = this.$l('create-password-success')
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-digicipher-passcode-create', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.savemode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
this.savewd = ''
|
||||
this.confirm = false
|
||||
this.changeText = this.$l('please-enter-the-lockscreen-password')
|
||||
this.verifyError = this.$l('passwords-do-not-match-please-reset')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,38 +3,40 @@
|
|||
工作职责：
|
||||
|
||||
- 由九宫圆圈组成的图案密码
|
||||
- 点击数字反馈，输入成功上滑，输入错误抖动+红线反馈
|
||||
|
||||
## 使用
|
||||
|
||||
1. 锁屏应用
|
||||
|
||||
```html
|
||||
<star-pattern-view
|
||||
type="lockscreen"
|
||||
title="绘制图案"
|
||||
warning="密码不匹配，请重新绘制"
|
||||
></star-pattern-view>
|
||||
```
|
||||
|
||||
2. 设置应用
|
||||
|
||||
```html
|
||||
<star-pattern-view
|
||||
type="setting"
|
||||
title="请绘制图案"
|
||||
warning="密码不够4个点"
|
||||
></star-pattern-view>
|
||||
```
|
||||
- 默认密码为 `012543` (滑动如下图)
|
||||
|
||||
```
|
||||
发出的事件：
|
||||
'lockscreen-cancel-button' ---> 点击取消，清空密码。
|
||||
'star-digicipher-passcode-error-fifth' ---> 密码失败5次后。
|
||||
'star-pattern-view-passwd' ---> 绘制完图案，发送密码。
|
||||
--- --- ---
|
||||
| * | **** | * | **** | * |
|
||||
--- --- ---
|
||||
*
|
||||
--- --- ---
|
||||
| * | **** | * | **** | * |
|
||||
--- --- ---
|
||||
|
||||
--- --- ---
|
||||
| | | | | |
|
||||
--- --- ---
|
||||
```
|
||||
|
||||
- 点击数字反馈，输入成功上滑，输入错误抖动反馈
|
||||
|
||||
### 默认
|
||||
|
||||
```js
|
||||
<star-pattern-view></star-pattern-view>
|
||||
```
|
||||
|
||||
### `saveMode` 属性代表存储模式，绘制图案、确认图案后存储新图案密码
|
||||
|
||||
```js
|
||||
<star-pattern-view saveMode></star-pattern-view>
|
||||
```
|
||||
|
||||
### 距离顶部的位置 `topDir` 默认`217.5px`
|
||||
|
||||
```js
|
||||
<star-pattern-view topDir="300px"></star-pattern-view>
|
||||
<star-pattern-view topDir="-100px"></star-pattern-view>
|
||||
|
||||
接收事件：
|
||||
'passcode-create-success' ---> 创建密码成功
|
||||
'pattern-passcode-verify-success' ---> 解锁成功
|
||||
'pattern-passcode-verify-error' ---> 解锁失败
|
||||
```
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export const sharedStyles: CSSResult = css`
|
|||
p {
|
||||
margin: 0;
|
||||
line-height: var(--auto-53px);
|
||||
font-size: var(--auto-40px);
|
||||
height: var(--auto-53px);
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
|
|
@ -22,4 +23,14 @@ export const sharedStyles: CSSResult = css`
|
|||
color: #292929;
|
||||
text-align: center;
|
||||
}
|
||||
.textTop {
|
||||
margin-bottom: var(--auto-164px);
|
||||
}
|
||||
.cancel {
|
||||
margin-top: var(--auto-164px);
|
||||
}
|
||||
.errorinfo {
|
||||
color: #ec4949;
|
||||
font-size: var(--auto-32px);
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {sharedStyles} from './pattern-view-style.js'
|
|||
|
||||
@customElement('star-pattern-view')
|
||||
export class StarPatternView extends StarBaseElement {
|
||||
/* _topDir: string = '' */
|
||||
_getRed: boolean = false
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
@ -17,7 +18,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
@query('canvas') canvas!: HTMLCanvasElement
|
||||
@query('.textTop') textTop!: HTMLParagraphElement
|
||||
@query('#canvasdown') canvasdown!: HTMLDivElement
|
||||
@query('p') p!: HTMLParagraphElement
|
||||
@query('p') text!: HTMLParagraphElement
|
||||
@query('.errorinfo') errorinfo!: any
|
||||
@property({attribute: false})
|
||||
cxt!: CanvasRenderingContext2D
|
||||
|
|
@ -47,52 +48,67 @@ export class StarPatternView extends StarBaseElement {
|
|||
@property({type: Array}) passwd: number[] = []
|
||||
@property({type: Array}) savewd: number[] = []
|
||||
@property({type: Array}) passwdArr = []
|
||||
@property({type: String}) passwdString = ''
|
||||
@property({type: String}) mode = ''
|
||||
@property({type: String}) title = ''
|
||||
@property({type: String}) cancel = ''
|
||||
@property({type: String}) warning = ''
|
||||
@property({type: String}) type = ''
|
||||
@property({type: String}) changeText = ''
|
||||
@property({type: String}) cancel = '取消'
|
||||
@property({type: String}) lessfourinfo = ''
|
||||
render() {
|
||||
return html`
|
||||
<div id="content">
|
||||
<p class="textTop">${this.title}</p>
|
||||
<div id="canvasdown">
|
||||
<canvas
|
||||
id="canvas"
|
||||
@touchstart=${this.touchStart}
|
||||
@touchmove=${this.touchMove}
|
||||
@touchend=${this.touchEnd}
|
||||
></canvas>
|
||||
if (!this.savemode) {
|
||||
return html`
|
||||
<div id="content">
|
||||
<p class="textTop">${this.changeText}</p>
|
||||
<div id="canvasdown">
|
||||
<canvas
|
||||
id="canvas"
|
||||
@touchstart=${this.touchStart}
|
||||
@touchmove=${this.touchMove}
|
||||
@touchend=${this.touchEnd}
|
||||
></canvas>
|
||||
</div>
|
||||
<p class="cancel" @touchstart=${this.touchStartCancel}>
|
||||
${this.$l('cancel')}
|
||||
</p>
|
||||
</div>
|
||||
<p class="errorinfo" @touchstart=${this.touchStartCancel}>
|
||||
${this.warning}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
`
|
||||
} else {
|
||||
return html`
|
||||
<div id="content">
|
||||
<p class="textTop">${this.changeText}</p>
|
||||
<div id="canvasdown">
|
||||
<canvas
|
||||
id="canvas"
|
||||
@touchstart=${this.touchStart}
|
||||
@touchmove=${this.touchMove}
|
||||
@touchend=${this.touchEnd}
|
||||
></canvas>
|
||||
</div>
|
||||
<p class="errorinfo">${this.lessfourinfo}</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
protected firstUpdated(
|
||||
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
||||
): void {
|
||||
if (this.type == 'setting') {
|
||||
//settings中，图形密码上下的文字以及图形密码的位置都有所变化
|
||||
if (this.savemode) {
|
||||
this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)')
|
||||
this.p.style.setProperty('font-size', 'var(--auto-32px)')
|
||||
this.text.style.setProperty('font-size', 'var(--auto-32px)')
|
||||
this.errorinfo.style.setProperty('margin-top', 'var(--auto-100px)')
|
||||
this.errorinfo.style.setProperty('color', '#ec4949')
|
||||
} else if (this.type == 'lockscreen') {
|
||||
this.textTop.style.setProperty('margin-bottom', 'var(--auto-164px)')
|
||||
this.p.style.setProperty('font-size', 'var(--auto-40px)')
|
||||
this.errorinfo.style.setProperty('margin-top', 'var(--auto-164px)')
|
||||
this.warning = this.$l('cancel')
|
||||
}
|
||||
//canvas的高度和宽度都是
|
||||
this.canvas.width = this.canvasWidth
|
||||
this.canvas.height = this.canvasHeight
|
||||
//getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
|
||||
this.cxt = this.canvas.getContext('2d')!
|
||||
this.X = (this.canvasWidth - 2 * this.OffsetX - this.R * 2 * 3) / 2
|
||||
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.$l('please-draw-a-pattern')
|
||||
: this.$l('draw-a-pattern')
|
||||
this.addEventListener('passcode-create-success', this)
|
||||
this.addEventListener('pattern-passcode-verify-success', this)
|
||||
this.addEventListener('pattern-passcode-verify-error', this)
|
||||
|
|
@ -102,16 +118,17 @@ export class StarPatternView extends StarBaseElement {
|
|||
switch (event.type) {
|
||||
case 'passcode-create-success':
|
||||
this.canvas.style.visibility = `hidden`
|
||||
// this.title = this.$l('create-passcode-success')
|
||||
this.changeText = this.$l('create-passcode-success')
|
||||
break
|
||||
case 'pattern-passcode-verify-success':
|
||||
this.getRed = false
|
||||
// this.title = this.$l('draw-a-pattern')
|
||||
this.changeText = this.$l('draw-a-pattern')
|
||||
break
|
||||
case 'pattern-passcode-verify-error':
|
||||
this.passwd = event.detail.passwd
|
||||
this.getRed = true
|
||||
// this.title = this.$l('draw-a-pattern-error')
|
||||
this.changeText = this.$l('draw-a-pattern-error')
|
||||
//当密码失败三次后
|
||||
this.errors = event.detail.value
|
||||
if (this.errors == 5) {
|
||||
this.initialState()
|
||||
|
|
@ -133,6 +150,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
}
|
||||
/* 擦除线条，恢复初始状态 */
|
||||
initialState() {
|
||||
this.changeText = this.$l('draw-a-pattern')
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
this.passwd = []
|
||||
this.getRed = false
|
||||
|
|
@ -140,6 +158,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
}
|
||||
touchStart(e: TouchEvent) {
|
||||
// this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
this.lessfourinfo = ''
|
||||
this.passwd = []
|
||||
this.getRed = false
|
||||
var touches = e.touches[0]
|
||||
|
|
@ -147,6 +166,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
var X = touches.clientX - left
|
||||
var Y = touches.clientY - top
|
||||
this.getSelectPwd(touches, this.passwd)
|
||||
// 清理初始canvas，不然会有叠加效果
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
this.Draw({X, Y})
|
||||
}
|
||||
|
|
@ -154,6 +174,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
e.preventDefault()
|
||||
var touches = e.touches[0]
|
||||
this.getSelectPwd(touches, this.passwd)
|
||||
// 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度
|
||||
this.cxt = this.canvas.getContext('2d')!
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
const {top, left} = this.canvas.getBoundingClientRect()
|
||||
|
|
@ -164,47 +185,49 @@ export class StarPatternView extends StarBaseElement {
|
|||
})
|
||||
}
|
||||
touchEnd(_e: TouchEvent) {
|
||||
if (this.type == 'setting' && 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 {
|
||||
// console.log(`the passwd ======> ${this.passwdString}`)
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
switch (this.type) {
|
||||
case 'setting':
|
||||
this.getRed = false
|
||||
this.passwd = []
|
||||
this.Draw()
|
||||
break
|
||||
case 'lockscreen':
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-passwd', {
|
||||
detail: {
|
||||
value: this.passwdString,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
this.passwd = []
|
||||
this.Draw()
|
||||
break
|
||||
//进入存储模式
|
||||
if (this.savemode) {
|
||||
this.getRed = false
|
||||
if (!this.confirm) {
|
||||
this.changePasswd()
|
||||
} else {
|
||||
this.confirmPasswd()
|
||||
}
|
||||
this.passwd = []
|
||||
this.Draw()
|
||||
} else {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-passwd', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
this.passwd = []
|
||||
this.Draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
touchStartCancel() {
|
||||
if (this.type == 'lockscreen') {
|
||||
this.initialState()
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('lockscreen-cancel-button', {
|
||||
detail: {
|
||||
value: true,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
/* 点击取消，擦除绘制图案 */
|
||||
this.initialState()
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('lockscreen-cancel-button', {
|
||||
detail: {
|
||||
value: true,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
createCirclePoint(diffX: number, diffY: number) {
|
||||
for (var row = 0; row < 3; row++) {
|
||||
|
|
@ -225,14 +248,9 @@ export class StarPatternView extends StarBaseElement {
|
|||
//大圆
|
||||
this.cxt.beginPath()
|
||||
this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true)
|
||||
if (this.type == 'setting') {
|
||||
this.cxt.fillStyle = 'rgba(0,0,0,0.04)'
|
||||
} else if (this.type == 'lockscreen') {
|
||||
this.cxt.fillStyle = 'rgba(244,244,244,0.2)'
|
||||
}
|
||||
// this.cxt.fillStyle = this.savemode
|
||||
// ? 'rgba(0,0,0,0.04)'
|
||||
// : 'rgba(244,244,244,0.2)'
|
||||
this.cxt.fillStyle = this.savemode
|
||||
? 'rgba(0,0,0,0.04)'
|
||||
: 'rgba(244,244,244,0.2)'
|
||||
this.cxt.fill()
|
||||
this.cxt.closePath()
|
||||
//小圆
|
||||
|
|
@ -294,11 +312,42 @@ export class StarPatternView extends StarBaseElement {
|
|||
var ydiff = Math.abs(currentPoint.Y - Y)
|
||||
var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
|
||||
if (dir > this.R || passwd.indexOf(i) >= 0) continue
|
||||
this.passwd.push(i)
|
||||
this.passwdString = this.passwd.toString()
|
||||
var reg = new RegExp(',', 'g')
|
||||
this.passwdString = this.passwdString.replace(reg, '')
|
||||
passwd.push(i)
|
||||
// console.log(this.passwd)
|
||||
break
|
||||
}
|
||||
}
|
||||
changePasswd() {
|
||||
this.savewd = this.passwd
|
||||
// console.log('请确认密码', this.savewd.toString())
|
||||
this.confirm = true
|
||||
this.changeText = this.$l('please-confirm-the-pattern')
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-settings-change', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
}
|
||||
confirmPasswd() {
|
||||
if (this.savewd.toString() == this.passwd.toString()) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-pattern-view-settings-confirm', {
|
||||
detail: {
|
||||
value: this.passwd,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
)
|
||||
} else {
|
||||
this.changeText = this.$l('please-redraw-the-pattern')
|
||||
this.confirm = false
|
||||
this.passwd = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue