moliparty/peko-admin-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台-登录-取消验证码

Browse Source 
(cherry picked from commit ad73c6c3de1a3e6309c757f0511ce58414f01824)
This commit is contained in:
khalil
2024-07-15 15:50:23 +08:00
parent 00b2bf5917
commit 3e490e2631
1 changed files with 219 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

414
src/views/login/index.vue
View File

@@ -1,44 +1,67 @@
<template>
<div class="page-container">
<div class="main_box" :style="[smsSwitch ? 'height: 350px' : '']">
<div class="login_box">
<div class="login_logo">
<span
style="font-size:24px;color:#222;font-weight:bold;">&nbsp;&nbsp;MOLISTAR&nbsp;管&nbsp;理&nbsp;系&nbsp;统</span>
</div>
<div class="login_form">
<form id="loginForm" method="post">
<input type="hidden" id="smsSwitch" :value="smsSwitch" />
<div class="form-group">
<label for="account" class="t">账&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
<input id="account" name="account" type="text" class="form-control x319 in" autocomplete="off">
</div>
<div class="form-group">
<label for="password" class="t">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
<input id="password" name="password" type="password" class="password form-control x319 in">
</div>
<div v-if="smsSwitch">
<div class="form-group">
<label for="validateCode" class="t">验证码：</label>
<input id="validateCode" name="authCode" type="text" class="form-control x319 in"
style="width: 210px;">
<button type="button" id="validateSend" class="btn btn-primary btn-lg">发送验证码</button>
</div>
</div>
<div class="form-group" style="margin-bottom: 0px;">
<label class="t"></label>
<span class="loginTips"></span>
</div>
<div class="form-group space">
<button type="button" id="loginBtn" class="btn btn-primary btn-lg">登&nbsp;&nbsp;录</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="重&nbsp;&nbsp;置" class="btn btn-default btn-lg">
</div>
</form>
</div>
</div>
<div class="page-container">
<div class="main_box"
:style="[smsSwitch ? 'height: 350px' : '']">
<div class="login_box">
<div class="login_logo">
<span style="font-size:24px;color:#222;font-weight:bold;">&nbsp;&nbsp;MOLISTAR&nbsp;管&nbsp;理&nbsp;系&nbsp;统</span>
</div>
<div class="login_form">
<form id="loginForm"
method="post">
<input type="hidden"
id="smsSwitch"
:value="smsSwitch" />
<div class="form-group">
<label for="account"
class="t">账&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
<input id="account"
name="account"
type="text"
class="form-control x319 in"
autocomplete="off">
</div>
<div class="form-group">
<label for="password"
class="t">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
<input id="password"
name="password"
type="password"
class="password form-control x319 in">
</div>
<div v-if="smsSwitch">
<div class="form-group">
<label for="validateCode"
class="t">验证码：</label>
<input id="validateCode"
name="authCode"
type="text"
class="form-control x319 in"
style="width: 210px;">
<button type="button"
id="validateSend"
class="btn btn-primary btn-lg">发送验证码</button>
</div>
</div>
<div class="form-group"
style="margin-bottom: 0px;">
<label class="t"></label>
<span class="loginTips"></span>
</div>
<div class="form-group space">
<button type="button"
id="loginBtn"
class="btn btn-primary btn-lg">登&nbsp;&nbsp;录</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset"
value="重&nbsp;&nbsp;置"
class="btn btn-default btn-lg">
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
@@ -46,187 +69,188 @@ import store from '@/store';
var sendFlag = true;
export default {
name: "LoginView",
data() {
return {
smsSwitch: true,
};
},
setup() {
return {
name: "LoginView",
data () {
return {
smsSwitch: false,
};
},
setup () {
return {
};
},
created() {
this.smsSwitch = true;
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
var $ul = $('<ul id="bubble-wrapper"/>');
for (var i = 0; i < 10; i++) {
$ul.append($('<li/>'));
}
$("body").append($ul);
var rememberMe = getCookie("wolfbe.remember");
if (rememberMe == 1) {
var account = getCookie("wolfbe.account");
if (account) $("#account").val(account);
}
$("#loginBtn").click(function () {
var account = $("#account").val();
var password = $("#password").val();
if (account.trim() == '') {
$(".loginTips").html("账号不能为空！");
return;
} else if (password.trim() == '') {
$(".loginTips").html("密码不能为空！");
return;
}
password = $.md5(password);
var param = { 'account': account, 'password': password };
var smsSwitch = $('#smsSwitch').val();
console.info('smsSwitch:' + smsSwitch);
if (smsSwitch && smsSwitch == 'true') {
var authCode = $("#validateCode").val();
if (authCode.trim() == '') {
$(".loginTips").html("验证码不能为空！");
return;
}
authCode = $.md5(authCode);
param = { 'account': account, 'password': password, 'authCode': authCode };
}
$.ajax({
type: "post",
url: "/login/login",
data: param,
dataType: "json",
success: function (data) {
console.log("data is: " + data.success);
//刷新验证码
$("#validateImg").click();
if (data.success == 'true') {
console.log('login success!');
var array = new String(data.msg).split('@');
store.dispatch('getUser', array[0]).then(res => {
store.commit('updateUser', {
adminId: array[0],
username: res.username
});
window.location.href = '#/blank';
});
} else {
if (data.msg == "4003" || data.msg == "404") {
if (data.data == "0") {
data.msg = "输入超过次数限制，请联系管理员";
} else {
data.msg = "密码或验证码错误！你今天还有" + data.data + "次重试机会";
}
}
$(".loginTips").html(data.msg).css("padding", "3px 5px");
return false;
}
}
});
});
$("#loginForm :input").not("#rememberAccount").focus(function () {
$(".loginTips").html("").css("padding", "0");
}).keyup(function (e) {
var keyCode = e.which || e.keyCode;
if (keyCode == 13) {
$("#loginBtn").click();
}
});
$("#validateImg").click(function () {
$(this).attr("src", "/admin/kaptcha?t=" + new Date().getTime());
});
$("#validateSend").click(function () {
var account = $("#account").val();
if (account.trim() == '') {
$(".loginTips").html("账号不能为空！");
return;
}
if (sendFlag) {
$.ajax({
type: "post",
url: "/login/sendSmsCode",
data: { 'account': account },
dataType: "json",
success: function (data) {
if (data.code == 200) {
sendSmsSuccess();
} else {
$(".loginTips").html(data.message);
}
}
});
}
});
});
};
},
created () {
this.smsSwitch = false;
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData () {
$(function () {
var $ul = $('<ul id="bubble-wrapper"/>');
for (var i = 0; i < 10; i++) {
$ul.append($('<li/>'));
}
},
$("body").append($ul);
var rememberMe = getCookie("wolfbe.remember");
if (rememberMe == 1) {
var account = getCookie("wolfbe.account");
if (account) $("#account").val(account);
}
$("#loginBtn").click(function () {
var account = $("#account").val();
var password = $("#password").val();
if (account.trim() == '') {
$(".loginTips").html("账号不能为空！");
return;
} else if (password.trim() == '') {
$(".loginTips").html("密码不能为空！");
return;
}
password = $.md5(password);
var param = { 'account': account, 'password': password };
var smsSwitch = $('#smsSwitch').val();
console.info('smsSwitch:' + smsSwitch);
if (smsSwitch && smsSwitch == 'true') {
var authCode = $("#validateCode").val();
if (authCode.trim() == '') {
$(".loginTips").html("验证码不能为空！");
return;
}
authCode = $.md5(authCode);
param = { 'account': account, 'password': password, 'authCode': authCode };
}
$.ajax({
type: "post",
url: "/login/login",
data: param,
dataType: "json",
success: function (data) {
console.log("data is: " + data.success);
//刷新验证码
$("#validateImg").click();
if (data.success == 'true') {
console.log('login success!');
var array = new String(data.msg).split('@');
store.dispatch('getUser', array[0]).then(res => {
store.commit('updateUser', {
adminId: array[0],
username: res.username
});
window.location.href = '#/blank';
});
} else {
if (data.msg == "4003" || data.msg == "404") {
if (data.data == "0") {
data.msg = "输入超过次数限制，请联系管理员";
} else {
data.msg = "密码或验证码错误！你今天还有" + data.data + "次重试机会";
}
}
$(".loginTips").html(data.msg).css("padding", "3px 5px");
return false;
}
}
});
});
$("#loginForm :input").not("#rememberAccount").focus(function () {
$(".loginTips").html("").css("padding", "0");
}).keyup(function (e) {
var keyCode = e.which || e.keyCode;
if (keyCode == 13) {
$("#loginBtn").click();
}
});
$("#validateImg").click(function () {
$(this).attr("src", "/admin/kaptcha?t=" + new Date().getTime());
});
$("#validateSend").click(function () {
var account = $("#account").val();
if (account.trim() == '') {
$(".loginTips").html("账号不能为空！");
return;
}
if (sendFlag) {
$.ajax({
type: "post",
url: "/login/sendSmsCode",
data: { 'account': account },
dataType: "json",
success: function (data) {
if (data.code == 200) {
sendSmsSuccess();
} else {
$(".loginTips").html(data.message);
}
}
});
}
});
});
}
},
};
function sendSmsSuccess() {
if (sendFlag) {
sendFlag = false;
var time = 181;
var timer = setInterval(() => {
time--;
$("#validateSend").html(time + ' 秒');
if (time === 0) {
clearInterval(timer);
$("#validateSend").html('重新获取');
sendFlag = true;
}
}, 1000);
}
function sendSmsSuccess () {
if (sendFlag) {
sendFlag = false;
var time = 181;
var timer = setInterval(() => {
time--;
$("#validateSend").html(time + ' 秒');
if (time === 0) {
clearInterval(timer);
$("#validateSend").html('重新获取');
sendFlag = true;
}
}, 1000);
}
}
//获取cookie的信息
function getCookie(name) {
var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
var arr = document.cookie.match(reg);
if (arr) {
return (arr[2]);
} else {
return null;
}
function getCookie (name) {
var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
var arr = document.cookie.match(reg);
if (arr) {
return (arr[2]);
} else {
return null;
}
}
</script>
<style scoped>
@import '../../css/supersized.css';
@import '../../css/login.css';
@import "../../css/supersized.css";
@import "../../css/login.css";
* {
font-family: "Helvetica Neue", Helvetica, STheiti, 微软雅黑, 宋体, Arial, Tahoma, sans-serif, serif;
font-family: "Helvetica Neue", Helvetica, STheiti, 微软雅黑, 宋体, Arial,
Tahoma, sans-serif, serif;
}
.btn-lg {
padding: 8px 25px;
padding: 8px 25px;
}
#captcha_img {
margin-left: 5px;
margin-left: 5px;
}
.loginTips {
color: red;
font-size: 14px;
margin-left: 10px;
color: red;
font-size: 14px;
margin-left: 10px;
}
#validateSend {
width: 106px;
padding: 6px 17px;
font-size: 14px;
width: 106px;
padding: 6px 17px;
font-size: 14px;
}
</style>