import React, { useState } from “react”;
// 简单的单文件电商 Starter 组件（可直接放在 Next.js 或 CRA 项目中）
// 要求：Tailwind CSS 已配置。
const SAMPLE_PRODUCTS = [
{ id: “p1”, title: “经典纯棉T恤”, price: 79, image: “https://via.placeholder.com/320×240?text=T-shirt” },
{ id: “p2”, title: “轻量运动鞋”, price: 299, image: “https://via.placeholder.com/320×240?text=Shoes” },
{ id: “p3”, title: “极简双肩包”, price: 199, image: “https://via.placeholder.com/320×240?text=Backpack” },
{ id: “p4”, title: “保温水杯”, price: 89, image: “https://via.placeholder.com/320×240?text=Bottle” },
];
function formatPrice(cny) {
return `¥${cny.toFixed(2)}`;
}
export default function EcommerceStarter() {
const [products] = useState(SAMPLE_PRODUCTS);
const [cart, setCart] = useState([]);
const [isCartOpen, setCartOpen] = useState(false);
function addToCart(product) {
setCart((c) => {
const idx = c.findIndex((it) => it.id === product.id);
if (idx === -1) return […c, { …product, qty: 1 }];
const next = c.slice();
next[idx] = { …next[idx], qty: next[idx].qty + 1 };
return next;
});
setCartOpen(true);
}
function updateQty(id, delta) {
setCart((c) =>
c
.map((it) => (it.id === id ? { …it, qty: Math.max(1, it.qty + delta) } : it))
.filter((it) => it.qty > 0)
);
}
function removeItem(id) {
setCart((c) => c.filter((it) => it.id !== id));
}
const subtotal = cart.reduce((s, it) => s + it.price * it.qty, 0);
function checkout() {
alert(`结账：共 ${cart.length} 件，合计 ${formatPrice(subtotal)}。\n\n（此处为演示）`);
// TODO: 替换为真实支付流程
}
return (
我的商店
热销商品
{products.map((p) => (
{p.title}
{formatPrice(p.price)}
))}
店铺介绍
这是一个演示用的电商前端 starter，功能包含商品展示、购物车管理、简单结账占位。
后端可以接入：商品 CMS、订单数据库、支付网关（Stripe / 支付宝 / 微信支付）、物流接口等。
{/* 购物车抽屉 */}
);
}