openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK: #126261 锁屏组件恢复原先版本

This commit is contained in:
duanzhijiang 2022-12-12 16:18:28 +08:00
parent c241564595
commit 5964243593
6 changed files with 341 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/digicipher/README.md
View File

@ -3,46 +3,24 @@
工作职责： 工作职责：
- 由 0-9 数字组成的数字密码 - 由 0-9 数字组成的数字密码
- 默认密码为 `123456`
- 点击数字反馈，输入成功上滑，输入错误抖动反馈 - 点击数字反馈，输入成功上滑，输入错误抖动反馈
- 两分钟内记忆用户输入次数，如 : 用户输入 3 次错误密码后，两分钟内继续输入 2 次将锁定，两分钟后则还原 5 次机会 - 两分钟内记忆用户输入次数，如 : 用户输入 3 次错误密码后，两分钟内用户输入 2 次将锁定，两分钟后还原 5 次机会
## 使用 ## 使用
type : 不同仅仅是改变了圆点以及按钮的颜色 1. 默认情况
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>
``` ```
发出的事件： <star-digicipher></star-digicipher>
'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' ---> 重置密码
``` ```
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`

7
src/components/digicipher/digicipher-style.ts
View File

@ -15,7 +15,9 @@ export const sharedStyles: CSSResult = css`
font-size: var(--auto-40px); font-size: var(--auto-40px);
color: #292929; color: #292929;
} }
#content { #slideUp {
/* position: relative;
top: var(--auto-596px); */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -27,6 +29,7 @@ export const sharedStyles: CSSResult = css`
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
background: #f4f4f4; background: #f4f4f4;
opacity: 0.3;
} }
#parent { #parent {
margin: auto; margin: auto;
@ -96,6 +99,7 @@ export const sharedStyles: CSSResult = css`
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: var(--auto-50px) 0 var(--auto-90px) 0;
} }
.cancel, .cancel,
@ -111,6 +115,7 @@ export const sharedStyles: CSSResult = css`
font-weight: 400; font-weight: 400;
color: red; color: red;
line-height: var(--auto-36px); line-height: var(--auto-36px);
margin-top: var(--auto-254px);
width: 100%; width: 100%;
text-align: center; text-align: center;
} }

248
src/components/digicipher/digicipher.ts
View File

@ -19,7 +19,7 @@ export class StarLockNumber extends StarBaseElement {
return [sharedStyles] return [sharedStyles]
} }
@state() svmode: boolean = false @state() svmode: boolean = false
@query('#content') content!: HTMLDivElement @query('#slideUp') slideUp!: HTMLDivElement
@queryAll('button') buttons!: NodeListOf<HTMLButtonElement> @queryAll('button') buttons!: NodeListOf<HTMLButtonElement>
@query('zero') zero!: HTMLButtonElement @query('zero') zero!: HTMLButtonElement
@queryAll('span') span!: NodeListOf<HTMLSpanElement> @queryAll('span') span!: NodeListOf<HTMLSpanElement>
@ -28,50 +28,69 @@ export class StarLockNumber extends StarBaseElement {
@query('.delete') _delete!: HTMLParagraphElement @query('.delete') _delete!: HTMLParagraphElement
@query('.cancel') cancel!: HTMLParagraphElement @query('.cancel') cancel!: HTMLParagraphElement
@query('.topText') topText!: HTMLParagraphElement @query('.topText') topText!: HTMLParagraphElement
@query('p') p!: HTMLParagraphElement @query('p') text!: HTMLParagraphElement
@query('.screen') screen!: HTMLDivElement @query('.screen') screen!: HTMLDivElement
@query('.bottomText') bottomText!: HTMLParagraphElement @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}) time = 0
@property({type: Number}) errors = 0 @property({type: Number}) errors = 0
@property({type: Number}) clicks = 0 @property({type: Number}) clicks = 0
@property({type: Number}) second = 120
@property({type: Number}) _number = 0 @property({type: Number}) _number = 0
@property({type: Number}) clickNumber = 0 @property({type: Number}) clickNumber = 0
@property({type: String}) changeText = ''
@property({type: String}) color = '' @property({type: String}) color = ''
@property({type: String}) opacity = '' @property({type: String}) opacity = ''
@property({type: String}) guess = '' @property({type: String}) guess = ''
@property({type: String}) passwd = '' @property({type: String}) passwd = ''
@property({type: String}) title = '' @property({type: String}) savewd = ''
@property({type: String}) warning = ''
@property({type: String}) type = ''
// 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( protected firstUpdated(
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown> _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void { ): void {
/* 锁屏和设置的不同 */ if (this.savemode) {
if (this.type == 'setting') { this.changeText = this.$l('please-enter-the-digital-lockscreen-password')
this.spanContainer.style.setProperty( this.spanContainer.style.setProperty(
'margin', 'margin',
'var(--auto-80px) 0 var(--auto-100px) 0' '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)') this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)')
} else if (this.type == 'lockscreen') { } else {
this.spanContainer.style.setProperty( this.changeText = this.$l('enter-password')
'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)')
} }
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', i, 0.4)
break
}
} }
this.spanContainer.style.visibility = `visible` this.spanContainer.style.visibility = `visible`
this.parent.style.visibility = `visible` this.parent.style.visibility = `visible`
@ -83,9 +102,9 @@ export class StarLockNumber extends StarBaseElement {
render() { render() {
return html` return html`
<div id="content"> <div id="slideUp">
<div id="textcenter"> <div id="textcenter">
<p class="topText">${this.title}</p> <p class="topText">${this.changeText}</p>
</div> </div>
<div class="spanContainer"> <div class="spanContainer">
<span id="sOne"></span> <span id="sOne"></span>
@ -116,11 +135,21 @@ export class StarLockNumber extends StarBaseElement {
<button class="0" id="zero" data-num="0">0</button> <button class="0" id="zero" data-num="0">0</button>
<p class="delete">${this.$l('delete')}</p> <p class="delete">${this.$l('delete')}</p>
</div> </div>
<p class="bottomText">${this.warning}</p> <p class="bottomText">${this.verifyError}</p>
</div> </div>
</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) { handleEvent(event: CustomEvent) {
switch (event.type) { switch (event.type) {
case 'passcode-create-success': case 'passcode-create-success':
@ -128,20 +157,15 @@ export class StarLockNumber extends StarBaseElement {
this.clicks = 0 this.clicks = 0
this.spanContainer.style.visibility = `hidden` this.spanContainer.style.visibility = `hidden`
this.parent.style.visibility = `hidden` this.parent.style.visibility = `hidden`
// this.title = this.$l('create-password-success') this.changeText = this.$l('create-password-success')
break break
case 'digicipher-passcode-verify-success': case 'digicipher-passcode-verify-success':
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', i, 0.4)
break
}
} }
break break
case 'digicipher-passcode-verify-error': case 'digicipher-passcode-verify-error':
@ -164,14 +188,9 @@ export class StarLockNumber extends StarBaseElement {
} }
//清空密码且删除抖动反馈 //清空密码且删除抖动反馈
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', i, 0.4)
break
}
} }
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
@ -180,14 +199,9 @@ export class StarLockNumber extends StarBaseElement {
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', i, 0.4)
break
}
} }
this.spanContainer.style.visibility = `visible` this.spanContainer.style.visibility = `visible`
this.parent.style.visibility = `visible` this.parent.style.visibility = `visible`
@ -197,59 +211,54 @@ export class StarLockNumber extends StarBaseElement {
touchStart(e: TouchEvent) { touchStart(e: TouchEvent) {
e.preventDefault() e.preventDefault()
// 点击数字，圆点变色并输出
if ((e.target as Element).tagName === 'BUTTON') { if ((e.target as Element).tagName === 'BUTTON') {
this.clickNumber = Number((e.target as HTMLElement).dataset.num) this.clickNumber = Number((e.target as HTMLElement).dataset.num)
this.makeZero() this.makeZero()
//点击反馈
this.changeNumberBgColor() this.changeNumberBgColor()
if (this.clicks < 5) { if (this.clicks < 5) {
switch (this.type) { //圆点变化
case 'setting': this.savemode
this.changeBgColor('#000000', this.clicks, 0.8) ? this.changeBgColor('#000000', this.clicks, 1)
break : this.changeBgColor('#F4F4F4', this.clicks, 1)
case 'lockscreen':
this.changeBgColor('#F4F4F4', this.clicks, 1)
break
}
this.clicks += 1 this.clicks += 1
this.guess += (e.target as HTMLElement).dataset.num this.guess += (e.target as HTMLElement).dataset.num
// console.log('###this.guess', this.guess)
} else if (this.clicks == 5) { } else if (this.clicks == 5) {
this.guess += (e.target as HTMLElement).dataset.num this.guess += (e.target as HTMLElement).dataset.num
// console.log('guess', this.guess)
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break }
case 'lockscreen': if (this.savemode) {
this.changeBgColor('#F4F4F4', i, 0.4) if (!this.confirm) {
break this.changePasswd()
} } else {
this.confirmPasswd()
}
} else {
this.dispatchPasswd()
} }
this.dispatchPasswd()
} }
} else if ((e.target as Element).className === 'delete') { } else if ((e.target as Element).className === 'delete') {
if (this.clicks !== 0) { if (this.clicks == 0) {
} else {
this.clicks -= 1 this.clicks -= 1
this.guess = this.guess.slice(0, -1) this.guess = this.guess.slice(0, -1)
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', this.clicks, 0.1)
this.changeBgColor('#000000', this.clicks, 0.1) : this.changeBgColor('#F4F4F4', this.clicks, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', this.clicks, 0.4)
break
}
} }
} else if ((e.target as Element).className === 'cancel') { } else if ((e.target as Element).className === 'cancel') {
//点击取消，返回锁屏
this.makeZero() this.makeZero()
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', i, 0.4)
break
}
} }
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
@ -277,20 +286,20 @@ export class StarLockNumber extends StarBaseElement {
removeNumberBgColor() { removeNumberBgColor() {
if (this.clickNumber == 0) this.clickNumber = 10 if (this.clickNumber == 0) this.clickNumber = 10
this.buttons[this.clickNumber - 1].classList.remove('block') this.buttons[this.clickNumber - 1].classList.remove('block')
if (this.type == 'setting') { if (this.savemode) {
this.buttons[this.clickNumber - 1].classList.remove('setting') this.buttons[this.clickNumber - 1].classList.remove('setting')
} }
} }
changeNumberBgColor() { changeNumberBgColor() {
if (this.clickNumber == 0) this.clickNumber = 10 if (this.clickNumber == 0) this.clickNumber = 10
this.buttons[this.clickNumber - 1].classList.add('block') this.buttons[this.clickNumber - 1].classList.add('block')
if (this.type == 'setting') { if (this.savemode) {
this.buttons[this.clickNumber - 1].classList.add('setting') this.buttons[this.clickNumber - 1].classList.add('setting')
} }
} }
makeZero() { makeZero() {
//抖动、滑动属性清零 //抖动、滑动属性清零
this.content.removeAttribute('style') this.slideUp.removeAttribute('style')
for (let j = 0; j < 10; j++) { for (let j = 0; j < 10; j++) {
this.buttons[j].removeAttribute('style') this.buttons[j].removeAttribute('style')
} }
@ -298,19 +307,14 @@ export class StarLockNumber extends StarBaseElement {
//发送密码 //发送密码
dispatchPasswd() { dispatchPasswd() {
console.log(`send passwd ======> ${this.guess}`)
this.passwd = this.guess this.passwd = this.guess
// console.log('send passwd', this.passwd)
this.guess = '' this.guess = ''
this.clicks = 0 this.clicks = 0
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
switch (this.type) { this.savemode
case 'setting': ? this.changeBgColor('#000000', i, 0.1)
this.changeBgColor('#000000', i, 0.1) : this.changeBgColor('#F4F4F4', i, 0.4)
break
case 'lockscreen':
this.changeBgColor('#F4F4F4', i, 0.4)
break
}
} }
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('star-digicipher-passwd', { 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')
}
}
} }

64
src/components/pattern-view/README.md
View File

@ -3,38 +3,40 @@
工作职责： 工作职责：
- 由九宫圆圈组成的图案密码 - 由九宫圆圈组成的图案密码
- 点击数字反馈，输入成功上滑，输入错误抖动+红线反馈 - 默认密码为 `012543` (滑动如下图)
## 使用
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>
```
``` ```
发出的事件： --- --- ---
'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' ---> 解锁失败
``` ```

11
src/components/pattern-view/pattern-view-style.ts
View File

@ -15,6 +15,7 @@ export const sharedStyles: CSSResult = css`
p { p {
margin: 0; margin: 0;
line-height: var(--auto-53px); line-height: var(--auto-53px);
font-size: var(--auto-40px);
height: var(--auto-53px); height: var(--auto-53px);
font-family: 'OPPOSans'; font-family: 'OPPOSans';
font-style: normal; font-style: normal;
@ -22,4 +23,14 @@ export const sharedStyles: CSSResult = css`
color: #292929; color: #292929;
text-align: center; text-align: center;
} }
.textTop {
margin-bottom: var(--auto-164px);
}
.cancel {
margin-top: var(--auto-164px);
}
.errorinfo {
color: #ec4949;
font-size: var(--auto-32px);
}
` `

203
src/components/pattern-view/pattern-view.ts
View File

@ -9,6 +9,7 @@ import {sharedStyles} from './pattern-view-style.js'
@customElement('star-pattern-view') @customElement('star-pattern-view')
export class StarPatternView extends StarBaseElement { export class StarPatternView extends StarBaseElement {
/* _topDir: string = '' */
_getRed: boolean = false _getRed: boolean = false
public static override get styles(): CSSResultArray { public static override get styles(): CSSResultArray {
@ -17,7 +18,7 @@ export class StarPatternView extends StarBaseElement {
@query('canvas') canvas!: HTMLCanvasElement @query('canvas') canvas!: HTMLCanvasElement
@query('.textTop') textTop!: HTMLParagraphElement @query('.textTop') textTop!: HTMLParagraphElement
@query('#canvasdown') canvasdown!: HTMLDivElement @query('#canvasdown') canvasdown!: HTMLDivElement
@query('p') p!: HTMLParagraphElement @query('p') text!: HTMLParagraphElement
@query('.errorinfo') errorinfo!: any @query('.errorinfo') errorinfo!: any
@property({attribute: false}) @property({attribute: false})
cxt!: CanvasRenderingContext2D cxt!: CanvasRenderingContext2D
@ -47,52 +48,67 @@ export class StarPatternView extends StarBaseElement {
@property({type: Array}) passwd: number[] = [] @property({type: Array}) passwd: number[] = []
@property({type: Array}) savewd: number[] = [] @property({type: Array}) savewd: number[] = []
@property({type: Array}) passwdArr = [] @property({type: Array}) passwdArr = []
@property({type: String}) passwdString = ''
@property({type: String}) mode = '' @property({type: String}) mode = ''
@property({type: String}) title = '' @property({type: String}) changeText = ''
@property({type: String}) cancel = '' @property({type: String}) cancel = '取消'
@property({type: String}) warning = '' @property({type: String}) lessfourinfo = ''
@property({type: String}) type = ''
render() { render() {
return html` if (!this.savemode) {
<div id="content"> return html`
<p class="textTop">${this.title}</p> <div id="content">
<div id="canvasdown"> <p class="textTop">${this.changeText}</p>
<canvas <div id="canvasdown">
id="canvas" <canvas
@touchstart=${this.touchStart} id="canvas"
@touchmove=${this.touchMove} @touchstart=${this.touchStart}
@touchend=${this.touchEnd} @touchmove=${this.touchMove}
></canvas> @touchend=${this.touchEnd}
></canvas>
</div>
<p class="cancel" @touchstart=${this.touchStartCancel}>
${this.$l('cancel')}
</p>
</div> </div>
<p class="errorinfo" @touchstart=${this.touchStartCancel}> `
${this.warning} } else {
</p> return html`
</div> <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( protected firstUpdated(
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown> _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void { ): void {
if (this.type == 'setting') { //settings中，图形密码上下的文字以及图形密码的位置都有所变化
if (this.savemode) {
this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)') 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('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.width = this.canvasWidth
this.canvas.height = this.canvasHeight this.canvas.height = this.canvasHeight
//getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
this.cxt = this.canvas.getContext('2d')! this.cxt = this.canvas.getContext('2d')!
this.X = (this.canvasWidth - 2 * this.OffsetX - this.R * 2 * 3) / 2 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.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2
this.createCirclePoint(this.X, this.Y) this.createCirclePoint(this.X, this.Y)
this.Draw() 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('passcode-create-success', this)
this.addEventListener('pattern-passcode-verify-success', this) this.addEventListener('pattern-passcode-verify-success', this)
this.addEventListener('pattern-passcode-verify-error', this) this.addEventListener('pattern-passcode-verify-error', this)
@ -102,16 +118,17 @@ export class StarPatternView extends StarBaseElement {
switch (event.type) { switch (event.type) {
case 'passcode-create-success': case 'passcode-create-success':
this.canvas.style.visibility = `hidden` this.canvas.style.visibility = `hidden`
// this.title = this.$l('create-passcode-success') this.changeText = this.$l('create-passcode-success')
break break
case 'pattern-passcode-verify-success': case 'pattern-passcode-verify-success':
this.getRed = false this.getRed = false
// this.title = this.$l('draw-a-pattern') this.changeText = this.$l('draw-a-pattern')
break break
case 'pattern-passcode-verify-error': case 'pattern-passcode-verify-error':
this.passwd = event.detail.passwd this.passwd = event.detail.passwd
this.getRed = true this.getRed = true
// this.title = this.$l('draw-a-pattern-error') this.changeText = this.$l('draw-a-pattern-error')
//当密码失败三次后
this.errors = event.detail.value this.errors = event.detail.value
if (this.errors == 5) { if (this.errors == 5) {
this.initialState() this.initialState()
@ -133,6 +150,7 @@ export class StarPatternView extends StarBaseElement {
} }
/* 擦除线条，恢复初始状态 */ /* 擦除线条，恢复初始状态 */
initialState() { initialState() {
this.changeText = this.$l('draw-a-pattern')
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.passwd = [] this.passwd = []
this.getRed = false this.getRed = false
@ -140,6 +158,7 @@ export class StarPatternView extends StarBaseElement {
} }
touchStart(e: TouchEvent) { touchStart(e: TouchEvent) {
// this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.lessfourinfo = ''
this.passwd = [] this.passwd = []
this.getRed = false this.getRed = false
var touches = e.touches[0] var touches = e.touches[0]
@ -147,6 +166,7 @@ export class StarPatternView extends StarBaseElement {
var X = touches.clientX - left var X = touches.clientX - left
var Y = touches.clientY - top var Y = touches.clientY - top
this.getSelectPwd(touches, this.passwd) this.getSelectPwd(touches, this.passwd)
// 清理初始canvas，不然会有叠加效果
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.Draw({X, Y}) this.Draw({X, Y})
} }
@ -154,6 +174,7 @@ export class StarPatternView extends StarBaseElement {
e.preventDefault() e.preventDefault()
var touches = e.touches[0] var touches = e.touches[0]
this.getSelectPwd(touches, this.passwd) this.getSelectPwd(touches, this.passwd)
// 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度
this.cxt = this.canvas.getContext('2d')! this.cxt = this.canvas.getContext('2d')!
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
const {top, left} = this.canvas.getBoundingClientRect() const {top, left} = this.canvas.getBoundingClientRect()
@ -164,47 +185,49 @@ export class StarPatternView extends StarBaseElement {
}) })
} }
touchEnd(_e: TouchEvent) { 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.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.getRed = true this.getRed = true
this.lessfourinfo = this.$l('connect-at-least-four-points')
} else { } else {
// console.log(`the passwd ======> ${this.passwdString}`)
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
switch (this.type) { //进入存储模式
case 'setting': if (this.savemode) {
this.getRed = false this.getRed = false
this.passwd = [] if (!this.confirm) {
this.Draw() this.changePasswd()
break } else {
case 'lockscreen': this.confirmPasswd()
this.dispatchEvent( }
new CustomEvent('star-pattern-view-passwd', { this.passwd = []
detail: { this.Draw()
value: this.passwdString, } else {
}, this.dispatchEvent(
bubbles: true, new CustomEvent('star-pattern-view-passwd', {
composed: true, detail: {
}) value: this.passwd,
) },
this.passwd = [] bubbles: true,
this.Draw() composed: true,
break })
)
this.passwd = []
this.Draw()
} }
} }
} }
touchStartCancel() { touchStartCancel() {
if (this.type == 'lockscreen') { /* 点击取消，擦除绘制图案 */
this.initialState() this.initialState()
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('lockscreen-cancel-button', { new CustomEvent('lockscreen-cancel-button', {
detail: { detail: {
value: true, value: true,
}, },
bubbles: true, bubbles: true,
composed: true, composed: true,
}) })
) )
}
} }
createCirclePoint(diffX: number, diffY: number) { createCirclePoint(diffX: number, diffY: number) {
for (var row = 0; row < 3; row++) { for (var row = 0; row < 3; row++) {
@ -225,14 +248,9 @@ export class StarPatternView extends StarBaseElement {
//大圆 //大圆
this.cxt.beginPath() this.cxt.beginPath()
this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true) this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true)
if (this.type == 'setting') { this.cxt.fillStyle = this.savemode
this.cxt.fillStyle = 'rgba(0,0,0,0.04)' ? 'rgba(0,0,0,0.04)'
} else if (this.type == 'lockscreen') { : 'rgba(244,244,244,0.2)'
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.fill() this.cxt.fill()
this.cxt.closePath() this.cxt.closePath()
//小圆 //小圆
@ -294,11 +312,42 @@ export class StarPatternView extends StarBaseElement {
var ydiff = Math.abs(currentPoint.Y - Y) var ydiff = Math.abs(currentPoint.Y - Y)
var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5) var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
if (dir > this.R || passwd.indexOf(i) >= 0) continue if (dir > this.R || passwd.indexOf(i) >= 0) continue
this.passwd.push(i) passwd.push(i)
this.passwdString = this.passwd.toString() // console.log(this.passwd)
var reg = new RegExp(',', 'g')
this.passwdString = this.passwdString.replace(reg, '')
break 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 = []
}
}
} }