yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端登录登出功能做好了

Browse Source
This commit is contained in:
云泽网
2025-05-27 01:30:41 +08:00
parent ab4a36a7cd
commit 770b8c9092
8 changed files with 753 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/user/login.php
+63 -15
View File
@@ -154,16 +154,16 @@
</div>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="account">账号密码</li>
<li lay-id="phone">手机验证码</li>
<li lay-id="wechat">微信登录</li>
<li class="layui-this" lay-id="account">账密登录</li>
<!-- <li lay-id="phone">手机验证码</li>
<li lay-id="wechat">微信登录</li> -->
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="account">
<form action="#" method="post" class="layui-form login-form">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
<input type="text" name="account" required lay-verify="required" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
</div>
@@ -185,7 +185,7 @@
</div>
</form>
</div>
<div class="layui-tab-item" id="phone">
<!-- <div class="layui-tab-item" id="phone">
<form action="#" method="post" class="layui-form login-form">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: 0;">
@@ -216,28 +216,75 @@
<img src="" alt="微信登录" class="layui-img">
<p>点击使用微信登录</p>
</div>
</div>
</div> -->
</div>
</div>
</div>
<script>
layui.use(['form', 'element'], function () {
layui.use(['form', 'element', 'jquery'], function () {
var form = layui.form;
var element = layui.element;
var $ = layui.jquery;
form.on('submit(accountLogin)', function (data) {
console.log(data.field);
$.ajax({
url: '{:url("index/user/login")}',
type: 'POST',
data: data.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
// 存储登录数据，设置7天过期
var expireTime = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
localStorage.setItem('user_account', data.field.account);
localStorage.setItem('user_password', btoa(data.field.password));
localStorage.setItem('expire_time', expireTime);
// 添加登录状态标记
localStorage.setItem('is_auto_login', 'true');
layer.msg('登录成功', {
icon: 1,
time: 2000,
shade: 0.3
}, function () {
window.location.href = '{:url("/")}';
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
form.on('submit(phoneLogin)', function (data) {
console.log(data.field);
return false;
// 页面加载时检查是否有保存的登录数据
$(function () {
var expireTime = localStorage.getItem('expire_time');
var isAutoLogin = localStorage.getItem('is_auto_login');
if (expireTime && new Date().getTime() < expireTime && isAutoLogin === 'true') {
$('input[name="account"]').val(localStorage.getItem('user_account'));
$('input[name="password"]').val(atob(localStorage.getItem('user_password')));
} else {
// 如果过期或未开启自动登录，清除数据
localStorage.removeItem('user_account');
localStorage.removeItem('user_password');
localStorage.removeItem('expire_time');
localStorage.removeItem('is_auto_login');
}
});
document.getElementById('getCode').addEventListener('click', function () {
console.log('获取验证码');
});
// form.on('submit(phoneLogin)', function (data) {
// console.log(data.field);
// return false;
// });
// document.getElementById('getCode').addEventListener('click', function () {
// console.log('获取验证码');
// });
});
</script>
@@ -245,8 +292,9 @@
.layui-form-item a {
color: #409eff;
}
.layui-form-item a:hover {
color:rgb(58, 125, 196);
color: rgb(58, 125, 196);
}
</style>
</body>