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
  },
    }
}
目录
相关文章
|
6月前
|
人工智能 算法 数据安全/隐私保护
[oeasy]python080如何生成验证码_随机数字密码_真随机
本文介绍了如何生成随机验证码的过程,从简单的随机数字生成到包含数字、大小写字母及符号的复杂验证码。通过 Python 的 `random` 和 `string` 模块,逐步扩展字符集并确保结果满足特定要求(如包含各类字符)。同时探讨了随机数生成的本质,指出计算机中的“随机”实际上是基于算法和种子值的伪随机,并非真正的物理随机。最后总结了验证码的生成原理及其在实际应用中的意义,为读者揭开日常生活中验证码背后的编程逻辑。
199 8
|
存储 NoSQL 数据库
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
这篇文章讲述了在分布式微服务系统中添加用户注册和登录功能的过程,重点介绍了用户注册时通过远程服务调用第三方服务获取短信验证码、使用Redis进行验证码校验、对密码进行MD5加密后存储到数据库,以及用户登录时的远程服务调用和密码匹配校验的实现细节。
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
|
安全 数据安全/隐私保护
SpringSecurity5.7+最新案例 -- 用户名密码+验证码+记住我······
根据最近一段时间的设计以及摸索,对SpringSecurity进行总结,目前security采用的是5.7+版本,和以前的版本最大的差别就是,以前创建SecurityConfig需要继承WebSecurityConfigurerAdapter,而到了5.7以后,并不推荐这种做法,查了网上一些教程,其实并不好,绝大多数用的都是老版本,所以出此文案。一些原理什么的,就不过多说明了,一般搜索资料的,其实根本不想你说什么原理 T·T。
277 0
SpringSecurity5.7+最新案例 -- 用户名密码+验证码+记住我······
|
Java 数据安全/隐私保护 C++
43.【Java 实现验证码获取 C++实现密码加密和删除和QQ登入系统】
43.【Java 实现验证码获取 C++实现密码加密和删除和QQ登入系统】
163 0
|
JavaScript 前端开发 数据安全/隐私保护
前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)
前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)
681 0
前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)
|
前端开发 JavaScript 数据安全/隐私保护
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能
1193 0
|
数据安全/隐私保护 Python