order-ui-pc/src/components/globalComponents/send-verification-code/main.vue

<template>
  <el-button
    class="send-verification-code"
    :type="num < 60 ? 'info' : 'primary'"
    :plain="num < 60"
    :disabled="num < 60"
    @click="getCode"
    >{{ title }}</el-button
  >
</template>

<script>
import { isMobile } from "@/utils/validate";
import asyncRequest from "@/apis/service/user/index";
import resToken from "@/mixins/resToken";
export default {
  name:"sendVerificationCode",
  props: {
    mobile: {
      type: String,
      default: "",
    },
  },
  mixins: [resToken],
  data() {
    return {
      num: 60,
      title: "获取验证码",
      timer: null,
    };
  },
  computed: {},
  methods: {
    getCode() {
      if (this.mobile !== "" && isMobile(this.mobile)) {
        if (this.num === 60) {
          asyncRequest.verfiy({ mobile: this.mobile }).then(async (res) => {
            if (res && res.code === 0) {
              this.timer = setInterval(() => {
                if (this.num !== 0) {
                  this.title = `${this.num}s后可重发`;
                  this.num--;
                } else {
                  clearInterval(this.timer);
                  this.num = 60;
                  this.title = "获取验证码";
                }
              }, 1000);
            } else if (res && res.code >= 100 && res.code <= 104) {
              await this.logout();
            } else {
              this.$message.warning(res.message);
            }
          });
        }
      } else {
        this.$emit("mobileErr", false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.send-verification-code.el-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 90px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  font-size: 13px;
  text-align: center;
}
</style>