• 效果圖

  
  
  image.png

• . vue文件

<template>
  <div class="securitycode">
    <div class="code_title" v-show="staus === 0">請?jiān)O(shè)置賬戶余額支付密碼</div>
    <div class="code_title" v-show="staus === 1">請?jiān)俅翁顚懸源_認(rèn)</div>
    <div class="code_title" v-show="staus === 2">
      請輸入支付密碼，以驗(yàn)證身份
    </div>

    <view class='content' @click='Tap'>
      <block v-for="6" :key="item">
        <input class='code-input-main-item' value="{{code.length>=index+1?code[index]:''}}" disabled ></input>
      </block>
    </view>
    <input name="password"  class='ipt' maxlength="6" focus="{{isFocus}}"  type="number" @input="inputFunc"></input>

    <div class="code_forget" v-show="staus === 2" @click="staus = 0">
      忘記密碼？
    </div>
    <div class="code_comfirm" v-show="staus === 1">確認(rèn)</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: "",
      staus: 0,
      relCode: "",
      focus:true,
  isFocus:true,  //聚焦 
    };
  },
  onShow() {
    this.code = '';
    if (this.relCode) {
      this.staus = 2;
    }
  },
  methods: {
    inputFunc() {
      if (this.code.length === 6) {
        //輸入框的值
        console.log(this.code);
        switch (this.staus) {
          case 0: //設(shè)置
            this.staus = 1;
            this.relCode = this.code;
            this.code = "";
            break;
          case 1: //確認(rèn)
            if (this.relCode === this.code) {
              wx.showToast({
                title: "設(shè)置成功",
              });
              setTimeout(()=>{
              wx.navigateBack({
                delta: 1, //返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁,
              });
              })

            } else {
              wx.showToast({
                title: "倆次支付密碼不一致", //提示的內(nèi)容,
                icon: "none", //圖標(biāo),
                duration: 2000, //延遲時(shí)間,
                mask: true, //顯示透明蒙層，防止觸摸穿透,
                success: (res) => {},
              });
              this.code = "";
            }

            break;
          case 2: //忘記
            if (this.relCode === this.code) {
              this.staus=0;
            } else {
              wx.showToast({
                title: "支付密碼錯(cuò)誤", //提示的內(nèi)容,
                icon: "none", //圖標(biāo),
                duration: 2000, //延遲時(shí)間,
                mask: true, //顯示透明蒙層，防止觸摸穿透,
                success: (res) => {},
              });
             
            }
             this.code = "";
            break;
          default:
            break;
        }
        
      }
    },
  },
};
</script>
<style lang="less" scoped>
@red: #ee3c4c;
.securitycode {
  box-sizing: border-box;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.code-input-main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 40rpx 0;
  width: 550rpx;
}

.code_forget {
  width: 550rpx;
  text-align: right;
  color: @red;
}
.code_comfirm {
  width: 550rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: @red;
  color: #fff;
  border-radius: 10rpx;
}
.code-input-main-item {
  /* font-family: time-font-myself; */
  font-family: PingFang-SC-Medium;
  /* width: .34rem;
    height: .44rem; */
  opacity: 0.85;
  /* border-bottom: solid #ffffff 1rpx; */
  border: solid #d9d9d9 1rpx;
  margin: 0 5rpx;
  text-align: center;
  padding-bottom: 0;
  color: #333333;
  line-height: 102rpx;
  width: 90rpx;
  height: 90rpx;
  font-size: 50rpx;
  line-height: 90rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 10rpx;
}
.code-input-input {
  height: 102rpx;
  position: absolute;
  width: 300%; //隱藏光標(biāo)位置
  outline: none;
  color: transparent;
  text-shadow: 0 0 0 transparent;
}
</style>

• 用 mpvue 寫的, 有需要自行轉(zhuǎn)小程序原生哈