vue 短信验证码(注册，登录，忘记密码)

<template>

  <div class="main">

    <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">

      <el-form-item label="短信验证码" prop="code">

        <el-input

          v-model="ruleForm.code"

          placeholder="请输入短信验证码"

          style="width:70%"

        ></el-input>

        <el-button

          type="primary"

          @click="getMessage()"

          :disabled="isShow"

          class="mess"

          >{{ messageInfo }}</el-button

        >

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

export default {

  name: "index2",

  data() {

    return {

      vcodeid: "",

      ruleForm: {

        phone: "",

        password: "",

        code: "",

      },

      rules: {

        phone: [

          { required: true, message: "请输入手机号", trigger: "blur" },

          {

            pattern: /^1(3|4|5|7|8|9)\d{9}$/,

            message: "请输入正确格式的手机号",

            trigger: "blur",

          },

        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

        code: [

          { required: true, message: "请输入短信验证码", trigger: "blur" },

        ],

      },

      messageInfo: "短信验证码",

      isShow: false,

    };

  },

  created() {},

  mounted() {},

  methods: {

    validateBtn() {

      //倒计时

      let time = 60;

      //默认样式，防止快速点击好几次

      this.messageInfo = time + "秒后重试";

      let timer = setInterval(() => {

        if (time == 0) {

          clearInterval(timer);

          this.messageInfo = "获取验证码";

          this.isShow = false;

        } else {

          this.messageInfo = time + "秒后重试";

          this.isShow = true;

          time--;

        }

      }, 1000);

    },

    getMessage() {

      if (this.ruleForm.phone == "") {

        this.$message({

          message: "手机号不能为空",

          type: "warning",

        });

      } else {

        this.validateBtn();

        var param = {

          phone: this.ruleForm.phone,

          tion: "1",

        };

        this.apis.api.getCode(param).then((res) => {

          if (res.data.code == "01") {

            this.vcodeid = res.data.dat;

          }

        });

      }

    },

  },

};

</script>

<style scoped lang="scss">

</style>