289 lines
11 KiB
Plaintext
289 lines
11 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>${pageTitle} - 秒杀系统</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<style>
|
|
.navbar-brand {
|
|
font-weight: bold;
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
.flash-sale-badge {
|
|
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8em;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.cart-badge {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
background: #dc3545;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 0.7em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #007bff;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.online-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #28a745;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="${pageContext.request.contextPath}/">
|
|
<i class="fas fa-bolt"></i> 秒杀系统
|
|
<span class="flash-sale-badge">FLASH SALE</span>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${pageContext.request.contextPath}/">
|
|
<i class="fas fa-home"></i> 首页
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="productsDropdown" role="button"
|
|
data-bs-toggle="dropdown">
|
|
<i class="fas fa-shopping-bag"></i> 商品
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="${pageContext.request.contextPath}/products">
|
|
<i class="fas fa-th-large"></i> 商品列表
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="${pageContext.request.contextPath}/search">
|
|
<i class="fas fa-search"></i> 商品搜索
|
|
</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="${pageContext.request.contextPath}/category/1">
|
|
<i class="fas fa-tags"></i> 商品分类
|
|
</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-warning fw-bold" href="${pageContext.request.contextPath}/flashsales">
|
|
<i class="fas fa-fire"></i> 秒杀活动
|
|
<span class="badge bg-danger ms-1">HOT</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav">
|
|
<c:choose>
|
|
<c:when test="${not empty sessionScope.user}">
|
|
<!-- 购物车 -->
|
|
<li class="nav-item">
|
|
<a class="nav-link position-relative" href="${pageContext.request.contextPath}/cart">
|
|
<i class="fas fa-shopping-cart"></i> 购物车
|
|
<span class="cart-badge" id="cartCount">0</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- 用户菜单 -->
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="userDropdown"
|
|
role="button" data-bs-toggle="dropdown">
|
|
<div class="user-avatar me-2">
|
|
${sessionScope.user.username.substring(0,1).toUpperCase()}
|
|
</div>
|
|
<span class="online-indicator"></span>
|
|
${sessionScope.user.username}
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="${pageContext.request.contextPath}/orders">
|
|
<i class="fas fa-list-alt"></i> 我的订单
|
|
</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item" href="#" onclick="logout()">
|
|
<i class="fas fa-sign-out-alt"></i> 退出登录
|
|
</a></li>
|
|
</ul>
|
|
</li>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${pageContext.request.contextPath}/login">
|
|
<i class="fas fa-sign-in-alt"></i> 登录
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${pageContext.request.contextPath}/register">
|
|
<i class="fas fa-user-plus"></i> 注册
|
|
</a>
|
|
</li>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 消息提示区域 -->
|
|
<div id="messageContainer" class="container mt-3">
|
|
<!-- 动态消息将在这里显示 -->
|
|
</div>
|
|
|
|
<script>
|
|
// 全局JavaScript函数
|
|
|
|
// 显示消息
|
|
function showMessage(message, type = 'info') {
|
|
const alertClass = {
|
|
'success': 'alert-success',
|
|
'error': 'alert-danger',
|
|
'warning': 'alert-warning',
|
|
'info': 'alert-info'
|
|
}[type] || 'alert-info';
|
|
|
|
const alertHtml = `
|
|
<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
|
|
$('#messageContainer').html(alertHtml);
|
|
|
|
// 3秒后自动消失
|
|
setTimeout(() => {
|
|
$('.alert').alert('close');
|
|
}, 3000);
|
|
}
|
|
|
|
// 退出登录
|
|
function logout() {
|
|
if (confirm('确定要退出登录吗？')) {
|
|
$.post('${pageContext.request.contextPath}/api/user/logout')
|
|
.done(function (response) {
|
|
if (response.success) {
|
|
window.location.href = '${pageContext.request.contextPath}/login';
|
|
} else {
|
|
showMessage(response.message, 'error');
|
|
}
|
|
})
|
|
.fail(function () {
|
|
showMessage('退出登录失败，请重试', 'error');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 更新购物车数量
|
|
function updateCartCount() {
|
|
<c:if test="${not empty sessionScope.user}">
|
|
$.get('${pageContext.request.contextPath}/api/cart/count')
|
|
.done(function (response) {
|
|
if (response.success) {
|
|
$('#cartCount').text(response.data.count);
|
|
}
|
|
});
|
|
</c:if>
|
|
}
|
|
|
|
// 页面加载完成后执行
|
|
$(document).ready(function () {
|
|
updateCartCount();
|
|
|
|
// 每30秒更新一次购物车数量
|
|
setInterval(updateCartCount, 30000);
|
|
});
|
|
|
|
// 格式化价格
|
|
function formatPrice(price) {
|
|
return '¥' + parseFloat(price).toFixed(2);
|
|
}
|
|
|
|
// 格式化时间
|
|
function formatTime(timestamp) {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleString('zh-CN');
|
|
}
|
|
|
|
// 倒计时函数
|
|
function countdown(endTime, elementId) {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) return;
|
|
|
|
function updateCountdown() {
|
|
const now = new Date().getTime();
|
|
const distance = endTime - now;
|
|
|
|
if (distance < 0) {
|
|
element.innerHTML = "已结束";
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
let countdownText = "";
|
|
if (days > 0) countdownText += days + "天 ";
|
|
countdownText += String(hours).padStart(2, '0') + ":" +
|
|
String(minutes).padStart(2, '0') + ":" +
|
|
String(seconds).padStart(2, '0');
|
|
|
|
element.innerHTML = countdownText;
|
|
}
|
|
|
|
updateCountdown();
|
|
const interval = setInterval(updateCountdown, 1000);
|
|
|
|
// 返回清理函数
|
|
return () => clearInterval(interval);
|
|
}
|
|
</script>
|