409 lines
14 KiB
TypeScript
409 lines
14 KiB
TypeScript
import { useState } from "react"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import Wrap from "@/components/wrap"
|
|
import { cn } from "@/lib/utils"
|
|
import alipay from "../_assets/alipay.svg"
|
|
import balance from "../_assets/balance.svg"
|
|
import wechat from "../_assets/wechat.svg"
|
|
|
|
const PRODUCT_VARIANTS = [
|
|
{
|
|
id: 1,
|
|
name: "Mikrotik百兆5G双频-1拖40",
|
|
describe: "千兆双频",
|
|
price: 299,
|
|
lineprice: 399,
|
|
src: "https://gd4.alicdn.com/imgextra/i2/2212500574675/O1CN015GmSuk1kPCJNLBMl9_!!2212500574675.jpg_400x400.jpg",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "ros系统千兆5G双频版-1拖40",
|
|
describe: "千兆双频增强",
|
|
price: 399,
|
|
lineprice: 499,
|
|
src: "https://mp4.juip.com/%E8%B7%AF%E7%94%B1%E5%99%A8.png",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "热销款-ros系统千兆5G双频版1拖30",
|
|
describe: "企业级性能",
|
|
price: 499,
|
|
lineprice: 599,
|
|
src: "https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Mikrotik千兆5G双频版-1拖30",
|
|
describe: "五口千兆",
|
|
price: 599,
|
|
lineprice: 699,
|
|
src: "https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "千兆5G双频PRO版-1拖60",
|
|
describe: "五口千兆",
|
|
price: 599,
|
|
lineprice: 699,
|
|
src: "https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN01blV7JL1kPCJcWJgyY_!!2212500574675.jpg_400x400.jpg",
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "千兆5G旗舰版-1拖100",
|
|
describe: "五口千兆",
|
|
price: 599,
|
|
lineprice: 699,
|
|
src: "https://gd1.alicdn.com/imgextra/i3/2212500574675/O1CN01DdOPmM1kPCJHFrtcS_!!2212500574675.jpg_400x400.jpg",
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "全协议千兆双频软路由一拖100+AP",
|
|
describe: "五口千兆",
|
|
price: 599,
|
|
lineprice: 699,
|
|
src: "https://mp4.juip.com/%E5%85%A8%E5%8D%8F%E8%AE%AE%E5%8D%83%E5%85%86%E5%8F%8C%E9%A2%91%E8%BD%AF%E8%B7%AF%E7%94%B1%E4%B8%80%E6%8B%96100%2BAP%20.jpg",
|
|
},
|
|
]
|
|
|
|
const PAYMENT_METHODS = [
|
|
{ id: "alipay", label: "支付宝支付", icon: alipay },
|
|
{ id: "wechat", label: "微信支付", icon: wechat },
|
|
{ id: "balance", label: "余额支付", icon: balance },
|
|
]
|
|
|
|
const SPECS = [
|
|
[
|
|
{ label: "品牌", value: "Mikrotik" },
|
|
{ label: "售后服务", value: "店铺三包" },
|
|
{ label: "无线传输速率", value: "1000Mbps" },
|
|
{ label: "是否无线", value: "是" },
|
|
{ label: "适用场景", value: "中小企业/游戏路由" },
|
|
],
|
|
[
|
|
{ label: "型号", value: "AC2" },
|
|
{ label: "USB接口", value: "1个" },
|
|
{ label: "无线速度", value: "1167M" },
|
|
{ label: "上市时间", value: "2012-08-22" },
|
|
],
|
|
[
|
|
{ label: "成色", value: "全新" },
|
|
{ label: "有线传输率", value: "千兆端口" },
|
|
{ label: "无线频率", value: "2.4G&5G" },
|
|
{ label: "版本类型", value: "中国大陆" },
|
|
{ label: "保修期", value: "1年" },
|
|
],
|
|
]
|
|
|
|
export default function RouterosPage() {
|
|
const [selectedVariant, setSelectedVariant] = useState(0)
|
|
const [payMethod, setPayMethod] = useState("alipay")
|
|
const [userInfo, setUserInfo] = useState({
|
|
name: "",
|
|
phone: "",
|
|
address: "",
|
|
})
|
|
const [showModal, setShowModal] = useState(false)
|
|
|
|
const product = PRODUCT_VARIANTS[selectedVariant]
|
|
|
|
return (
|
|
<Wrap className="flex flex-col gap-10 pt-30 pb-16 bg-white">
|
|
<div className="flex flex-col lg:flex-row gap-10">
|
|
<div className="lg:w-5/12">
|
|
<Card className="overflow-hidden border-0 shadow-md">
|
|
<img
|
|
src={product.src}
|
|
alt={product.name}
|
|
className="w-full aspect-square object-cover"
|
|
/>
|
|
</Card>
|
|
<div className="flex gap-3 mt-4 flex-wrap">
|
|
{PRODUCT_VARIANTS.map((variant, index) => (
|
|
<button
|
|
key={variant.id}
|
|
onClick={() => setSelectedVariant(index)}
|
|
className={cn(
|
|
"size-16 rounded-lg cursor-pointer border-2 transition-all overflow-hidden p-0 bg-white",
|
|
index === selectedVariant
|
|
? "border-blue-500 shadow-md scale-105"
|
|
: "border-gray-200 hover:border-blue-300",
|
|
)}
|
|
>
|
|
<img
|
|
src={variant.src}
|
|
alt={variant.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:w-7/12 space-y-6">
|
|
<h4 className="text-2xl font-bold text-gray-800 leading-relaxed">
|
|
ros千兆软路由 一拖100矩阵 抖音快手单机单IP 魔硬软改 工作室试玩
|
|
</h4>
|
|
|
|
<Card className="bg-orange-50/60 border-0">
|
|
<CardContent className="space-y-3 pt-4">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">商品信息</span>
|
|
<span className="font-bold text-gray-700">{product.name}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">价格</span>
|
|
<span className="line-through text-gray-400">
|
|
¥{product.lineprice}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-muted-foreground text-sm">会员价</span>
|
|
<Badge
|
|
variant="destructive"
|
|
className="text-xl font-bold px-3 py-1 h-auto"
|
|
>
|
|
¥{product.price}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-right text-sm text-muted-foreground">
|
|
{product.describe}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium">颜色分类</Label>
|
|
<div className="flex flex-wrap gap-3">
|
|
{PRODUCT_VARIANTS.map((variant, index) => (
|
|
<Button
|
|
key={variant.id}
|
|
variant={index === selectedVariant ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setSelectedVariant(index)}
|
|
className={cn(
|
|
"rounded-full text-sm font-medium transition-all",
|
|
index === selectedVariant &&
|
|
"bg-linear-to-r from-blue-500 to-cyan-400 text-white border-transparent hover:opacity-90",
|
|
index !== selectedVariant &&
|
|
"border-gray-200 hover:border-blue-300",
|
|
)}
|
|
>
|
|
{variant.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<span className="text-muted-foreground w-20 shrink-0">
|
|
收货人
|
|
</span>
|
|
<span className="text-gray-800 font-medium">
|
|
{userInfo.name || "未设置"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<span className="text-muted-foreground w-20 shrink-0">
|
|
电话号码
|
|
</span>
|
|
<span className="text-gray-800 font-medium">
|
|
{userInfo.phone || "未设置"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<span className="text-muted-foreground w-20 shrink-0">
|
|
收货地址
|
|
</span>
|
|
<span className="text-gray-800 font-medium">
|
|
{userInfo.address || "未设置"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium">支付方式</Label>
|
|
<div className="flex flex-wrap gap-3">
|
|
{PAYMENT_METHODS.map(method => (
|
|
<label
|
|
key={method.id}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium cursor-pointer border transition-all",
|
|
payMethod === method.id
|
|
? "bg-blue-50 border-blue-400 text-blue-600"
|
|
: "bg-white border-gray-200 text-muted-foreground hover:border-blue-300",
|
|
)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="payMethod"
|
|
value={method.id}
|
|
checked={payMethod === method.id}
|
|
onChange={() => setPayMethod(method.id)}
|
|
className="hidden"
|
|
/>
|
|
<img
|
|
src={method.icon}
|
|
alt={method.label}
|
|
className="w-5 h-5"
|
|
/>
|
|
<span>{method.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<Button
|
|
size="lg"
|
|
className="flex-1 rounded-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 font-bold"
|
|
>
|
|
立即购买
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
onClick={() => setShowModal(true)}
|
|
className="rounded-full"
|
|
>
|
|
修改收货信息
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h2 className="text-lg font-bold text-gray-800 mb-6 text-center">
|
|
产品规格
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{SPECS.map((col, colIdx) => (
|
|
<Card key={colIdx} className="border-0 bg-muted/30">
|
|
<CardContent className="space-y-2 pt-4">
|
|
{col.map((spec, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex justify-between text-sm py-1.5 border-b border-border/50 last:border-0"
|
|
>
|
|
<span className="text-muted-foreground">{spec.label}</span>
|
|
<span className="text-foreground font-medium">
|
|
{spec.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h2 className="text-lg font-bold text-gray-800 mb-6 text-center">
|
|
产品展示
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{[
|
|
"https://img.alicdn.com/imgextra/i4/2212500574675/O1CN01RYiT0X1kPCJFZqcIn_!!2212500574675.jpg",
|
|
"https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01K3pAdS1kPCJFZr5Pv_!!2212500574675.jpg",
|
|
"https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fLjEYo1kPCJMaaMkj_!!2212500574675.jpg",
|
|
"https://img.alicdn.com/imgextra/i1/2212500574675/O1CN01TN50Rn1kPCJCp9gBl_!!2212500574675.jpg",
|
|
"https://img.alicdn.com/imgextra/i1/2212500574675/O1CN018Iy0Xg1kPCJJP5Zn5_!!2212500574675.jpg",
|
|
"https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fQQIT81kPCJLg5xrB_!!2212500574675.png",
|
|
"https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01oAjpI01kPCJGyE0JZ_!!2212500574675.png",
|
|
"https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01unvVq91kPCJFZq52D_!!2212500574675.png",
|
|
].map((src, index) => (
|
|
<Card
|
|
key={index}
|
|
className="overflow-hidden border-0 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={`产品图${index + 1}`}
|
|
className="w-full aspect-square object-cover"
|
|
/>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={showModal} onOpenChange={setShowModal}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>修改收货信息</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">收货人</Label>
|
|
<Input
|
|
id="name"
|
|
value={userInfo.name}
|
|
onChange={e =>
|
|
setUserInfo({ ...userInfo, name: e.target.value })
|
|
}
|
|
placeholder="请输入收货人"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">电话</Label>
|
|
<Input
|
|
id="phone"
|
|
value={userInfo.phone}
|
|
onChange={e =>
|
|
setUserInfo({ ...userInfo, phone: e.target.value })
|
|
}
|
|
placeholder="请输入电话"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="address">地址</Label>
|
|
<Input
|
|
id="address"
|
|
value={userInfo.address}
|
|
onChange={e =>
|
|
setUserInfo({ ...userInfo, address: e.target.value })
|
|
}
|
|
placeholder="请输入地址"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowModal(false)}
|
|
className="rounded-full"
|
|
>
|
|
关闭
|
|
</Button>
|
|
<Button
|
|
onClick={() => setShowModal(false)}
|
|
className="rounded-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
|
|
>
|
|
提交更改
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Wrap>
|
|
)
|
|
}
|