378 lines
16 KiB
TypeScript
378 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import Image from "next/image"
|
||
import { ChevronLeft, Download, Share2, QrCode, Copy, BarChart4, Users } from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { toast } from "@/components/ui/use-toast"
|
||
|
||
export default function PaymentCodeDetailPage({ params }: { params: { id: string } }) {
|
||
const router = useRouter()
|
||
const [activeTab, setActiveTab] = useState("detail")
|
||
|
||
// 模拟数据
|
||
const paymentCode = {
|
||
id: params.id,
|
||
name: "社群会员付款码",
|
||
amount: "19.9",
|
||
description: "加入VIP社群会员",
|
||
status: "active",
|
||
qrCodeUrl: "/placeholder.svg?height=300&width=300&query=QR%20Code",
|
||
paymentMethod: "wechat",
|
||
createTime: "2023-10-26 11:00:00",
|
||
totalPayments: 156,
|
||
totalAmount: 3104.4,
|
||
distribution: {
|
||
enabled: true,
|
||
type: "percentage",
|
||
value: "10%",
|
||
totalDistributed: 310.44,
|
||
},
|
||
redPacket: {
|
||
enabled: true,
|
||
amount: "5",
|
||
totalSent: 156,
|
||
totalAmount: 780,
|
||
},
|
||
autoWelcome: {
|
||
enabled: true,
|
||
message: "感谢您的支付，欢迎加入我们的VIP社群！",
|
||
},
|
||
tags: ["付款客户", "社群会员", "已成交"],
|
||
}
|
||
|
||
const recentPayments = [
|
||
{ id: 1, user: "用户1", amount: "19.9", time: "2023-10-26 15:30:00", status: "success" },
|
||
{ id: 2, user: "用户2", amount: "19.9", time: "2023-10-26 14:45:00", status: "success" },
|
||
{ id: 3, user: "用户3", amount: "19.9", time: "2023-10-26 13:20:00", status: "success" },
|
||
{ id: 4, user: "用户4", amount: "19.9", time: "2023-10-26 12:10:00", status: "success" },
|
||
{ id: 5, user: "用户5", amount: "19.9", time: "2023-10-26 11:05:00", status: "success" },
|
||
]
|
||
|
||
const handleStatusChange = (checked: boolean) => {
|
||
toast({
|
||
title: checked ? "付款码已启用" : "付款码已停用",
|
||
description: checked ? "客户现在可以通过此付款码支付" : "客户将无法通过此付款码支付",
|
||
})
|
||
}
|
||
|
||
const handleCopy = (text: string) => {
|
||
navigator.clipboard.writeText(text)
|
||
toast({
|
||
title: "复制成功",
|
||
description: "内容已复制到剪贴板",
|
||
})
|
||
}
|
||
|
||
const handleDownload = () => {
|
||
toast({
|
||
title: "下载成功",
|
||
description: "付款码已保存到相册",
|
||
})
|
||
}
|
||
|
||
const handleShare = () => {
|
||
toast({
|
||
title: "分享成功",
|
||
description: "付款码已分享",
|
||
})
|
||
}
|
||
|
||
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>
|
||
<div className="flex items-center">
|
||
<Switch checked={paymentCode.status === "active"} onCheckedChange={handleStatusChange} />
|
||
<span className="ml-2 text-sm">{paymentCode.status === "active" ? "启用中" : "已停用"}</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 标签页 */}
|
||
<div className="flex-1 px-4 pb-20">
|
||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||
<TabsList className="grid grid-cols-3 mb-4">
|
||
<TabsTrigger value="detail" className="text-xs">
|
||
<QrCode className="h-4 w-4 mr-1" />
|
||
付款码
|
||
</TabsTrigger>
|
||
<TabsTrigger value="payments" className="text-xs">
|
||
<BarChart4 className="h-4 w-4 mr-1" />
|
||
支付记录
|
||
</TabsTrigger>
|
||
<TabsTrigger value="settings" className="text-xs">
|
||
<Users className="h-4 w-4 mr-1" />
|
||
高级设置
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* 付款码详情 */}
|
||
<TabsContent value="detail" className="space-y-4">
|
||
<Card>
|
||
<CardContent className="p-4 flex flex-col items-center">
|
||
<h2 className="font-medium text-center mb-2">{paymentCode.name}</h2>
|
||
<p className="text-sm text-gray-500 mb-4">{paymentCode.description}</p>
|
||
|
||
<div className="relative w-64 h-64 mb-4">
|
||
<Image
|
||
src={paymentCode.qrCodeUrl || "/placeholder.svg"}
|
||
alt="付款码"
|
||
fill
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
|
||
<div className="text-center mb-4">
|
||
<Badge variant="outline" className="text-green-500 bg-green-50">
|
||
¥{paymentCode.amount}
|
||
</Badge>
|
||
</div>
|
||
|
||
<div className="flex justify-center space-x-4 w-full">
|
||
<Button variant="outline" size="sm" onClick={handleDownload}>
|
||
<Download className="h-4 w-4 mr-1" />
|
||
下载
|
||
</Button>
|
||
<Button variant="outline" size="sm" onClick={handleShare}>
|
||
<Share2 className="h-4 w-4 mr-1" />
|
||
分享
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleCopy(`付款码：${paymentCode.name}，金额：${paymentCode.amount}元`)}
|
||
>
|
||
<Copy className="h-4 w-4 mr-1" />
|
||
复制
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<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">付款码ID</span>
|
||
<span className="font-medium">{paymentCode.id}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">支付方式</span>
|
||
<span className="font-medium">
|
||
{paymentCode.paymentMethod === "wechat"
|
||
? "微信支付"
|
||
: paymentCode.paymentMethod === "alipay"
|
||
? "支付宝"
|
||
: "微信和支付宝"}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">创建时间</span>
|
||
<span className="font-medium">{paymentCode.createTime}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">支付笔数</span>
|
||
<span className="font-medium">{paymentCode.totalPayments}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2">
|
||
<span className="text-gray-500">支付金额</span>
|
||
<span className="font-medium">¥{paymentCode.totalAmount}</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* 支付记录 */}
|
||
<TabsContent value="payments" className="space-y-4">
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="flex justify-between items-center mb-3">
|
||
<h3 className="font-medium">最近支付记录</h3>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-blue-500"
|
||
onClick={() => router.push(`/scenarios/payment/${params.id}/payments`)}
|
||
>
|
||
查看全部
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{recentPayments.map((payment) => (
|
||
<div key={payment.id} className="flex justify-between items-center py-2 border-b last:border-0">
|
||
<div>
|
||
<p className="font-medium">{payment.user}</p>
|
||
<p className="text-xs text-gray-500">{payment.time}</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="font-medium">¥{payment.amount}</p>
|
||
<Badge variant="outline" className="text-green-500 bg-green-50 text-xs">
|
||
支付成功
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<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>
|
||
<span className="font-medium">{paymentCode.totalPayments}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">总支付金额</span>
|
||
<span className="font-medium">¥{paymentCode.totalAmount}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">平均客单价</span>
|
||
<span className="font-medium">
|
||
¥{(paymentCode.totalAmount / paymentCode.totalPayments).toFixed(2)}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2">
|
||
<span className="text-gray-500">新增客户数</span>
|
||
<span className="font-medium">{Math.floor(paymentCode.totalPayments * 0.9)}</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* 高级设置 */}
|
||
<TabsContent value="settings" className="space-y-4">
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">分销返利设置</h3>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<span className="text-gray-500">启用分销返利</span>
|
||
<Switch checked={paymentCode.distribution.enabled} />
|
||
</div>
|
||
|
||
{paymentCode.distribution.enabled && (
|
||
<div className="space-y-3 pl-4 border-l-2 border-blue-100">
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">返利类型</span>
|
||
<span className="font-medium">
|
||
{paymentCode.distribution.type === "percentage" ? "比例返利" : "固定金额"}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">返利值</span>
|
||
<span className="font-medium">{paymentCode.distribution.value}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2">
|
||
<span className="text-gray-500">已发放金额</span>
|
||
<span className="font-medium">¥{paymentCode.distribution.totalDistributed}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">红包奖励设置</h3>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<span className="text-gray-500">启用红包奖励</span>
|
||
<Switch checked={paymentCode.redPacket.enabled} />
|
||
</div>
|
||
|
||
{paymentCode.redPacket.enabled && (
|
||
<div className="space-y-3 pl-4 border-l-2 border-blue-100">
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">红包金额</span>
|
||
<span className="font-medium">¥{paymentCode.redPacket.amount}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2 border-b">
|
||
<span className="text-gray-500">已发放数量</span>
|
||
<span className="font-medium">{paymentCode.redPacket.totalSent}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center py-2">
|
||
<span className="text-gray-500">已发放金额</span>
|
||
<span className="font-medium">¥{paymentCode.redPacket.totalAmount}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">自动欢迎语设置</h3>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<span className="text-gray-500">启用自动欢迎语</span>
|
||
<Switch checked={paymentCode.autoWelcome.enabled} />
|
||
</div>
|
||
|
||
{paymentCode.autoWelcome.enabled && (
|
||
<div className="pl-4 border-l-2 border-blue-100">
|
||
<div className="py-2">
|
||
<span className="text-gray-500 block mb-2">欢迎语内容</span>
|
||
<div className="bg-gray-50 p-3 rounded-md text-sm">{paymentCode.autoWelcome.message}</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<h3 className="font-medium mb-3">客户标签设置</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{paymentCode.tags.map((tag, index) => (
|
||
<Badge key={index} variant="outline" className="rounded-full">
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
<Button variant="outline" size="sm" className="rounded-full text-blue-500">
|
||
+ 添加标签
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="flex justify-center mt-6">
|
||
<Button
|
||
variant="outline"
|
||
className="text-red-500 border-red-200 hover:bg-red-50"
|
||
onClick={() => {
|
||
if (confirm("确定要删除此付款码吗？删除后将无法恢复。")) {
|
||
toast({
|
||
title: "付款码已删除",
|
||
description: "付款码已成功删除",
|
||
})
|
||
router.push("/scenarios/payment")
|
||
}
|
||
}}
|
||
>
|
||
删除付款码
|
||
</Button>
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|