HarmonyOS 鸿蒙Next 电话数字按键 有没有好的实现方案

可以参考demo

[@Builder](/user/Builder)
export function PrivacyPageBuilder(){
PrivacyPage()
}

[@Entry](/user/Entry)
[@Component](/user/Component)
export struct PrivacyPage {
[@State](/user/State) UserPwd:string = ""
[@State](/user/State) inputVal:string = ""
[@State](/user/State) inputValConfirm:string = ""
[@State](/user/State) inputCnt:number = 0
[@State](/user/State) InfoText:string = "密码由6位数字组成"
[@State](/user/State) optText:string = "请牢记你的密码，忘记后可通过密保找回"
[@State](/user/State) pwdLen:number = 0;
private isConfirmPage:boolean = false;

aboutToAppear(): void {
console.info("taaaset in prive")
this.isConfirmPage = false;
this.inputCnt = 0;
}

[@Builder](/user/Builder) KeyboardBuilder() {
Grid() {
ForEach([1,2,3,4,5,6,7,8,9,"清空",0, "删除"], (item:number | string, index) => {
GridItem() {
Button(item + "")
.borderRadius(8)
.type(ButtonType.Normal)
.stateEffect(true)
.fontColor(Color.Black)
.width('31%')
.backgroundColor('#FCFCFE')
.onClick(() => {
if (index === 9) {
if (this.isConfirmPage) {
this.inputValConfirm = ""
} else {
this.inputVal = ""
}
} else if (index === 11) {
if (this.isConfirmPage) {
let endNum = this.inputValConfirm.length;
if (endNum > 0) {
this.inputValConfirm = this.inputValConfirm.substring(0, endNum - 1)
}
} else {
let endNum = this.inputVal.length;
if (endNum > 0) {
this.inputVal = this.inputVal.substring(0, endNum - 1)
}
}
} else {
if (this.isConfirmPage) {
if (this.inputValConfirm.length < 6) {
this.inputValConfirm += item
}
} else {
if (this.inputVal.length < 6) {
this.inputVal += item
}
console.info("KeyboardBuilder val:" + this.inputVal)
}
}

if (this.isConfirmPage) {
this.inputCnt = this.inputValConfirm.length
} else {
this.inputCnt = this.inputVal.length
}
if (this.inputCnt === 6) {
if (this.isConfirmPage) {
if (this.inputVal === this.inputValConfirm) {
// PreferenceManager.getInstance().setValue<string>(APP_PWD, this.inputValConfirm)
// PreferenceManager.getInstance().setValue<boolean>(IS_SET_KEY, true)
this.UserPwd = this.inputValConfirm
this.inputVal = ""
this.inputValConfirm = ""
this.inputCnt = 0
console.info("KeyboardBuilder val out right:" + this.UserPwd)
// this.pathStack.pushPathByName("MainPage", null) // 密码设置完成,退出到主界面
} else {
this.optText = "密码不一致，请重新输入"
console.info("KeyboardBuilder val out not true:" + this.inputVal + " & " + this.inputValConfirm)
let timeID = setTimeout(() => {
this.optText = "请牢记你的密码，忘记后可通过密保找回"
this.inputValConfirm = ""
this.inputCnt = 0
console.info("KeyboardBuilder val out not true return back")
}, 1000)

}
} else {
this.InfoText = "确认密码"
this.isConfirmPage = true;
this.inputCnt = 0;
}
}
})
}.alignSelf(ItemAlign.Center)
})
}
.maxCount(3).columnsGap(10).rowsGap(10).width('100%')
.padding({top:10, bottom:10, left:10, right: 10})
}

build(){

Column() {
Row() {
Image($r('app.media.ic_trash'))
.objectFit(ImageFit.Contain).width(36).aspectRatio(1).padding({top: 12})
.onClick(() => {
this.inputVal = ""
this.inputValConfirm = ""
this.inputCnt = 0
// this.pathStack.pop()
})
Blank().width(86)
Text("设置数字密码").fontSize(18).fontColor(Color.White)
}
.alignItems(VerticalAlign.Center)
.width('100%').height(60).padding({top: 44, bottom: 10})
Blank().height(112)
Column(){
Image($r('app.media.progress_target_label_navy'))
.objectFit(ImageFit.Contain)
.width(98)
.height(132.5)
Text(this.InfoText)
.fontSize(14)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.padding({top:10})
}
Blank().height(32)
Grid() {
ForEach([1,2,3,4,5,6], (item:number | string, index) => {
GridItem() {
if (item.valueOf() <= this.inputCnt) {
Image($r('app.media.startIcon'))
.objectFit(ImageFit.Contain)
.width(20)
} else {
Image($r('app.media.startIcon'))
.objectFit(ImageFit.Contain)
.width(20)
}
}
})
}.layoutDirection(GridDirection.Row).align(Alignment.Center).maxCount(6).columnsGap(21).height(20)

Blank().height(24)
Text(this.optText)
.fontSize(14).fontColor('#F37676')
Blank().height(88)
Column() {
this.KeyboardBuilder()
}
.height(291)
.backgroundColor('#BDBFC5')
}
.width('100%')
.height('100%')
.backgroundColor('#020214')
.alignItems(HorizontalAlign.Center)
}

}