398 lines
11 KiB
HTML
398 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>购物车</title>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|||
|
|
<script>
|
|||
|
|
tailwind.config = {
|
|||
|
|
theme: {
|
|||
|
|
extend: {
|
|||
|
|
colors: {
|
|||
|
|
primary: '#FF6B35',
|
|||
|
|
secondary: '#FFD93D'
|
|||
|
|
},
|
|||
|
|
borderRadius: {
|
|||
|
|
'none': '0px',
|
|||
|
|
'sm': '2px',
|
|||
|
|
DEFAULT: '4px',
|
|||
|
|
'md': '8px',
|
|||
|
|
'lg': '12px',
|
|||
|
|
'xl': '16px',
|
|||
|
|
'2xl': '20px',
|
|||
|
|
'3xl': '24px',
|
|||
|
|
'full': '9999px',
|
|||
|
|
'button': '4px'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.font-logo {
|
|||
|
|
font-family: 'Pacifico', cursive;
|
|||
|
|
}
|
|||
|
|
.nav-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1000;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
.tab-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1000;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
.content-area {
|
|||
|
|
margin-top: 60px;
|
|||
|
|
margin-bottom: 60px;
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
.product-card {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
|||
|
|
padding: 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
.checkbox {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border: 2px solid #CCCCCC;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.checkbox.checked {
|
|||
|
|
background-color: #FF6B35;
|
|||
|
|
border-color: #FF6B35;
|
|||
|
|
}
|
|||
|
|
.checkbox.checked i {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.quantity-selector {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border: 1px solid #E0E0E0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.quantity-btn {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.quantity-input {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 32px;
|
|||
|
|
text-align: center;
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
.delete-btn {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #999999;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.checkout-btn {
|
|||
|
|
background-color: #FF6B35;
|
|||
|
|
color: white;
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.checkout-btn.disabled {
|
|||
|
|
background-color: #E0E0E0;
|
|||
|
|
color: #999999;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 40px 0;
|
|||
|
|
}
|
|||
|
|
.empty-state img {
|
|||
|
|
width: 160px;
|
|||
|
|
height: 160px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
.empty-state p {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666666;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
.home-btn {
|
|||
|
|
background-color: #FF6B35;
|
|||
|
|
color: white;
|
|||
|
|
padding: 10px 24px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="bg-gray-50">
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<div class="nav-bar h-16 flex items-center justify-between px-4">
|
|||
|
|
<div class="text-lg font-semibold">购物车</div>
|
|||
|
|
<button id="editBtn" class="text-primary font-medium">编辑</button>
|
|||
|
|
</div>
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<div class="content-area">
|
|||
|
|
<!-- 商品列表 -->
|
|||
|
|
<div id="cartItems">
|
|||
|
|
<!-- 商品卡片 1 -->
|
|||
|
|
<div class="product-card flex items-center">
|
|||
|
|
<div class="checkbox mr-3 checked" data-id="1">
|
|||
|
|
<i class="fas fa-check"></i>
|
|||
|
|
</div>
|
|||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/0f74548a92239930f7c8ad61b061b9ff.jpg" alt="商品图片" class="w-20 h-20 object-cover rounded-lg mr-4">
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="font-medium text-gray-900 mb-1">新鲜有机胡萝卜 500g</div>
|
|||
|
|
<div class="text-sm text-gray-500 mb-2">规格：500g 装</div>
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div class="text-primary font-semibold">¥ 12.80</div>
|
|||
|
|
<div class="quantity-selector">
|
|||
|
|
<div class="quantity-btn minus">-</div>
|
|||
|
|
<input type="text" class="quantity-input" value="2" readonly>
|
|||
|
|
<div class="quantity-btn plus">+</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="delete-btn ml-3 hidden">
|
|||
|
|
<i class="fas fa-trash-alt"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 商品卡片 2 -->
|
|||
|
|
<div class="product-card flex items-center">
|
|||
|
|
<div class="checkbox mr-3" data-id="2">
|
|||
|
|
<i class="fas fa-check"></i>
|
|||
|
|
</div>
|
|||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/3cfcb52a871dbf9ae402f13950be8047.jpg" alt="商品图片" class="w-20 h-20 object-cover rounded-lg mr-4">
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="font-medium text-gray-900 mb-1">进口红富士苹果 1kg</div>
|
|||
|
|
<div class="text-sm text-gray-500 mb-2">规格：1kg 装</div>
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div class="text-primary font-semibold">¥ 25.90</div>
|
|||
|
|
<div class="quantity-selector">
|
|||
|
|
<div class="quantity-btn minus">-</div>
|
|||
|
|
<input type="text" class="quantity-input" value="1" readonly>
|
|||
|
|
<div class="quantity-btn plus">+</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="delete-btn ml-3 hidden">
|
|||
|
|
<i class="fas fa-trash-alt"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 商品卡片 3 -->
|
|||
|
|
<div class="product-card flex items-center">
|
|||
|
|
<div class="checkbox mr-3 checked" data-id="3">
|
|||
|
|
<i class="fas fa-check"></i>
|
|||
|
|
</div>
|
|||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/6d22e044f8bfb8a254960685673c0da3.jpg" alt="商品图片" class="w-20 h-20 object-cover rounded-lg mr-4">
|
|||
|
|
<div class="flex-1">
|
|||
|
|
<div class="font-medium text-gray-900 mb-1">纯牛奶 250ml*12 盒</div>
|
|||
|
|
<div class="text-sm text-gray-500 mb-2">规格：整箱装</div>
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div class="text-primary font-semibold">¥ 49.90</div>
|
|||
|
|
<div class="quantity-selector">
|
|||
|
|
<div class="quantity-btn minus">-</div>
|
|||
|
|
<input type="text" class="quantity-input" value="1" readonly>
|
|||
|
|
<div class="quantity-btn plus">+</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="delete-btn ml-3 hidden">
|
|||
|
|
<i class="fas fa-trash-alt"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<div id="emptyState" class="empty-state hidden">
|
|||
|
|
<img src="https://ai-public.mastergo.com/ai/img_res/018fce2680dbe4a8ae1d932b70e5c255.jpg" alt="空购物车">
|
|||
|
|
<p>购物车空空如也</p>
|
|||
|
|
<div class="home-btn">去首页逛逛</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 底部操作栏 -->
|
|||
|
|
<div class="tab-bar h-16 flex items-center px-4">
|
|||
|
|
<div class="checkbox mr-3" id="selectAll">
|
|||
|
|
<i class="fas fa-check"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-1 text-sm">
|
|||
|
|
全选
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<div class="mr-4 text-right">
|
|||
|
|
<div class="text-sm text-gray-500">合计：</div>
|
|||
|
|
<div class="text-lg font-semibold text-primary total-amount">¥ 88.60</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="checkout-btn">去结算 (3)</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 底部标签栏 -->
|
|||
|
|
<div class="tab-bar h-16 flex items-center justify-around px-0 py-2" style="position: fixed; bottom: 0; width: 375px;">
|
|||
|
|
<div class="flex flex-col items-center justify-center w-full h-full">
|
|||
|
|
<div class="flex justify-around w-full">
|
|||
|
|
<div class="flex flex-col items-center justify-center">
|
|||
|
|
<i class="fas fa-home text-xl"></i>
|
|||
|
|
<span class="text-xs mt-1">首页</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col items-center justify-center">
|
|||
|
|
<i class="fas fa-th-large text-xl"></i>
|
|||
|
|
<span class="text-xs mt-1">分类</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col items-center justify-center">
|
|||
|
|
<i class="fas fa-shopping-cart text-xl text-primary"></i>
|
|||
|
|
<span class="text-xs mt-1 text-primary">购物车</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col items-center justify-center">
|
|||
|
|
<i class="fas fa-user text-xl"></i>
|
|||
|
|
<span class="text-xs mt-1">我的</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
const editBtn = document.getElementById('editBtn');
|
|||
|
|
const deleteBtns = document.querySelectorAll('.delete-btn');
|
|||
|
|
const checkboxes = document.querySelectorAll('.checkbox');
|
|||
|
|
const selectAll = document.getElementById('selectAll');
|
|||
|
|
const cartItems = document.getElementById('cartItems');
|
|||
|
|
const emptyState = document.getElementById('emptyState');
|
|||
|
|
const checkoutBtns = document.querySelectorAll('.checkout-btn');
|
|||
|
|
let isEditing = false;
|
|||
|
|
// 切换编辑模式
|
|||
|
|
editBtn.addEventListener('click', function() {
|
|||
|
|
isEditing = !isEditing;
|
|||
|
|
editBtn.textContent = isEditing ? '完成' : '编辑';
|
|||
|
|
deleteBtns.forEach(btn => {
|
|||
|
|
btn.classList.toggle('hidden', !isEditing);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 全选功能
|
|||
|
|
selectAll.addEventListener('click', function() {
|
|||
|
|
const isChecked = selectAll.classList.contains('checked');
|
|||
|
|
selectAll.classList.toggle('checked', !isChecked);
|
|||
|
|
checkboxes.forEach(checkbox => {
|
|||
|
|
if (checkbox.id !== 'selectAll') {
|
|||
|
|
checkbox.classList.toggle('checked', !isChecked);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
updateTotal();
|
|||
|
|
});
|
|||
|
|
// 单个商品选择
|
|||
|
|
checkboxes.forEach(checkbox => {
|
|||
|
|
if (checkbox.id !== 'selectAll') {
|
|||
|
|
checkbox.addEventListener('click', function() {
|
|||
|
|
this.classList.toggle('checked');
|
|||
|
|
updateSelectAllState();
|
|||
|
|
updateTotal();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 数量增减
|
|||
|
|
document.querySelectorAll('.quantity-btn').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', function() {
|
|||
|
|
const selector = this.parentElement;
|
|||
|
|
const input = selector.querySelector('.quantity-input');
|
|||
|
|
let value = parseInt(input.value);
|
|||
|
|
if (this.classList.contains('plus')) {
|
|||
|
|
value++;
|
|||
|
|
} else {
|
|||
|
|
if (value > 1) value--;
|
|||
|
|
}
|
|||
|
|
input.value = value;
|
|||
|
|
updateTotal();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 删除商品
|
|||
|
|
deleteBtns.forEach(btn => {
|
|||
|
|
btn.addEventListener('click', function() {
|
|||
|
|
const card = this.closest('.product-card');
|
|||
|
|
card.remove();
|
|||
|
|
updateSelectAllState();
|
|||
|
|
updateTotal();
|
|||
|
|
// 检查是否为空状态
|
|||
|
|
if (cartItems.children.length === 0) {
|
|||
|
|
cartItems.classList.add('hidden');
|
|||
|
|
emptyState.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 更新全选状态
|
|||
|
|
function updateSelectAllState() {
|
|||
|
|
const allCheckboxes = Array.from(checkboxes).filter(cb => cb.id !== 'selectAll');
|
|||
|
|
const checkedCount = allCheckboxes.filter(cb => cb.classList.contains('checked')).length;
|
|||
|
|
const allSelected = checkedCount === allCheckboxes.length && allCheckboxes.length > 0;
|
|||
|
|
selectAll.classList.toggle('checked', allSelected);
|
|||
|
|
}
|
|||
|
|
// 更新总价和结算按钮状态
|
|||
|
|
function updateTotal() {
|
|||
|
|
let total = 0;
|
|||
|
|
let count = 0;
|
|||
|
|
document.querySelectorAll('.product-card').forEach(card => {
|
|||
|
|
const checkbox = card.querySelector('.checkbox');
|
|||
|
|
if (checkbox.classList.contains('checked')) {
|
|||
|
|
const priceText = card.querySelector('.text-primary').textContent;
|
|||
|
|
const price = parseFloat(priceText.replace('¥', ''));
|
|||
|
|
const quantity = parseInt(card.querySelector('.quantity-input').value);
|
|||
|
|
total += price * quantity;
|
|||
|
|
count += quantity;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 更新所有价格显示
|
|||
|
|
document.querySelectorAll('.total-amount').forEach(el => {
|
|||
|
|
el.textContent = `¥ ${total.toFixed(2)}`;
|
|||
|
|
});
|
|||
|
|
// 更新所有结算按钮
|
|||
|
|
checkoutBtns.forEach(btn => {
|
|||
|
|
btn.textContent = `去结算 (${count})`;
|
|||
|
|
});
|
|||
|
|
// 更新结算按钮状态
|
|||
|
|
checkoutBtns.forEach(btn => {
|
|||
|
|
if (count === 0) {
|
|||
|
|
btn.classList.add('disabled');
|
|||
|
|
} else {
|
|||
|
|
btn.classList.remove('disabled');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 初始化总价
|
|||
|
|
updateTotal();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|