491 lines
15 KiB
Vue
491 lines
15 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> -->
|
||
<el-form class="el-form login-form">
|
||
<el-form-item style="margin-left: 0px" prop="phone">
|
||
<el-input
|
||
type="text"
|
||
:placeholder="$t('message.login.placeholder1')"
|
||
prefix-icon="el-icon-user"
|
||
v-model="loginForm.phone"
|
||
clearable
|
||
autocomplete="off"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item style="margin-left: 0px" prop="code">
|
||
<el-input
|
||
type="code"
|
||
:placeholder="$t('message.login.placeholder2')"
|
||
prefix-icon="el-icon-lock"
|
||
v-model="loginForm.code"
|
||
autocomplete="off"
|
||
:show-code="true"
|
||
>
|
||
</el-input>
|
||
</el-form-item> -->
|
||
<el-form-item style="margin-left: 0px" prop="code">
|
||
<div class="el-row" span="24">
|
||
<div class="el-col el-col-14">
|
||
<el-input
|
||
type="text"
|
||
maxlength="4"
|
||
:placeholder="$t('message.login.placeholder2')"
|
||
prefix-icon="el-icon-lock"
|
||
v-model="loginForm.code"
|
||
clearable
|
||
autocomplete="off"
|
||
></el-input>
|
||
</div>
|
||
<div class="el-col el-col-10">
|
||
<div @click="onClickSendCode" class="login-code">
|
||
<!-- <span class="login-code-img" > -->
|
||
<!-- <i class="el-icon-position">{{ sendText }}</i> -->
|
||
<!-- </span> -->
|
||
<el-button class="el-icon-position" style="width: 100%">{{
|
||
sendText
|
||
}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item style="margin: 40px 0px 0">
|
||
<el-button
|
||
type="primary"
|
||
class="login-submit"
|
||
@click="submitForm"
|
||
:loading="submit.loading"
|
||
>
|
||
<span>{{ $t("message.login.btnText") }}</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<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 { rulesPhone } from "@/com/index.js";
|
||
import { getSmsCaptcha, login } from "./api";
|
||
const LoginApi = useLoginApi();
|
||
|
||
export default {
|
||
name: "login",
|
||
data() {
|
||
return {
|
||
quotationsList,
|
||
quotations: {},
|
||
isView: false,
|
||
submit: {
|
||
loading: false,
|
||
},
|
||
loginForm: {
|
||
phone: "18015724687",
|
||
code: "",
|
||
},
|
||
time: {
|
||
txt: "",
|
||
fun: null,
|
||
},
|
||
sendText: "发送",
|
||
};
|
||
},
|
||
computed: {
|
||
// 获取当前时间
|
||
currentTime() {
|
||
return formatAxis(new Date());
|
||
},
|
||
// 获取布局配置信息
|
||
getThemeConfig() {
|
||
return this.$store.state.themeConfig.themeConfig;
|
||
},
|
||
},
|
||
created() {
|
||
const paragraph = "I think Ruth's dog is cuter than your dog! Ruth";
|
||
console.log(paragraph.replace("Ruth", "my"));
|
||
|
||
this.initTime();
|
||
},
|
||
mounted() {
|
||
this.initRandomQuotations();
|
||
// console.log(localStorage.getItem('user'))
|
||
console.log("this.$store.state.loginConfig");
|
||
console.log(this.$store.state.loginConfig.loginConfig);
|
||
},
|
||
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);
|
||
},
|
||
// 登录按钮点击
|
||
submitForm() {
|
||
console.log(this.$router);
|
||
if (rulesPhone(this.loginForm.phone)) {
|
||
// 判断是否存在手机号验证码
|
||
if (this.loginForm.code) {
|
||
this.submit.loading = true;
|
||
// 登录发请求获取用户信息
|
||
let obj = { ...this.$store.state.loginConfig.loginConfig, ...this.loginForm };
|
||
let formData = new FormData();
|
||
for (let key in obj) {
|
||
formData.append(key, obj[key]);
|
||
}
|
||
this.$store
|
||
.dispatch("loginIn", formData)
|
||
.then((res) => {
|
||
this.$message.success("登录成功！");
|
||
Session.set("token", res.token_type + " " + res.access_token);
|
||
// 设置用户信息 学校信息 班级信息
|
||
let user = this.$store.state.user;
|
||
if (user.campusInfo) {
|
||
if (user.campusInfo.length >= 1) {
|
||
// 说明只有一个校区
|
||
if (user.campusInfo[0].classInfo) {
|
||
this.$store.commit("setSchool", user.campusInfo[0]); // 设置默认校区
|
||
}
|
||
}
|
||
} else {
|
||
// 未查到校区信息
|
||
}
|
||
|
||
this.oldSet();
|
||
})
|
||
.finally((err) => {
|
||
this.submit.loading = false;
|
||
this.sendText = "发送";
|
||
});
|
||
} else {
|
||
this.$message.error("请输入验证码！");
|
||
}
|
||
} else {
|
||
this.$message.error("请输入正确的手机号！");
|
||
}
|
||
},
|
||
// 点击发送验证码
|
||
onClickSendCode() {
|
||
if (rulesPhone(this.loginForm.phone)) {
|
||
if (this.sendText == "发送" || this.sendText == "重新发送") {
|
||
getSmsCaptcha(this.loginForm.phone)
|
||
.then((res) => {
|
||
this.sendText = "发送成功";
|
||
})
|
||
.catch((err) => {
|
||
this.sendText = "重新发送";
|
||
});
|
||
}
|
||
} else {
|
||
this.$message.error("请输入正确的手机号！");
|
||
}
|
||
},
|
||
|
||
oldSet() {
|
||
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.loginForm.phone === "admin") {
|
||
defaultRoles = adminRoles;
|
||
defaultAuthBtnList = adminAuthBtnList;
|
||
} else {
|
||
defaultRoles = testAuthPageList;
|
||
defaultAuthBtnList = testAuthBtnList;
|
||
}
|
||
const userInfos = {
|
||
phone: this.loginForm.phone === "admin" ? "admin" : "test",
|
||
photo:
|
||
this.loginForm.phone === "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,
|
||
};
|
||
// 存储用户信息到浏览器缓存
|
||
Session.set("userInfo", userInfos);
|
||
// 存储用户信息到vuex
|
||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||
PrevLoading.start();
|
||
this.$router.push("/");
|
||
setTimeout(() => {
|
||
this.$message.success(
|
||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||
);
|
||
}, 300);
|
||
},
|
||
},
|
||
destroyed() {
|
||
clearInterval(this.time.fun);
|
||
},
|
||
|
||
/*
|
||
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.loginForm.phone === "admin") {
|
||
defaultRoles = adminRoles;
|
||
defaultAuthBtnList = adminAuthBtnList;
|
||
} else {
|
||
defaultRoles = testAuthPageList;
|
||
defaultAuthBtnList = testAuthBtnList;
|
||
}
|
||
const userInfos = {
|
||
phone: this.loginForm.phone === "admin" ? "admin" : "test",
|
||
photo:
|
||
this.loginForm.phone === "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,
|
||
};
|
||
// 存储 token 到浏览器缓存
|
||
Session.set("token", Math.random().toString(36).substr(0));
|
||
// 存储用户信息到浏览器缓存
|
||
Session.set("userInfo", userInfos);
|
||
// 存储用户信息到vuex
|
||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||
PrevLoading.start();
|
||
this.$router.push("/");
|
||
setTimeout(() => {
|
||
this.$message.success(
|
||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||
);
|
||
}, 300);
|
||
}, 300);
|
||
*/
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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;
|
||
font-weight: 400;
|
||
&: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>
|