<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.idlet password = that.data.passwordlet password2 = that.data.password2password.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 = passwordthat.again()}}that.setData({password: password,password2: password2})},again:function(e){let that = thissetTimeout(function () {that.data.password = []console.log('确认输入密码')that.setData({password: that.data.password,hint:'确认输入密码'})}, 500);},unlike: function (e) {let that = thissetTimeout(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.passwordpassword = []that.setData({password: password})},delete:function(e){let that = this;let password = that.data.passwordpassword.pop()that.setData({password: password})}
})