继续完善前端登录模块

This commit is contained in:
2025-05-27 11:29:06 +08:00
parent 9352fd2a75
commit b8d3757397
18 changed files with 2574 additions and 286 deletions
+43 -94
View File
@@ -1,21 +1,21 @@
<?php
// 获取当前登录状态
$isLoggedIn = false;
$userInfo = [
'is_login' => false,
'name' => '',
'avatar' => '/static/images/avatar.png' // 默认头像
];
// 检查session
if (session('user_id')) {
// 检查cookie
$userAccount = cookie('user_account');
if ($userAccount) {
$isLoggedIn = true;
}
// 如果session未登录,检查cookie
else {
$userAccount = cookie('user_account');
if ($userAccount) {
// 恢复session
session('user_id', cookie('user_id'));
session('user_name', cookie('user_name'));
session('user_avatar', cookie('user_avatar'));
$isLoggedIn = true;
}
$userInfo = [
'is_login' => true,
'name' => cookie('user_name'),
'avatar' => cookie('user_avatar') ? cookie('user_avatar') : '/static/images/avatar.png'
];
}
// 添加一个隐藏的div来存储登录状态
@@ -23,44 +23,13 @@ $loginStatus = [
'isLoggedIn' => $isLoggedIn,
'userAccount' => $userAccount ?? ''
];
$userInfo = [
'is_login' => $isLoggedIn,
'name' => session('user_name'),
'avatar' => session('user_avatar') ? '/static/uploads/avatar/' . session('user_avatar') : '/static/images/avatar.png'
];
?>
<!-- 添加一个隐藏的div来存储登录状态 -->
<div id="loginStatus" style="display: none;"
data-is-logged-in="{$isLoggedIn}"
data-user-account="{$userAccount ?? ''}">
<div id="loginStatus" style="display: none;" data-is-logged-in="{$isLoggedIn}" data-user-account="{$userAccount ?? ''}">
</div>
<div style="display: flex;flex-direction: column;">
<div class="topbar-one">
<div class="container">
<div style="width: 70%;">
<ul class="list-unstyled topbar-one__info">
<li class="topbar-one__info__item">
<span class="topbar-one__info__icon fas fa-phone-alt" style="margin-right: 10px;"></span>
<a href="{$config['admin_phone']}">{$config['admin_phone']}</a>
</li>
<li class="topbar-one__info__item">
<span class="topbar-one__info__icon fas fa-envelope" style="margin-right: 10px;"></span>
<a href="mailto:{$config['admin_email']}">{$config['admin_email']}</a>
</li>
</ul>
</div>
<div class="topbar-one__social" style="width: 30%;">
<a href="javascript:;" class="qrcode-trigger"><i class="layui-icon layui-icon-qrcode"></i> 公众号</a>
<div class="qrcode-popup"
style="display:none;position:absolute;right:54px;top:32px;background:#fff;padding:10px;box-shadow:0 0 10px rgba(0,0,0,0.1); z-index: 1000;">
<img src="{$config['admin_wechat']}" alt="公众号二维码" style="width:180px;height:180px;">
</div>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="main-menu">
<div class="container">
@@ -76,11 +45,16 @@ $userInfo = [
</ul>
</div>
<div class="main-menu__right">
<div class="username">
<?php if ($userInfo['is_login']): ?>
<span class="username-text">{$userInfo.name}</span>
<?php endif; ?>
</div>
<div class="layui-inline">
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<div class="layui-inline" style="position: relative;">
<img src="/static/images/avatar.png" class="layui-circle"
<div class="layui-inline" style="position: relative;margin-left:20px;">
<img src="{$userInfo.avatar}" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
@@ -127,11 +101,16 @@ $userInfo = [
</div>
<div class="sticky-nav__right">
<div class="main-menu__right">
<div class="username">
<?php if ($userInfo['is_login']): ?>
<span class="username-text">{$userInfo.name}</span>
<?php endif; ?>
</div>
<div class="layui-inline">
<!-- 根据登录状态显示不同的内容 -->
<?php if ($isLoggedIn): ?>
<div class="layui-inline" style="position: relative;">
<img src="/static/images/avatar.png" class="layui-circle"
<div class="layui-inline" style="position: relative;margin-left:20px;">
<img src="{$userInfo.avatar}" class="layui-circle"
style="width: 40px; height: 40px; cursor: pointer;" id="userAvatarSticky">
<div class="user-dropdown" id="userDropdownSticky">
<ul>
@@ -361,11 +340,21 @@ $userInfo = [
#test10 [carousel-item]>* {
background: none !important;
}
.main-menu__right {
display: flex;
align-items: center;
}
.username {
display: flex;
align-items: center;
}
</style>
<script>
// 在页面加载时立即执行
(function() {
(function () {
// 检查是否已经刷新过
if (sessionStorage.getItem('has_refreshed') === 'true') {
return;
@@ -376,16 +365,16 @@ $userInfo = [
if (userAccount) {
// 同步到cookie
document.cookie = "user_account=" + userAccount + "; path=/";
// 如果有其他必要的数据,也同步到cookie
var userId = localStorage.getItem('user_id');
var userName = localStorage.getItem('user_name');
var userAvatar = localStorage.getItem('user_avatar');
if (userId) document.cookie = "user_id=" + userId + "; path=/";
if (userName) document.cookie = "user_name=" + userName + "; path=/";
if (userAvatar) document.cookie = "user_avatar=" + userAvatar + "; path=/";
// 刷新页面以应用新的cookie,并标记已刷新
if (!document.cookie.includes('user_id')) {
sessionStorage.setItem('has_refreshed', 'true');
@@ -453,46 +442,6 @@ $userInfo = [
// 页面加载时检查自动登录
checkAutoLogin();
// 加载banner数据
$.ajax({
url: '/index/index/bannerlist',
type: 'GET',
success: function (res) {
if (res.code === 1) {
var bannerHtml = '';
res.banner.forEach(function (banner) {
bannerHtml += '<div>' +
'<div class="banner-content">' +
'<div class="banner-image">' +
'<img src="' + banner.image + '" alt="' + (banner.title || '') + '">' +
'</div>' +
'<div class="banner-text">' +
'<span class="banner-title">' + (banner.title || '') + '</span>' +
'<span class="banner-desc">' + (banner.desc || '') + '</span>' +
'<a href="' + (banner.url || 'javascript:;') + '" class="banner-slide">' +
'<span class="banner-btn">查看详情</span>' +
'</a>' +
'</div>' +
'</div>' +
'</div>';
});
$('#test10 div[carousel-item]').html(bannerHtml);
// 图片轮播
carousel.render({
elem: '#test10',
width: '100%',
height: '100vh',
interval: 4000,
anim: 'fade',
autoplay: true,
full: false,
arrow: 'hover'
});
}
}
});
$(document).ready(function () {
// 主导航头像
$("#userAvatarMain").click(function (e) {
@@ -628,7 +577,7 @@ $userInfo = [
}, function () {
// 获取当前页面URL
var currentUrl = window.location.href;
// 如果当前页面是登录页面,则跳转到首页
if (currentUrl.includes('/index/user/login')) {
window.location.href = '/index.html';