微信小程序设置解锁密码

因为按照产品的要求，不要图案。所以就没做了。就是按键的，后期有时间把图案也做出来

<view class="wx_unlocking">
  <view class='password-box'>
    <view class='password-n'>{{hint}}view>
    <view class='password-i'>
      <block wx:for="{{Length}}" wx:key="item">
        <input class='i-i' value="{{password.length>=index+1?password[index]:''}}" disabled password='{{ispassword}}' >input>
      block>
    view>
    
    <view class='keyword'>
      <view class='k-i' data-id="1" bindtap='keyword'>1view>
      <view class='k-i' data-id="2" bindtap='keyword'>2view>
      <view class='k-i' data-id="3" bindtap='keyword'>3view>
      <view class='k-i' data-id="4" bindtap='keyword'>4view>
      <view class='k-i' data-id="5" bindtap='keyword'>5view>
      <view class='k-i' data-id="6" bindtap='keyword'>6view>
      <view class='k-i' data-id="7" bindtap='keyword'>7view>
      <view class='k-i' data-id="8" bindtap='keyword'>8view>
      <view class='k-i' data-id="9" bindtap='keyword'>9view>
      <view class='key-cancel' bindtap='cancel'>取消view>
      <view class='k-i' data-id="0" bindtap='keyword'>0view>
      <view class='key-delete' bindtap='delete'>删除view>
    view>
  view>
view>

太忙了

.wx_unlocking{
  background-color: #f0f0f0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.unlocking_wang{
  color: #6699ff;
  text-align: right;
  padding: 30rpx;
  font-size: 26rpx;
}
.password-box{
  margin-top: 30%;
}
/*  */
.password-n{
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
}
.password-i{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:20rpx;
}
.i-i{
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: solid 5rpx #000;
  text-align: center;
  margin: 0 20rpx;
}
/*keyword  */
.keyword{
  display: flex;
  width: 80%;
  margin: auto;
  justify-content: center;
  flex-flow:row wrap;
  margin-top: 50rpx;
  align-items: center;

}
.k-i{
  height: 100rpx;
  width: 100rpx;
  background-color: #fff;
  line-height: 100rpx;
  text-align: center;
  border-radius: 50%;
  margin:20rpx 40rpx;
}
.key-cancel,.key-delete{
  font-size:32rpx;
  width:100rpx;
  height:100rpx;
  line-height: 100rpx;
}
.key-cancel{
  margin-right: 26rpx;
  text-align: left;
}
.key-delete{
  margin-left: 26rpx;
  text-align: right;
}

Page({
  data: {
    password: [],
    password2: [],
    hint:'设置解锁密码',
    Length:4,
    ispassword:false//是否显示星号
  },
  onLoad: function () {
  },
  keyword:function(e){
    let that = this;
    let id = e.currentTarget.dataset.id
    let password = that.data.password
    let password2 = that.data.password2
    password.push(id);
    if (password.length == this.data.Length) {
      if (password.join("") == password2.join("")){
        wx.showToast({
          title: '演示密码',
          icon: 'none',
          duration: 1000,
        })
        setTimeout(function () {
          wx.switchTab({
            url: `../wx_shop/wx_shop`
          })
        }, 1000);
      } else if (password.join("") != password2.join("") && password2.join("") != ''){
        that.unlike()
      }else{
        password2 = password
        that.again()
      }
    }
    that.setData({
      password: password,
      password2: password2
    })
    
  },
  again:function(e){
    let that = this
    setTimeout(function () {
      that.data.password = []
      console.log('确认输入密码')
      that.setData({
        password: that.data.password,
        hint:'确认输入密码'
      })
    }, 500);
  },
  unlike: function (e) {
    let that = this
    setTimeout(function () {
      that.data.password = []
      that.data.password2 = []
      console.log('两次输入的密码不正确')
      that.setData({
        password: that.data.password,
        password2: that.data.password2,
        hint: '两次输入的密码不正确'
      })
    }, 500);
  },
  cancel:function(e){
    let that = this;
    let password = that.data.password
    password = []
    that.setData({
      password: password
    })
  },
  delete:function(e){
    let that = this;
    let password = that.data.password
    password.pop()
    that.setData({
      password: password
    })
  }
})

做的肯定不完美，没办法，菜啊！百度的都是画图的。。。

转载请注明出处！

转载于:https://www.cnblogs.com/baifubin/p/9290549.html