261 lines
10 KiB
TypeScript
261 lines
10 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import { ChevronLeft, Download, Calendar, TrendingUp, TrendingDown } from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
||
import { LineChartComponent, BarChartComponent, PieChartComponent } from "@/app/components/common/Charts"
|
||
import { toast } from "@/components/ui/use-toast"
|
||
|
||
export default function PaymentStatsPage() {
|
||
const router = useRouter()
|
||
const [dateRange, setDateRange] = useState("week")
|
||
const [activeTab, setActiveTab] = useState("overview")
|
||
|
||
// 模拟图表数据
|
||
const lineChartData = [
|
||
{ name: "周一", 支付笔数: 24, 支付金额: 478.8 },
|
||
{ name: "周二", 支付笔数: 32, 支付金额: 636.8 },
|
||
{ name: "周三", 支付笔数: 28, 支付金额: 557.2 },
|
||
{ name: "周四", 支付笔数: 36, 支付金额: 716.4 },
|
||
{ name: "周五", 支付笔数: 42, 支付金额: 835.8 },
|
||
{ name: "周六", 支付笔数: 38, 支付金额: 756.2 },
|
||
{ name: "周日", 支付笔数: 35, 支付金额: 696.5 },
|
||
]
|
||
|
||
const barChartData = [
|
||
{ name: "社群会员付款码", 支付笔数: 156, 支付金额: 3104.4 },
|
||
{ name: "课程付款码", 支付笔数: 78, 支付金额: 7722 },
|
||
{ name: "咨询服务付款码", 支付笔数: 45, 支付金额: 8955 },
|
||
{ name: "产品购买付款码", 支付笔数: 32, 支付金额: 9568 },
|
||
]
|
||
|
||
const pieChartData = [
|
||
{ name: "微信支付", value: 75 },
|
||
{ name: "支付宝", value: 25 },
|
||
]
|
||
|
||
const lineChartConfig = {
|
||
支付笔数: { label: "支付笔数", color: "#3b82f6" },
|
||
支付金额: { label: "支付金额", color: "#10b981" },
|
||
}
|
||
|
||
const barChartConfig = {
|
||
支付笔数: { label: "支付笔数", color: "#3b82f6" },
|
||
支付金额: { label: "支付金额", color: "#10b981" },
|
||
}
|
||
|
||
const pieChartConfig = {
|
||
微信支付: { label: "微信支付", color: "#10b981" },
|
||
支付宝: { label: "支付宝", color: "#3b82f6" },
|
||
}
|
||
|
||
const handleExport = () => {
|
||
toast({
|
||
title: "导出成功",
|
||
description: "数据统计报表已导出为Excel文件",
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen bg-gray-50">
|
||
{/* 头部 */}
|
||
<header className="sticky top-0 z-10 bg-white border-b">
|
||
<div className="flex items-center justify-between h-14 px-4">
|
||
<div className="flex items-center">
|
||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||
<ChevronLeft className="h-5 w-5" />
|
||
</Button>
|
||
<h1 className="ml-2 text-lg font-medium">数据统计</h1>
|
||
</div>
|
||
<Button variant="ghost" size="icon" onClick={handleExport}>
|
||
<Download className="h-5 w-5" />
|
||
</Button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 日期范围选择 */}
|
||
<div className="p-4">
|
||
<Select value={dateRange} onValueChange={setDateRange}>
|
||
<SelectTrigger>
|
||
<Calendar className="h-4 w-4 mr-2" />
|
||
<SelectValue placeholder="选择时间范围" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="today">今日</SelectItem>
|
||
<SelectItem value="week">本周</SelectItem>
|
||
<SelectItem value="month">本月</SelectItem>
|
||
<SelectItem value="quarter">本季度</SelectItem>
|
||
<SelectItem value="year">本年</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="px-4 pb-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<p className="text-sm text-gray-500">总支付笔数</p>
|
||
<TrendingUp className="h-4 w-4 text-green-500" />
|
||
</div>
|
||
<p className="text-2xl font-semibold">311</p>
|
||
<p className="text-xs text-green-500 mt-1">+12.5% 较上期</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<p className="text-sm text-gray-500">总支付金额</p>
|
||
<TrendingUp className="h-4 w-4 text-green-500" />
|
||
</div>
|
||
<p className="text-2xl font-semibold">¥29,845</p>
|
||
<p className="text-xs text-green-500 mt-1">+8.3% 较上期</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<p className="text-sm text-gray-500">新增客户</p>
|
||
<TrendingDown className="h-4 w-4 text-red-500" />
|
||
</div>
|
||
<p className="text-2xl font-semibold">289</p>
|
||
<p className="text-xs text-red-500 mt-1">-3.2% 较上期</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<p className="text-sm text-gray-500">平均客单价</p>
|
||
<TrendingUp className="h-4 w-4 text-green-500" />
|
||
</div>
|
||
<p className="text-2xl font-semibold">¥95.98</p>
|
||
<p className="text-xs text-green-500 mt-1">+5.6% 较上期</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 图表标签页 */}
|
||
<div className="flex-1 px-4 pb-20">
|
||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||
<TabsList className="grid grid-cols-3 mb-4">
|
||
<TabsTrigger value="overview">概览</TabsTrigger>
|
||
<TabsTrigger value="trend">趋势</TabsTrigger>
|
||
<TabsTrigger value="distribution">分布</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="overview" className="space-y-4">
|
||
<LineChartComponent
|
||
title="支付趋势"
|
||
description="本周支付笔数和金额趋势"
|
||
data={lineChartData}
|
||
config={lineChartConfig}
|
||
height={250}
|
||
/>
|
||
|
||
<BarChartComponent
|
||
title="付款码对比"
|
||
description="各付款码支付情况对比"
|
||
data={barChartData}
|
||
config={barChartConfig}
|
||
height={250}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="trend" className="space-y-4">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>支付趋势分析</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<LineChartComponent data={lineChartData} config={lineChartConfig} height={300} />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">趋势说明</h3>
|
||
<div className="space-y-2 text-sm">
|
||
<p>• 本周支付笔数较上周增长 12.5%</p>
|
||
<p>• 周五为支付高峰期，建议加强营销推广</p>
|
||
<p>• 周末支付量保持稳定，用户活跃度良好</p>
|
||
<p>• 平均每日支付笔数为 33.6 笔</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="distribution" className="space-y-4">
|
||
<PieChartComponent
|
||
title="支付方式分布"
|
||
description="各支付方式占比"
|
||
data={pieChartData}
|
||
config={pieChartConfig}
|
||
height={250}
|
||
/>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">客户分布</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">新客户</span>
|
||
<div className="flex items-center">
|
||
<span className="font-medium mr-2">289</span>
|
||
<span className="text-sm text-gray-500">(92.9%)</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">老客户</span>
|
||
<div className="flex items-center">
|
||
<span className="font-medium mr-2">22</span>
|
||
<span className="text-sm text-gray-500">(7.1%)</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2">
|
||
<span className="text-gray-500">复购率</span>
|
||
<span className="font-medium">7.1%</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">地域分布 TOP5</h3>
|
||
<div className="space-y-3">
|
||
{[
|
||
{ city: "广州", count: 89, percent: 28.6 },
|
||
{ city: "深圳", count: 67, percent: 21.5 },
|
||
{ city: "上海", count: 45, percent: 14.5 },
|
||
{ city: "北京", count: 38, percent: 12.2 },
|
||
{ city: "杭州", count: 32, percent: 10.3 },
|
||
].map((item, index) => (
|
||
<div key={index} className="flex items-center justify-between">
|
||
<span className="text-gray-600">{item.city}</span>
|
||
<div className="flex items-center">
|
||
<div className="w-24 bg-gray-200 rounded-full h-2 mr-2">
|
||
<div className="bg-blue-500 h-2 rounded-full" style={{ width: `${item.percent}%` }} />
|
||
</div>
|
||
<span className="text-sm font-medium w-12 text-right">{item.count}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|