|
|
@@ -1,18 +1,31 @@
|
|
|
<template>
|
|
|
<div class="login">
|
|
|
<div class="page-part">
|
|
|
- <mt-field placeholder="账号" v-model="username"></mt-field>
|
|
|
+ <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="password"></mt-field>
|
|
|
+ <mt-field placeholder="密码" v-model="login.password"></mt-field>
|
|
|
</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">登录</mt-button>
|
|
|
+ <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">立即注册</mt-button>
|
|
|
+ <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>
|
|
|
|
|
|
@@ -21,14 +34,169 @@
|
|
|
name: 'loginMobile',
|
|
|
data () {
|
|
|
return {
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
+ 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 () {
|
|
|
+ let url = window.location.search
|
|
|
+ let request = {}
|
|
|
+ if (url.indexOf('?' !== -1)) {
|
|
|
+ let str = url.substr(1)
|
|
|
+ let strs = str.split('&')
|
|
|
+ for (let 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'] || ''
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ let _this = this
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.getCode()
|
|
|
+ }, 100)
|
|
|
+ this.$toast({
|
|
|
+ message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
|
|
|
+ iconClass: 'el-icon-warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$indicator.close()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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循环让各个应用登录
|
|
|
+ for (let i in response.data.content.loginUrls) {
|
|
|
+ this.$jsonp(`${response.data.content.loginUrls[i]}`, function (err) {
|
|
|
+ if (err) throw err
|
|
|
+ })
|
|
|
+ }
|
|
|
+ window.location.href = response.data.content.returnUrl || 'http://www.ubtob.com'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }).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);
|
|
|
+ }
|
|
|
+ .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;
|
Administrator