vue通过发送手机号码短信验证登录

在这里插入图片描述

<template>
    <div class="get-mobile" @touchmove.prevent>
        <div class="main">
            <div class="pt-20 pr-15 pl-15 pb-20">
                <input class="input mb-15" v-model="form.tel" placeholder="请输入手机号" type="number">
                <div class="box">
                    <input class="input" v-model="form.telVerificationCode" placeholder="请输入短信验证码" type="number">
                    <div class="el-button" @click="send">{{ countDown }}</div>
                </div>
            </div>
            <div class="btn" @click="sumbit">提交</div>
        </div>
    </div>
</template>

<script>
import { sendLoginMsgCode, login } from 'xx';

export default {
    name: 'GetMobile',
    data() {
        return {
            form: {
                telVerificationCode: '',
                tel: '',
            },
            countDown: "发送验证码", // 倒计时
            bVerification: false // 节流
        }
    },
    methods: {
        async sumbit() {
            const { telVerificationCode, tel } = this.form
            if (!telVerificationCode || !tel) return this.$toast("请输入手机号和验证码");
            let { code, data } = await login({
                tel,
                telVerificationCode,
                isOffline: false
            });
            if (code === 200) {
                this.$toast('登录成功');
                this.$emit('sumbit', data.userInfo);
                this.$emit('update:dialog', false)
            }
        },
        async send() {
            if (!/^\d{11}$/.test(this.form.tel)) return this.$toast("请先输入正确的手机号");
            if (this.bVerification) return;
            this.bVerification = true;
            const { code } = await sendLoginMsgCode({
                tel: this.form.tel
            });
            if (code === 200) {
                this.$toast("发送验证码...");
            }
            let countDown = 59;
            const auth_time = setInterval(() => {
                this.countDown = countDown--;
                if (this.countDown <= 0) {
                    this.bVerification = false;
                    this.countDown = "发送验证码";
                    clearInterval(auth_time);
                }
            }, 1000);
        }
    }
}
</script>

<style lang='scss' scoped>
.get-mobile {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: center;

    .main {
        width: 280px;
        height: 178px;
        background: #FFFFFF;
        border-radius: 5px;

        .input {
            border: 1px solid #EBEBEF;
            border-radius: 5px;
            height: 40px;
            padding-left: 10px;
        }

        .el-button {
            margin-left: 10px;
            border-radius: 5px;
            background: #5F93FD;
            color: #fff;
            width: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            height: 45px;
            color: #5F93FD;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid #EBEBEF;
        }
    }
}
</style>

文章转载于:

https://blog.csdn.net/qq_45487080/article/details/124884929

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。要编写一个手机短信验证登录的页面,我们可以按照以下步骤进行: 1. 创建Vue应用:首先,在HTML文件中引入Vue库,并在JavaScript文件中创建Vue实例。 2. 设计页面结构:在Vue实例中,使用HTML和Vue的模板语法来设计页面结构。可以包括一个表单和相关的输入框、按钮等元素。 3. 定义数据和方法:在Vue实例中,定义数据属性来存储用户输入的手机号码和验证码,以及其他需要的数据。同时,定义方法来处理用户的点击事件,例如发送验证码、登录等操作。 4. 实现发送验证码功能:在发送验证码的方法中,可以使用Vue的生命周期钩子函数mounted,来模拟发送短信验证码的功能。在这个方法中,可以生成一个随机的验证码,并将其显示在页面上。 5. 验证手机号码和验证码:在登录方法中,可以比较用户输入的手机号码和验证码与之前生成的手机号码和验证码是否匹配。如果匹配成功,则可以执行登录操作。 6. 处理用户界面的交互和反馈:根据用户的操作和输入,可以使用Vue的数据绑定和条件渲染来实时更新页面中的内容。例如,在用户点击发送验证码按钮后,可以禁用按钮一段时间,并显示倒计时。 7. 添加样式和美化页面:根据需求和个人喜好,可以使用CSS样式来美化页面,使其更加吸引和友好。 通过以上步骤,可以完成一个简单的手机短信验证登录页面的开发。当用户输入正确的手机号码和验证码并点击登录时,可以进行进一步的后续操作,例如跳转到其他页面或者显示登录成功的提示信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值