80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
|
|
export default function Coupon() {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [activeTab, setActiveTab] = useState("unused");
|
|
|
|
const tabs = [
|
|
{ id: "unused", name: "未使用" },
|
|
{ id: "used", name: "已使用" },
|
|
{ id: "expired", name: "已过期" },
|
|
];
|
|
|
|
const handleTabChange = (tabId) => {
|
|
setActiveTab(tabId);
|
|
router.replace(`/coupon?tab=${tabId}`);
|
|
};
|
|
|
|
const handleGoShopping = () => {
|
|
router.push("/tab");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* 顶部标题 */}
|
|
<div className="bg-white p-4">
|
|
<h1 className="text-xl font-bold text-center">优惠券</h1>
|
|
</div>
|
|
|
|
{/* Tab切换栏 */}
|
|
<div className="bg-white">
|
|
<div className="flex border-b">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
className={`flex-1 py-3 text-center ${
|
|
activeTab === tab.id
|
|
? "text-yellow-500 border-b-2 border-yellow-500"
|
|
: "text-gray-500"
|
|
}`}
|
|
onClick={() => handleTabChange(tab.id)}
|
|
>
|
|
{tab.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 空状态展示 */}
|
|
<div className="flex flex-col items-center justify-center p-8">
|
|
<div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg
|
|
className="w-12 h-12 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p className="text-gray-500 text-center mb-4">暂无优惠券</p>
|
|
<button
|
|
onClick={handleGoShopping}
|
|
className="bg-yellow-400 text-white px-8 py-2 rounded-full hover:bg-yellow-500 transition-colors"
|
|
>
|
|
去逛逛
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|