sso-ssr/components/mobile/loginMobile.vue

<template>
<div class="login">
  <div class="page-part">
    <mt-field auto-complete="off" placeholder="手机号/邮箱/账号ID" v-model="login.username" @blur.native.capture="codeCount"></mt-field>
  </div>
  <div class="page-part">
    <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
    <template>
      <p class="pwd"><a href="/reset/forgetPasswordValidationAccount" class="rgba">忘记密码？</a></p>
    </template>
  </div>
  <template v-if="showCheckCode">
    <div class="page-part">
      <mt-field placeholder="验证码" v-model="login.captcha">
        <img :src="imgSrc" height="45px" width="100px" @click="getCode">
      </mt-field>
    </div>
  </template>
  <div class="page-part">
    <mt-button size="large" type="primary" @click="checkLogin(true)">登录</mt-button>
  </div>
  <div class="login-btn">
    <p>还没有优软云账号？</p>
    <mt-button size="large" plain type="primary" @click="jump">立即注册</mt-button>
  </div>
  <mt-popup v-model="popupVisible" position="right" class="mint-popup" :modal="false">
    <ul style="height:100vh;overflow-y:auto">
      <li class="listitem itemgreen">选择您要登录的公司：</li>
      <li v-for="item in enterprise" class="listitem" @click="selectEnterprise(false, item.id)">{{ item.name }}</li>
    </ul>
  </mt-popup>
</div>
</template>

<script>
  export default {
    name: 'loginMobile',
    data () {
      return {
        loading: false,
        popupVisible: false,
        imgSrc: '',
        showCheckCode: false,
        login: {
          username: '',
          password: '',
          spaceUU: '',
          captcha: ''
        },
        appId: '',
        returnUrl: '',
        baseUrl: ''
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getUrl()
      })
    },
    computed: {
      enterprise () {
        return this.$store.state.login.chooseRegisterEnterprise.choose.data
      }
    },
    methods: {
      selectEnterprise (flag, type) {
        this.login.spaceUU = type
        this.toLogin(flag)
      },
      jump () {
        if (this.appId === 'mall') {
          window.location.href = `/register/personalRegistration?appId=${this.appId}&returnUrl=${this.returnUrl}`
        } else {
          window.location.href = `/register/enterpriseRegistration?appId=${this.appId}&returnUrl=${this.returnUrl}`
        }
      },
      getUrl () {
        this.appId = this.$store.state.option.appId
        this.returnUrl = this.$store.state.option.returnUrl
        this.baseUrl = this.$store.state.option.baseUrl
      },
      getCode () {
        this.imgSrc = '/sso/login/checkCode?timestamp=' + (new Date()).valueOf()
      },
      checkLogin (flag) {
        if (!this.login.username) {
          this.$toast({message: '请填写账号', iconClass: 'el-icon-warning'})
        } else if (!this.login.password) {
          this.$toast({message: '请填写密码', iconClass: 'el-icon-warning'})
        } else {
          this.toLogin(flag)
        }
      },
      codeCount () {
        this.$http.get(`/sso/login/getPwdErrorCount`, {params: {username: this.login.username}})
          .then(response => {
            if (response.data.success) {
              let count = response.data.content || ''
              if (count >= 3 && count < 5) {
                this.showCheckCode = true
                this.getCode()
                this.$toast({
                  message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
                  iconClass: 'el-icon-warning'
                })
              } else if (count === 5) {
                this.$toast({
                  message: '密码错误次数已达上限，今日无法登陆',
                  iconClass: 'el-icon-warning'
                })
              }
            } else {
              this.$toast({
                message: response.data.errMsg,
                iconClass: 'el-icon-warning'
              })
            }
          }).catch(err => {
            this.$toast({
              message: err.errMsg,
              iconClass: 'el-icon-warning'
            })
          })
      },
      toLogin (flag) {
        this.$indicator.open('登录中...')
        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', this.appId)
        param.append('returnUrl', this.returnUrl)
        param.append('baseUrl', this.baseUrl)
        param.append('spaceUU', this.login.spaceUU)
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        this.$http.post('/sso/login', param, config)
          .then(response => {
            this.$indicator.close()
            if (response.data.success) {
              // 弹框用户选择企业
              if (response.data.content.spaces) {
                this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
                this.popupVisible = 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] + '&')
                }
                for (let i in response.data.content.loginUrls) {
                  this.$jsonp(`${response.data.content.loginUrls[i]}`, {param: a.substr(0, a.length - 1)}, function (err) {
                    if (err) throw err
                  })
                }
                window.location.href = response.data.content.returnUrl || 'http://www.ubtob.com'
              }
            } else {
              this.login.password = ''
              this.$toast({
                message: response.data.errMsg,
                iconClass: 'el-icon-error'
              })
              let count = response.data.errorCount
              if (count >= 3 && count < 5) {
                this.showCheckCode = true
                this.getCode()
                let _this = this
                setTimeout(function () {
                  _this.getCode()
                }, 100)
                this.$toast({
                  message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
                  iconClass: 'el-icon-warning'
                })
              }
            }
          }).catch(err => {
            this.$toast({
              message: err.errMsg,
              iconClass: 'el-icon-error'
            })
          })
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
  ::-webkit-scrollbar {
    width: 0;
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  .pwd {
    font-size: .14rem;
    color: #a0a0a0;
    margin: .2rem auto;
    text-align: right;
  }
  .itemgreen{
    color:#2d8cf0;
  }
  .listitem {
    height: 1rem;
    line-height: 1rem;
    border-bottom: solid 1px #eee;
    text-align: center;
    &:first-child {
      border-top: solid 1px #eee;
    }
  }
  .mint-popup {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .mint-popup .mint-button {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }

  .mint-button .mint-button-text{
    margin: 0;
    font-weight: normal;
  }
.login-btn{
  margin-top:.9rem;
  border-top:1px solid #bfbfbf;
  text-align: center;
  padding-top:.3rem;
  p{
    color:#a1a1a1;
    font-size: .26rem;
    margin-bottom:.4rem;
  }
}
</style>