plan pages

Cunkebao/app/scenarios/payment/[id]/page.tsx

@@ -0,0 +1,377 @@
+"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>
+  )
+}