微信小程序设置解锁密码

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

<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>
 <!--keyword  -->
 <view class='keyword'>
 <view class='k-i' data-id="1" bindtap='keyword'>1</view>
 <view class='k-i' data-id="2" bindtap='keyword'>2</view>
 <view class='k-i' data-id="3" bindtap='keyword'>3</view>
 <view class='k-i' data-id="4" bindtap='keyword'>4</view>
 <view class='k-i' data-id="5" bindtap='keyword'>5</view>
 <view class='k-i' data-id="6" bindtap='keyword'>6</view>
 <view class='k-i' data-id="7" bindtap='keyword'>7</view>
 <view class='k-i' data-id="8" bindtap='keyword'>8</view>
 <view class='k-i' data-id="9" bindtap='keyword'>9</view>
 <view class='key-cancel' bindtap='cancel'>取消</view>
 <view class='k-i' data-id="0" bindtap='keyword'>0</view>
 <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
 })
 }
}) 

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

作者：Brian_白
链接：微信小程序设置解锁密码 - Brian_白 - 博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。