一个获取短信验证码的组件示例

判断是否可点击,以及倒计时显示,调用示例

<captcha-btn slot="right" :waitTime="waitTime" @getCaptcha="getCaptcha"></captcha-btn>

这个waitTime是一个存储在全局的与电话号码绑定的时间,具体captchaBtn内容如下

<template>
  <div class="content">
    <x-button class="btn" type="primary" :disabled="disabled" @click.native="getCaptcha">{{captcha}}</x-button>
  </div>
</template>

<script>
import {XButton} from 'vux'
let timer
export default {
  name: 'captcha-btn',
  props: {
    waitTime: {
      type: Number,
      default: 60
    }
  },
  data () {
    return {
      captcha: '获取验证码',
      disabled: false,
      wait: this.waitTime
    }
  },
  beforeMount () {
    // 倒计时大于一分钟 或者是默认值 60 可以发送验证码
    if (this.wait < 0 || this.wait === 60) {
      this.captcha = '获取验证码'
      clearTimeout(timer)
      this.wait = 60
      this.getCaptcha()
    } else {
      clearTimeout(timer)
      this.timeDown()
    }
  },
  destroyed () {
    this.captcha = '获取验证码'
    clearTimeout(timer)
  },
  methods: {
    getCaptcha () {
      if (this.wait === 60) {
        this.timeDown()
        this.$emit('getCaptcha')
      }
    },
    timeDown () {
      if (this.wait <= 0) {
        this.disabled = false
        this.captcha = '获取验证码'
        this.wait = 60
        clearTimeout(timer)
        return
      } else {
        this.disabled = true
        this.captcha = `重新发送(${this.wait}s)`
        this.wait--
      }
      timer = setTimeout(() => {
        this.timeDown()
      }, 1000)
    }
  },
  components: {
    XButton
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/custom/variables";

.content {
  .btn.is-disabled {
    width: 130px;
    color: $grey-1 !important;
    background-color: #fff !important;
  }
  .btn {
    font-size: $font12;
    height: 36px !important;
    &.weui-btn_primary{
      background: none !important;
      width: 94px;
      font-size: $font12;
      color: #4C7DEF;
      line-height: 17px;
      padding: 0;
    }
    &.weui-btn:after{
        border: 0;
      }
  }

}
</style>

在Uniapp中获取短信验证码和手机号校验,你可以使用第三方插件来简化开发过程。以下是一个常用的Uniapp插件示例:uni-smscode。 uni-smscode插件提供了获取短信验证码和手机号校验的功能,使用该插件可以方便地实现短信验证码的发送和验证。以下是使用uni-smscode插件的步骤: 1. 在Uniapp项目中,通过npm或yarn安装uni-smscode插件: ``` npm install uni-smscode ``` 2. 在需要使用短信验证码的页面中,引入uni-smscode插件: ```vue <template> <view> <!-- 手机号输入框 --> <input type="text" v-model="mobile" placeholder="请输入手机号码" /> <!-- 验证码输入框 --> <input type="text" v-model="code" placeholder="请输入验证码" /> <!-- 获取验证码按钮 --> <button @click="sendCode">获取验证码</button> <!-- 校验手机号和验证码按钮 --> <button @click="verifyCode">校验</button> </view> </template> <script> import smsCode from 'uni-smscode' export default { data() { return { mobile: '', code: '' } }, methods: { sendCode() { smsCode.send(this.mobile).then(res => { // 短信验证码发送成功处理逻辑 console.log('短信验证码发送成功') }).catch(err => { // 短信验证码发送失败处理逻辑 console.error('短信验证码发送失败', err) }) }, verifyCode() { smsCode.verify(this.mobile, this.code).then(res => { // 手机号和验证码校验成功处理逻辑 console.log('手机号和验证码校验成功') }).catch(err => { // 手机号和验证码校验失败处理逻辑 console.error('手机号和验证码校验失败', err) }) } } } </script> ``` 在上述示例中,通过调用smsCode.send方法来发送短信验证码,并使用smsCode.verify方法来校验手机号和验证码。你可以根据需求自定义按钮的样式和交互逻辑。 需要注意的是,具体插件的使用方法可能会因插件版本和更新而有所变化,建议查阅相关插件的文档或示例代码来进行具体的使用和定制。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值