vue---H5--获取短信验证码及完整登陆流程

最新推荐文章于 2024-04-22 18:05:14 发布

小只笨笨狗～

最新推荐文章于 2024-04-22 18:05:14 发布

阅读量1.8k

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_51196135/article/details/125999095

版权

需求：填写手机号--手机号码验证码--验证成功-获取验证码-----失败弹窗提示！--- 验证码位数校验 --- 登陆校验（输入框不为空&&校验通过）

1、HTML

<template>
  <div style="padding:40px 30px">
    <div class="situLogo">
      <img src="@/assets/login/situlogo.png" alt="">
    </div>
    <div class="FormSubmit">
       <van-form ref="form" @submit="onSubmit">
                <van-field 
                class="iconfont icon-shoujihao1"
                    v-model="tel"
                    type="tel"
                    clearable
                    name="tel"
                    :rules="userTel"
                    placeholder="请输入手机号" />
                <van-field
                    v-model="sms"
                    center
                    ref="yanzhengCode"
                    :rules="userMsg"
                    clearable
                    class="iconfont icon-yanzhengyanzhengma"
                    placeholder="请输入手机验证码"
                    type="digit"
                    >
                    <template #button>
                        <van-button
                        type="primary"
                        size="small"
                        class="getCode"
                        @click="sendCode"
                        :disabled="ifdisabled"
                        native-type="button">
                        {{codeMsg}}
                        </van-button>
                    </template>
                </van-field>
                <div style="marginTop:119px">
                    <van-button
                    round
                    block
                    type="primary"
                    native-type="submit"
                    ><span style="margin: 0.4267rem;fontSize:20px">登&nbsp;录</span>
                    </van-button>
                </div>
    </van-form>
    </div>
   <div class="footCar">
    <img src="@/assets/login/carlogo.png" alt="">
   </div>
  </div>
</template>

2、JS（需要后端接口：1⃣️获取验证码：参为输入电话号码 2⃣️登陆按钮：参为电话号码&&验证码后端校验返回result）

<script>
import { Form, Field, Button, Toast, CellGroup,} from 'vant'
import {setSms} from '@/api/login'  
import { mapActions  } from 'vuex'
export default {
  components: {
    [Button.name]: Button,
    [Form.name]:Form,
    [Field.name]:Field,
    [Toast.name]:Toast,
    [CellGroup.name]:CellGroup,
    [Toast.name]:Toast
  },
  data() {
    return {
      tel: "",
      sms: "",
      ifdisabled: false,
      codeNum: 60,
      codeMsg: "获取短信验证码",
      count:'',
      userTel: [
        {
          required: true,
          message: "请输入手机号",
          trigger: "onBlur"
        },
        {
          validator: value => {
            return /^1[23456789]\d{9}$/.test(value);
          },
          message: "手机号格式错误，请检查！"
        }
      ],
      userMsg:[{
          required: true,
          message: "请输入验证码",
          trigger: "onBlur"
        },  {
          validator: value => {
            return /^\d{6}$/.test(value);
          },
          message: "验证码格式错误，请检查！"
        }]
    };
  },
  methods: {
   ...mapActions(['userLogin']),
    // 获取短信验证码
   async sendCode() {
      // 验证手机号格式是否正确
      if(!this.tel){
        Toast('请输入手机号！')
        return
      }
      if (!this.userTel[1].validator(this.tel)) return;
      //发送请求
    await setSms({phoneNo:this.tel}).then(res=>{
  if(res.code===10000){
     Toast.success('验证码已发送！');
       // 禁用按钮
      this.ifdisabled = true;
      // 倒计时
      this.count=this.codeNum
      let timer=setInterval(()=>{
        if(this.count>1 &&this.count<=this.codeNum){
          this.count--
          this.codeMsg=`重新发送(${this.count})`
        }else{
      // 判断什么时候停止定时器
          clearInterval(timer)
          this.codeMsg='获取短信验证码'
          this.ifdisabled=false
          this.count=''
        }
      },1000)
  }
  else{
    Toast.fail(res.msg);
  }
})
    },
    async onSubmit(){
      //登陆按钮
  // eslint-disable-next-line no-undef
    await this.userLogin({phoneNo:this.tel,validCode:this.sms}).then(()=>{
 this.$router.push( '/Sceneselection')
    })
    }
  }
    }
</script>

3、Vuex

  actions: {
    userLogin({ commit }, userInfo) {
      const { phoneNo, validCode } = userInfo
      return new Promise((resolve, reject) => {
        login({phoneNo, validCode}).then(res=> {
          if(res.code === 10000) {
            commit('SET_TOKEN', res.result.token)
            setToken(res.result.token)
            resolve()
          } else {
            Toast(res.msg)
            reject(res.msg)
          }
        })
      })
    },
}

4、CSS

<style>
.van-field__control{
  font-size: 16px;
  margin-left: 15px;
}
.situLogo{
  margin:40px auto;
  width:218px;
  height:108px;
}
.getCode{
  border-radius: 10px;
}
.FormSubmit{
  margin-top: 55px;
}
.van-button{
  background: #3A6DD4;
}
.footCar{
  position: fixed;
  bottom: 0px;
  right: 0px;
}
</style>