|
|
@@ -25,6 +25,26 @@
|
|
|
<i class="icon icon-lock" slot="prefix"></i
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="code">
|
|
|
+ <div class="vlcode">
|
|
|
+ <div class="vlcode-right">
|
|
|
+ <el-button
|
|
|
+ style="width:100%;"
|
|
|
+ :type="isFetchingCode ? 'default' : 'primary'"
|
|
|
+ @click="fetchSmsCode"
|
|
|
+ :disabled="isFetchingCode"
|
|
|
+ >{{ codeContent }}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="vlcode-left">
|
|
|
+ <el-input
|
|
|
+ v-model.trim="loginModel.code"
|
|
|
+ placeholder="请输入手机验证码"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button
|
|
|
style="width:116px;"
|
|
|
@@ -39,23 +59,54 @@
|
|
|
</div>
|
|
|
<div class="login-shadow-top"></div>
|
|
|
<div class="login-shadow-bottom"></div>
|
|
|
+
|
|
|
+ <!-- 修改密码 -->
|
|
|
+ <reset-pwd
|
|
|
+ :user-password="loginModel.password"
|
|
|
+ @modified="logoutAction"
|
|
|
+ ref="ResetPwd"
|
|
|
+ ></reset-pwd>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { password } from "@/plugins/formRules";
|
|
|
-import { login } from "../api";
|
|
|
+import { password, smscode } from "@/plugins/formRules";
|
|
|
+import { login, getSmsCode } from "../api";
|
|
|
import { AES } from "@/plugins/crypto";
|
|
|
|
|
|
+import ResetPwd from "@/modules/base/components/ResetPwd";
|
|
|
+
|
|
|
+const wstorage = {
|
|
|
+ set(key, value, expire = null) {
|
|
|
+ window.localStorage.setItem(key, JSON.stringify({ value, expire }));
|
|
|
+ },
|
|
|
+ get(key, defaultVal = null) {
|
|
|
+ const lsvalue = JSON.parse(window.localStorage.getItem(key));
|
|
|
+ return lsvalue && (!lsvalue.expire || lsvalue.expire > new Date().getTime())
|
|
|
+ ? lsvalue.value
|
|
|
+ : defaultVal;
|
|
|
+ },
|
|
|
+ remove(key) {
|
|
|
+ window.localStorage.removeItem(key);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const codeWaitingTime = 60;
|
|
|
+const nameWaitTime = "login";
|
|
|
+
|
|
|
export default {
|
|
|
name: "login",
|
|
|
+ components: { ResetPwd },
|
|
|
data() {
|
|
|
return {
|
|
|
+ nameWaitTime,
|
|
|
loginModel: {
|
|
|
loginName: "",
|
|
|
+ code: "",
|
|
|
password: ""
|
|
|
},
|
|
|
loginRules: {
|
|
|
+ code: smscode,
|
|
|
loginName: [
|
|
|
{
|
|
|
required: true,
|
|
|
@@ -66,11 +117,17 @@ export default {
|
|
|
password
|
|
|
},
|
|
|
roles: [],
|
|
|
- isSubmit: false
|
|
|
+ isSubmit: false,
|
|
|
+ // code
|
|
|
+ isFetchingCode: false,
|
|
|
+ codeContent: "获取验证码",
|
|
|
+ codeWaitingTime,
|
|
|
+ time: codeWaitingTime
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$ls.clear();
|
|
|
+ this.setWaitingTime();
|
|
|
},
|
|
|
methods: {
|
|
|
async submit(name) {
|
|
|
@@ -81,20 +138,107 @@ export default {
|
|
|
this.isSubmit = true;
|
|
|
const data = await login({
|
|
|
loginName: this.loginModel.loginName,
|
|
|
- password: AES(this.loginModel.password)
|
|
|
+ password: AES(this.loginModel.password),
|
|
|
+ code: this.loginModel.code
|
|
|
}).catch(() => {});
|
|
|
this.isSubmit = false;
|
|
|
if (!data) return;
|
|
|
|
|
|
data.account.roleCode = data.roles.map(item => item.roleCode).join();
|
|
|
|
|
|
- this.$ls.set("token", data.token, this.GLOBAL.authTimeout);
|
|
|
this.$ls.set("schoolId", data.account.schoolId, this.GLOBAL.authTimeout);
|
|
|
this.$ls.set("user", data.account, this.GLOBAL.authTimeout);
|
|
|
+
|
|
|
+ if (
|
|
|
+ data.account.roleCode.includes("QUESTION_TEACHER") &&
|
|
|
+ !data.account.pwChangedCount
|
|
|
+ ) {
|
|
|
+ this.$refs.ResetPwd.open();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$ls.set("token", data.token, this.GLOBAL.authTimeout);
|
|
|
this.$store.commit("setUser", data.account);
|
|
|
this.$router.push({
|
|
|
name: "Home"
|
|
|
});
|
|
|
+ },
|
|
|
+ // code valid
|
|
|
+ setWaitingTime() {
|
|
|
+ let codetime = wstorage.get(this.nameWaitTime);
|
|
|
+ if (codetime) {
|
|
|
+ let num = Math.floor((codetime.expire - new Date().getTime()) / 1000);
|
|
|
+ if (num > 0) {
|
|
|
+ this.time = num;
|
|
|
+ this.isFetchingCode = true;
|
|
|
+ this.changeContent();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkField(field) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$refs.loginForm.validateField(field, unvalid => {
|
|
|
+ if (unvalid) {
|
|
|
+ reject();
|
|
|
+ } else {
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async fetchSmsCode() {
|
|
|
+ const validAll = [
|
|
|
+ this.checkField("loginName"),
|
|
|
+ this.checkField("password")
|
|
|
+ ];
|
|
|
+
|
|
|
+ let result = true;
|
|
|
+ await Promise.all(validAll).catch(() => {
|
|
|
+ result = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!result) return;
|
|
|
+
|
|
|
+ this.isFetchingCode = true;
|
|
|
+ const data = await getSmsCode({
|
|
|
+ loginName: this.loginModel.loginName,
|
|
|
+ password: this.loginModel.password
|
|
|
+ }).catch(() => {
|
|
|
+ this.isFetchingCode = false;
|
|
|
+ });
|
|
|
+ if (!data) return;
|
|
|
+ this.$message.success(
|
|
|
+ `已向手机号【${data.phone}】成功发送短信，请在2分钟内进行验证！`
|
|
|
+ );
|
|
|
+ this.changeContent();
|
|
|
+ },
|
|
|
+ changeContent() {
|
|
|
+ if (!this.isFetchingCode) return;
|
|
|
+ this.codeContent = "倒计时" + this.time + "s";
|
|
|
+ const circleTime = time => {
|
|
|
+ let t = setInterval(() => {
|
|
|
+ if (time > 1) {
|
|
|
+ time--;
|
|
|
+ let expire = new Date().getTime() + time * 1000;
|
|
|
+ wstorage.set(
|
|
|
+ this.nameWaitTime,
|
|
|
+ {
|
|
|
+ time,
|
|
|
+ expire
|
|
|
+ },
|
|
|
+ expire
|
|
|
+ );
|
|
|
+ this.codeContent = "倒计时" + time + "s";
|
|
|
+ } else {
|
|
|
+ this.time = this.codeWaitingTime;
|
|
|
+ wstorage.remove(this.nameWaitTime);
|
|
|
+ this.codeContent = "获取验证码";
|
|
|
+ this.isFetchingCode = false;
|
|
|
+ clearInterval(t);
|
|
|
+ }
|
|
|
+ }, 1e3);
|
|
|
+ };
|
|
|
+ circleTime(this.time);
|
|
|
}
|
|
|
}
|
|
|
};
|
zhangjie