|
|
@@ -1,9 +1,11 @@
|
|
|
<template>
|
|
|
- <div class="login-container" v-if="configInfor">
|
|
|
+ <div class="login-container">
|
|
|
<div class="login-left">
|
|
|
<div class="login-texts">
|
|
|
<p>
|
|
|
- <span>{{ configInfor ? `${configInfor.title}-` : "" }}教研中心</span>
|
|
|
+ <span
|
|
|
+ >{{ configInfor ? `${configInfor.title}-` : "" }}教材管理系统</span
|
|
|
+ >
|
|
|
</p>
|
|
|
</div>
|
|
|
<el-form
|
|
|
@@ -49,6 +51,22 @@
|
|
|
/>
|
|
|
</span>-->
|
|
|
</el-form-item>
|
|
|
+ <p class="input-title">验证码</p>
|
|
|
+ <div class="verificationCode-box">
|
|
|
+ <el-form-item prop="verificationCode">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ name="verificationCode"
|
|
|
+ ref="verificationCode"
|
|
|
+ tabindex="3"
|
|
|
+ type="text"
|
|
|
+ v-model="loginForm.verificationCode"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="verificationCode-img">
|
|
|
+ <img v-if="verificationCodeimg&&verificationCodeLoading" :src="verificationCodeimg" alt="图形验证码" @click="getVerificationCodeimg"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<p class="input-title">用户类型</p>
|
|
|
<el-form-item class="el-form-item-type" prop="type">
|
|
|
<el-radio label="TEACHER" v-model="loginForm.type">教师</el-radio>
|
|
|
@@ -80,14 +98,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { validUsername, validPass } from "@/utils/validate";
|
|
|
-import { getStaticContent } from "@/api/api";
|
|
|
-import { getObjArr, saveObjArr } from "@/utils/role";
|
|
|
-import Cookies from "js-cookie";
|
|
|
+import { validUsername } from "@/utils/validate";
|
|
|
+import { getStaticContent, getLogin } from "@/api/api";
|
|
|
+import { getObjArr } from "@/utils/role";
|
|
|
import { setToken } from "@/utils/auth";
|
|
|
-import { getConfigInfor } from "@/utils/index";
|
|
|
import { removeSession } from "@/utils/role";
|
|
|
-
|
|
|
+import { getConfigInfor } from "@/utils/index";
|
|
|
+import md5 from 'js-md5'
|
|
|
export default {
|
|
|
name: "Login",
|
|
|
data() {
|
|
|
@@ -105,6 +122,13 @@ export default {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
+ const validateVerificationCode = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error("请输入验证码"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
return {
|
|
|
options: [],
|
|
|
select: "1",
|
|
|
@@ -115,6 +139,7 @@ export default {
|
|
|
username: getObjArr("userName") || "",
|
|
|
password: "",
|
|
|
type: "TEACHER",
|
|
|
+ verificationCode:''
|
|
|
},
|
|
|
//input 规则
|
|
|
loginRules: {
|
|
|
@@ -124,12 +149,18 @@ export default {
|
|
|
password: [
|
|
|
{ required: true, trigger: "blur", validator: validatePassword },
|
|
|
],
|
|
|
+ verificationCode: [
|
|
|
+ { required: true, trigger: "blur", validator: validateVerificationCode },
|
|
|
+ ]
|
|
|
},
|
|
|
loading: false,
|
|
|
passwordType: "password",
|
|
|
redirect: undefined,
|
|
|
loginCheck: "login",
|
|
|
configInfor: null,
|
|
|
+ verificationCodeimg: '', // 图形验证码
|
|
|
+ verificationCodeimgID: '', // 图形验证码ID
|
|
|
+ verificationCodeLoading: true, // 图形验证码的flag
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -158,26 +189,22 @@ export default {
|
|
|
if (valid) {
|
|
|
this.loading = true;
|
|
|
let MethodName = "login_control-Login";
|
|
|
- let UserCode = "";
|
|
|
- let UserType = "";
|
|
|
- let SessionID = "";
|
|
|
let data = {
|
|
|
user_type: this.loginForm.type,
|
|
|
user_name: this.loginForm.username,
|
|
|
- password: this.loginForm.password,
|
|
|
+ is_password_md5: "true",
|
|
|
+ password: md5(this.loginForm.password).toUpperCase(),
|
|
|
+ verification_code_image_text: this.loginForm.verificationCode,
|
|
|
+ verification_code_image_id: this.verificationCodeimgID
|
|
|
};
|
|
|
- getStaticContent(MethodName, data)
|
|
|
+ getLogin(MethodName, data)
|
|
|
.then((res) => {
|
|
|
setToken(res);
|
|
|
- // 判断有没有包含教研管理的权限码 如果有就是管理员身份前往录入，没有就是普通教师前往首页
|
|
|
- if (res.popedom_code_list.indexOf(2000006) != -1) {
|
|
|
- this.$router.push("/teacherdevEntering");
|
|
|
- } else {
|
|
|
- this.$router.push({ path: "/" });
|
|
|
- }
|
|
|
+ this.$router.push({ path: "/EnterSys" });
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.loading = false;
|
|
|
+ this.getVerificationCodeimg()
|
|
|
});
|
|
|
} else {
|
|
|
this.loading = false;
|
|
|
@@ -188,10 +215,29 @@ export default {
|
|
|
async _getConfig() {
|
|
|
this.configInfor = await getConfigInfor();
|
|
|
},
|
|
|
+ // 图形验证码
|
|
|
+ getVerificationCodeimg(){
|
|
|
+ if(!this.verificationCodeLoading) return
|
|
|
+ this.verificationCodeLoading = false
|
|
|
+ let MethodName = "login_control-GetVerificationCodeImage";
|
|
|
+ let data = {};
|
|
|
+ getStaticContent(MethodName, data).then((res) => {
|
|
|
+ if(res){
|
|
|
+ this.verificationCodeLoading = true
|
|
|
+ this.verificationCodeimgID = res.image_id
|
|
|
+ this.verificationCodeimg = 'data:image/jpeg;base64,'+res.image_content_base64
|
|
|
+ }else{
|
|
|
+ this.verificationCodeLoading = true;
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.verificationCodeLoading = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
removeSession("SysList");
|
|
|
this._getConfig();
|
|
|
+ this.getVerificationCodeimg()
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -319,7 +365,6 @@ $fc: rgb(24, 144, 255);
|
|
|
.login-form {
|
|
|
position: relative;
|
|
|
width: 350px;
|
|
|
- margin: 0 auto;
|
|
|
background: #fff;
|
|
|
border-radius: 5px;
|
|
|
padding: 42px;
|
|
|
@@ -426,10 +471,6 @@ $fc: rgb(24, 144, 255);
|
|
|
.login-left {
|
|
|
// flex: 1;
|
|
|
margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
}
|
|
|
.login-right {
|
|
|
// flex: 1;
|
|
|
@@ -442,5 +483,25 @@ $fc: rgb(24, 144, 255);
|
|
|
width: 100%;
|
|
|
vertical-align: bottom;
|
|
|
}
|
|
|
+}
|
|
|
+.verificationCode-box{
|
|
|
+ display: flex;
|
|
|
+ >div{
|
|
|
+ flex: 1;
|
|
|
+ max-width: 171px;
|
|
|
+ &.verificationCode-img{
|
|
|
+ min-width: 90px;
|
|
|
+ height: 34px;
|
|
|
+ margin-left: 5px;
|
|
|
+ flex: initial;
|
|
|
+ background: #C5C5C5;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ >img{
|
|
|
+ height: 34px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
秦鹏