补充个人中心下的页面
This commit is contained in:
Eamon
@@ -1,5 +1,220 @@
|
||||
import { CheckCircle, Clock, Gift, Tag, Ticket, XCircle } from "lucide-react"
|
||||
import Page from "@/components/page"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
|
||||
// TODO: 优惠券接口就绪后接入（见 src/api/coupon.ts fetchCouponPage 等）
|
||||
|
||||
interface Coupon {
|
||||
couponType: "Discount" | "Minus"
|
||||
couponValue: number
|
||||
name: string
|
||||
allowMinAmount: number
|
||||
}
|
||||
|
||||
interface UserCouponModel {
|
||||
coupon: Coupon
|
||||
orgin: {
|
||||
startTime: string
|
||||
endTime: string
|
||||
remark: string
|
||||
}
|
||||
isUsed: boolean
|
||||
}
|
||||
|
||||
// Mock 数据
|
||||
const mockCoupons: UserCouponModel[] = [
|
||||
{
|
||||
coupon: {
|
||||
couponType: "Discount",
|
||||
couponValue: 8,
|
||||
name: "八折优惠券",
|
||||
allowMinAmount: 100,
|
||||
},
|
||||
orgin: {
|
||||
startTime: "2026-01-01",
|
||||
endTime: "2026-12-31",
|
||||
remark: "新用户注册赠送",
|
||||
},
|
||||
isUsed: false,
|
||||
},
|
||||
{
|
||||
coupon: {
|
||||
couponType: "Minus",
|
||||
couponValue: 50,
|
||||
name: "满减优惠券",
|
||||
allowMinAmount: 200,
|
||||
},
|
||||
orgin: {
|
||||
startTime: "2026-06-01",
|
||||
endTime: "2026-09-30",
|
||||
remark: "活动期间领取",
|
||||
},
|
||||
isUsed: false,
|
||||
},
|
||||
{
|
||||
coupon: {
|
||||
couponType: "Discount",
|
||||
couponValue: 9,
|
||||
name: "九折优惠券",
|
||||
allowMinAmount: 0,
|
||||
},
|
||||
orgin: {
|
||||
startTime: "2026-08-01",
|
||||
endTime: "2026-10-01",
|
||||
remark: "VIP专享",
|
||||
},
|
||||
isUsed: true,
|
||||
},
|
||||
{
|
||||
coupon: {
|
||||
couponType: "Minus",
|
||||
couponValue: 20,
|
||||
name: "通用优惠券",
|
||||
allowMinAmount: 50,
|
||||
},
|
||||
orgin: {
|
||||
startTime: "2026-07-01",
|
||||
endTime: "2026-08-31",
|
||||
remark: "签到领取",
|
||||
},
|
||||
isUsed: false,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CouponPage() {
|
||||
return <Page>优惠券</Page>
|
||||
const availableCoupons = mockCoupons.filter(item => !item.isUsed)
|
||||
const usedCoupons = mockCoupons.filter(item => item.isUsed)
|
||||
|
||||
const renderCoupon = (item: UserCouponModel) => {
|
||||
const isDiscount = item.coupon.couponType === "Discount"
|
||||
const isUsed = item.isUsed
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={`${item.coupon.name}-${item.orgin.startTime}`}
|
||||
className={`relative overflow-hidden transition-shadow hover:shadow-md ${isUsed ? "opacity-60" : ""}`}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
{/* 优惠券左侧 - 面额 */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex min-w-20 flex-col items-center justify-center rounded-lg bg-primary/10 p-3">
|
||||
{isDiscount ? (
|
||||
<>
|
||||
<span className="text-2xl font-bold text-primary">
|
||||
{item.coupon.couponValue}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">折</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-xs text-muted-foreground">¥</span>
|
||||
<span className="text-2xl font-bold text-primary">
|
||||
{item.coupon.couponValue}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 优惠券右侧 - 详情 */}
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-medium">{item.coupon.name}</h4>
|
||||
{isUsed ? (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
<CheckCircle className="mr-1 h-3 w-3" />
|
||||
已使用
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="default" className="text-xs">
|
||||
<Ticket className="mr-1 h-3 w-3" />
|
||||
可使用
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag className="h-3 w-3" />
|
||||
{item.coupon.allowMinAmount > 0
|
||||
? `满${item.coupon.allowMinAmount}元可用`
|
||||
: "无限制"}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(item.orgin.startTime).toLocaleDateString()} -{" "}
|
||||
{new Date(item.orgin.endTime).toLocaleDateString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Gift className="h-3 w-3" />
|
||||
{item.orgin.remark}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 已使用水印效果 */}
|
||||
{isUsed && (
|
||||
<div className="absolute right-4 top-4">
|
||||
<XCircle className="h-6 w-6 text-muted-foreground/50" />
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<div className="bg-white rounded-lg p-4">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">我的优惠券</h3>
|
||||
<Badge variant="secondary" className="text-sm">
|
||||
共 {mockCoupons.length} 张
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="available" className="w-full">
|
||||
<TabsList className="grid w-full max-w-md grid-cols-2">
|
||||
<TabsTrigger value="available">
|
||||
可使用 ({availableCoupons.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="used">
|
||||
已使用 ({usedCoupons.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="available" className="mt-4">
|
||||
{availableCoupons.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<Ticket className="mb-4 h-12 w-12 opacity-50" />
|
||||
<p>暂无可用优惠券</p>
|
||||
<p className="text-sm">快去参与活动领取吧</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{availableCoupons.map(renderCoupon)}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="used" className="mt-4">
|
||||
{usedCoupons.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<CheckCircle className="mb-4 h-12 w-12 opacity-50" />
|
||||
<p>暂无已使用的优惠券</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{usedCoupons.map(renderCoupon)}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user