uview组件中使用MessageInput 验证码输入和Keyboard 键盘制作的简单支付密码输入框

<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
		},
    }
}

猜你喜欢

转载自blog.csdn.net/qq_68299987/article/details/135140135
今日推荐