'normal'

src/view/login/login.vue

@@ -1,144 +1,134 @@
 <template>
-  <div id="userLayout" class="user-layout-wrapper">
-    <div class="container">
-      <div class="top">
-        <div class="desc">
-          <img class="logo_login" src="@/assets/logo.png" alt="" style="width: 200px;border-radius: 50%;" />
-        </div>
-        <div class="header">
-          <a href="/">
-            <!-- <img src="~@/assets/logo.png" class="logo" alt="logo" /> -->
-            <span class="title">学习管理后台</span>
-          </a>
-        </div>
-      </div>
-      <div class="main">
-        <el-form
-          :model="loginForm"
-          :rules="rules"
-          ref="loginForm"
-          @keyup.enter.native="submitForm"
-        >		
-				
-          <el-form-item prop="username">
-            <el-input placeholder="请输入用户名" v-model="loginForm.username">
-              <i class="el-input__icon el-icon-user" slot="suffix"></i
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              :type="lock === 'lock' ? 'password' : 'text'"
-              placeholder="请输入密码"
-              v-model="loginForm.password"
-            >
-              <i
-                :class="'el-input__icon el-icon-' + lock"
-                @click="changeLock"
-                slot="suffix"
-              ></i>
-            </el-input>
-          </el-form-item>
-          <el-form-item style="position: relative">
-            <el-input
-              v-model="loginForm.captcha"
-              name="logVerify"
-              placeholder="请输入验证码"
-              style="width: 60%"
-            />
-            <div class="vPic">
-              <img
-                v-if="picPath"
-                :src="picPath"
-                width="100%"
-                height="100%"
-                alt="请输入验证码"
-                @click="loginVefify()"
-              />
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="submitForm" style="width: 100%"
-              >登 录</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-  </div>
+	<div id="userLayout" class="user-layout-wrapper">
+		<div class="container">
+			<div class="top">
+				<div class="desc">
+					<img class="logo_login" src="@/assets/logo.png" alt="" style="width: 200px;border-radius: 50%;" />
+				</div>
+				<div class="header">
+					<a href="/">
+						<!-- <img src="~@/assets/logo.png" class="logo" alt="logo" /> -->
+						<span class="title">学习管理后台</span>
+					</a>
+				</div>
+			</div>
+			<div class="main">
+				<el-form :model="loginForm" :rules="rules" ref="loginForm" @keyup.enter.native="submitForm">
+					<el-form-item prop="role">
+						<el-select placeholder="请选择角色" v-model="loginForm.role">
+							<el-option label="教师端" value="teacher"></el-option>
+							<el-option label="管理端" value="admin"></el-option>
+							<el-option label="学习中心端" value="user"></el-option>
+						</el-select>
+					</el-form-item>
+
+					<el-form-item prop="username">
+						<el-input placeholder="请输入用户名" v-model="loginForm.username">
+							<i class="el-input__icon el-icon-user" slot="suffix"></i></el-input>
+					</el-form-item>
+					<el-form-item prop="password">
+						<el-input :type="lock === 'lock' ? 'password' : 'text'" placeholder="请输入密码" v-model="loginForm.password">
+							<i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
+						</el-input>
+					</el-form-item>
+					<el-form-item style="position: relative" prop="captcha">
+						<el-input v-model="loginForm.captcha" name="logVerify" placeholder="请输入验证码" style="width: 60%" />
+						<div class="vPic">
+							<img v-if="picPath" :src="picPath" width="100%" height="100%" alt="请输入验证码" @click="loginVefify()" />
+						</div>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="submitForm" style="width: 100%">登 录</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { mapActions } from "vuex";
-import { captcha } from "@/api/user";
-export default {
-  name: "Login",
-  data() {
-    const checkPassword = (rule, value, callback) => {
-      if (value.length < 6 || value.length > 32) {
-        return callback(new Error("请输入正确的密码"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      curYear: 0,
-      lock: "lock",
-      loginForm: {
-        username: "",
-        password: "",
-		role:'admin',
-        captcha: "",
-        captchaId: "",
-      },
-      rules: {
-		role: [{ required: true, trigger: "blur" }],
-        username: [{ required: true, trigger: "blur" }],
-        password: [{ validator: checkPassword, trigger: "blur" }],
-      },
-      logVerify: "",
-      picPath: "",
-    };
-  },
-  created() {
-    this.loginVefify();
-    this.curYear = new Date().getFullYear();
-  },
-  methods: {
-    ...mapActions("user", ["LoginIn"]),
-    async login() {
-      return await this.LoginIn(this.loginForm);
-    },
-    async submitForm() {
-      this.$refs.loginForm.validate(async (v) => {
-        if (v) {
-          const flag = await this.login();
-          if (!flag) {
-            this.loginVefify();
-          }
-        } else {
-          this.$message({
-            type: "error",
-            message: "请正确填写登录信息",
-            showClose: true,
-          });
-          this.loginVefify();
-          return false;
-        }
-      });
-    },
-    changeLock() {
-      this.lock === "lock" ? (this.lock = "unlock") : (this.lock = "lock");
-    },
-    loginVefify() {
-      captcha({}).then((ele) => {
-        this.picPath = ele.data.picPath;
-        this.loginForm.captchaId = ele.data.captchaId;
-      });
-    },
-  },
-};
+	import {
+		mapActions
+	} from "vuex";
+	import {
+		captcha
+	} from "@/api/user";
+	export default {
+		name: "Login",
+		data() {
+			const checkPassword = (rule, value, callback) => {
+				if (value.length < 6 || value.length > 32) {
+					return callback(new Error("请输入正确的密码"));
+				} else {
+					callback();
+				}
+			};
+			return {
+				curYear: 0,
+				lock: "lock",
+				loginForm: {
+					username: "",
+					password: "",
+					role: 'admin',
+					captcha: "",
+					captchaId: "",
+				},
+				rules: {
+					role: [{
+						required: true,
+						message: "请选择角色",
+						trigger: "blur"
+					}],
+					captcha: [{
+						required: true,
+						message: "请输入校验码",
+						trigger: "blur"
+					}],
+					username: [{
+						required: true,
+						message: "请输入用户名",
+						trigger: "blur"
+					}],
+					password: [{
+						validator: checkPassword,
+						trigger: "blur"
+					}],
+				},
+				logVerify: "",
+				picPath: "",
+			};
+		},
+		created() {
+			this.loginVefify();
+			this.curYear = new Date().getFullYear();
+		},
+		methods: {
+			...mapActions("user", ["LoginIn"]),
+			async login() {
+				return await this.LoginIn(this.loginForm);
+			},
+			async submitForm() {
+				this.$refs.loginForm.validate(async (v) => {
+					if (!v) return;
+					const flag = await this.login();
+					if (!flag) {
+						this.loginVefify();
+					}
+				});
+			},
+			changeLock() {
+				this.lock === "lock" ? (this.lock = "unlock") : (this.lock = "lock");
+			},
+			loginVefify() {
+				captcha({}).then((ele) => {
+					this.picPath = ele.data.picPath;
+					this.loginForm.captchaId = ele.data.captchaId;
+				});
+			},
+		},
+	};
 </script>
 
 <style scoped lang="scss">
-@import "@/style/login.scss";
+	@import "@/style/login.scss";
 </style>