sso-ssr/components/login/Login.vue

<template>
  <div class="x-container">
    <!-- background slider -->
    <div class="x-banner-wrap">
      <div class="x-banner">
        <ul class="list-unstyled">
          <li>
            <a>
              <div class="inner">
                <div class="x-title x-text-0"></div>
                <div class="x-subtitle x-text-0"></div>
                <div class="x-btn-group">
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="x-login-wrap">
      <div class="x-login">
        <!-- user & pwd login wrap -->
        <div id="form-wrap" class="x-login-form">
          <div>
            <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
              <el-form-item prop="username">
                <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱/账号ID"></el-input>
                <i class="fa fa-user"></i>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="login.password" auto-complete="off" placeholder="密码"></el-input>
                <i class="fa fa-lock"></i>
              </el-form-item>
              <el-form-item prop="captcha" class="captcha" v-show="showCheckCode">
                <el-input type="text" v-model="login.captcha" auto-complete="off" class="code-input"></el-input>
                <img id="captchaImage" class="code-img" src="/sso/login/checkCode"/>
                <a class="code-click" @click="getCode">看不清换一张</a>
              </el-form-item>
              <el-form-item class="text-right">
                <a class="forget">忘记密码?</a>
              </el-form-item>
              <el-form-item>
                <a class="btn login" @click="isLogin" :disabled="isLoginDisabled">登录</a>
              </el-form-item>
            </el-form>
          </div>
          <div class="warn-text-area">
            为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
          </div>
          <div style="text-align: right;">
            <a href="sso/register_mall?appId=home&amp;returnURL=https%3A%2F%2Fwww.ubtob.com%2F">
              <i class="fa fa-arrow-circle-o-right"></i>免费注册</a>
          </div>
        </div>
        <!-- qrcode login wrap -->
        <div id="qrcode-wrap" class="x-login-qrcode">
          <div class="x-qrcode-help">
            <span>打开手机客户端，扫描下面的二维码</span>
          </div>
          <div class="x-qrcode-img">
            <img src="/images/all/qrcode.jpg">
          </div>
          <div class="x-qrcode-ex">
            <ul class="list-unstyled list-inline">
              <li><i class="iconfont icon-left icon-input"></i><span>免输入</span></li>
              <li><i class="iconfont icon-left icon-fast"></i><span>更快捷</span></li>
              <li><i class="iconfont icon-left icon-safe"></i><span>更安全</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      var validateUsername = (rule, value, callback) => {
        if (value === '') {
          this.checkUsername = false
          this.showCheckCode = false
        } else {
          if (this.login.username !== '') {
            //    获取密码输错次数
            this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
              .then(response => {
                if (response.data) {
                  this.showCheckCode = false
                  let getPasswordErrorCount = response.data.content || ''
                  if (getPasswordErrorCount >= 5) {
                    this.$message.error('密码错误次数已达上限，今日无法登陆')
                    this.isLoginDisabled = true
                    this.showCheckCode = false
                  } else if (getPasswordErrorCount < 3) {
                    this.isLoginDisabled = false
                    this.checkUsername = true
                    this.showCheckCode = false
                  } else if (getPasswordErrorCount >= 3 && getPasswordErrorCount < 5) {
                    if (getPasswordErrorCount === 3) {
                      this.$message.error('当前已输错密码3次，若达到5次今日将无法登陆')
                    }
                    this.isLoginDisabled = false
                    this.checkUsername = true
                    this.showCheckCode = true
                  } else {
                    this.checkUsername = false
                    this.showCheckCode = false
                  }
                }
              }, err => {
                this.$message.error(err)
                console.log(err)
              })
          }
          callback()
        }
      }
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          this.checkPassword = false
        } else {
          if (this.login.password !== '') {
            this.checkPassword = true
          }
          callback()
        }
      }
      return {
        login: {
          username: '',
          password: '',
          captcha: ''
        },
        checkUsername: false,
        checkPassword: false,
        showCheckCode: false,
        isLoginDisabled: false,
        rules2: {
          username: [
            {validator: validateUsername, trigger: 'blur'}
          ],
          password: [
            {validator: validatePassword, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
//    获取验证码
      getCode () {
        var imgSrc = document.getElementById('captchaImage')
        imgSrc.setAttribute('src', '/sso/login/checkCode?timestamp=' + (new Date()).valueOf())
      },
//      登录
      isLogin () {
        if (!this.checkUsername) {
          this.$message.error('请填写账号')
        } else if (!this.checkPassword) {
          this.$message.error('请填写密码')
        } else {
          var url = window.location.search
          var request = {}
          if (url.indexOf('?' !== -1)) {
            var str = url.substr(1)
            var strs = str.split('&')
            for (var i = 0; i < strs.length; i++) {
              request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
            }
          }
          var appId = request['appId']
          var returnUrl = request['returnUrl']
          var baseUrl = request['baseUrl']
          let param = new FormData()
          param.append('username', this.login.username)
          param.append('password', this.login.password)
          param.append('captcha', this.login.captcha)
          param.append('appId', appId)
          param.append('returnUrl', returnUrl)
          param.append('baseUrl', baseUrl)
          param.append('spaceUU', '')
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/login', param, config)
            .then(response => {
              if (response.data.success) {
                console.log(response.data)
              } else {
                this.$message.error(response.data)
                var count = response.data.errorCount
                if (count < 3) {
                  this.showCheckCode = false
                  this.isLoginDisabled = false
                } else if (count >= 5) {
                  this.$message.error('密码错误次数已达上限，今日无法登陆')
                  this.isLoginDisabled = true
                  this.showCheckCode = false
                } else if (count >= 3 && count < 5) {
                  this.getCode()
                  if (count === 3) {
                    this.$message.error('当前已输错密码3次，若达到5次今日将无法登陆')
                  }
                  this.showCheckCode = true
                  this.isLoginDisabled = false
                }
                return Promise.reject(response.data)
              }
            }).catch(err => {
              console.log(err)
              this.$message.error(err.errMsg)
            })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .x-container{
    position: relative;
    height: 475px;
    .x-banner-wrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 475px;
      .x-banner {
        position: relative;
        overflow: auto;
        height: 475px;
        text-align: center;
        li{
          width: 100%;
          height: 475px;
          background: url(/images/all/banner.jpg) center center / auto 100% no-repeat rgb(202, 202, 214);
        }
      }
    }
    .x-login-wrap{
      position: absolute;
      top: 10px;
      right: 50%;
      margin-right: -495px;
      height: 475px;
      z-index: 5;
      .x-login {
        position: relative;
        top: 40px;
        width: 346px;
        background: #fff;
        overflow: visible;
        z-index: 4;
        .x-login-form, .x-login-qrcode {
          padding: 20px;
          .btn{
            background: #5078cb;
            color: #fff;
            font-weight: 700;
            letter-spacing: 4px;
            border-radius: 0;
          }
          .x-has-feedback-right {
            float: right;
            display: inline-block;
            a{
              color: #5078cb;
            }
          }
          .x-has-feedback-left {
            position: relative;
            .x-input {
              padding-left: 30px;
              line-height: 18px;
              color: #555;
              border-color: #ccc;
              border-radius: 0;
              box-shadow: none;
            }
            i.fa{
              position: absolute;
              top: 2px;
              left: 0;
              z-index: 2;
              display: block;
              width: 30px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              pointer-events: none;
              color: #999;
              font-size: 18px;
            }
          }
          i.fa-keyboard-o{
            position: absolute;
            right: 10px;
            top: 10px;
          }
          i.fa-arrow-circle-o-right{
            margin-right: 5px;
            font-size: 14px;
            color: #5078cb;
          }
          .warn-text-area{
            margin-top: 5px;
            font-size: 13px;
            color: #000;
          }
        }
        .x-login-qrcode{
          display: none;
        }
      }
    }
  }
</style>