初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,420 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user