<view class="bottom_but" @click="numberUp()">
确认
</view>
<u-keyboard ref="uKeyboard" v-model="show" @change="valChange" @backspace="backspace"
:safe-area-inset-bottom="true" :tooltip="false" :dot-enabled="false">
<view class="parseword">
<view class="parseword_top">
<image class="parseword_img" src="../../static/关闭 (3).png" mode="" @click="closePay()"></image>
请使用密码支付
</view>
<view class="pay_money">
<text style="font-size: 60rpx;font-weight: blod;">{
{doctorData.money}}</text>元
</view>
<view class="balance">
余额()
</view>
<view class="" style="text-align: center;color: #8f8f8f;">
请输入支付密码
</view>
<u-message-input :maxlength="6" :focus="true" :dot-fill="true" v-model="value" :disabled-keyboard="true" :breathe="false"></u-message-input>
</view>
</u-keyboard>
<script>
export default {
data() {
return {
show: false,
value: '',
}
},
methods: {
closePay() {
this.show = false
this.value = ''
},
topaySuccess() {
// 支付成功
uni.navigateTo({
url: '/pages/paySuccess/paySuccess'
});
},
// 按键被点击(点击退格键不会触发此事件)
valChange(val) {
// 将每次按键的值拼接到value变量中,注意+=写法
if (this.value.length < 6) {
this.value += val;
if (this.value.length == 6) {
if (this.value == "123456") {
this.topaySuccess();
} else {
uni.showToast({
title: '密码错误请重新输入',
icon: 'none'
});
this.value = ''
}
}
}
console.log(this.value);
},
// 退格键被点击
backspace() {
// 删除value的最后一个字符
if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
console.log(this.value);
},
// 显示键盘
numberUp() {
//if (this.audioUrl == '') {
//uni.showToast({
//title: '请录入语音',
//icon: 'none'
//});
//return
//}
//if (this.textareaValue == '') {
//uni.showToast({
//title: '请说明文字描述',
//icon: 'none'
//});
//return
//} 可做一些判断
this.value = ''
this.show = true
},
}
}
uview组件中使用MessageInput 验证码输入和Keyboard 键盘制作的简单支付密码输入框
猜你喜欢
转载自blog.csdn.net/qq_68299987/article/details/135140135
今日推荐
周排行