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

简介: 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
  },
    }
}
目录
相关文章
|
7月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
185 4
|
7月前
|
小程序 API 开发者
小程序弹窗
小程序弹窗
145 0
|
7月前
|
JavaScript 数据安全/隐私保护
如何制作一个精美的输入框?基本表单中的的账号或密码输入框样式
如何制作一个精美的输入框?基本表单中的的账号或密码输入框样式
80 0
|
API Android开发 iOS开发
web: 手机键盘自动获取短信验证码,点击自动填充输入框
web: 手机键盘自动获取短信验证码,点击自动填充输入框
481 0
|
7月前
|
前端开发 JavaScript 数据安全/隐私保护
c2c商城登录注册的输入框隐藏
c2c商城登录注册的输入框隐藏
|
7月前
|
JavaScript
elementUI/Plus 输入框按回车刷新页面分析与解决
elementUI/Plus 输入框按回车刷新页面分析与解决
|
7月前
|
JavaScript API 数据安全/隐私保护
vue3制作类微信的六位的密码输入框
vue3制作类微信的六位的密码输入框
205 0
|
Java
注册界面展示及源码(含输入框获焦失焦)
注册界面展示及源码(含输入框获焦失焦)
46 0
|
数据安全/隐私保护
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一(整理)
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一(整理)
|
数据安全/隐私保护
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二(整理)
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二(整理)