效果图
keyboard.wxml
<view class='input_view'>
<text class='title'>提现金额:</text>
<view class='input_box' bindtap='pay'>
<text class='input_label'>¥</text>
<text class='content'>{{inputPassword}}</text>
<view class='className'></view>
</view>
</view>
<van-transition show="{{ passwordInputHidden }}" name="" duration="{{ { enter: 300, leave: 300 } }}"
enter-class="van-enter-class" enter-active-class="van-enter-active-class" leave-active-class="van-leave-active-class"
leave-to-class="van-leave-to-class">
<view class="keyboardbox">
<view class="reset-down" bindtap='pay'>
<van-icon name="arrow-down" size="36rpx" />
</view>
<view class='keyboard' bindchange="passwordInputHidden">
<view class='left number'>
<view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view>
<view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view>
<view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view>
<view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view>
<view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view>
<view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view>
<view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view>
<view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view>
<view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view>
<view class="zero" data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view>
<view data-key="." hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view>
</view>
<view class='right ctr-btn'>
<view class='ctr-btn-item backout' hover-class='active' hover-stay-time='100' bindtap='clear'>
<van-icon name="close" />
</view>
<view class='ctr-btn-item submit' hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>提现
</view>
</view>
</view>
</view>
</van-transition>
keyboard.wxss
.input_view {
width: 700rpx;
height: 500rpx;
background: #fff;
margin: 25rpx auto;
border-radius: 10rpx;
padding: 40rpx;
box-sizing: border-box;
}
.title {
display: block;
line-height: 90rpx;
font-size: 30rpx;
color: #aaa;
}
.input_box {
display: flex;
padding: 20rpx 0;
height: 90rpx;
border-bottom: 1px solid #efefef;
}
.input_label {
font-size: 35rpx;
font-weight: bold;
margin-right: 5rpx;
}
.content {
font-size: 80rpx;
line-height: 90rpx;
font-weight: bold;
}
.className {
width: 6rpx;
height: 90rpx;
background: #666;
border-radius: 6rpx;
animation: twinkling 1s infinite;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both
}
@-webkit-keyframes twinkling {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.pay {
display: block;
width: 300rpx;
height: 90rpx;
border-radius: 12rpx;
background: #1dc063;
color: #fff;
text-align: center;
line-height: 90rpx;
margin: 50rpx auto;
font-size: 32rpx;
}
.reset-down{
text-align: center;
padding: 10rpx;
}
.keyboard {
width: 100%;
display: flex;
background-color: #fff;
border-top: 10rpx solid #eee;
}
.keyboard .number {
display: flex;
width: 570rpx;
flex-wrap: wrap;
}
.keyboard .number view {
width: 190rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
font-size: 46rpx;
font-weight: bold;
box-sizing: border-box;
border-left: 10rpx solid #eee;
border-bottom: 10rpx solid #eee;
}
.keyboard .number .zero {
width: 380rpx;
}
.keyboard .ctr-btn {
width: 180rpx;
}
.keyboard .ctr-btn .backout {
height: 120rpx;
line-height: 120rpx;
text-align: center;
box-sizing: border-box;
border-left: 10rpx solid #eee;
border-right: 10rpx solid #eee;
border-bottom: 10rpx solid #eee;
}
.keyboard .ctr-btn .submit {
height: 360rpx;
line-height: 360rpx;
text-align: center;
box-sizing: border-box;
border-left: 10rpx solid #eee;
border-right: 10rpx solid #eee;
border-bottom: 10rpx solid #eee;
background-color: #1dc063;
}
.keyboard .ctr-btn view .iconfont {
font-size: 44rpx !important;
color: #c30;
}
.keyboard .ctr-btn view:nth-child(2) {
font-size: 46rpx;
color: #fff;
}
.keyboard .active {
background-color: #e4e7ed;
}
.activity {
background-color: #fff;
padding: 25rpx 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
border-bottom: 10rpx solid #f6f6f6;
}
.activity.activity-item {
font-size: 26rpx;
}
.arrows-right {
width: 30rpx;
height: 30rpx;
}
.arrows-right.active {
transform: rotate(270deg);
}
.van-enter-active-class,
.van-leave-active-class {
position: fixed;
bottom: 0px;
transition: all;
}
.van-enter-class,
.van-leave-to-class {
bottom: -100%;
}
keyboard.js
Page({
/**
* 页面的初始数据
*/
data: {
inputPassword: '', //输入的密码
passwordInputHidden: true, //hidden是true 默认隐藏
pay_type: '', //支付方式
password: 123456, //设置的密码 这里写死 实际开发中后台专门设置一个表存储用户设置的密码
show:false
},
isshowone(){
debugger
this.setData({
show:!this.data.show
})
},
pay(e) {
//你选择的支付方式
var pay_type = e.currentTarget.dataset.pay_type;
var _this = this;
if (pay_type == 'weipay') {
//此处写入微信支付需要执行的代码不做过多介绍
} else {
//内部支付 打开键盘
_this.passwordInputHidden();
}
},
inputPassword(e) {
if (this.data.inputPassword.indexOf(".") != -1 && this.data.inputPassword.substring(this.data.inputPassword.indexOf(".") + 1, this.data.inputPassword.length).length == 2) {
return;
}
// 如果当前文本中有 . 并且当前点击的还是 . 就不能再输入了
if (this.data.inputPassword.indexOf(".") != -1 && e.currentTarget.dataset.key == ".") {
return;
}
// 第一位如果是 0 那么就不能再输入
if (this.data.inputPassword == "0" && e.currentTarget.dataset.key != '.') {
return;
}
if (this.data.inputPassword == '' && e.currentTarget.dataset.key == '.') {
e.currentTarget.dataset.key = '0.'
}
//键盘输入的密码 赋值给inputPassword
this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;
this.setData({
inputPassword: this.data.inputPassword
});
},
passwordInputHidden() {
this.setData({
passwordInputHidden: !this.data.passwordInputHidden //取反 打开关闭小键盘
});
this.setData({
inputPassword: ''
});
},
//删除输入错误的密码
clear() {
var index = this.data.inputPassword.length;
if (index > 0) {
var inputPassword = this.data.inputPassword.substr(0, index - 1);
this.setData({
inputPassword: inputPassword
});
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
keyboard.json
{
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index",
"van-transition": "/miniprogram_npm/vant-weapp/transition/index",
"van-icon": "/miniprogram_npm/vant-weapp/icon/index"
}
}