<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-erweima">
|
<div class="title-l-e">
|
<img :src="link" alt="" />
|
</div>
|
<div class="title-l-e">扫一扫 加入群聊</div>
|
</div>
|
<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'" :style="{height:height}">
|
<codeLogin v-on:height='setHeight'></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";
|
import { geterweima } from "@/api/logs";
|
|
export default {
|
name: "login",
|
components: {
|
userLogin,
|
codeLogin,
|
thirdLogin,
|
topLang,
|
topColor,
|
},
|
data() {
|
return {
|
time: "",
|
activeName: "user",
|
socialForm: {
|
tenantId: "000000",
|
source: "",
|
code: "",
|
state: "",
|
link: "",
|
},
|
height:"500px"
|
};
|
},
|
watch: {
|
$route() {
|
this.handleLogin();
|
},
|
},
|
created() {
|
this.handleLogin();
|
this.getTime();
|
geterweima(9).then((res) => {
|
this.link = res.data.data.link;
|
});
|
},
|
mounted() {},
|
computed: {
|
...mapGetters(["website", "tagWel"]),
|
},
|
props: [],
|
methods: {
|
//获取高度
|
setHeight(height){
|
// console.log(height,8888);
|
this.height = height;
|
},
|
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>
|
