vue中获取短信验证码交互功能快速开发代码整理

vue中获取短信验证码交互功能快速开发代码整理

父组件相关代码：

HTML：

<div class="send_list">
  <div class="send_list_ico">
    <img src="@/assets/img/ico_3.png" />
  </div>
  <input v-model.trim="mobile" class="send_list_input" type="tel" placeholder="请输入手机号" maxlength="11" />
</div>

<div class="send_list">
  <div class="send_list_ico">
    <img src="@/assets/img/ico_4.png" />
  </div>
  <input v-model.trim="sms_code" class="send_list_input before_yzm" type="text" placeholder="请输入短信验证码" />
  <!-- <div class="send_list_yzm">获取验证码</div> -->
  <verificationCode :mobile="mobile" @getCode="getCode"></verificationCode>
</div>

引入子组件：

import verificationCode from '@/views/verificationCode.vue'

注册组件：

components:{
  verificationCode,
},

data 中相关字段参数

mobile:'',
isGetSms: false, //是否发送验证码成功
sms_code:'',

methods 方法

// 发送短信成功（子组件中处理返回）
getCode(){
  this.isGetSms = true;
  console.log(this.isGetSms)
},

子组件代码：

<template>
  <div v-if="countdown" style="color: #979FB1;" class="send_list_yzm">{{timeText}}s后重试</div>
  <div v-else @click="getYzm" class="send_list_yzm">获取验证码</div>
</template>

<script>
  export default {
    props:{
      mobile: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        countdownStartTime: 60, //倒计时的初始时间 - 显示数字
        countdown: null, //是否获取验证进行倒计时
        timeText: 60, //倒计时显示数字
        timer: null,
      }
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {
      //获取验证码
      getYzm() {
        if (!this.mobile) {
          alert('请输入手机号'); return false;
        }
        if (!/^1\d{10}$/.test(this.mobile)) {
          alert('请输入正确的手机号'); return false;
        }

        //发送短信中...

        let dataJson = {
          mobile: this.mobile,
        };

        //请求后台发送短信 => 返回res
        //...
        // 发送短信成功
        // if(res.status == 1){
          this.countDown(); //执行倒计时
          this.countdown = true;
          this.$emit('getCode');
        // }
        //...
      },
      //倒计时
      countDown() {
        let nowTime = this.timeText - 1;
        if (nowTime >= 0) {
          this.timeText = nowTime;
          this.timer = setTimeout(this.countDown, 1000);
        } else {
          this.countdown = false;
          this.timeText = this.countdownStartTime;
          clearTimeout(this.timer);
        }
      },

    },
  }
</script>

<style scoped="scoped">
.send_list_yzm{ width: 210px; height: 100%; color: #0FC393; font-size: 30px;
  display: flex; justify-content: center; align-items: center;
}
</style>