茶多多项目【验证码登录页面】

<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=6
        this.disabled=false
        this.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) return
        console.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>