写一个发送验证码组件

开心市民小李・ࡇ・

于 2022-06-22 16:08:39 发布

阅读量83

点赞数

分类专栏： vue 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44242623/article/details/125411412

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<template>
    <el-button class="count-button" type="primary" size="small" :style="{ width:contentWidth+'px', }" :disabled="isStart"  @click="handleStart">
        {{ !isStart ? '获取短信验证码' : `${currentCount}秒后重新获取` }}
    </el-button>
</template>

<script>
import { sms } from "@/api/home/home.js";
import md5 from 'js-md5';
export default {
    name: "CountButton",
    props: {
        count: {
            type: Number,
            default: 60,
        },
        FormData: {
            type: Object
        },
        contentWidth: {
            // 容器宽度
            type: Number,
            default: 116
        },
    },
    data() {
        return {
            isStart: false,
            currentCount: 60,
            timerId: null
        }
    },
    methods: {
        handleStart() {
            if (!this.FormData.user_name || !this.FormData.password) {
                let arr = [];
                !this.FormData.user_name ? arr.push('user_name') : '';
                !this.FormData.password ? arr.push('password') : '';
                this.$emit('monitor', arr)
                this.$messages.warning("获取验证码需要填写用户名,密码！");
            } else {
                let params = {
                    user_name: this.FormData.user_name.trim(),
                    password: md5(this.FormData.password),
                };
                sms(params.user_name, params.password).then(res => {
                    console.log(res)
                    // TODO：处理响应
                    if (res.data.status == 0) {
                        this.start()
                        this.$messages.success(res.data.message);
                    } else {
                        this.$messages.warning(res.data.message);
                    }
                })

            }

        },
        start() {
            this.timerId = null
            if (this.isStart || !!this.timerId) {
                return;
            }
            this.isStart = true;
            this.timerId = setInterval(() => {
                if (this.currentCount === 1) {
                    this.stop();
                    this.currentCount = this.count;
                } else {
                    this.currentCount -= 1;
                }
            }, 1000);
        },
        stop() {
            this.isStart = false;
            this.timerId = null;
            this.clear();
        },
        clear() {
            this.timerId && clearInterval(this.timerId);
        }

    }

}
</script>