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="">
          <a class="navbar-brand" :href="!loginStyle || (loginStyle && (JSON.parse(loginStyle.returnHomeUrl).url)) || ''">
            <img :src="loginStyle.logoUrl" alt="">
            <span>{{loginStyle.title || ''}}</span>
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-right">
          <a :href="loginStyle ? JSON.parse(loginStyle.returnHomeUrl).url : ''">{{loginStyle ? JSON.parse(loginStyle.returnHomeUrl).name : ''}}</a>
          <a href="http://uas.ubtob.com/serve#/" v-if="!loginStyle || (loginStyle && (JSON.parse(loginStyle.returnHomeUrl).needHelp))">帮助</a>
        </div>
        <div class="login-tip">
          为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
        </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" v-bind:style="{ background: `url(${loginStyle.bgUrl}) center center/auto 100% no-repeat ${loginStyle.bgColor}` }">
              <a :href="loginStyle.bgLink" v-if="loginStyle.bgLink">
                <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>
              <a v-else style="cursor: default">
                <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="login-tab" v-show="loginWay != 2">
          <span @click="toggleTab(0)" v-bind:class="{'active': loginWay === 0 }">密码登录</span>
          <span @click="toggleTab(3)" v-bind:class="{'active': loginWay === 3 }">短信登录</span>
          <span @click="ShowWechatCoe(1)" v-bind:class="{'active': loginWay === 1 }" id="weChatBtn">微信登录</span>
         </div>
        <!--账号密码登录-->
        <div class="x-login" v-show="loginWay === 0">
          <div id="form-wrap" class="x-login-form">
            <el-form :model="login" :rules="rules2" ref="login" class="demo-ruleForm login-form">
              <div style="opacity: 0; height: 0; overflow: hidden">
                <input type="text" name="hideUserName" id="hideUserName">
                <input type="password" name="hidePassword" id="hidePassword">
              </div>
              <el-form-item prop="username">
                <el-input type="text" v-model="login.username" auto-complete="off" placeholder="手机号/邮箱"></el-input>
                <i class="fa fa-user"></i>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password"
                          v-model="login.password"
                          placeholder="密码"
                          auto-complete="off"
                          @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>
                <a class="btn login"
                   @click="isLogin(true)"
                   :disabled="isLoginDisabled">登录</a>
              </el-form-item>
              <el-form-item class="text-position">
                <div class="page-part" v-if="loginStyle.needRememberPwd">
                  <el-checkbox v-model="checked">30天免登录</el-checkbox>
                </div>
              </el-form-item>
            </el-form>
            <div class="link-go">
              <a @click="changeManage" class="first">更换管理员</a>
              <span class="line"></span>
              <a class="forget" id='forget' @click="goForgetPassword">忘记密码?</a>
              <span class="line"></span>
              <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
            </div>
          </div>
        </div>
        <!--短信快捷登录-->
        <div class="x-login" v-show="loginWay === 3">
          <div id="form-wrap1" class="x-login-form">
            <el-form :model="fastLogin" :rules="rules3" ref="fastLogin" class="demo-ruleForm login-form loginForm">
              <el-form-item prop="mobile">
                <el-input type="text" v-model="fastLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="code" class="fastMsg">
                <el-input type="text" v-model="fastLogin.code"
                          auto-complete="off" placeholder="验证码"></el-input>
                <el-button type="primary" class="fastCode"
                           v-show="sendLoginCode"
                           @click="getCheckCode">获取验证码</el-button>
                <el-button type="primary"  v-show="!sendLoginCode" class="fastCode code-send">已发送({{login_time}}s)</el-button>
              </el-form-item>
              <el-form-item>
                <a class="btn login"
                   @click="fastToLogin(true)">登录</a>
              </el-form-item>
            </el-form>
            <div class="link-go">
              <a @click="changeManage" class="first">更换管理员</a>
              <span class="line"></span>
              <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
            </div>
          </div>
        </div>
        <!--微信扫码登录-->
        <div class="x-login scan-login" v-show="loginWay === 1">
          <div class="x-login-form">
            <div class="scan-body">
              <div class="img">
                <div id="login_container"></div>
              </div>
              <div class="content">
                <img src="/images/logo/saosao.png" alt="">
                <div>
                  <span>打开 <b>微信</b></span>
                  <div>扫一扫登录</div>
                </div>
              </div>
            </div>
            <div class="link-go" style="padding: 0 18px 12px 0; margin-top: 0;">
              <a @click="changeManage" class="first">更换管理员</a>
              <span class="line"></span>
              <a :href="`/register/enterpriseRegistration${this.queryLink ? '?' + this.queryLink : ''}`" class="second">免费注册</a>
            </div>
          </div>
        </div>
        <!--绑定账号-->
        <div class="x-login bind-login" v-show="loginWay === 2">
          <div class="x-login-form">
            <div class="bind-header">
              <span>绑定已有账号</span>
              <span @click="loginWay = 0">返回</span>
            </div>
            <div class="bind-body">
              <div class="img"><img :src="wxImg" alt=""/><div>{{wxName}}</div></div>
              <div>
                <el-form :model="bindAccount" :rules="rules4" ref="bindAccount" class="demo-ruleForm login-form">
                  <el-form-item prop="username" style="margin: 0 auto 10px !important;">
                    <el-input type="text"
                              v-model="bindAccount.username"
                              auto-complete="off"
                              placeholder="请输入用户名、手机号或邮箱"></el-input>
                  </el-form-item>
                  <el-form-item prop="password" style="margin: 0 auto 10px !important;">
                    <el-input type="password"
                              v-model="bindAccount.password"
                              auto-complete="new-password"
                              placeholder="密码"
                              @keyup.enter.native="wxBind"></el-input>
                  </el-form-item>
                  <el-form-item  style="margin: 0 auto!important;">
                    <a class="btn login"
                       @click="wxBind">确定绑定已有账号</a>
                  </el-form-item>
                </el-form>
              </div>
              <div class="set">还没有优软账号，直接 <a :href="`/register/enterpriseRegistration${this.$store.state.option.fullPath}&tk=${wxToken}`">创建新账号</a></div>
            </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 v-html="loginStyle.footUrl || ''" class="footer"></div>
  </div>
</template>
<script>
  import Loading from '~components/common/loading/Loading.vue'
  var wxLogin = function () {}
  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
                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()
        }
      }
      // 短信便捷登录
      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          this.checkMobile = false
        } else {
          if (this.fastLogin.mobile) {
            this.checkMobile = true
          }
          callback()
        }
      }
      var validateCode = (rule, value, callback) => {
        if (value === '') {
          this.checkCode = false
        } else {
          if (this.fastLogin.code !== '') {
            this.checkCode = true
          }
          callback()
        }
      }
      // 微信扫码登录
      var validateWeiUsername = (rule, value, callback) => {
        if (value === '') {
          this.checkWeiUsername = false
        } else {
          if (this.bindAccount.username !== '') {
            this.checkWeiUsername = true
          }
          callback()
        }
      }
      var validateWeiPassword = (rule, value, callback) => {
        if (value === '') {
          this.checkWeiPassword = false
        } else {
          if (this.bindAccount.password !== '') {
            this.checkWeiPassword = true
          }
          callback()
        }
      }
      return {
        login: {
          username: '',
          password: '',
          captcha: '',
          spaceUU: ''
        },
        fastLogin: {
          mobile: '',
          code: ''
        },
        bindAccount: {
          username: '',
          password: ''
        },
        loginWay: 0,
        checked: true,
        isShowLoading: false,
        checkUsername: false,
        checkPassword: false,
        showCheckCode: false,
        isLoginDisabled: false,
        dialogVisible: false,
        queryLink: '',
        checkMobile: false,
        getCodeBtnIsDisabled: true,
        sendLoginCode: true,
        login_time: 0,
        token: '',
        checkCode: false,
        checkWeiUsername: false,
        checkWeiPassword: false,
        wxToken: '',
        wxImg: '',
        wxName: '',
        wxUrl: '',
        // 用户名密码登录
        rules2: {
          username: [
            {validator: validateUsername, trigger: 'blur'}
          ],
          password: [
            {validator: validatePassword, trigger: 'blur'}
          ]
        },
        // 短信快捷登录
        rules3: {
          mobile: [
            {validator: validateMobile, trigger: 'blur'}
          ],
          code: [
            {validator: validateCode, trigger: 'blur'}
          ]
        },
        // 微信扫码登录
        rules4: {
          username: [
            {validator: validateWeiUsername, trigger: 'blur'}
          ],
          password: [
            {validator: validateWeiPassword, trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getUrl()
        this.validUserName()
        if (this.$route.query.code) {
          this.wxEnterprise()
        }
      })
    },
    computed: {
      enterprise () {
        let chooseEnterprise = this.$store.state.login.chooseRegisterEnterprise.choose.data
        return chooseEnterprise
      },
      loginStyle () {
        return this.$store.state.login.loginStyle.data.content ? this.$store.state.login.loginStyle.data.content : ''
      }
    },
    methods: {
      toggleTab (type) {
        this.loginWay = type
        this.login.username = ''
        this.login.password = ''
        this.fastLogin.mobile = ''
        this.fastLogin.code = ''
      },
      ShowWechatCoe () {
        wxLogin()
        this.loginWay = 1
      },
      // 获取用户错误次数
      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 () {
        let wUrl = ''
        if (this.$route.query) {
          for (var key in this.$route.query) {
            if (key !== 'code' && key !== 'state' && key !== 'type') {
              wUrl += `${key}=${encodeURIComponent(this.$route.query[key])}&`
            }
          }
        }
        if (this.$route.query) {
          this.wxUrl = `${window.location.origin}?${wUrl.substr(0, wUrl.length - 1)}`
        } else {
          this.wxUrl = `${window.location.origin}`
        }
        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'] || ''
      },
      goForgetPassword () {
        let url = `/reset/forgetPasswordValidationAccount${this.queryLink ? '?' + this.queryLink : ''}`
        document.getElementById('forget').href = url
      },
  //    获取验证码
      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 {
          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 ? this.login.spaceUU : '')
          param.append('appId', this.appId ? this.appId : '')
          param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
          param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
          param.append('maxage', this.checked ? 2592000 : '')
          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 + '=' + encodeURIComponent(param[n]) + '&')
                  }
                  let params = a.substr(0, a.length - 1)
                  this.isShowLoading = true
                  if (response.data.content.currentUrl) {
                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                      name: 'successCallback',
                      timeout: 3000
                    }, (err, data) => {
                      if (err) {
                        this.$message.error('登录超时，请重试')
                        this.isShowLoading = false
                        throw err
                      } else {
                        this.loginOther(response, params)
                      }
                    })
                  } else {
                    this.loginOther(response, params, 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
        if (this.$route.query.code) {
          this.wxEnterprise(flag)
        } else {
          if (this.loginWay === 0) {
            this.isLogin(flag)
          }
          if (this.loginWay === 3) {
            this.fastToLogin(flag)
          }
        }
      },
      // 短信快捷登录
      fastToLogin (flag) {
        this.isShowLoading = true
        if (!this.fastLogin.mobile) {
          this.isShowLoading = false
          this.$message.error('请填写手机号')
        } else {
          let param = new FormData()
          param.append('mobile', this.fastLogin.mobile)
          param.append('code', this.fastLogin.code)
          param.append('appId', this.appId)
          param.append('token', this.token)
          param.append('spaceUU', this.login.spaceUU ? this.login.spaceUU : '')
          param.append('returnUrl', this.returnUrl ? this.returnUrl : '')
          param.append('baseUrl', this.baseUrl ? this.baseUrl : '')
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/login/sms', 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 + '=' + encodeURIComponent(param[n]) + '&')
                  }
                  let params = a.substr(0, a.length - 1)
                  this.isShowLoading = true
                  if (response.data.content.currentUrl) {
                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                      name: 'successCallback',
                      timeout: 3000
                    }, (err, data) => {
                      if (err) {
                        this.$message.error('登录超时，请重试')
                        this.isShowLoading = false
                        throw err
                      } else {
                        this.loginOther(response, params)
                      }
                    })
                  } else {
                    this.loginOther(response, params, 3000)
                  }
                }
              } else {
                this.$message.error(response.data)
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.isShowLoading = false
              let _this = this
              setTimeout(function () {
                _this.getCode()
              }, 100)
              this.$message.error(err.errMsg)
            })
        }
      },
      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) {
          if (response.data.content.currentUrl !== response.data.content.loginUrls[i]) {
            promises.push(this.getJsonp(`${response.data.content.loginUrls[i]}?${a}`))
          }
        }
        Promise.all(promises).then(() => {
          crossAfter(response.data.content.returnUrl || 'http://www.usoftchina.com', timeout)
        }).catch(() => {
          crossAfter(response.data.content.returnUrl || 'http://www.usoftchina.com', timeout)
        })
      },
      getCheckCode () {
        this.isShowLoading = true
        if (!this.fastLogin.mobile) {
          this.isShowLoading = false
          this.$message.error('请先填写手机号')
        } else {
          if (this.checkMobile) {
            this.$http.get(`/sso/login/sendSmsCode`, {params: {mobile: this.fastLogin.mobile}})
              .then(response => {
                this.isShowLoading = false
                if (response.data) {
                  if (response.data.success) {
                    this.token = response.data.content.token
                    this.$message({
                      message: '验证码已经发送到您的手机，请注意查收',
                      type: 'success'
                    })
                    this.sendLoginCode = false
                    this.login_time = 60
                    var loginTime = setInterval(() => {
                      this.login_time--
                      if (this.login_time <= 0) {
                        this.sendLoginCode = true
                        clearInterval(loginTime)
                      }
                    }, 1000)
                  } else {
                    this.$message.error(response.data.errMsg)
                  }
                } else {
                  return Promise.reject(response.data)
                }
              }).catch(err => {
                this.isShowLoading = false
                this.$message.error(err.errMsg)
              })
          } else {
            this.isShowLoading = false
          }
        }
      },
      // 微信判断绑定和账套选择
      wxEnterprise () {
        this.isShowLoading = true
        if (this.$route.query.code) {
          let param = new FormData()
          param.append('code', this.$route.query.code ? this.$route.query.code : '')
          param.append('type', 'wx')
          param.append('state', this.$route.query.state ? this.$route.query.state : '')
          param.append('appId', this.$route.query.appId ? this.$route.query.appId : '')
          param.append('returnUrl', this.$route.query.returnURL ? this.$route.query.returnURL : '')
          param.append('baseUrl', this.$route.query.baseUrl ? this.$route.query.baseUrl : '')
          param.append('spaceUU', this.login.spaceUU ? this.login.spaceUU : '')
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/sso/login/foreignLogin', param, config)
            .then(response => {
              this.isShowLoading = false
              if (response.data.success) {
                if (!response.data.content.hasRegister && response.data.content.token) {
                  this.loginWay = 2
                  this.wxToken = response.data.content.token
                  this.$http.get(`/foreign/userInfo/${this.wxToken}`, {params: {token: this.wxToken}})
                    .then(response => {
                      if (response.data.success) {
                        this.wxImg = response.data.content.foreignUserImg
                        this.wxName = response.data.content.foreignUserName
                      } else {
                        return Promise.reject(response.data)
                      }
                    }).catch(err => {
                      this.$message.error(err.errMsg)
                    })
                } else if (response.data.content.spaces) {
//                   弹框让用户选择企业
                  this.$store.commit('login/chooseRegisterEnterprise/GET_ENTERPRISE_SUCCESS', response.data.content.spaces)
                  this.dialogVisible = true
                } 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.isShowLoading = true
                  if (response.data.content.currentUrl) {
                    this.$jsonp(`${response.data.content.currentUrl}?${params}`, {
                      name: 'successCallback',
                      timeout: 3000
                    }, (err, data) => {
                      if (err) {
                        this.$message.error('登录超时，请重试')
                        this.isShowLoading = false
                        throw err
                      } else {
                        this.loginOther(response, params)
                      }
                    })
                  } else {
                    this.loginOther(response, params, 3000)
                  }
                }
              } else {
                this.$message.error(response.data)
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.isShowLoading = false
              let _this = this
              setTimeout(function () {
                _this.getCode()
              }, 100)
              this.$message.error(err.errMsg)
            })
        }
      },
      // 微信扫码登录
      getScan () {
        // this.loginWay = 1
        this.isShowLoading = true
        this.$http.get('/weChat/getQrUrl', {params: {appId: this.$route.query.appId, url: this.wxUrl}})
          .then(response => {
            this.isShowLoading = false
            if (response.data.success) {
              window.location.href = response.data.content
            } else {
              return Promise.reject(response.data)
            }
          }).catch(err => {
            this.isShowLoading = false
            this.$message.error(err.errMsg)
          })
      },
      // 绑定企业
      wxBind () {
        this.isShowLoading = true
        if (!this.bindAccount.username) {
          this.isShowLoading = false
          this.$message.error('请填写账号')
        } else if (!this.bindAccount.password) {
          this.isShowLoading = false
          this.$message.error('请填写密码')
        } else {
          let param = new FormData()
          param.append('_operate', 'account')
          param.append('t', this.wxToken)
          param.append('username', this.bindAccount.username)
          param.append('password', this.bindAccount.password)
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          this.$http.post('/foreign/addAccount', param, config)
            .then(response => {
              this.isShowLoading = false
              if (response.data.success) {
                this.wxEnterprise()
              } else {
                return Promise.reject(response.data)
              }
            }).catch(err => {
              this.isShowLoading = false
              this.$message.error(err.errMsg)
            })
        }
      }
    }
  }
</script>
<style lang="scss" 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;
    height: 80px;
    .login-tip{
      padding: 0 20px;
      position: absolute;
      top: 57px;
      left: 145px;
      font-size: 12px;
      height: 22px;
      line-height: 22px;
      color: #999;
      background-color: #fef2f2;
      border: solid 1px #ffb4a8;
      border-radius: 5px;
    }
    .navbar-header{
      height: 80px;
      line-height: 80px;
    }
  a.navbar-brand{
    overflow: hidden;
    padding: 0px;
    height: inherit;
    line-height: inherit;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 24px;
    font-weight: 400;
    color: #888;
    img{
      margin: 28px 8px 0 0;
      max-width: 80px;
      max-height: 27px;
      vertical-align: middle;
      float: left;
    }
    span{
      float: left;
    }
  }
  .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 {
      position: relative;
      text-align: right;
      margin-top: 35px;
      padding-bottom: 10px;
      a{
        margin-left: 20px;
        font-size: 14px;
        color: #999;
        background: 0 0;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
        transition: color .2s ease;
      }
      a.change{
        margin:2px 0 0 50px;
        font-size: 12px;
      }
      span.line {
        position: absolute;
        top: 1px;
        display: inline-block;
        margin: 0 10px;
        width: 2px;
        height: 15px;
        background-color: #dddddd;
      }
    }
    /*微信登录*/
    .scavenging {
      margin-top:22px;
      div{
        font-size: 12px;
        color: #666;
        cursor: pointer;
        img{
          margin-right: 10px;
        }
      }
    }
    /*登录弹出框*/
    .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;
          .inner{
            height: 100%;
          }
        }
      }
    }
    .x-login-wrap{
      position: absolute;
      top: 0;
      right: 50%;
      margin-right: -495px;
      height: 475px;
      z-index: 5;
      .login-tab {
        padding: 0 30px;
        position: relative;
        top: 40px;
        margin: 0 auto;
        width: 346px;
        height: 55px;
        line-height: 55px;
        font-size: 16px;
        color: #999;
        text-align: center;
        background: #fff;
        border-bottom: 1px solid #dcdcdc;
        span{
          margin-right: 42px;
          width: 64px;
          cursor: pointer;
          &:hover, &.active{
            padding-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #282828;
          }
        }
        span:last-child {
          margin-right: 0;
        }
      }
      .x-login {
        position: relative;
        top: 40px;
        width: 346px;
        background: #fff;
        overflow: visible;
        z-index: 4;
        .x-login-form, .x-login-qrcode {
          padding: 20px 20px 10px;
          .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: 12px;
            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;
            }
          }
        }
      }
      .scan-login {
        .x-login-form{
          padding: 0;
          .scan-header {
            position: relative;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            font-weight: bold;
            color: #666;
            border: solid 1px #e5e5e5;
            span{
              position: absolute;
              top: -3px;
              padding-left: 10px;
              display: inline-block;
              width: 90px;
              border-bottom: 2px solid #0076ff;
            }
            img{
              position: absolute;
              top: -3px;
              right: -1px;
              height: 50px;
              cursor: pointer;
            }
          }
          .scan-body {
            margin: 0 auto;
            padding: 22px 0 25px;
            text-align: center ;
            div.img{
              position: relative;
              margin: 0 auto;
              width: 180px;
              height: 182px;
              line-height: 182px;
              text-align: center;
              /*border: 1px solid #dcdcdc;*/
              img{
                width: 162px;
                height: 165px;
              }
            }
            #login_container{    position: absolute;left: -60px;top: -12px; z-index: 10;}
            div.content {
              width: 138px;
              margin: 38px auto 0;
              text-align: center;
              overflow: hidden;
              img{
                float: left;
                margin-right: 25px;
                width: 32px;
                height: 27px;
              }
              div{
                float: left;
                width: 80px;
                text-align: left;
                span{
                  font-size: 14px;
                  color: #999;
                  b{
                    color: #0076ff;
                  }
                }
                div{
                  font-size: 14px;
                  color: #999;
                }
              }
            }
          }
        }
      }
      .bind-login {
        box-shadow: -2px 1px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 6px;
        .x-login-form{
          padding: 0;
          .bind-header {
           overflow: hidden;
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            font-weight: bold;
            color: #666;
            border: solid 1px #e5e5e5;
            span {
              &:first-child {
                float: left;
                border-bottom: 2px solid #5078cb;
              }
              &:last-child{
                float: right;
                font-size: 14px;
                color: #5078cb;
                font-weight: normal;
                cursor: pointer;
              }
            }
          }
          .bind-body {
            margin: 22px auto 0;
            padding-bottom: 20px;
            text-align: center ;
            .img{
              margin: 0 auto;
              text-align: center;
              img{
                margin-bottom: 10px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
              }
              div{
                font-size: 14px;
                color: #999;
              }
            }
            .set{
              margin-top: 30px;
              font-size: 12px;
              color: #999;
              a{
                display: inline-block;
                width: 90px;
                line-height: 23px;
                height: 24px;
                text-align: center;
                font-size: 14px;
                color: #5078cb;
                border-radius: 13px;
                border: solid 1px #5078cb;
              }
            }
          }
        }
      }
    }
  }
  .footer{
    padding: 50px 0;
  }
  #login_container{
    height: 280px;
    overflow: hidden;
  }
  #login_container iframe{
    height: 280px;
  }
</style>