389 lines
15 KiB
HTML
389 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>购物袋</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--bg-body: #f8fafc;
|
||
--text-primary: #0f172a;
|
||
--accent-color: #3b82f6;
|
||
}
|
||
body {
|
||
background: var(--bg-body);
|
||
/* 增加底部留白：TabBar高度(约70px) + 结算栏高度(约70px) + 间距(20px) */
|
||
padding-bottom: 160px;
|
||
font-family: -apple-system, sans-serif;
|
||
}
|
||
|
||
.page-title { padding: 20px 20px 10px; font-weight: 800; font-size: 24px; color: var(--text-primary); }
|
||
|
||
/* 列表项 */
|
||
.cart-item {
|
||
background: #fff;
|
||
margin: 0 16px 16px;
|
||
padding: 16px;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
||
}
|
||
.item-img {
|
||
width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #f1f5f9; flex-shrink: 0;
|
||
}
|
||
.item-info { flex: 1; margin-left: 12px; min-width: 0; /* 防止文本溢出撑开 */ }
|
||
.item-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.item-desc { font-size: 12px; color: #64748b; margin-bottom: 8px; }
|
||
.item-meta { display: flex; justify-content: space-between; align-items: center; }
|
||
.item-price { font-weight: 700; font-size: 15px; }
|
||
|
||
/* 数量微调器 */
|
||
.mini-stepper {
|
||
display: flex; align-items: center; background: #f8fafc; border-radius: 6px; padding: 2px;
|
||
}
|
||
.mini-btn { width: 24px; height: 24px; border: none; background: #fff; color: #64748b; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; }
|
||
.mini-val { font-size: 12px; font-weight: 600; width: 24px; text-align: center; }
|
||
|
||
/* 底部结算栏 */
|
||
.settle-bar {
|
||
position: fixed;
|
||
/* 关键修改：抬高位置，避开TabBar */
|
||
bottom: 85px;
|
||
left: 16px; right: 16px;
|
||
background: #fff; padding: 12px 16px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
z-index: 900; /* 层级低于TabBar(通常999或1000) */
|
||
}
|
||
.total-info span { font-size: 12px; color: #64748b; }
|
||
.total-info strong { font-size: 18px; color: var(--text-primary); margin-left: 4px; }
|
||
.btn-checkout {
|
||
background: var(--text-primary); color: #fff; border: none;
|
||
padding: 10px 24px; border-radius: 10px; font-weight: 600; font-size: 14px;
|
||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
|
||
}
|
||
|
||
/* 底部导航 */
|
||
.mobile-tabbar {
|
||
position: fixed; bottom: 0; left: 0; right: 0;
|
||
background: #fff; padding: 8px 0 20px; /* 适配 iPhone Home Indicator */
|
||
display: flex; justify-content: space-around;
|
||
border-top: 1px solid #f1f5f9;
|
||
z-index: 1000;
|
||
}
|
||
.tab-item {
|
||
text-decoration: none; color: #94a3b8; font-size: 10px;
|
||
display: flex; flex-direction: column; align-items: center; flex: 1;
|
||
}
|
||
.tab-item.active { color: var(--accent-color); }
|
||
.tab-item i { font-size: 24px; margin-bottom: 2px; }
|
||
|
||
/* 空状态 */
|
||
.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; }
|
||
.empty-icon { font-size: 48px; margin-bottom: 16px; display: block; opacity: 0.5; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page-title">购物袋</div>
|
||
<div id="cartList">
|
||
<div class="empty-state">
|
||
<i class="bi bi-cart3 empty-icon"></i>
|
||
<div>加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部结算 -->
|
||
<div class="settle-bar" id="settleBar" style="display: none;">
|
||
<div class="total-info">
|
||
<span>合计</span>
|
||
<strong id="totalPrice">¥0.00</strong>
|
||
</div>
|
||
<button class="btn-checkout" onclick="checkout()">去结算 (<span id="count">0</span>)</button>
|
||
</div>
|
||
|
||
<!-- 导航 -->
|
||
<div class="mobile-tabbar">
|
||
<a href="/index.html" class="tab-item">
|
||
<i class="bi bi-cup-hot"></i>
|
||
<span>点餐</span>
|
||
</a>
|
||
<a href="/cart.html" class="tab-item active">
|
||
<i class="bi bi-bag-fill"></i>
|
||
<span>购物袋</span>
|
||
</a>
|
||
<a href="/orders.html" class="tab-item">
|
||
<i class="bi bi-receipt"></i>
|
||
<span>订单</span>
|
||
</a>
|
||
<a href="/profile.html" class="tab-item">
|
||
<i class="bi bi-person"></i>
|
||
<span>我的</span>
|
||
</a>
|
||
</div>
|
||
|
||
<script src="/static/js/ui-enhancements.js"></script>
|
||
<script src="/static/js/cookie-utils.js"></script>
|
||
<script>
|
||
let cartItems = [];
|
||
let productCache = {};
|
||
let isLoggedIn = false;
|
||
|
||
// 检查用户是否登录
|
||
async function checkLoginStatus() {
|
||
try {
|
||
const res = await UIEnhancements.enhancedFetch('/cart', { credentials: 'include' });
|
||
isLoggedIn = res.data.code === 200;
|
||
return isLoggedIn;
|
||
} catch(e) {
|
||
isLoggedIn = false;
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function init() {
|
||
const loggedIn = await checkLoginStatus();
|
||
|
||
if (loggedIn) {
|
||
// 已登录：从后端API获取
|
||
try {
|
||
const res = await UIEnhancements.enhancedFetch('/cart', { credentials: 'include' });
|
||
const json = res.data;
|
||
if(json.code === 200) {
|
||
cartItems = json.data || [];
|
||
await loadCartItems();
|
||
} else {
|
||
showEmptyState();
|
||
}
|
||
} catch(e) {
|
||
console.error(e);
|
||
showEmptyState();
|
||
}
|
||
} else {
|
||
// 未登录：从cookies读取
|
||
const cookieCart = CookieUtils.getJSON('cartItems') || [];
|
||
if (cookieCart.length > 0) {
|
||
// 需要加载商品详情信息
|
||
cartItems = await loadCartItemsFromCookies(cookieCart);
|
||
await loadCartItems();
|
||
} else {
|
||
showEmptyState();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 从cookies加载购物车商品（需要获取商品详情）
|
||
async function loadCartItemsFromCookies(cookieItems) {
|
||
const items = [];
|
||
for (const item of cookieItems) {
|
||
try {
|
||
// 获取商品详情
|
||
const res = await fetch(`/products/${item.productId}`);
|
||
const json = await res.json();
|
||
if (json.code === 200 && json.data) {
|
||
const product = json.data.product;
|
||
const spec = json.data.specs?.find(s => s.id === item.specId);
|
||
items.push({
|
||
id: `cookie_${item.productId}_${Date.now()}_${Math.random()}`, // 临时ID
|
||
productId: item.productId,
|
||
specId: item.specId,
|
||
quantity: item.quantity,
|
||
customSweetness: item.customSweetness,
|
||
customIce: item.customIce,
|
||
toppings: item.toppings,
|
||
product: product,
|
||
spec: spec
|
||
});
|
||
}
|
||
} catch(e) {
|
||
console.error('加载商品详情失败:', e);
|
||
}
|
||
}
|
||
return items;
|
||
}
|
||
|
||
// 加载购物车商品（计算价格并渲染）
|
||
async function loadCartItems() {
|
||
if (cartItems.length > 0) {
|
||
document.getElementById('settleBar').style.display = 'flex';
|
||
// 预加载价格信息
|
||
await Promise.all(cartItems.map(loadItemPrice));
|
||
render();
|
||
calcTotal();
|
||
} else {
|
||
showEmptyState();
|
||
}
|
||
}
|
||
|
||
function showEmptyState() {
|
||
document.getElementById('cartList').innerHTML = `
|
||
<div class="empty-state">
|
||
<i class="bi bi-cart-x empty-icon"></i>
|
||
<div>购物袋空空如也</div>
|
||
<a href="/index.html" class="btn btn-sm btn-outline-dark mt-3 rounded-pill px-4">去点餐</a>
|
||
</div>
|
||
`;
|
||
document.getElementById('settleBar').style.display = 'none';
|
||
}
|
||
|
||
async function loadItemPrice(item) {
|
||
let price = parseFloat(item.product?.basePrice || 0);
|
||
if(item.spec?.priceAdjust) price += parseFloat(item.spec.priceAdjust);
|
||
|
||
// 解析配料价格
|
||
if(item.toppings) {
|
||
try {
|
||
const tIds = JSON.parse(item.toppings);
|
||
if(tIds.length) {
|
||
if(!productCache[item.productId]) {
|
||
const pr = await fetch(`/products/${item.productId}`);
|
||
const pd = await pr.json();
|
||
productCache[item.productId] = pd.data?.toppings || [];
|
||
}
|
||
tIds.forEach(tid => {
|
||
const t = productCache[item.productId].find(x => x.id == tid);
|
||
if(t) price += parseFloat(t.price);
|
||
});
|
||
}
|
||
} catch(e){}
|
||
}
|
||
item._unitPrice = price;
|
||
}
|
||
|
||
function render() {
|
||
const list = document.getElementById('cartList');
|
||
list.innerHTML = cartItems.map((item, idx) => `
|
||
<div class="cart-item">
|
||
<img src="${item.product?.image || '/static/images/default.jpg'}" class="item-img" onclick="location.href='/product-detail.html?id=${item.product?.id}'">
|
||
<div class="item-info">
|
||
<div class="d-flex justify-content-between">
|
||
<div class="item-name">${item.product?.name}</div>
|
||
<i class="bi bi-x text-muted" style="font-size: 20px; cursor: pointer;" onclick="delItem(${item.id})"></i>
|
||
</div>
|
||
<div class="item-desc">${item.spec?.specName || '默认规格'}</div>
|
||
<div class="item-meta">
|
||
<div class="item-price">¥${item._unitPrice.toFixed(2)}</div>
|
||
<div class="mini-stepper">
|
||
<button class="mini-btn" onclick="updateQty(${item.id}, ${item.quantity-1})">-</button>
|
||
<span class="mini-val">${item.quantity}</span>
|
||
<button class="mini-btn" onclick="updateQty(${item.id}, ${item.quantity+1})">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function calcTotal() {
|
||
// 默认计算所有商品
|
||
let total = 0;
|
||
let count = 0;
|
||
cartItems.forEach(item => {
|
||
if (item._unitPrice !== undefined) {
|
||
total += item._unitPrice * item.quantity;
|
||
count += item.quantity;
|
||
}
|
||
});
|
||
document.getElementById('totalPrice').textContent = `¥${total.toFixed(2)}`;
|
||
document.getElementById('count').textContent = count;
|
||
}
|
||
|
||
async function updateQty(id, qty) {
|
||
if(qty < 1) return;
|
||
// 乐观更新UI
|
||
const item = cartItems.find(i => i.id === id);
|
||
if(item) {
|
||
const oldQty = item.quantity;
|
||
item.quantity = qty;
|
||
render();
|
||
calcTotal();
|
||
|
||
if (isLoggedIn) {
|
||
// 已登录：调用后端接口
|
||
try {
|
||
await fetch(`/cart/${id}?quantity=${qty}`, { method: 'PUT', credentials: 'include' });
|
||
} catch(e) {
|
||
item.quantity = oldQty; // 回滚
|
||
render();
|
||
calcTotal();
|
||
alert('更新失败');
|
||
}
|
||
} else {
|
||
// 未登录：更新cookies
|
||
try {
|
||
let cookieCart = CookieUtils.getJSON('cartItems') || [];
|
||
const cookieItem = cookieCart.find(ci =>
|
||
ci.productId === item.productId &&
|
||
ci.specId === item.specId &&
|
||
ci.customSweetness === item.customSweetness &&
|
||
ci.customIce === item.customIce &&
|
||
ci.toppings === item.toppings
|
||
);
|
||
if (cookieItem) {
|
||
cookieItem.quantity = qty;
|
||
CookieUtils.setJSON('cartItems', cookieCart, 7);
|
||
}
|
||
} catch(e) {
|
||
item.quantity = oldQty; // 回滚
|
||
render();
|
||
calcTotal();
|
||
alert('更新失败');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
async function delItem(id) {
|
||
if(confirm('确认将商品移出购物袋？')) {
|
||
if (isLoggedIn) {
|
||
// 已登录：调用后端接口
|
||
try {
|
||
await fetch(`/cart/${id}`, { method: 'DELETE', credentials: 'include' });
|
||
init();
|
||
} catch(e) {
|
||
alert('操作失败');
|
||
}
|
||
} else {
|
||
// 未登录：从cookies删除
|
||
try {
|
||
const item = cartItems.find(i => i.id === id);
|
||
if (item) {
|
||
let cookieCart = CookieUtils.getJSON('cartItems') || [];
|
||
cookieCart = cookieCart.filter(ci =>
|
||
!(ci.productId === item.productId &&
|
||
ci.specId === item.specId &&
|
||
ci.customSweetness === item.customSweetness &&
|
||
ci.customIce === item.customIce &&
|
||
ci.toppings === item.toppings)
|
||
);
|
||
CookieUtils.setJSON('cartItems', cookieCart, 7);
|
||
init();
|
||
}
|
||
} catch(e) {
|
||
alert('操作失败');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function checkout() {
|
||
// 未登录用户需要先登录
|
||
if (!isLoggedIn) {
|
||
if (confirm('结算需要登录，是否前往登录？')) {
|
||
// 保存当前页面路径，登录后返回
|
||
sessionStorage.setItem('returnUrl', '/cart.html');
|
||
location.href = '/login.html';
|
||
}
|
||
return;
|
||
}
|
||
// 已登录：跳转到结算页面
|
||
location.href = '/checkout.html';
|
||
}
|
||
|
||
init();
|
||
</script>
|
||
</body>
|
||
</html> |