69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
|
|
export default function AddToCartModal({
|
|
isOpen,
|
|
onClose,
|
|
product,
|
|
quantity,
|
|
setQuantity,
|
|
onAddToCart,
|
|
}) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end">
|
|
<div className="bg-white w-full rounded-t-2xl p-4">
|
|
<div className="flex items-start mb-4">
|
|
<Image
|
|
src={product.imageUrl}
|
|
alt={product.title}
|
|
width={80}
|
|
height={80}
|
|
className="rounded-lg"
|
|
/>
|
|
<div className="ml-3 flex-1">
|
|
<div className="flex justify-between">
|
|
<span className="text-red-500 text-xl">¥{product.price}</span>
|
|
<button onClick={onClose} className="text-gray-400">
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="text-sm text-gray-500 mt-1">
|
|
库存{product.stock}件
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-6">
|
|
<span>购买数量</span>
|
|
<div className="flex items-center">
|
|
<button
|
|
className="w-8 h-8 border rounded-l flex items-center justify-center"
|
|
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
|
>
|
|
-
|
|
</button>
|
|
<span className="w-12 h-8 border-t border-b flex items-center justify-center">
|
|
{quantity}
|
|
</span>
|
|
<button
|
|
className="w-8 h-8 border rounded-r flex items-center justify-center"
|
|
onClick={() => setQuantity(quantity + 1)}
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onAddToCart}
|
|
className="w-full bg-yellow-400 text-white py-3 rounded-full"
|
|
>
|
|
加入购物车
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|