325 lines
7.6 KiB
Vue
325 lines
7.6 KiB
Vue
<template>
|
||
<div class="login">
|
||
<div class="title-bg-box">
|
||
<div class="title-bg1 title-bg"></div>
|
||
<div class="title-bg2 title-bg"></div>
|
||
<div class="title-bg3 title-bg"></div>
|
||
</div>
|
||
<header><i class="el-icon-back" @click="turnToHome()"></i></header>
|
||
<div class="logo-box"><img src="../../assets/logo.png" alt class="logo" /></div>
|
||
<div class="login-box">
|
||
<div class="title">获取信息</div>
|
||
<div class="label">教务账号</div>
|
||
<input type="text" name="cid" v-model.trim="cid" />
|
||
<div class="label">教务密码</div>
|
||
<input type="password" name="pwd" v-model.trim="pwd" />
|
||
<div class="label">手机号码(非必填，仅在rush失败时用于更新教务)</div>
|
||
<input type="password" name="phone" v-model.trim="phone" />
|
||
</div>
|
||
<div class="submit-box"><div class="submit" @click="submit()">rushBBBB</div></div>
|
||
<div class="copyRight">
|
||
<p>Version 2.0</p>
|
||
<p>Inspire Studio</p>
|
||
<p>©2020 All Rights Reserved.</p>
|
||
</div>
|
||
<FooterSpace></FooterSpace>
|
||
<el-dialog
|
||
title="服务器开小差了"
|
||
:visible.sync="net_error_dialog"
|
||
width="90%">
|
||
<span>{{net_error_dialog_content}}</span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="net_error_dialog = false">狠心拒绝</el-button>
|
||
<el-button type="primary" @click="openQQ()">欣然接受</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// @ is an alias to /src
|
||
import { mapState, mapActions } from 'vuex';
|
||
import { login } from '@/axios/api.js';
|
||
import { Loading } from 'element-ui';
|
||
import FooterSpace from '@/components/FooterSpace.vue';
|
||
import { getGradeInitData } from '@/lib/utils.js'
|
||
import { encryptMainCode } from '@/lib/aes.js'
|
||
|
||
export default {
|
||
name: 'login',
|
||
data() {
|
||
return {
|
||
cid: '',
|
||
pwd: '',
|
||
phone: '',
|
||
errmsg: '',
|
||
net_error_dialog: false,
|
||
net_error_dialog_content: ''
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(['grade', 'schedule'])
|
||
},
|
||
methods: {
|
||
...mapActions(['setUserInfo', 'setGrade', 'setSchedule', 'setCurrentPage']),
|
||
// 初始化
|
||
init() {
|
||
// 刷新本页vuex
|
||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||
// 设置footerNav
|
||
this.setCurrentPage(["None", this]);
|
||
},
|
||
|
||
// 用户点击rushB
|
||
submit() {
|
||
if (this.cid && this.pwd) {
|
||
// 两者信息都填写了
|
||
let load = Loading.service({
|
||
background: 'rgba(236,245,255,.7)',
|
||
target: document.querySelector('.login')
|
||
});
|
||
let data = {
|
||
cid: this.cid,
|
||
pwd: this.pwd,
|
||
phone: this.phone
|
||
};
|
||
login(data)
|
||
.then(res => {
|
||
// console.log(res)
|
||
this.manageRes(res.data, load);
|
||
})
|
||
.catch(error => {
|
||
console.log(error);
|
||
load.close();
|
||
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
|
||
// 超时
|
||
this.net_error_dialog_content = '可能登陆人数过多，再试试吧，实在不行再加群问问。肥肠感谢！！！'
|
||
} else {
|
||
// 服务器挂了
|
||
this.net_error_dialog_content = '服务器出问题了！快加群告诉群主！！肥肠感谢！！！'
|
||
}
|
||
// 打开加群的dialog
|
||
this.net_error_dialog = true
|
||
});
|
||
|
||
} else {
|
||
// 账户信息不完整
|
||
this.$message.error('请输入完整的账号密码');
|
||
}
|
||
},
|
||
|
||
// 处理服务器返回的数据
|
||
manageRes(data, load) {
|
||
if (data.errcode == 200) {
|
||
// 登录成功
|
||
let user_info = {
|
||
login_time: new Date().getTime(),
|
||
id: data.student_id,
|
||
name: data.student_name,
|
||
cid: this.cid,
|
||
pwd: encryptMainCode(this.pwd)
|
||
};
|
||
// 后端数据，本地数据，初始化数据，有哪个取哪个,
|
||
// 成绩保证只存在初始数据和成功返回的数据两种情况
|
||
let grade = data.grade.errcode == 200 ? data.grade : this.grade ? this.grade : getGradeInitData();
|
||
let schedule = data.schedule.errcode == 200 ? data.schedule : this.schedule ? this.schedule : {};
|
||
// 设置localStorage
|
||
this.setUserInfo([user_info, this]);
|
||
this.setGrade([grade, this]);
|
||
this.setSchedule([schedule, this]);
|
||
// 用户侧处理
|
||
load.close();
|
||
this.$message({
|
||
message: '信息获取成功',
|
||
type: 'success'
|
||
});
|
||
// 跳转回主页
|
||
this.turnToHome();
|
||
} else if (data.errcode == 101) {
|
||
// 用户信息出错
|
||
load.close();
|
||
this.$alert('账号或密码错了，笨', '与我无瓜', {
|
||
confirmButtonText: '阅！'
|
||
});
|
||
} else {
|
||
// 教务挂了
|
||
load.close();
|
||
this.$alert('教务挂了，等通知吧', '与我无瓜', {
|
||
confirmButtonText: '阅！'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 强制跳转回主页
|
||
turnToHome() {
|
||
this.$router.replace('/');
|
||
},
|
||
|
||
// 打开qq群链接
|
||
openQQ() {
|
||
window.open('https://jq.qq.com/?_wv=1027&k=5Jeoz9R');
|
||
}
|
||
},
|
||
created() {
|
||
this.init();
|
||
},
|
||
mounted() {},
|
||
activated() {},
|
||
components: {
|
||
FooterSpace
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss" type="text/scss">
|
||
@import '../../style/main';
|
||
.login {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
background-color: #f8f8f8;
|
||
min-height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.title-bg-box {
|
||
position: absolute;
|
||
width: 120%;
|
||
transform: rotate(-30deg);
|
||
top: -2rem;
|
||
left: -3.2rem;
|
||
.title-bg {
|
||
width: 90%;
|
||
height: 6rem;
|
||
// background-image: linear-gradient(to bottom right, #17e7d7, #5d73e2);
|
||
background-image: $gradualLoginTitle;
|
||
border-radius: 1rem;
|
||
position: absolute;
|
||
}
|
||
.title-bg1 {
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.title-bg2 {
|
||
top: 2rem;
|
||
left: 0rem;
|
||
// box-shadow: -.2rem 0 5px #a1dbe4;
|
||
box-shadow: -0.2rem 0 5px #dde3a1;
|
||
}
|
||
.title-bg3 {
|
||
top: 3rem;
|
||
left: 1rem;
|
||
}
|
||
}
|
||
header {
|
||
width: 85%;
|
||
margin: 0 auto;
|
||
height: 1rem;
|
||
margin-top: 0.5rem;
|
||
color: #fff;
|
||
font-size: 0.8rem;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
.logo-box {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
overflow: hidden;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
margin: 0 auto;
|
||
margin-top: 1rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
img {
|
||
width: 2.3rem;
|
||
height: 2.3rem;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.login-box {
|
||
width: 85%;
|
||
height: 9rem;
|
||
background: #fff;
|
||
margin: 0 auto;
|
||
margin-top: -1rem;
|
||
border-radius: 0.2rem;
|
||
padding: 0.6rem;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 5px 15px #e5e5e5;
|
||
position: relative;
|
||
.title {
|
||
color: #333;
|
||
font-size: 0.6rem;
|
||
font-weight: 600;
|
||
margin-top: 0.6rem;
|
||
}
|
||
.label {
|
||
font-size: 0.3rem;
|
||
margin: 0.5rem 0 0.3rem 0rem;
|
||
color: #909399;
|
||
}
|
||
input {
|
||
font-size: 0.4rem;
|
||
padding: 0.1rem;
|
||
border: none;
|
||
border-bottom: 2px #eee solid;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.submit-box {
|
||
height: 1.2rem;
|
||
width: 85%;
|
||
margin: 0.5rem auto;
|
||
position: relative;
|
||
.submit {
|
||
float: right;
|
||
height: 1.2rem;
|
||
width: 4rem;
|
||
// background-image: linear-gradient(to right, #1be5d2, #5e75e5);
|
||
background-image: $gradualLoginSubmit;
|
||
border-radius: 0.1rem;
|
||
font-size: 0.4rem;
|
||
color: #fff;
|
||
line-height: 1.2rem;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.submit::before {
|
||
content: '';
|
||
display: block;
|
||
background: inherit;
|
||
filter: blur(0.1rem);
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0.1rem;
|
||
left: 0.1rem;
|
||
opacity: 0.4;
|
||
transform-origin: 0 0;
|
||
border-radius: inherit;
|
||
transform: scale(1, 1);
|
||
z-index: -1;
|
||
}
|
||
}
|
||
.copyRight {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin-top: 1.5rem;
|
||
p {
|
||
font-size: 0.3rem;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
</style>
|