sso-ssr/components/login/Login.vue

<template>
  <div>
    <!--头部-->
    <nav class="x-navbar">
      <div class="container">
        <div class="navbar-header">
          <input type="hidden" name="iconUrl" value="/static/img/icon_mall_index.png">
          <a class="navbar-brand" id="navbar-brand">
            欢迎登录
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-right">
          <a href="http://www.ubtob.com">优软云首页</a> <a href="http://uas.ubtob.com/serve#/">帮助</a>
        </div>
      </div>
    </nav>
    <div class="x-container">
      <!-- background slider -->
      <div class="x-banner-wrap">
        <div class="x-banner">
          <ul class="list-unstyled">
            <li id="bgStyle">
              <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="new-password" placeholder="手机号/邮箱/账号ID"></el-input>
                  <i class="fa fa-user"></i>
                </el-form-item>
                <el-form-item prop="password">
                  <input autocomplete="new-password"
                         type="password" style="display: none;width:0;height:0;">
                  <el-input type="password"
                            v-model="login.password"
                            auto-complete="new-password"
                            placeholder="密码"
                            @keyup.enter.native="isLogin(true)"></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"
                            @keyup.enter.native="isLogin(true)"></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-position">
                  <div class="page-part" v-if="checkedRemember">
                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                  </div>
                  <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
                </el-form-item>
                <el-form-item>
                  <a class="btn login"
                     @click="isLogin(true)"
                     :disabled="isLoginDisabled">登录</a>
                </el-form-item>
              </el-form>
            </div>
            <div class="warn-text-area">
              为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
            </div>
            <div class="link-go">
              <a @click="changeManage" class="first">更换管理员</a>
              <a id="register" @click="goRegister" class="second">
                <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>
        <el-dialog class="dialog"
                   :visible.sync="dialogVisible"
                   size="tiny">
          <div class="x-floating x-list" v-show="dialogVisible">
            <div class="x-list-header">您要登录的公司是：</div>
            <div class="x-list-content">
              <ul class="list-unstyled" >
                <template v-for="space in this.enterprise">
                  <li v-text="space.name" @click="chooseOneEnterprise(false, space.id)">华商龙科技有限公司</li>
                </template>
              </ul>
            </div>
          </div>
        </el-dialog>
      </div>
      <loading v-show="isShowLoading"/>
    </div>
  </div>
</template>

<script>
  import Loading from '~components/common/loading/Loading.vue'
  export default {
    name: 'login',
    components: {
      Loading
    },
    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.success) {
                  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次今日将无法登陆')
                    }
                    if (getPasswordErrorCount === 4) {
                      this.$message.error('当前已输错密码4次，若达到5次今日将无法登陆')
                    }
                    this.isLoginDisabled = false
                    this.checkUsername = true
                    this.showCheckCode = true
                  } else {
                    this.checkUsername = false
                    this.showCheckCode = false
                  }
                } else {
                  return Promise.reject(response.data)
                }
              }).catch(err => {
                this.isShowLoading = false
                console.log(err)
                // this.$message.error(err.errMsg)
              })
          }
          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: '',
          spaceUU: ''
        },
        checked: false,
        checkedRemember: false,
        isShowLoading: false,
        checkUsername: false,
        checkPassword: false,
        showCheckCode: false,
        isLoginDisabled: false,
        dialogVisible: false,
        queryLink: '',
        rules2: {
          username: [
            {validator: validateUsername, trigger: 'blur'}
          ],
          password: [
            {validator: validatePassword, trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getUrl()
      })
      this.$nextTick(() => {
        this.getLoginStyle()
      })
      this.$nextTick(() => {
        if (this.appId === 'mall' || this.appId === 'home') {
          this.getCookie()
        }
      })
      this.$nextTick(() => {
        this.validUserName()
      })
    },
    computed: {
      enterprise () {
        let chooseEnterprise = this.$store.state.login.chooseRegisterEnterprise.choose.data
        return chooseEnterprise
      }
      // loginUrl () {
      //   console.log(this.$store.state.login.loginStyle.loginStyle.data)
      //   return this.$store.state.login.loginStyle.loginStyle.data
      // }
    },
    methods: {
      // 获取用户错误次数
      validUserName () {
        if (this.login.username) {
          //    获取密码输错次数
          this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
            .then(response => {
              if (response.data.success) {
                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次今日将无法登陆')
                  }
                  if (getPasswordErrorCount === 4) {
                    this.$message.error('当前已输错密码4次，若达到5次今日将无法登陆')
                  }
                  this.isLoginDisabled = false
                  this.checkUsername = true
                  this.showCheckCode = true
                } else {
                  this.checkUsername = false
                  this.showCheckCode = false
                }
              } else {
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.$message.error(err.errMsg)
            })
        }
      },
      // 更换管理员
      changeManage () {
        window.location.href = `appeals/changeManagerAppeal${this.$store.state.option.fullPath}`
      },
//      获取url参数
      getUrl () {
        var url = window.location.search
        var request = {}
        if (url.indexOf('?' !== -1)) {
          var str = url.substr(1)
          var strs = str.split('&')
          this.queryLink = str
          for (var i = 0; i < strs.length; i++) {
            request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
          }
        }
        this.appId = request['appId'] || ''
        this.returnUrl = request['returnURL'] || ''
        this.baseUrl = request['baseUrl'] || ''
        if (this.appId === 'home') {
          this.checkedRemember = true
        }
      },
      // 获取后台返回的数据
      getLoginStyle () {
        this.$http.get(`/sso/login/page/style`, {params: {appId: this.appId}})
          .then(response => {
            if (response.data.success) {
              let logoUrlStyle = response.data.content.logoUrl
              let bgUrl = response.data.content.bgUrl
              let bgColor = response.data.content.bgColor
              let bgLink = response.data.content.bgLink
              let title = response.data.content.title || '欢迎登录'
              let appId = response.data.content.appId
              let nb = document.getElementById('navbar-brand')
              nb.style.backgroundImage = 'url(' + logoUrlStyle + ')'
              nb.innerHTML = title
              if (appId === 'mall') {
                this.checkedRemember = true
                nb.href = 'https://www.usoftmall.com/'
              }
              let bg = document.getElementById('bgStyle')
              bg.style.backgroundImage = 'url(' + bgUrl + ')'
              bg.style.backgroundColor = bgColor
              if (bgLink) {
                bg.onclick = function () {
                  window.location.href = bgLink
                }
              }
            } else {
              return Promise.reject(response.data)
            }
          }).catch(err => {
            // console.log(err)
            this.$message.error(err.errMsg)
          })
      },
//      忘记密码
      goForgetPassword () {
        let url = `/reset/forgetPasswordValidationAccount?${this.queryLink}`
        document.getElementById('forget').href = url
      },
//      去注册
      goRegister () {
        if (this.appId === 'mall') {
          var registerurl = `/register/personalRegistration?${this.queryLink}`
        } else {
          registerurl = `/register/enterpriseRegistration?${this.queryLink}`
        }
        document.getElementById('register').href = registerurl
      },
  //    获取验证码
      getCode () {
        var imgSrc = document.getElementById('captchaImage')
        imgSrc.setAttribute('src', '/sso/login/checkCode?timestamp=' + (new Date()).valueOf())
      },
//      登录
      isLogin (flag) {
        this.isShowLoading = true
        if (!this.login.username) {
          this.isShowLoading = false
          this.$message.error('请填写账号')
        } else if (!this.login.password) {
          this.isShowLoading = false
          this.$message.error('请填写密码')
        } else {
          if (this.appId === 'mall' || this.appId === 'home') {
            if (this.checked) {
              this.setCookie(this.login.username, this.login.password, 7)
            } else {
              this.clearCookie()
            }
          }
          let param = new FormData()
          param.append('username', this.login.username)
          param.append('password', this.login.password)
          param.append('captcha', this.login.captcha)
          param.append('spaceUU', this.login.spaceUU)
          param.append('appId', this.appId)
          param.append('returnUrl', this.returnUrl)
          param.append('baseUrl', this.baseUrl)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/login', param, config)
            .then(response => {
              this.isShowLoading = false
              if (response.data.success) {
                if (response.data.content.spaces) {
//                   弹框让用户选择企业
                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
                  this.dialogVisible = flag
                } else if (response.data.content.loginUrls) {
//                  遍历登录url循环让各应用登录(需要跨域)
                  let param = response.data.content.data
                  let a = ''
                  for (let n in param) {
                    a += (n + '=' + param[n] + '&')
                  }
                  this.isShowLoading = true
                  if (response.data.content.currentUrl) {
                    this.$jsonp(`${response.data.content.currentUrl}?${a.substr(0, a.length - 1)}`, {
                      name: 'successCallback',
                      timeout: 3000
                    }, (err, data) => {
                      if (err) {
                        this.$message.error('登录超时，请重试')
                        this.isShowLoading = false
                        throw err
                      } else {
                        this.loginOther(response, a)
                      }
                    })
                  } else {
                    this.loginOther(response, a, 3000)
                  }
                }
              } 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 => {
              this.isShowLoading = false
              let _this = this
              setTimeout(function () {
                _this.getCode()
              }, 100)
              this.$message.error(err.errMsg)
            })
        }
      },
      chooseOneEnterprise (flag, spaceUU) {
        this.login.spaceUU = spaceUU
        this.dialogVisible = false
        this.isLogin(flag)
      },
      getJsonp: function (url, timeout = 500) {
        return new Promise((resolve, reject) => {
          this.$jsonp(url, {
            name: 'successCallback',
            timeout: timeout
          }, function (err, data) {
            if (err) {
              reject(err)
              throw err
            } else {
              resolve(data)
            }
          })
        })
      },
      crossAfter (url) {
        try {
          window.location.href = url
        } catch (err) {
          console.log(err)
        }
      },
      loginOther (response, a, timeout) {
        const crossAfter = this.crossAfter
        let promises = []
        for (let i in response.data.content.loginUrls) {
          promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?` + a.substr(0, a.length - 1)))
        }
        Promise.all(promises).then(() => {
          crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
        }).catch(() => {
          crossAfter(response.data.content.returnUrl || 'http://www.ubtob.com', timeout)
        })
      },
      // 设置cookie
      setCookie (cName, cPwd, exdays) {
        let exdate = new Date()
        // let len = cPwd.substring(0)
        // cPwd = cPwd.replace(len, '***')
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
        window.document.cookie = 'userName' + '=' + cName + ';path=/;expires=' + exdate.toGMTString()
        window.document.cookie = 'userPwd' + '=' + cPwd + ';path=/;expires=' + exdate.toGMTString()
      },
      // 读取cookies
      getCookie () {
        if (document.cookie.length > 0) {
          let arr = document.cookie.split(';')
          for (var i = 0; i < arr.length; i++) {
            let arr2 = arr[i].split('=')
            if (arr2[0].trim() === 'userName') {
              this.login.username = arr2[1]
              // console.log('get', this.login.username)
            }
            if (arr2[0].trim() === 'userPwd') {
              this.login.password = arr2[1]
              // console.log('get', this.login.password)
            }
            if (this.login.username && this.login.username) {
              this.checked = true
            }
          }
        }
      },
      // 清除cookie
      clearCookie () {
        this.setCookie('', '', -1)
      }
    }
  }
</script>
<style lang="scss" scoped type="text/scss">
  @import '~assets/scss/mixins';
  @import '~assets/scss/variables';
  .x-navbar{
    height: 80px;
    line-height: 80px;
    margin: 0;
  .container{
    position: relative;
    width: 990px!important;
  a.navbar-brand{
    padding: 0 0 0 85px;
    height: inherit;
    line-height: inherit;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 24px;
    font-weight: 400;
    color: #888;
    background: url(/images/all/icon_brand.png) left center no-repeat;
  }
  .collapse{
  a{
    padding-left: 12px;
    margin-right: 10px;
    color: #666;
    outline: 0;
    border-left: 1px solid #ddd;
  &:first-child{
     border-width: 0;
   }
  }
  }
  }
  }
  .x-container{
    position: relative;
    height: 475px;
    div.link-go {
      text-align: right;
      margin-top: 7px;
      a{
        color: #2d8cf0;
        background: 0 0;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
        transition: color .2s ease;
      }
      a.first{
        float: left;
        margin-top: 3px;
        font-size: 12px;
      }
    }
    /*登录弹出框*/
    .x-floating {
      position: fixed;
      top: 80px;
      left: 50%;
      z-index: 100000;
      opacity: 1;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
    }
    .x-list {
      width: 60%;
      height:420px;
      margin-left: -30%;
      background: #fff;
      border-top: 1px solid #e7e7e7;
      cursor: pointer;
      .x-list-header {
        padding: 10px 20px;
        background: #e0e0e0;
        height: 42px;
        line-height: 21px;
        font-size: 14px;
        font-weight: 700;
        color: #505050;
      }
      .x-list-content{
        overflow-y: auto;
        height:375px;
        ul{
          margin-bottom: 0;
          li{
            display:inline-block;
            padding: 10px 20px;
            width: 33%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 42px;
            line-height: 21px;
            font-size: 12px;
            color: #505050;
            border-bottom: 1px solid #e7e7e7;
            &:hover{
              background: #e7e7e7;
            }
          }
        }
      }
      .x-list .x-list-header, .x-list li {
        padding: 10px 20px;
        border-bottom: 1px solid #e7e7e7;
      }
    }
    .x-floating.in {
      top: 80px;
      opacity: 1;
    }
    .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;
          }
          .text-position {
            overflow: hidden;
            .page-part {
              float: left;
              margin-bottom: 0;
              .el-checkbox {
                margin: 0;
                span.el-checkbox__inner{
                  width: 14px;
                  height: 14px;
                }
              }
            }
            .forget {
              float: right;
              color: #2d8cf0;
            }
          }
        }
        .x-login-qrcode{
          display: none;
        }
      }
    }
  }
</style>