<template>
|
<div class="login">
|
<Row
|
type="flex"
|
justify="center"
|
align="middle"
|
@keydown.enter.native="submitLogin"
|
style="height: 100%"
|
>
|
<Col class="content">
|
<div>
|
<Header />
|
<div v-if="!socialLogining" style="margin-top: 150px">
|
<Form
|
ref="usernameLoginForm"
|
:model="form"
|
:rules="rules"
|
class="form"
|
v-if="tabName == 'username'"
|
>
|
<FormItem>
|
<h1 style="margin-left: 40%;">登 陆</h1>
|
</FormItem>
|
<FormItem prop="username">
|
<Input
|
v-model="form.username"
|
prefix="ios-contact"
|
size="large"
|
clearable
|
placeholder="账号"
|
autocomplete="off"
|
/>
|
</FormItem>
|
<FormItem prop="password">
|
<Input
|
type="password"
|
v-model="form.password"
|
prefix="ios-lock"
|
size="large"
|
password
|
placeholder="请输入密码"
|
autocomplete="off"
|
/>
|
</FormItem>
|
<FormItem prop="imgCode">
|
<Row
|
type="flex"
|
justify="space-between"
|
style="align-items: center; overflow: hidden"
|
>
|
<Input
|
v-model="form.imgCode"
|
size="large"
|
clearable
|
placeholder="请输入图片验证码"
|
:maxlength="10"
|
class="input-verify"
|
/>
|
<div
|
class="code-image"
|
style="position: relative; font-size: 12px"
|
>
|
<Spin v-if="loadingCaptcha" fix></Spin>
|
<img
|
:src="captchaImg"
|
@click="getCaptchaImg"
|
alt="加载验证码失败"
|
style="width: 110px; cursor: pointer; display: block"
|
/>
|
</div>
|
</Row>
|
</FormItem>
|
</Form>
|
|
<!--<Row justify="space-between" align="middle">-->
|
<!--<Checkbox v-model="saveLogin" size="large">{{-->
|
<!--$t("autoLogin")-->
|
<!--}}</Checkbox>-->
|
<!--<Dropdown trigger="click" @on-click="handleDropDown">-->
|
<!--<a class="forget-pass">{{ $t("forgetPass") }}</a>-->
|
<!--<DropdownMenu slot="list">-->
|
<!--<DropdownItem name="test">体验测试账号</DropdownItem>-->
|
<!--<DropdownItem name="resetByMobile"-->
|
<!-->使用手机号重置密码(付费)</DropdownItem-->
|
<!-->-->
|
<!--<DropdownItem name="resetByEmail"-->
|
<!-->使用邮箱重置密码(付费)</DropdownItem-->
|
<!-->-->
|
<!--</DropdownMenu>-->
|
<!--</Dropdown>-->
|
<!--</Row>-->
|
<Button
|
class="login-btn"
|
type="primary"
|
size="large"
|
:loading="loading"
|
@click="submitLogin"
|
long
|
>
|
<span v-if="!loading">{{ $t("login") }}</span>
|
<span v-else>{{ $t("logining") }}</span>
|
</Button>
|
</div>
|
<div v-if="socialLogining">
|
<RectLoading />
|
</div>
|
</div>
|
<!--<Footer />-->
|
</Col>
|
<LangSwitch />
|
</Row>
|
</div>
|
<!--<div>-->
|
|
<!--<VueFurcateTree-->
|
<!--:ft-data="ftData"-->
|
<!--:expandable="true"-->
|
<!--:expand-all="expandAllStatus"-->
|
<!--@click="click"-->
|
<!--@expand="expand"-->
|
<!-->-->
|
<!--我是#{label}-->
|
<!--<em>#{test.a}</em>-->
|
<!--</VueFurcateTree>-->
|
|
<!--</div>-->
|
|
|
</template>
|
|
<script>
|
import {
|
login,
|
userInfo,
|
getJWT,
|
sendLoginSms,
|
smsLogin,
|
initCaptcha,
|
drawCodeImage,
|
getOtherSet,
|
getNotice,
|
} from "@/api/index";
|
import { validateMobile } from "@/libs/validate";
|
import Cookies from "js-cookie";
|
import Header from "@/views/main-components/header";
|
//import Footer from "@/views/main-components/footer";
|
import LangSwitch from "@/views/main-components/lang-switch";
|
import RectLoading from "@/views/my-components/xboot/rect-loading";
|
import CountDownButton from "@/views/my-components/xboot/count-down-button";
|
import util from "@/libs/util.js";
|
import VueFurcateTree from 'vue-furcate-tree'
|
|
export default {
|
components: {
|
CountDownButton,
|
RectLoading,
|
LangSwitch,
|
Header,
|
VueFurcateTree
|
},
|
data() {
|
return {
|
ftData: [
|
{
|
expand: true, // 必须的，表示子级节点是否展开
|
label: '节点1', // 你的自定义属性，将来可在模板中作为变量
|
test: { // 你的自定义属性
|
a: 'b' // 你的自定义属性，可以在模板中使用test.a方式访问变量
|
},
|
children: [ // 可选的，子级节点数组
|
{
|
expand: false,
|
label: '节点2',
|
test: {
|
a: 'b'
|
},
|
children: [
|
{
|
expand: false,
|
label: '节点3',
|
test: {
|
a: 'c'
|
}
|
},
|
{
|
expand: false,
|
label: '节点3',
|
test: {
|
a: 'd'
|
}
|
}
|
]
|
}
|
]
|
}
|
],
|
sessionStorage: null,
|
showMore: false,
|
code:"",
|
captchaId: "",
|
captchaImg: "",
|
loadingCaptcha: true,
|
socialLogining: true,
|
error: false,
|
tabName: "username",
|
saveLogin: true,
|
getSms: "获取验证码",
|
loading: false,
|
sending: false,
|
errorCode: "",
|
form: {
|
username: "",
|
password: "",
|
code: "",
|
},
|
showChangePass: false,
|
};
|
},
|
methods: {
|
getCaptchaImg() {
|
this.loadingCaptcha = true;
|
initCaptcha().then((res) => {
|
this.loadingCaptcha = false;
|
if (res.success) {
|
this.code = res.result.code;
|
this.captchaId = res.result.captchaId;
|
this.captchaImg = drawCodeImage + this.captchaId;
|
}
|
});
|
},
|
sendSmsCode() {
|
this.$refs.mobileLoginForm.validate((valid) => {
|
if (valid) {
|
this.sending = true;
|
this.getSms = "发送中";
|
sendLoginSms(this.form.mobile).then((res) => {
|
this.getSms = "获取验证码";
|
this.sending = false;
|
if (res.success) {
|
this.$Message.success("发送短信验证码成功");
|
// 开始倒计时
|
this.$refs.countDown.startCountDown();
|
}
|
});
|
}
|
});
|
},
|
afterLogin(res) {
|
let accessToken = res.result;
|
console.log("login_afterLogin()",accessToken)
|
this.setSessionStore("accessToken", accessToken);
|
getOtherSet().then((res) => {
|
if (res.result) {
|
let domain = res.result.ssoDomain;
|
// Cookies.set("accessToken", accessToken, {
|
// domain: domain,
|
// expires: 7,
|
// });
|
}
|
});
|
// 获取用户信息
|
userInfo().then((res) => {
|
if (res.success) {
|
// 避免超过大小限制
|
delete res.result.permissions;
|
let roles = [];
|
res.result.roles.forEach((e) => {
|
roles.push(e.name);
|
});
|
delete res.result.roles;
|
this.setStore("roles", roles);
|
this.setStore("saveLogin", this.saveLogin);
|
if (this.saveLogin) {
|
// 保存7天
|
Cookies.set("userInfo", JSON.stringify(res.result), {
|
expires: 7,
|
});
|
} else {
|
Cookies.set("userInfo", JSON.stringify(res.result));
|
}
|
this.setStore("userInfo", res.result);
|
this.$store.commit("setUserInfo", res.result);
|
// 加载菜单
|
util.initRouter(this);
|
// window.location.reload();
|
this.$router.push({
|
name: "home2",
|
});
|
} else {
|
this.loading = false;
|
}
|
});
|
},
|
submitLogin() {
|
if (this.tabName == "username") {
|
if(this.code.toUpperCase()!=this.form.imgCode.toUpperCase()){
|
this.$Message.error("验证码错误");
|
this.getCaptchaImg();
|
return
|
}
|
this.loading = true;
|
login({
|
username: this.form.username,
|
password: btoa(this.form.password),
|
code: this.form.imgCode,
|
captchaId: this.captchaId,
|
saveLogin: this.saveLogin,
|
}).then((res) => {
|
if (res.success) {
|
this.afterLogin(res);
|
} else {
|
this.loading = false;
|
this.getCaptchaImg();
|
}
|
});
|
} else if (this.tabName == "mobile") {
|
this.$refs.mobileLoginForm.validate((valid) => {
|
if (valid) {
|
if (this.form.code == "") {
|
this.errorCode = "验证码不能为空";
|
return;
|
} else {
|
this.errorCode = "";
|
}
|
this.loading = true;
|
this.form.saveLogin = this.saveLogin;
|
smsLogin(this.form).then((res) => {
|
if (res.success) {
|
this.afterLogin(res);
|
} else {
|
this.loading = false;
|
}
|
});
|
}
|
});
|
}
|
},
|
toGithubLogin() {
|
this.socialLogining = true;
|
githubLogin().then((res) => {
|
if (res.success) {
|
window.location.href = res.result;
|
} else {
|
this.socialLogining = false;
|
}
|
});
|
},
|
toQQLogin() {
|
this.socialLogining = true;
|
qqLogin().then((res) => {
|
if (res.success) {
|
window.location.href = res.result;
|
} else {
|
this.socialLogining = false;
|
}
|
});
|
},
|
toWeiboLogin() {
|
this.socialLogining = true;
|
weiboLogin().then((res) => {
|
if (res.success) {
|
window.location.href = res.result;
|
} else {
|
this.socialLogining = false;
|
}
|
});
|
},
|
toWeixinLogin() {
|
this.socialLogining = true;
|
wechatLogin().then((res) => {
|
if (res.success) {
|
window.location.href = res.result;
|
} else {
|
this.socialLogining = false;
|
}
|
});
|
},
|
toDingdingLogin() {
|
this.socialLogining = true;
|
dingdingLogin().then((res) => {
|
if (res.success) {
|
window.location.href = res.result;
|
} else {
|
this.socialLogining = false;
|
}
|
});
|
},
|
toWorkwechatLogin() {
|
this.socialLogining = true;
|
workwechatLogin().then((res) => {
|
if (res.success) {
|
window.location.href = res.result;
|
} else {
|
this.socialLogining = false;
|
}
|
});
|
},
|
relatedLogin() {
|
let q = this.$route.query;
|
let error = q.error;
|
if (error !== "" && error !== undefined) {
|
this.$Message.error(error);
|
}
|
let related = q.related;
|
let JWTKey = q.JWTKey;
|
if (related && related == "1" && JWTKey) {
|
getJWT({ JWTKey: JWTKey }).then((res) => {
|
if (res.success) {
|
this.socialLogining = true;
|
let accessToken = res.result;
|
this.setSessionStore("accessToken", accessToken);
|
getOtherSet().then((res) => {
|
if (res.result) {
|
let domain = res.result.ssoDomain;
|
// Cookies.set("accessToken", accessToken, {
|
// domain: domain,
|
// expires: 7,
|
// });
|
}
|
});
|
// 获取用户信息
|
userInfo().then((res) => {
|
if (res.success) {
|
// 避免超过大小限制
|
delete res.result.permissions;
|
let roles = [];
|
res.result.roles.forEach((e) => {
|
roles.push(e.name);
|
});
|
delete res.result.roles;
|
this.setStore("roles", roles);
|
// 保存7天
|
Cookies.set("userInfo", JSON.stringify(res.result), {
|
expires: 7,
|
});
|
this.setStore("userInfo", res.result);
|
this.$store.commit("setUserInfo", res.result);
|
// 加载菜单
|
util.initRouter(this);
|
this.$router.push({
|
name: "home_index",
|
});
|
} else {
|
this.socialLogining = false;
|
this.$Message.error("获取登录用户信息失败");
|
}
|
});
|
} else {
|
this.socialLogining = false;
|
this.$Message.error("使用第三方账号登录失败");
|
}
|
});
|
} else {
|
this.socialLogining = false;
|
}
|
},
|
handleDropDown(v) {
|
if (v == "test") {
|
this.test();
|
} else if (v == "resetByMobile") {
|
this.$router.push({
|
name: "reset",
|
});
|
} else if (v == "resetByEmail") {
|
this.$router.push({
|
name: "reset",
|
query: {
|
type: "1",
|
},
|
});
|
}
|
},
|
showNotice() {
|
getNotice().then((res) => {
|
if (res.success) {
|
if (!res.result) {
|
return;
|
}
|
let data = res.result;
|
if (
|
data.open &&
|
(data.title || data.content) &&
|
data.position == "LOGIN"
|
) {
|
this.$Notice.info({
|
title: data.title,
|
desc: data.content,
|
duration: data.duration,
|
});
|
}
|
}
|
});
|
},
|
test() {
|
// this.$Notice.info({
|
// title: "测试体验账号",
|
// desc: "账号：test或test2<br>密码：123456",
|
// });
|
},
|
},
|
mounted() {
|
//this.showNotice();
|
this.relatedLogin();
|
this.getCaptchaImg();
|
|
},
|
};
|
</script>
|
|
<style lang="less">
|
@import "./login.less";
|
</style>
|
