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>
    <router-link to="/"><img src="/image/seec-logo--horizontal.png" class="login-card__logo"/></router-link>
  </div>
</template>

<script>
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) {
      this.phone = localStorage.phone
    }
    if (localStorage.password) {
      this.password = localStorage.password
    }
    if (localStorage.rememberPassword) {
      this.rememberPassword = true
    }
  },
  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 () {
      const 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')
            localStorage.removeItem('rememberPassword')
          }
          console.log(res.data)
          this.$message({
            showClose: true,
            message: '欢迎回来，' + res.data.name,
            type: 'success'
          })
          this.$store.commit('saveToken', res.data.token)
          this.$store.commit('saveUser', res.data.user)
          if (!res.data.redirectUri) {
            this.$router.push('/')
          } else {
            window.location.href = res.data.redirectUri + '?id_token=' + res.data.token
          }
        } 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>