SEEC-Portal-Front/pages/login.vue

<template>
  <div class="page-container login-container">
    <el-card class="login-card">
      <h2 class="login-card__title login-card__item">登 录</h2>
      <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item" autofocus></el-input>
      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="iCode" v-model="iCode" placeholder="请输入验证码" class="login-card__short-item"></el-input>

      <div class="login-card__canvas" @click="refreshCode" ref="canvas">
        <SIdentify :identifyCode="identifyCode" :contentWidth="canvasWidth"></SIdentify>
      </div>
      <div class="login-card__item">
        <el-checkbox v-model="rememberPassword"></el-checkbox>  记住密码
        <router-link to="/resetPassword" class="login-card__right-link">找回密码</router-link>
      </div>
      <el-button type="primary" class="login-card__item" :loading="loading" @click="login" round>登 录</el-button>
      <div class="login-card__bottom"><router-link to="/register" class="login-card__link">立即注册</router-link></div>
    </el-card>
    <div class="clear"></div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import SIdentify from "~/components/Identify";

  export default {
    name: "login",
    layout: "blank",
    data(){
      return{
        phone: '',
        password: '',
        identifyCodes: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9'],
        identifyCode: '',
        iCode: '',
        rememberPassword: false,
        loading: false,
        canvasWidth: 0,
      }
    },
    components: {
      SIdentify: SIdentify
    },
    mounted(){
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      this.canvasWidth = this.$refs.canvas.clientWidth;
      if(localStorage.phone){
        localStorage.phone = this.phone;
      }
      if(localStorage.password){
        localStorage.password = this.password;
      }
      if(localStorage.rememberPassword){
        localStorage.rememberPassword = this.rememberPassword;
      }
    },
    methods: {
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
        }
      },
      checkValid(){
        if(this.iCode.length === 0){
          this.$message({
            showClose: true,
            message: '未填写验证码',
            type: 'error'
          });
          this.$refs.iCode.focus();
          return false;
        }

        if(this.iCode !== this.identifyCode){
          this.$message({
            showClose: true,
            message: '验证码有误',
            type: 'error'
          });
          this.$refs.iCode.focus();
          this.refreshCode();
          return false;
        }

        if(this.phone.length < 11){
          if(this.phone.length === 0){
            this.$message({
              showClose: true,
              message: '手机号码不得为空',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '手机号码格式有误',
              type: 'error'
            });
          }
          this.$refs.phone.focus();
          this.refreshCode();
          return false;
        }

        if(this.password.length === 0){
          this.$message({
            showClose: true,
            message: '密码不得为空',
            type: 'error'
          });
          this.$refs.password.focus();
          this.refreshCode();
          return false;
        }

        return true;

      },
      login() {
        let isValid = this.checkValid();

        if(!isValid){
          return;
        }

        this.loading = true;
        this.$api.$post('/user/login', {
          phone: this.phone,
          password: this.password
        }).then((res) =>
          {
            if(res.code === 0){
              localStorage.phone=this.phone;
              if(this.rememberPassword){
                localStorage.password = this.password;
                localStorage.rememberPassword = this.rememberPassword;
              }else{
                localStorage.removeItem("password");
              }

              this.$store.commit("saveUser", res.data.user);
              this.$store.commit("saveToken", res.data.token);
              this.$message({
                showClose: true,
                message: "欢迎回来，" + res.data.name,
                type: 'success'
              });
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
              this.refreshCode();
            }

          }
        );
        this.loading = false;
      },
    }
  };
</script>

<style lang="scss" scoped>
  @import '~/assets/css/login.scss';
</style>