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.formif (!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

vue通过发送手机号码短信验证登录相关推荐

java+jsp如何实现发送手机短信验证登录
我的qq 2038373094 1.借助第三方免费的sdk接口,下载java sdk http://smsow.zhenzikj.com/doc/sdk.html 下载后的SDK只包含一个jar文件 ...
Vue与Node.js实现手机短信验证登录
手机短信使用的第三方平台是联容云,注册就送8块钱体验费,足够自己用用了,注册完自己建一个应用就能拿到需要使用的配置了,如图注册完之后1就可以使用了. Node.js后端使用了Express框架 &q ...
Android实现第三方Mob短信验证登录以及手机号显示和修改用户名（简易新闻五）
Android实现第三方Mob短信验证登录以及手机号显示和修改用户名(简易新闻五) 关于之前的功能实现可以从制作简易新闻App导航篇中查看因为这篇是写了有一段时间的博客,所以这篇(包括后面的简易新 ...
Springboot实现短信验证登录
一.介绍使用短信验证登录也是现在实际项目中普遍使用的一种登录, 二.实际的操作流程 1.用户在前端页面输入手机号码之后,点击发送验证码 2.前端将手机号传给后端 3.后端生成一个6为的随机数通过短信 ...
七丶青龙nvjdc部署教程+短信验证登录对接傻妞
青龙nvjdc部署教程+短信验证登录对接傻妞Nolanjdc 没有服务器的先自行购买,这里推荐腾讯云2H4G8M首年70–点击购买青龙面板安装教程傻妞机器人安装教程 XDD安装教程 QQ交流:10 ...
Spring boot短信验证登录
一.短信验证码业务我用的是第三平台的短信服务,当用户点击发送验证码,会调用短信平台接口,从而给手机发验证码.流程如下: c 首先需要工具类,来发送验证码 public class DXMessage ...
秒滴云短信验证登录小demo
短信验证登录demo <a class="click_login_head" data-href="/member" data-method=" ...
014_关于session实现短信验证登录的前端启动
014_关于session实现短信验证登录的前端启动 1.进入到nginx相对应的文件夹,shfit+右键,进入PowerShell并且执行nginx 2.启动我们的nginx,嘿嘿,可以访问我们的前 ...
工厂如何实现无线wifi短信验证登录？工厂上网实名认证系统
工厂如何实现无线wifi短信验证登录?工厂上网实名认证系统工厂提供公共的无线wifi上网服务,需对用户进行实名认证.手机短信实名认证以其用户体验.综合成本等优势,成为工厂无线上网认证的首选方案. 一 ...

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

文章转载于：

vue通过发送手机号码短信验证登录相关推荐

最新文章

热门文章