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="passwd"><a @click="forgetPwd" 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.popupVisible = flag
        this.toLogin(flag)
      },
      // 忘记密码
      forgetPwd () {
        window.location.href = `/reset/forgetPasswordValidationAccount${this.$store.state.option.fullPath}`
      },
      jump () {
        if (this.appId === 'mall') {
          window.location.href = `/register/personalRegistration${this.$store.state.option.fullPath}`
        } else {
          window.location.href = `/register/enterpriseRegistration${this.$store.state.option.fullPath}`
        }
      },
      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 + '=' + encodeURIComponent(param[n]) + '&')
                }
                let params = a.substr(0, a.length - 1)
                this.$indicator.open('跳转中...')
                if (response.data.content.currentUrl) {
                  this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                    name: 'successCallback',
                    timeout: 5000
                  }, (err, data) => {
                    if (err) {
                      this.$indicator.close()
                      this.$toast({
                        message: '登录超时，请重试',
                        iconClass: 'el-icon-error'
                      })
                      this.login.spaceUU = ''
                      throw err
                    } else {
                      this.loginOther(response, params)
                    }
                  })
                } else {
                  this.loginOther(response, params, 3000)
                }
              }
            } 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'
            })
          })
      },
      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}`))
        }
        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)
        })
      }
    }
  }
</script>