基于您的需求，我设计了一个现代化的自助下单网站，具有直观的用户界面、流畅的购物体验和响应式设计，网站包含商品展示、购物车管理、结算流程和订单确认等核心功能，采用清新的蓝色为主色调，搭配橙色作为交互元素,营造专业且友好的购物氛围。
以下是完整的实现代码：
import React, { useState, createContext, useContext, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';
// 购物车上下文
const CartContext = createContext();
const CartProvider = ({ children }) => {
const [cartItems, setCartItems] = useState([]);
// 添加商品到购物车
const addToCart = (product, quantity = 1) => {
setCartItems(prevItems => {
const existingItem = prevItems.find(item => item.id === product.id);
if (existingItem) {
return prevItems.map(item =>
item.id === product.id
? {...item, quantity: item.quantity + quantity}
: item
);
} else {
return [...prevItems, {...product, quantity}];
}
});
};
// 更新商品数量
const updateQuantity = (id, quantity) => {
if (quantity < 1) return;
setCartItems(prevItems =>
prevItems.map(item =>
item.id === id ? {...item, quantity} : item
)
);
};
// 删除购物车中的商品
const removeFromCart = (id) => {
setCartItems(prevItems => prevItems.filter(item => item.id !== id));
};
// 清空购物车
const clearCart = () => {
setCartItems([]);
};
// 计算购物车总金额
const getTotalAmount = () => {
return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0).toFixed(2);
};
// 购物车商品总数
const getTotalItems = () => {
return cartItems.reduce((total, item) => total + item.quantity, 0);
};
return (
<CartContext.Provider value={{
cartItems,
addToCart,
updateQuantity,
removeFromCart,
clearCart,
getTotalAmount,
getTotalItems
}}>
{children}
</CartContext.Provider>
);
};
// 自定义hook获取购物车上下文
const useCart = () => useContext(CartContext);
// 模拟商品数据
const products = [
{
id: 1,
name: "无线蓝牙耳机",
price: 199.99,
description: "高清音质，降噪功能，续航24小时",
image: "https://picsum.photos/seed/headphone/300/300"
},
{
id: 2,
name: "智能手表",
price: 299.99,
description: "心率监测，睡眠分析，防水设计",
image: "https://picsum.photos/seed/watch/300/300"
},
{
id: 3,
name: "便携式充电宝",
price: 59.99,
description: "20000mAh大容量，双向快充",
image: "https://picsum.photos/seed/powerbank/300/300"
},
{
id: 4,
name: "机械键盘",
price: 129.99,
description: "青轴机械键盘，RGB背光，全键无冲",
image: "https://picsum.photos/seed/keyboard/300/300"
},
{
id: 5,
name: "平板电脑",
price: 499.99,
description: "10.2英寸屏幕，64GB存储，高清显示",
image: "https://picsum.photos/seed/tablet/300/300"
},
{
id: 6,
name: "运动手环",
price: 89.99,
description: "计步，睡眠监测，防水，长续航",
image: "https://picsum.photos/seed/bracelet/300/300"
}
];
// 头部组件
const Header = () => {
const { getTotalItems } = useCart();
const navigate = useNavigate();
return (
<header className="bg-blue-600 text-white shadow-md">
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
<h1 className="text-2xl font-bold cursor-pointer" onClick={() => navigate('/')}>自助下单平台</h1>
<nav className="hidden md:flex space-x-6">
<Link to="/" className="hover:text-blue-200 transition-colors">首页</Link>
<Link to="/products" className="hover:text-blue-200 transition-colors">商品列表</Link>
</nav>
<div className="relative">
<button onClick={() => navigate('/cart')} className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span className="ml-2">购物车</span>
<span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
{getTotalItems()}
</span>
</button>
</div>
</div>
</header>
);
};
// 页脚组件
const Footer = () => {
return (
<footer className="bg-gray-800 text-white py-6 mt-12">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row justify-between items-center">
<p className="mb-4 md:mb-0">© 2025 自助下单平台. 保留所有权利.</p>
<div className="flex space-x-4">
<a href="#" className="hover:text-blue-300 transition-colors">关于我们</a>
<a href="#" className="hover:text-blue-300 transition-colors">联系我们</a>
<a href="#" className="hover:text-blue-300 transition-colors">隐私政策</a>
</div>
</div>
</div>
</footer>
);
};
// 商品卡片组件
const ProductCard = ({ product }) => {
const { addToCart } = useCart();
const navigate = useNavigate();
return (
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
<div className="h-48 overflow-hidden">
<img
src={product.image}
alt={product.name}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
onClick={() => navigate(`/product/${product.id}`)}
/>
</div>
<div className="p-4">
<h3 className="font-bold text-lg mb-2 hover:text-blue-600 cursor-pointer" onClick={() => navigate(`/product/${product.id}`)}>
{product.name}
</h3>
<p className="text-gray-600 text-sm mb-3 line-clamp-2">{product.description}</p>
<div className="flex justify-between items-center">
<span className="text-blue-600 font-bold text-xl">${product.price.toFixed(2)}</span>
<button
onClick={() => addToCart(product)}
className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors duration-300 flex items-center"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
加入购物车
</button>
</div>
</div>
</div>
);
};
// 首页
const HomePage = () => {
const featuredProducts = products.slice(0, 4);
return (
<div className="container mx-auto px-4 py-8">
<div className="mb-8">
<h2 className="text-3xl font-bold mb-4">欢迎来到自助下单平台</h2>
<p className="text-gray-600 text-lg">选择您喜爱的商品，轻松下单，快速送达</p>
</div>
<div className="mb-12">
<h3 className="text-2xl font-bold mb-6">热门推荐</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{featuredProducts.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
</div>
<div className="bg-blue-50 rounded-lg p-8 flex flex-col md:flex-row items-center justify-between">
<div className="mb-6 md:mb-0 md:mr-6">
<h3 className="text-2xl font-bold mb-2">购物更便捷</h3>
<p className="text-gray-600">简单几步，轻松完成购物流程，安全支付，快速配送</p>
</div>
<button onClick={() => window.scrollTo(0, 0)} className="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded transition-colors duration-300 text-lg">
立即购物
</button>
</div>
</div>
);
};
// 商品列表页
const ProductsPage = () => {
return (
<div className="container mx-auto px-4 py-8">
<h2 className="text-3xl font-bold mb-6">全部商品</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
</div>
);
};
// 商品详情页
const ProductDetailPage = () => {
const { id } = useParams();
const product = products.find(p => p.id === parseInt(id));
const { addToCart } = useCart();
if (!product) {
return <div className="container mx-auto px-4 py-8">商品不存在</div>;
}
return (
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="h-96 overflow-hidden rounded-lg shadow-md">
<img src={product.image} alt={product.name} className="w-full h-full object-cover" />
</div>
<div>
<h2 className="text-3xl font-bold mb-2">{product.name}</h2>
<p className="text-blue-600 font-bold text-2xl mb-4">${product.price.toFixed(2)}</p>
<div className="mb-6">
<h3 className="text-xl font-bold mb-2">商品描述</h3>
<p className="text-gray-600">{product.description}</p>
</div>
<button
onClick={() => addToCart(product)}
className="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded transition-colors duration-300 text-lg flex items-center"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
加入购物车
</button>
</div>
</div>
<div className="mt-12">
<h3 className="text-2xl font-bold mb-4">您可能还喜欢</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{products.filter(p => p.id !== product.id).slice(0, 4).map(p => (
<ProductCard key={p.id} product={p} />
))}
</div>
</div>
</div>
);
};
// 购物车页面
const CartPage = () => {
const { cartItems, updateQuantity, removeFromCart, getTotalAmount, clearCart } = useCart();
const navigate = useNavigate();
if (cartItems.length === 0) {
return (
<div className="container mx-auto px-4 py-8 text-center">
<h2 className="text-2xl font-bold mb-4">您的购物车是空的</h2>
<button onClick={() => navigate('/products')} className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition-colors duration-300">
去购物
</button>
</div>
);
}
return (
<div className="container mx-auto px-4 py-8">
<h2 className="text-3xl font-bold mb-6">购物车</h2>
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="bg-gray-100">
<th className="py-3 px-4 text-left">商品</th>
<th className="py-3 px-4 text-left">价格</th>
<th className="py-3 px-4 text-left">数量</th>
<th className="py-3 px-4 text-left">小计</th>
<th className="py-3 px-4 text-left">操作</th>
</tr>
</thead>
<tbody>
{cartItems.map(item => (
<tr key={item.id} className="border-b border-gray-200">
<td className="py-3 px-4">
<div className="flex items-center">
<img src={item.image} alt={item.name} className="w-12 h-12 object-cover mr-3" />
<span>{item.name}</span>
</div>
</td>
<td className="py-3 px-4">${item.price.toFixed(2)}</td>
<td className="py-3 px-4">
<div className="flex items-center">
<button
onClick={() => updateQuantity(item.id, item.quantity - 1)}
className="bg-gray-200 hover:bg-gray-300 w-8 h-8 flex items-center justify-center rounded-l transition-colors duration-300"
>
-
</button>
<span className="w-12 h-8 flex items-center justify-center border-t border-b border-gray-200">
{item.quantity}
</span>
<button
onClick={() => updateQuantity(item.id, item.quantity + 1)}
className="bg-gray-200 hover:bg-gray-300 w-8
