小程序支付密码,验证码6位demo

• 效果图

  
  
  image.png

• . vue文件

<template>
  <div class="securitycode">
    <div class="code_title" v-show="staus === 0">请设置账户余额支付密码</div>
    <div class="code_title" v-show="staus === 1">请再次填写以确认</div>
    <div class="code_title" v-show="staus === 2">
      请输入支付密码，以验证身份
    </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">确认</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: //设置
            this.staus = 1;
            this.relCode = this.code;
            this.code = "";
            break;
          case 1: //确认
            if (this.relCode === this.code) {
              wx.showToast({
                title: "设置成功",
              });
              setTimeout(()=>{
              wx.navigateBack({
                delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
              });
              })

            } else {
              wx.showToast({
                title: "俩次支付密码不一致", //提示的内容,
                icon: "none", //图标,
                duration: 2000, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: (res) => {},
              });
              this.code = "";
            }

            break;
          case 2: //忘记
            if (this.relCode === this.code) {
              this.staus=0;
            } else {
              wx.showToast({
                title: "支付密码错误", //提示的内容,
                icon: "none", //图标,
                duration: 2000, //延迟时间,
                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%; //隐藏光标位置
  outline: none;
  color: transparent;
  text-shadow: 0 0 0 transparent;
}
</style>

• 用 mpvue 写的, 有需要自行转小程序原生哈