421 lines
12 KiB
Vue
421 lines
12 KiB
Vue
<template>
|
||
<div class="login">
|
||
<div class="login-weaper">
|
||
<div class="login-left">
|
||
<div class="login-time">{{ time.txt }}</div>
|
||
<div class="login-left-box">
|
||
<div>
|
||
<!-- <div class="logo">{{ getThemeConfig.globalViceTitle }}</div> -->
|
||
<div class="logo">数字校园教育管理平台</div>
|
||
<!-- <h2 class="title">{{ getThemeConfig.globalViceDes }}</h2> -->
|
||
<h2 class="title">数字校园</h2>
|
||
<div class="msg">
|
||
<div class="msg-author">
|
||
<span>{{ quotations.name }}</span>
|
||
<span>{{ quotations.comeFrom }}</span>
|
||
</div>
|
||
<div class="msg-txt">{{ quotations.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-right">
|
||
<div class="login-main">
|
||
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
|
||
<h4 class="login-title">数字校园教育管理平台</h4>
|
||
<h5>请使用钉钉小程序扫码登录</h5>
|
||
<div
|
||
v-loading="loading"
|
||
id="self_defined_element"
|
||
class="self-defined-classname"
|
||
></div>
|
||
<div>版本:v2.2</div>
|
||
<!-- 第三方登录友情链接 -->
|
||
<!-- <div class="login-menu">
|
||
<a href="javascript:;">{{ $t("message.login.link.one1") }}</a>
|
||
<a href="javascript:;">{{ $t("message.login.link.one2") }}</a>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="vue-particles">
|
||
<vue-particles
|
||
color="#dedede"
|
||
shapeType="star"
|
||
linesColor="#dedede"
|
||
hoverMode="grab"
|
||
clickMode="push"
|
||
style="height: 100%"
|
||
></vue-particles>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Session } from "@/utils/storage";
|
||
import { formatDate, formatAxis } from "@/utils/formatTime";
|
||
import { PrevLoading } from "@/utils/loading.js";
|
||
import { quotationsList } from "./mock";
|
||
import { useLoginApi } from "@/api/login";
|
||
import { Message } from "element-ui";
|
||
import dd from "dingtalk-jsapi";
|
||
const LoginApi = useLoginApi();
|
||
|
||
export default {
|
||
name: "login",
|
||
data() {
|
||
return {
|
||
quotationsList,
|
||
quotations: {},
|
||
isView: false,
|
||
submit: {
|
||
loading: false,
|
||
},
|
||
ruleForm: {
|
||
username: "admin",
|
||
password: "admin123",
|
||
code: "",
|
||
uuid: "",
|
||
},
|
||
codeUrl: "",
|
||
time: {
|
||
txt: "",
|
||
fun: null,
|
||
},
|
||
// 验证码开关
|
||
captchaEnabled: true,
|
||
|
||
loading: true,
|
||
access_token: "",
|
||
userInformation: {},
|
||
};
|
||
},
|
||
computed: {
|
||
// 获取当前时间
|
||
currentTime() {
|
||
return formatAxis(new Date());
|
||
},
|
||
// 获取布局配置信息
|
||
getThemeConfig() {
|
||
return this.$store.state.themeConfig.themeConfig;
|
||
},
|
||
},
|
||
created() {
|
||
this.initTime();
|
||
},
|
||
mounted() {
|
||
this.ddlogin();
|
||
this.initRandomQuotations();
|
||
const _this = this;
|
||
// dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
|
||
// 加上判断条件
|
||
if (dd.env.platform != "notInDingTalk") {
|
||
// 说明不是钉钉打开
|
||
// 钉钉登录
|
||
dd.runtime.permission.requestAuthCode({
|
||
corpId: "dingibrrfjews8im0ois",
|
||
onSuccess: (res) => {
|
||
_this.loginToObtain(res.code);
|
||
},
|
||
onFail: function (err) {},
|
||
});
|
||
} else {
|
||
console.log("不是钉钉打开");
|
||
}
|
||
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 2500);
|
||
},
|
||
methods: {
|
||
// 随机语录
|
||
initRandomQuotations() {
|
||
this.quotations = this.quotationsList[
|
||
Math.floor(Math.random() * this.quotationsList.length)
|
||
];
|
||
},
|
||
|
||
// 初始化左上角时间显示
|
||
initTime() {
|
||
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||
this.time.fun = setInterval(() => {
|
||
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||
}, 1000);
|
||
},
|
||
// 获取thken登录
|
||
async loginToObtain(authCode) {
|
||
PrevLoading.start();
|
||
try {
|
||
let resultIoc = await LoginApi.loginToObtain(authCode);
|
||
this.access_token = resultIoc.token_type + " " + resultIoc.access_token;
|
||
Session.set("token", this.access_token);
|
||
resultIoc.access_token && this.submitForm();
|
||
} catch (error) {
|
||
PrevLoading.done();
|
||
Message.error("不是该组织成员");
|
||
}
|
||
},
|
||
// 获取带thken获取用户信息
|
||
async requestToObtainUserInformation() {
|
||
try {
|
||
let res = await LoginApi.requestToObtainUserInformation();
|
||
this.userInformation = res.data;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
submitForm() {
|
||
setTimeout(() => {
|
||
let defaultRoles = [];
|
||
let defaultAuthBtnList = [];
|
||
// admin 页面权限标识，对应路由 meta.roles
|
||
let adminRoles = ["admin"];
|
||
// admin 按钮权限标识
|
||
let adminAuthBtnList = ["btn.add", "btn.del", "btn.edit", "btn.link"];
|
||
// common 页面权限标识，对应路由 meta.roles
|
||
let testAuthPageList = ["common"];
|
||
// test 按钮权限标识
|
||
let testAuthBtnList = ["btn.add", "btn.link"];
|
||
if (this.ruleForm.userName === "admin") {
|
||
defaultRoles = adminRoles;
|
||
defaultAuthBtnList = adminAuthBtnList;
|
||
} else {
|
||
defaultRoles = testAuthPageList;
|
||
defaultAuthBtnList = testAuthBtnList;
|
||
}
|
||
const userInfos = {
|
||
userName: this.ruleForm.userName === "admin" ? "admin" : "admin",
|
||
photo:
|
||
this.ruleForm.userName === "admin"
|
||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||
: "https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||
time: new Date().getTime(),
|
||
roles: defaultRoles,
|
||
authBtnList: defaultAuthBtnList,
|
||
};
|
||
this.requestToObtainUserInformation();
|
||
setTimeout(() => {
|
||
console.log(this.userInformation);
|
||
// 存储 token 到浏览器缓存
|
||
Session.set("token", this.access_token);
|
||
// 存储用户信息到浏览器缓存
|
||
Session.set("userInfo", userInfos);
|
||
// 存储钉钉用户信息到浏览器缓存
|
||
Session.set("userInfoDD", this.userInformation);
|
||
// 存储用户信息到vuex
|
||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||
// 存储用户信息到钉钉vuex
|
||
this.$store.dispatch("userInfos/setUserInfosDD", this.userInformation);
|
||
this.$router.push("/");
|
||
}, 3000);
|
||
setTimeout(() => {
|
||
this.$message.success(
|
||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||
);
|
||
}, 300);
|
||
}, 300);
|
||
},
|
||
// 扫码登录
|
||
ddlogin() {
|
||
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
|
||
window.DTFrameLogin(
|
||
{
|
||
id: "self_defined_element",
|
||
width: 300,
|
||
height: 300,
|
||
},
|
||
{
|
||
redirect_uri: encodeURIComponent("http://localhost:9999/#/login"),
|
||
// redirect_uri: encodeURIComponent("https://hxhl.lzyyj.com/#/login"),
|
||
client_id: "dingxei2cpv2pfq9rmhx",
|
||
scope: "openid",
|
||
response_type: "code",
|
||
state: "xxxxxxxxx",
|
||
prompt: "consent",
|
||
},
|
||
(loginResult) => {
|
||
const { redirectUrl, authCode, state } = loginResult;
|
||
// 这里可以直接进行重定向
|
||
// window.location.href = redirectUrl;
|
||
this.loginToObtain(authCode);
|
||
// 也可以在不跳转页面的情况下，使用code进行授权
|
||
},
|
||
(errorMsg) => {
|
||
// 这里一般需要展示登录失败的具体原因
|
||
alert(`Login Error: ${errorMsg}`);
|
||
}
|
||
);
|
||
},
|
||
},
|
||
destroyed() {
|
||
clearInterval(this.time.fun);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
|
||
.self-defined-classname {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
.login {
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
position: relative;
|
||
.vue-particles {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(
|
||
ellipse at top left,
|
||
rgba(105, 155, 200, 1) 0%,
|
||
rgba(181, 197, 216, 1) 57%
|
||
);
|
||
}
|
||
.login-weaper {
|
||
margin: auto;
|
||
height: 500px;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 1;
|
||
border: none;
|
||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||
.login-left {
|
||
width: 491px;
|
||
padding: 20px;
|
||
font-size: 16px;
|
||
color: var(--prev-color-text-white);
|
||
position: relative;
|
||
background-color: var(--prev-color-primary);
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-top-left-radius: 4px;
|
||
border-bottom-left-radius: 4px;
|
||
.login-time {
|
||
width: 100%;
|
||
color: var(--prev-color-text-white);
|
||
opacity: 0.9;
|
||
font-size: 14px;
|
||
overflow: hidden;
|
||
}
|
||
.login-left-box {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 80px 45px;
|
||
.logo {
|
||
font-size: 22px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.title {
|
||
color: var(--prev-color-text-white);
|
||
font-weight: 300;
|
||
letter-spacing: 2px;
|
||
font-size: 16px;
|
||
}
|
||
.msg {
|
||
color: var(--prev-color-text-white);
|
||
font-size: 13px;
|
||
margin-top: 35px;
|
||
.msg-author {
|
||
opacity: 0.6;
|
||
span:last-of-type {
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
.msg-txt {
|
||
margin-top: 15px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.login-right {
|
||
width: 491px;
|
||
padding: 20px;
|
||
position: relative;
|
||
align-items: center;
|
||
display: flex;
|
||
background-color: var(--prev-bg-white);
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
.login-main {
|
||
margin: 0 auto;
|
||
width: 70%;
|
||
.login-title {
|
||
color: var(--prev-color-text-primary);
|
||
margin-bottom: 40px;
|
||
font-weight: 500;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
letter-spacing: 4px;
|
||
}
|
||
.login-form {
|
||
margin: 10px 0;
|
||
i {
|
||
color: var(--prev-color-text-primary);
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 20px !important;
|
||
.login-code {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin: 0 0 0 10px;
|
||
user-select: none;
|
||
.login-code-img {
|
||
margin-top: 2px;
|
||
width: 100px;
|
||
height: 38px;
|
||
border: 1px solid var(--prev-border-color-base);
|
||
color: var(--prev-color-text-primary);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 5px;
|
||
line-height: 38px;
|
||
text-indent: 5px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all ease 0.2s;
|
||
border-radius: 4px;
|
||
&:hover {
|
||
border-color: var(--prev-border-color-hover);
|
||
transition: all ease 0.2s;
|
||
}
|
||
}
|
||
}
|
||
.login-submit {
|
||
width: 100%;
|
||
letter-spacing: 2px;
|
||
}
|
||
}
|
||
}
|
||
.login-menu {
|
||
margin-top: 30px;
|
||
width: 100%;
|
||
text-align: left;
|
||
a {
|
||
color: var(--prev-color-text-secondary);
|
||
font-size: 12px;
|
||
margin: 0 8px;
|
||
text-decoration: none;
|
||
&:hover {
|
||
color: var(--prev-color-primary);
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|