<template>
|
<div class="login-container"
|
ref="login"
|
@keyup.enter.native="handleLogin">
|
<top-color v-show="false"></top-color>
|
<div class="login-weaper animated bounceInDown">
|
<div class="login-left">
|
<div class="login-time">
|
{{time}}
|
</div>
|
<img class="img" src="/img/logo.png" alt="">
|
<p class="title">{{ $t('login.info') }}</p>
|
</div>
|
<div class="login-border">
|
<div class="login-main">
|
<h4 class="login-title">
|
{{ $t('login.title') }}
|
<!-- <top-lang></top-lang>-->
|
</h4>
|
<!-- <h4 class="login-title-child">IoT security cloud service platform</h4>-->
|
<userLogin></userLogin>
|
<!-- <codeLogin v-else-if="activeName==='code'"></codeLogin>-->
|
<!-- <thirdLogin v-else-if="activeName==='third'"></thirdLogin>-->
|
<div class="login-menu">
|
<!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
|
<a href="#" @click.stop="zShow">{{ $t('login.phoneLogin') }}</a>
|
<!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="z" v-show="activeName == 'code'">
|
<codeLogin></codeLogin>
|
</div>
|
</div>
|
</template>
|
<script>
|
import userLogin from "./userlogin";
|
import codeLogin from "./codelogin";
|
import thirdLogin from "./thirdlogin";
|
import {mapGetters} from "vuex";
|
import {dateFormat} from "@/util/date";
|
import {validatenull} from "@/util/validate";
|
import topLang from "@/page/index/top/top-lang";
|
import topColor from "@/page/index/top/top-color";
|
import {getQueryString, getTopUrl} from "@/util/util";
|
|
export default {
|
name: "login",
|
components: {
|
userLogin,
|
codeLogin,
|
thirdLogin,
|
topLang,
|
topColor
|
},
|
data() {
|
return {
|
time: "",
|
activeName: "user",
|
socialForm: {
|
tenantId: "000000",
|
source: "",
|
code: "",
|
state: "",
|
}
|
};
|
},
|
watch: {
|
$route() {
|
this.handleLogin();
|
}
|
},
|
created() {
|
this.handleLogin();
|
this.getTime();
|
},
|
mounted() {
|
},
|
computed: {
|
...mapGetters(["website", "tagWel"])
|
},
|
props: [],
|
methods: {
|
getTime() {
|
setInterval(() => {
|
this.time = dateFormat(new Date());
|
}, 1000);
|
},
|
handleLogin() {
|
const topUrl = getTopUrl();
|
const redirectUrl = "/oauth/redirect/";
|
this.socialForm.source = getQueryString("source");
|
this.socialForm.code = getQueryString("code");
|
this.socialForm.state = getQueryString("state");
|
if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
|
let source = topUrl.split("?")[0];
|
source = source.split(redirectUrl)[1];
|
this.socialForm.source = source;
|
}
|
if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
|
const loading = this.$loading({
|
lock: true,
|
text: '第三方系统登录中,请稍后。。。',
|
spinner: "el-icon-loading"
|
});
|
this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
|
window.location.href = topUrl.split(redirectUrl)[0];
|
this.$router.push({path: this.tagWel.value});
|
loading.close();
|
}).catch(() => {
|
loading.close();
|
});
|
}
|
},
|
zShow() {
|
document.querySelector('.z').style.display = 'block';
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.z {
|
position: fixed;
|
margin: auto;
|
padding: 10px;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 80px;
|
width: 600px;
|
height: 500px;
|
background-color: #fff;
|
box-sizing: border-box;
|
box-shadow: 6px 6px 5px #909090;
|
}
|
|
.company-jx {
|
position: fixed;
|
margin: auto;
|
top: auto;
|
left: 0px;
|
right: 0px;
|
bottom: 120px;
|
text-align: center;
|
color: #fff;
|
font-size: 15px;
|
}
|
@import "@/styles/login.scss";
|
</style>
|
