4 changed files with 91 additions and 85 deletions
After Width: | Height: | Size: 156 KiB |
After Width: | Height: | Size: 111 KiB |
@ -1,121 +1,127 @@ |
|||||||
<template> |
<template> |
||||||
<div class="login-container" |
<div class="login-container" ref="login" @keyup.enter.native="handleLogin"> |
||||||
ref="login" |
|
||||||
@keyup.enter.native="handleLogin"> |
|
||||||
<top-color v-show="false"></top-color> |
<top-color v-show="false"></top-color> |
||||||
<div class="login-weaper animated bounceInDown"> |
<div class="login-weaper animated bounceInDown"> |
||||||
<div class="login-left"> |
<div class="login-left"> |
||||||
<div class="login-time"> |
<div class="login-time"> |
||||||
{{time}} |
{{ time }} |
||||||
</div> |
</div> |
||||||
<img class="img" src="http://static.qnaiot.com/sim/login-mid.png" alt=""> |
<img class="img" src="../../assets/login-logo.png" alt="" /> |
||||||
<p class="title">{{ $t('login.info') }}</p> |
<p class="title">{{ $t("login.info") }}</p> |
||||||
</div> |
</div> |
||||||
<div class="login-border"> |
<div class="login-border"> |
||||||
<div class="login-main"> |
<div class="login-main"> |
||||||
<h4 class="login-title"> |
<h4 class="login-title"> |
||||||
{{ $t('login.title') }} |
{{ $t("login.title") }} |
||||||
<span>(1.0.0)</span> |
<span>(1.0.0)</span> |
||||||
<!-- <top-lang></top-lang> --> |
<!-- <top-lang></top-lang> --> |
||||||
</h4> |
</h4> |
||||||
<userLogin v-if="activeName==='user'"></userLogin> |
<userLogin v-if="activeName === 'user'"></userLogin> |
||||||
<codeLogin v-else-if="activeName==='code'"></codeLogin> |
<codeLogin v-else-if="activeName === 'code'"></codeLogin> |
||||||
<thirdLogin v-else-if="activeName==='third'"></thirdLogin> |
<thirdLogin v-else-if="activeName === 'third'"></thirdLogin> |
||||||
<div class="login-menu"> |
<div class="login-menu"> |
||||||
<!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> --> |
<!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> --> |
||||||
<!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>--> |
<!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>--> |
||||||
<!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> --> |
<!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> --> |
||||||
<!-- <div></div> --> |
<!-- <div></div> --> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import userLogin from "./userlogin"; |
import userLogin from "./userlogin"; |
||||||
import codeLogin from "./codelogin"; |
import codeLogin from "./codelogin"; |
||||||
import thirdLogin from "./thirdlogin"; |
import thirdLogin from "./thirdlogin"; |
||||||
import {mapGetters} from "vuex"; |
import { mapGetters } from "vuex"; |
||||||
import {dateFormat} from "@/util/date"; |
import { dateFormat } from "@/util/date"; |
||||||
import {validatenull} from "@/util/validate"; |
import { validatenull } from "@/util/validate"; |
||||||
import topLang from "@/page/index/top/top-lang"; |
import topLang from "@/page/index/top/top-lang"; |
||||||
import topColor from "@/page/index/top/top-color"; |
import topColor from "@/page/index/top/top-color"; |
||||||
import {getQueryString, getTopUrl} from "@/util/util"; |
import { getQueryString, getTopUrl } from "@/util/util"; |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "login", |
name: "login", |
||||||
components: { |
components: { |
||||||
userLogin, |
userLogin, |
||||||
codeLogin, |
codeLogin, |
||||||
thirdLogin, |
thirdLogin, |
||||||
topLang, |
topLang, |
||||||
topColor |
topColor, |
||||||
}, |
}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
time: "", |
time: "", |
||||||
activeName: "user", |
activeName: "user", |
||||||
socialForm: { |
socialForm: { |
||||||
tenantId: "000000", |
tenantId: "000000", |
||||||
source: "", |
source: "", |
||||||
code: "", |
code: "", |
||||||
state: "", |
state: "", |
||||||
} |
}, |
||||||
}; |
}; |
||||||
}, |
}, |
||||||
watch: { |
watch: { |
||||||
$route() { |
$route() { |
||||||
this.handleLogin(); |
|
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
this.handleLogin(); |
this.handleLogin(); |
||||||
this.getTime(); |
|
||||||
}, |
}, |
||||||
mounted() { |
}, |
||||||
|
created() { |
||||||
|
this.handleLogin(); |
||||||
|
this.getTime(); |
||||||
|
}, |
||||||
|
mounted() {}, |
||||||
|
computed: { |
||||||
|
...mapGetters(["website", "tagWel"]), |
||||||
|
}, |
||||||
|
props: [], |
||||||
|
methods: { |
||||||
|
getTime() { |
||||||
|
setInterval(() => { |
||||||
|
this.time = dateFormat(new Date()); |
||||||
|
}, 1000); |
||||||
}, |
}, |
||||||
computed: { |
handleLogin() { |
||||||
...mapGetters(["website", "tagWel"]) |
const topUrl = getTopUrl(); |
||||||
}, |
const redirectUrl = "/oauth/redirect/"; |
||||||
props: [], |
this.socialForm.source = getQueryString("source"); |
||||||
methods: { |
this.socialForm.code = getQueryString("code"); |
||||||
getTime() { |
this.socialForm.state = getQueryString("state"); |
||||||
setInterval(() => { |
if ( |
||||||
this.time = dateFormat(new Date()); |
validatenull(this.socialForm.source) && |
||||||
}, 1000); |
topUrl.includes(redirectUrl) |
||||||
}, |
) { |
||||||
handleLogin() { |
let source = topUrl.split("?")[0]; |
||||||
const topUrl = getTopUrl(); |
source = source.split(redirectUrl)[1]; |
||||||
const redirectUrl = "/oauth/redirect/"; |
this.socialForm.source = source; |
||||||
this.socialForm.source = getQueryString("source"); |
} |
||||||
this.socialForm.code = getQueryString("code"); |
if ( |
||||||
this.socialForm.state = getQueryString("state"); |
!validatenull(this.socialForm.source) && |
||||||
if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) { |
!validatenull(this.socialForm.code) && |
||||||
let source = topUrl.split("?")[0]; |
!validatenull(this.socialForm.state) |
||||||
source = source.split(redirectUrl)[1]; |
) { |
||||||
this.socialForm.source = source; |
const loading = this.$loading({ |
||||||
} |
lock: true, |
||||||
if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) { |
text: "第三方系统登录中,请稍后。。。", |
||||||
const loading = this.$loading({ |
spinner: "el-icon-loading", |
||||||
lock: true, |
}); |
||||||
text: '第三方系统登录中,请稍后。。。', |
this.$store |
||||||
spinner: "el-icon-loading" |
.dispatch("LoginBySocial", this.socialForm) |
||||||
}); |
.then(() => { |
||||||
this.$store.dispatch("LoginBySocial", this.socialForm).then(() => { |
|
||||||
window.location.href = topUrl.split(redirectUrl)[0]; |
window.location.href = topUrl.split(redirectUrl)[0]; |
||||||
this.$router.push({path: this.tagWel.value}); |
this.$router.push({ path: this.tagWel.value }); |
||||||
loading.close(); |
loading.close(); |
||||||
}).catch(() => { |
}) |
||||||
|
.catch(() => { |
||||||
loading.close(); |
loading.close(); |
||||||
}); |
}); |
||||||
} |
|
||||||
} |
} |
||||||
} |
}, |
||||||
}; |
}, |
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"> |
<style lang="scss"> |
||||||
@import "@/styles/login.scss"; |
@import "@/styles/login.scss"; |
||||||
</style> |
</style> |
||||||
|
Loading…
Reference in new issue