<template><div class="login container"><Header></Header><section><!-- <form action=""> --><div class="login-tel"><input v-model="userTel" placeholder="請輸入手機號" pattern="[0-9]*" type="text"/></div><div class="login-code"><input v-model="userCode" placeholder="請輸入短信驗證碼" pattern="[0-9]*" type="text"/><button @click="sendCode" :disabled="disabled">{{codeMsg}}</button></div><div class="login-btn" @click="login">登錄</div><!-- </form> --><div class="tab"> <span @click="goUserLogin">密碼登錄</span><span @click="goRegister">快速注冊</span></div></section><Tabbar></Tabbar></div> </template><script> import Tabbar from "@/components/common/Tabbar.vue"; import Header from "@/views/login/Header.vue"; import http from "@/common/api/request.js" import { Toast } from 'mint-ui'; import {mapMutations} from "vuex"export default {components: { Tabbar, Header },name: "Login",data() {return {disabled:false,userTel:"",//用戶輸入的手機號codeNum:6,//定時器的倒計時秒數codeMsg:'獲取短信驗證碼',code:"",//短信驗證碼userCode:"",//用戶輸入的短信驗證碼// 驗證規則rules:{// 手機號驗證userTel:{rule:/^1[23456789]\d{9}$/,msg:'手機號不能為空,并且是11位數字'},}};},methods: {...mapMutations(['USER_LOGIN']),//這里是用到了vuex！！！！！！！！！！ // 點擊快速注冊goRegister(){this.$router.push("/register")},// 點擊密碼登錄goUserLogin(){this.$router.push("/userLogin")},// 點擊獲取短信驗證碼按鈕sendCode(){// 前端驗證if(!this.validate("userTel")) return//如果沒有通過驗證。直接return掉，如果通過驗證就進行下面的操作//請求短信驗證碼接口http.$axios({ url:"/api/code",method:"POST",data:{ phone:this.userTel //前端給后端傳的數據}}).then(res=>{console.log("這里是Login的res(點擊獲取短信驗證碼)",res)//res.data就是手機驗證碼if(res.success){this.code=res.data}})// 禁用按鈕this.disabled=true// 倒計時let timer=setInterval(() => { //6秒沒有走完的時候，顯示’重新發送‘this.codeNum--this.codeMsg=`重新發送${this.codeNum}`}, 1000);// 判斷什么時候停止定時器setTimeout(() => {clearInterval(timer)this.codeNum=6this.disabled=falsethis.codeMsg="獲取短信驗證碼"}, 6000);},validate(key){// ?????????????????????? ?????????????let bool=true //test() 方法是正則表達式的一個方法，用于檢測一個字符串是否匹配某個模式.語法：regexp.test(str)?if(!this.rules[key].rule.test(this[key])){ //this[key]就是用戶輸入的值 key就是傳遞過來的userTel// 提示信息Toast(this.rules[key].msg)bool=false//這里用bool做變量來定義true和false,直接return true會報錯return false //沒有通過正則驗證，就返回flase}else{return bool} },// 點擊登錄按鈕login(){if(this.code==this.userCode){// 證明用戶輸入的短信驗證碼是正確的// 發送請求http.$axios({ url:"/api/addUser",method:"POST",data:{ phone:this.userTel //前端給后端傳的數據}}).then(res=>{if(!res.success) returnconsole.log("這里是Login的res(點擊登錄按鈕)",res);this.USER_LOGIN(res.data)//！！！！！！！！！！不用commit了，直接調用// 跳轉到我的頁面中this.$router.push("/my")})}}}, }; </script><style lang="scss" scoped> section{display: flex;flex-direction: column;background-color: #f5f5f5;// justify-content: center;align-items: center;font-size: 0.39rem;div{width: 8.93rem;height: 1.173rem;margin: 0.26rem 0;font-size: 0.3733rem;}.login-tel{margin-top: 0.8rem;input{width: 8.93rem;}}input{line-height: 1.173rem;background-color: #FFFFFF;border: 1px solid #ccc;border-radius: 6px;box-sizing: border-box;//加了這個屬性，padding和border的值就不會在影響元素的寬高，相當于把padding和border的值都算在content里padding: 0 0.2667rem;}.login-code{display: flex;input{flex: 1;}button{line-height: 1.173rem;color: #fff;background-color: #b0352f;border: 0;border-radius: 0.16rem;padding: 0 8px;}}.login-btn{background-color: #b0352f;line-height: 44px;border-radius: 6px;text-align: center;color: #fff;font-size: 18px;}.tab{font-size: 0.4rem;display: flex;justify-content: space-between;} } </style>

?

總結

以上是生活随笔為你收集整理的茶多多项目【验证码登录页面】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。