支付密码设置框，鸿蒙版

具体思路为，你已经对前端设置密码功能有了基础了解，只是用鸿蒙版还原这个功能

具体要用到堆叠容器，然后将输入框透明之后放在第二位，达到类似前端输入框前置的效果， 然后设置6个Text展示给用户输入效果具体代码如下。

//setPayPsw.ets
import { routerBack, ShowT } from '../../../common';
import { NavBar } from '../../house_info/componment/navBar';

@Extend(Text)
function textStyle(currentIndex: number,pswLen:number ) {
  .width(30).height(30).margin({left:2,right:2}).textAlign(TextAlign.Center)
    .border({ width: { bottom: 1 }, color: $r('app.color.gray_color'), style: BorderStyle.Solid })
}
@Entry
@Component
struct ResetPayPsw {
  @State payPsw: string = '';
  @State title:string='请输入原支付密码'
  @State times:number=0
  @State oldPsw:string=''
  @State newPsw:string=''
  @State newPswAgain:string=''
  timesSetT(times:number){
    if(times==0){
      this.title='请输入原支付密码'
    }else if(times==1){
      this.title='请设置支付密码'
    }else if(times==2){
      this.title='请确认支付密码'
    }else if(times==3){
      ShowT.showToast('密码设置成功',2000)

      //处理重置密码
      setTimeout(()=>{
        routerBack('pages/setting/subPage/payPsw')
      },2000)
    }
  }
  changePsw=(val:string)=>{
    this.payPsw=val;
    if(this.times==0 && val.length==6){
      this.payPsw='';
      this.times += 1;
      this.oldPsw=val;
      this.timesSetT(this.times)
    }else if(this.times==1 && val.length==6){
      this.payPsw='';
      this.times += 1;
      this.newPsw=val;
      this.timesSetT(this.times)
    }else if(this.times==2 && val.length==6){
      this.payPsw='';
      this.times += 1;
      this.newPswAgain=val;
      this.timesSetT(this.times)
    }else if(this.times==3 && val.length==6){

    }
  }
  build() {
      Column() {
        NavBar({ title: '修改支付密码', hasMore: false })
        Text(this.title).fontSize($r('app.float.title_font')).margin({top:50,bottom:30})
        Stack(){
            Flex({justifyContent:FlexAlign.Center}){
              Text(this.payPsw.length>=1?'●':'').textStyle(1,this.payPsw.length)
              Text(this.payPsw.length>=2?'●':'').textStyle(2,this.payPsw.length)
              Text(this.payPsw.length>=3?'●':'').textStyle(3,this.payPsw.length)
              Text(this.payPsw.length>=4?'●':'').textStyle(4,this.payPsw.length)
              Text(this.payPsw.length>=5?'●':'').textStyle(5,this.payPsw.length)
              Text(this.payPsw.length>=6?'●':'').textStyle(6,this.payPsw.length)

            }
            TextInput({text:this.payPsw}).opacity(0).defaultFocus(true).type(InputType.Number).type(InputType.Number).maxLength(6)
              .onChange((val:string)=>{
                this.changePsw(val)
              })
        }
      }
      .width('100%')
      .backgroundColor($r('app.color.background_color'))
    .height('100%')
  }
}

其中引用的组件和公共方法类为：

//common.ets
class ShowToast {
  private longToastTime: number = 3000;
  private shortToastTime: number = 1000;

  showToast(message: ResourceStr, duration: number) {
    promptAction.showToast({ message: message, duration: duration });
  }

  shortToast(message: ResourceStr) {
    this.showToast(message, this.shortToastTime);
  }

  longToast(message: ResourceStr) {
    this.showToast(message, this.longToastTime);
  }
}

let ShowT = new ShowToast()


//定义路由列表数据项
class routerList {
  public url: string = '';
  public params: routerParamsType = {}

  constructor(url: string, params?: routerParamsType) {
    this.url = url;
    if (params) this.params = params
  }
}

//存路由栈
let r_list: routerList[] = [new routerList('pages/welcome/welcome')]

//页面跳转方式
function pushUrl(url: string, params?: routerParamsType) {
  if (params) {
    // params.prev_page_url = router.getState().path + router.getState().name
  }
  if (r_list.length < 30) {
    r_list.push(new routerList(url, params))
  } else {
    r_list.shift()
    r_list.push(new routerList(url, params))
  }
  router.pushUrl({
    url: url,
    params: params
  })
}

//路由返回，如果有携带参数，则返回上一层，并携带上参数
//路由返回特定地址
function routerBack(url?: string, params?: routerParamsType) {

  if (url && params) {
    //特定返回格式
    let needChangeIndex = -1;
    let index = r_list.length;
    r_list.map((v, i) => {
      if (v.url == url) {
        needChangeIndex = i
      }
    })
    r_list.splice(needChangeIndex, index - needChangeIndex);
    r_list.push(new routerList(url, params))
    router.pushUrl({
      url: url,
      params: params
    })
  } else {
    r_list.pop();
    let index = r_list.length;
    if (index == 0) {
      router.back()
    } else {
      router.back({
        url: r_list[index-1].url,
        params: r_list[index-1].params
      })
    }
  }

}

//清除所有路由栈
function routerClear() {
  r_list = []
  router.clear()
}

//路由替换
function routerReplace(url: string, params?: routerParamsType) {
  r_list.pop();
  r_list.push(new routerList(url, params))
  router.replaceUrl({
    url: url,
    params: params
  })
}

export { 
    ShowT,
    pushUrl,
    routerBack,
    routerClear,
    routerReplace
}

//navBar.ets
import { router } from '@kit.ArkUI'
import { routerBack } from '../../../common'



@Component
export struct NavBar {
  @Prop title: string
  @Prop hasMore: boolean
  @Prop moreIcon: ResourceStr

  moreClick() {
    this.dialogController.open()
  }

  build() {
    Row() {
      Image($r('app.media.back')).width(20).height(20)
        .onClick(() => routerBack())

      Text(this.title)
        .width('calc(100% - 20fp)')
        .fontSize($r('app.float.list_font'))
        .textAlign(TextAlign.Center)
        .fontColor('#333')
        .margin({right:20,left:-10})
        .padding({ right: 12, left: 12 })
      if (this.hasMore) {
        Image(this.moreIcon).width(20).height(20)
          .onClick(() => {
          //处理你要做的事情
            //this.moreClick()
            // this.dialogController.open()
          })
      }

    }.width('100%').height(44).justifyContent(FlexAlign.SpaceBetween).padding({ left: 16, right: 16 }).margin({top:38})
  }
}