公众号基本的绑定手机号页面（截取code，手机号正则，验证码倒计时）

<template><div id="home"><div class="bind_box"><div class="bindphone"><div class="bind_title"><p>绑定手机号</p></div><div class="phone"><div class="phone_left"><span>手机号</span><input name="phone" type="number" placeholder="请输入手机号" v-model="phone" @change="change"></div><div class="phone_right" v-if='show'>请填写正确手机号!</div></div><div class="phone"><div class="phone_left"><span>验证码</span><input type="text" placeholder="请输入验证码" @change="codeed"></div><div class="phone_right" v-show="sendAuthCode" @click="getma"><span class="getcode">获取验证码</span></div><div class="phone_right getcoded" v-show="!sendAuthCode"><span class="getcode"><span>{{auth_time}} </span> 秒后重新发送</span></div></div><div class="codetishi" v-if="showcode">验证码错误!</div><div class="sub_box" v-if="showsub"><div class="sub" @click="sub"><p>确定</p></div></div><div class="sub_box" v-if="hidesub"><div class="sub"><p>确定</p></div></div></div></div></div></template><script>import http from 'axios'import api from '@/assets/js/index'export default {name: 'home',data () {return {phone:'',code:'',tiancode:'',msgphone:'',show:false,showcode:false,sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */auth_time: 0, /*倒计时 计数器*/showsub:true,hidesub:false}},created(){},methods:{change:function(e){this.phone = e.target.value},getma:function(){this.checkMobile(this.phone)if(this.show == false){//获取验证码http.post(`${api.api}/user/checkCode`,{tel:this.phone}).then((res) => {console.log(res)this.code = res.data.data}).catch((error) => {console.log(error);});}},codeed:function(e){this.tiancode = e.target.valuedocument.body.addEventListener('focusout', function () {window.scrollTo(0,0);})},qiehuan(){this.showsub = false,this.hidesub = true},sub:function (){if(localStorage.getItem('token')){//如果从主页进来，有用户信息，不调getUser//判断手机号是否被注册// console.log(this.phone)http.post(`${api.api}/user/checkTel`,{tel:this.phone,}).then((res) => {if(res.data.msg == 'success' && this.phone.length != 0){this.$messagebox('提示', '该手机号已被注册').then(action=>{this.$router.push({path:'/assistant',query:{}})})}else if(res.data.msg == 'fail' && this.code == this.tiancode &&                         this.phone.length != 0 && this.tiancode.length != 0){var id = JSON.parse(localStorage.getItem('token')).idconsole.log(id+'111')//绑定手机号手机号http.post(`${api.api}/user/updateTel`,{id:id,tel:this.phone,}).then((res) => {console.log(res)if(res.data.code == 0){this.qiehuan()this.$messagebox('提示', '绑定成功').then(action => {localStorage.setItem('phone',this.phone)this.$router.push({path:'/assistant',query:{}})})}}).catch((error) => {console.log(error);});}else if(res.data.msg == 'fail' && this.code != this.tiancode){this.showcode = truethis.$router.push({path:'/',query:{}})}}).catch((error) => {console.log(error);});}else{//如果从其他方式进入页面，没有用户信息,截取code，调取getUser//获取codevar code = this.GetQueryString('code')var pid = window.location.hash.split('=')[1]console.log(code)console.log(pid)http.post(`${api.api}/getUser`,{code:code,pid:pid}).then((res) => {var id = res.data.data.idif(res.data.code == 0){localStorage.setItem('token',JSON.stringify(res.data.data))//判断手机号是否被注册// console.log(this.phone)http.post(`${api.api}/user/checkTel`,{tel:this.phone}).then((res) => {console.log(this.phone.length)if(res.data.msg == 'success' && this.phone.length != 0){this.$messagebox('提示', '该手机号已被注册').then(action => {this.$router.push({path:'/assistant',query:{}})})}else if(res.data.msg == 'fail' && this.code == this.tiancode && this.phone.length != 0 && this.tiancode.length != 0){//绑定手机号手机号http.post(`${api.api}/user/updateTel`,{id:id,tel:this.phone,pid:pid}).then((res) => {if(res.data.code == 0){this.$messagebox('提示', '绑定成功').then(action => {localStorage.setItem('phone',this.phone)this.$router.push({path:'/assistant',query:{}})})}}).catch((error) => {console.log(error);});}else if(res.data.msg == 'fail' && this.code != this.tiancode){this.showcode = truethis.$router.push({path:'/',query:{}})}}).catch((error) => {console.log(error);});}}).catch((error) => {console.log(error);})}},//验证手机号,错误提示请填写正确手机号，并做60秒倒计时checkMobile(phone) {var reg_phone = /^[1][0-9][0-9]{9}$/;var regPhone = new RegExp(reg_phone);if (regPhone.test(phone)) {this.show = falseif(this.phone.length != 0){this.sendAuthCode = false;this.auth_time = 60;var auth_timetimer = setInterval(()=>{this.auth_time--;if(this.auth_time<=0){this.sendAuthCode = true;clearInterval(auth_timetimer);}}, 1000)}} else {this.show = true}},//截取地址栏参数GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.bind_box{width:100%;height:100%;position: absolute;left:0;top:0;background: rgb(244,244,244);display: flex;align-items: center;}.bindphone{width:90%;margin:auto;background:#fff;border-radius:10px;}.bind_title{width:100%;text-align: center;padding:50px 0 30px 0;box-sizing: border-box;font-size:30px;}.phone{width:90%;height:110px;line-height: 110px;margin:auto;border-bottom:1px solid #ccc;box-sizing: border-box;display: flex;flex-direction: row;}.phone_left{width:62%;height:100%;}.phone_left input{width:50%;height:90%}.phone_right{width:38%;height:100%;color:red;}.phone span{font-size:28px;}.phone input{outline:none;font-size: 25px;border:0;}.getcode{display: inline-block;width:100%;height:70px;line-height: 70px;text-align: center;border-radius:10px;background: rgb(0,135,236);color:#fff;}.getcoded{width:45%;}.sub_box{width:90%;margin:auto;padding:100px 0;box-sizing: border-box;}.sub{width:100%;height:80px;border-radius:50px;background: rgb(0,135,236);text-align: center;line-height: 80px;color:#fff;box-sizing: border-box;font-size:30px;}.codetishi{width:90%;height:110px;line-height: 110px;margin:auto;font-size:30px;color:red;}</style>

公众号基本的绑定手机号页面（截取code，手机号正则，验证码倒计时）相关推荐

微信公众号web端关闭本页面
应用前提:我们在微信公众号中开发了web页面后,可能需要点击本页面的某一个按钮就关闭该页面回到公众号客户端中方法:在JS中为该按钮绑定一个点击事件,在点击的时候就触发里面的函数,代码如下: //调用 ...
jqueyr开发实现公众号上传永久视频页面--微信开发素材管理4
微信素材管理中, 上传永久视频素材时, 需要把视频的标题和介绍都填写完整, 为了与上一节课的表单结合, 需要实现当选择为永久视频时, 表单中需要出现视频标题,介绍的输入框, 无没有选择时, 需要隐藏上 ...
微信公众号中如何关闭本页面
微信公众号中如何关闭本页面如何通过弹框关闭本页面如何通过弹框关闭本页面网上有各种关闭本页面的方法,比如有history.back(),this.close(),window.close() 在手 ...
【重磅】视频号与公众号可相互绑定了，自媒体圈沸腾了！
" 关键字:重磅消息微信" 正文:视频号与公众号互通了! 重磅!!!微信凌晨又放了个大招,视频号可绑定公众号了.绑定后,视频号就可以在公众号主页显示了.同时,视频号主页也可以 ...
微信公众号之智能绑定实现初始版本
微信公众号智能绑定实现步骤: 微信公众号智能绑定功能所有的步骤都是以模拟实现的. 1.模拟打开微信公众帐号登录页面: URL地址:https://mp.weixin.qq.com/ 2.读取自 ...
微信公众号自定义菜单栏绑定关联小程序
日期:2020/7/2 10:02 原文链接: http://note.youdao.com/noteshare?id=a5b5529c7bb1f385fa5453d2a338dbd1&sub ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
申请微信公众号，当前绑定的银行卡暂不支持实名验证...
2019独角兽企业重金招聘Python工程师标准>>> 申请改名微信公众号,让微信扫描二维码,扫描完了后,提示"当前绑定的银行卡暂不支持实名验证". 看了下说 ...
nodejs实现公众号服务URL绑定验证，nodejs实现公众号关注并回发送一条消息，以及关注之后的聊天自动回复消息
首先关注公众号的时候,公众号会发送一条 post 请求到 nodejs 服务器,这条消息是 xml 数据类型,这里就用到 xml 解析,demo 里用的是 fast-xml-parser@3.12.1 ...
java_微信公众号扫码绑定个人信息（微信公众号场景值二维码的使用）
看了一下网上关于公众号场景值二维码这方面的教程,基本上是微信官方开发文档的复制,没有具体实例.这里给出实例,并附加二维码url转文件流的方法. 思路: 1.后台传入个人信息保存,以个人信息的" ...

公众号基本的绑定手机号页面（截取code，手机号正则，验证码倒计时）

公众号基本的绑定手机号页面（截取code，手机号正则，验证码倒计时）相关推荐

最新文章

热门文章