存客宝 React
This commit is contained in:
4
Cunkebao/app/workspace/traffic-pricing/loading.tsx
Normal file
4
Cunkebao/app/workspace/traffic-pricing/loading.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
|
||||
165
Cunkebao/app/workspace/traffic-pricing/page.tsx
Normal file
165
Cunkebao/app/workspace/traffic-pricing/page.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Share2 } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { TrafficTeamSettings } from "@/app/components/TrafficTeamSettings"
|
||||
|
||||
export default function TrafficPricingPage() {
|
||||
const [activeTab, setActiveTab] = useState("pricing")
|
||||
|
||||
return (
|
||||
<div className="flex-1 p-4 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold">流量分发与定价</h1>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/workspace/traffic-distribution/new">
|
||||
<Share2 className="mr-2 h-4 w-4" />
|
||||
创建分发计划
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="pricing" value={activeTab} onValueChange={setActiveTab} className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-2 md:w-auto md:grid-cols-3">
|
||||
<TabsTrigger value="pricing">价格设置</TabsTrigger>
|
||||
<TabsTrigger value="distribution">分发设置</TabsTrigger>
|
||||
<TabsTrigger value="teams">团队设置</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="pricing" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>基础价格设置</CardTitle>
|
||||
<CardDescription>设置不同渠道的基础价格,这将影响所有分发计划</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="douyin-price">抖音获客价格 (元/位)</Label>
|
||||
<Input id="douyin-price" type="number" defaultValue="2" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="wechat-price">微信获客价格 (元/位)</Label>
|
||||
<Input id="wechat-price" type="number" defaultValue="3" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="xiaohongshu-price">小红书获客价格 (元/位)</Label>
|
||||
<Input id="xiaohongshu-price" type="number" defaultValue="4" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone-price">电话获客价格 (元/位)</Label>
|
||||
<Input id="phone-price" type="number" defaultValue="5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button>保存设置</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>溢价规则设置</CardTitle>
|
||||
<CardDescription>根据不同的客户特征设置溢价规则</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="age-pricing">年龄溢价</Label>
|
||||
<Select defaultValue="1.2">
|
||||
<SelectTrigger id="age-pricing">
|
||||
<SelectValue placeholder="选择溢价系数" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1.0">无溢价 (1.0倍)</SelectItem>
|
||||
<SelectItem value="1.2">轻度溢价 (1.2倍)</SelectItem>
|
||||
<SelectItem value="1.5">中度溢价 (1.5倍)</SelectItem>
|
||||
<SelectItem value="2.0">高度溢价 (2.0倍)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="gender-pricing">性别溢价</Label>
|
||||
<Select defaultValue="1.0">
|
||||
<SelectTrigger id="gender-pricing">
|
||||
<SelectValue placeholder="选择溢价系数" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1.0">无溢价 (1.0倍)</SelectItem>
|
||||
<SelectItem value="1.2">轻度溢价 (1.2倍)</SelectItem>
|
||||
<SelectItem value="1.5">中度溢价 (1.5倍)</SelectItem>
|
||||
<SelectItem value="2.0">高度溢价 (2.0倍)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button>保存设置</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="distribution" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>分发规则设置</CardTitle>
|
||||
<CardDescription>设置默认的分发规则和优先级</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base">优先分发高价值流量</Label>
|
||||
<p className="text-sm text-gray-500">优先分发价格更高的流量</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base">智能匹配客户与团队</Label>
|
||||
<p className="text-sm text-gray-500">根据团队特性自动匹配合适的客户</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base">均衡分发</Label>
|
||||
<p className="text-sm text-gray-500">尽量均衡地向各团队分发流量</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button>保存设置</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="teams" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>团队设置</CardTitle>
|
||||
<CardDescription>配置流量分发的团队设置</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TrafficTeamSettings />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user