【操盘手】 工作台流量池选择

Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx

@@ -1,12 +1,15 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Search } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import { Database } from "lucide-react"
+import { api } from "@/lib/api"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 
 interface TrafficPool {
   id: string
@@ -19,43 +22,71 @@ interface TrafficPoolStepProps {
   onSubmit: (data: any) => void
   onBack: () => void
   initialData?: any
+  devices?: string[]
 }
 
-export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }: TrafficPoolStepProps) {
+export default function TrafficPoolStep({ onSubmit, onBack, initialData = {}, devices = [] }: TrafficPoolStepProps) {
   const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || [])
   const [searchTerm, setSearchTerm] = useState("")
   const [isSubmitting, setIsSubmitting] = useState(false)
-
-  // 模拟流量池数据
-  const trafficPools: TrafficPool[] = [
-    { id: "1", name: "新客流量池", count: 1250, description: "新获取的客户流量" },
-    { id: "2", name: "高意向流量池", count: 850, description: "有购买意向的客户" },
-    { id: "3", name: "复购流量池", count: 620, description: "已购买过产品的客户" },
-    { id: "4", name: "活跃流量池", count: 1580, description: "近期活跃的客户" },
-    { id: "5", name: "沉睡流量池", count: 2300, description: "长期未活跃的客户" },
-  ]
-
-  const filteredPools = trafficPools.filter(
+  const [deviceLabels, setDeviceLabels] = useState<{ label: string; count: number }[]>([])
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 10
+  const [total, setTotal] = useState(0)
+  const filteredPools = deviceLabels.filter(
     (pool) =>
-      pool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      pool.description.toLowerCase().includes(searchTerm.toLowerCase()),
+      pool.label && pool.label.toLowerCase().includes(searchTerm.toLowerCase())
   )
+  const totalPages = Math.ceil(total / pageSize)
+  const pagedPools = filteredPools.slice((currentPage - 1) * pageSize, currentPage * pageSize)
 
-  const togglePool = (id: string) => {
-    setSelectedPools((prev) => (prev.includes(id) ? prev.filter((poolId) => poolId !== id) : [...prev, id]))
+  // 监听 devices 变化，请求标签
+  useEffect(() => {
+    if (!devices || devices.length === 0) {
+      setDeviceLabels([])
+      setTotal(0)
+      return
+    }
+    const fetchLabels = async () => {
+      try {
+        const params = devices.join(",")
+        const res = await api.get<{ code: number; msg: string; data: { label: string; count: number }[]; total?: number }>(`/v1/workbench/device-labels?deviceIds=${params}`)
+        if (res.code === 200 && Array.isArray(res.data)) {
+          setDeviceLabels(res.data)
+          setTotal(res.total || res.data.length)
+        } else {
+          setDeviceLabels([])
+          setTotal(0)
+        }
+      } catch (e) {
+        setDeviceLabels([])
+        setTotal(0)
+      }
+    }
+    fetchLabels()
+  }, [devices])
+
+  // label 到描述的映射
+  const poolDescMap: Record<string, string> = {
+    "新客流量池": "新获取的客户流量",
+    "高意向流量池": "有购买意向的客户",
+    "复购流量池": "已购买过产品的客户",
+    "活跃流量池": "近期活跃的客户",
+    "沉睡流量池": "长期未活跃的客户",
+  }
+
+  const togglePool = (label: string) => {
+    setSelectedPools((prev) =>
+      prev.includes(label) ? prev.filter((id) => id !== label) : [...prev, label]
+    )
   }
 
   const handleSubmit = async () => {
     setIsSubmitting(true)
-
     try {
-      // 这里可以添加实际的提交逻辑
-      await new Promise((resolve) => setTimeout(resolve, 1000)) // 模拟API请求
-
-      onSubmit({
-        poolIds: selectedPools,
-        // 可以添加其他需要提交的数据
-      })
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      onSubmit({ poolIds: selectedPools })
     } catch (error) {
       console.error("提交失败:", error)
     } finally {
@@ -63,52 +94,82 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
     }
   }
 
+  // 每次弹窗打开时重置分页
+  useEffect(() => { if (dialogOpen) setCurrentPage(1) }, [dialogOpen])
+
   return (
     <div className="bg-white rounded-lg p-6 shadow-sm">
       <h2 className="text-xl font-bold mb-6">流量池选择</h2>
-
       <div className="mb-4">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
+        <div className="relative w-full">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
           <Input
-            placeholder="搜索流量池"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-10"
+            placeholder="选择流量池"
+            value={selectedPools.join(", ")}
+            readOnly
+            className="pl-10 cursor-pointer"
+            onClick={() => setDialogOpen(true)}
           />
         </div>
       </div>
-
-      <div className="space-y-3 mt-4">
-        {filteredPools.map((pool) => (
-          <Card
-            key={pool.id}
-            className={`cursor-pointer border ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
-            onClick={() => togglePool(pool.id)}
-          >
-            <CardContent className="p-4 flex items-center justify-between">
-              <div className="flex items-center space-x-3">
-                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
-                  <Database className="h-5 w-5 text-blue-600" />
-                </div>
-                <div>
-                  <p className="font-medium">{pool.name}</p>
-                  <p className="text-sm text-gray-500">{pool.description}</p>
-                </div>
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-xl w-full p-0">
+          <DialogTitle className="text-lg font-bold text-center mb-4">选择流量池</DialogTitle>
+          <div className="p-6 pt-0">
+            <div className="relative mb-4">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+              <Input
+                placeholder="搜索流量池"
+                value={searchTerm}
+                onChange={e => setSearchTerm(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <div className="overflow-y-auto max-h-96">
+              {pagedPools.map((pool) => (
+                <Card
+                  key={pool.label}
+                  className={`flex items-center justify-between rounded-xl shadow-sm border transition-colors duration-150 mb-4 cursor-pointer
+                    ${selectedPools.includes(pool.label) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
+                    hover:border-blue-400`}
+                  onClick={() => togglePool(pool.label)}
+                >
+                  <div className="flex items-center space-x-3 p-4 flex-1">
+                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
+                      <Database className="h-5 w-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="font-bold text-base">{pool.label}</p>
+                      <p className="text-sm text-gray-500">{poolDescMap[pool.label] || ""}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-3 pr-4">
+                    <span className="text-sm text-gray-500">{pool.count} 人</span>
+                    <Checkbox
+                      checked={selectedPools.includes(pool.label)}
+                      onCheckedChange={() => togglePool(pool.label)}
+                      onClick={e => e.stopPropagation()}
+                    />
+                  </div>
+                </Card>
+              ))}
+            </div>
+            {/* 分页按钮 */}
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-2 mt-4">
+                <Button size="sm" variant="outline" disabled={currentPage === 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>上一页</Button>
+                <span className="text-sm text-gray-500">第 {currentPage} / {totalPages} 页</span>
+                <Button size="sm" variant="outline" disabled={currentPage === totalPages} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>下一页</Button>
               </div>
-              <div className="flex items-center space-x-3">
-                <span className="text-sm text-gray-500">{pool.count} 人</span>
-                <Checkbox
-                  checked={selectedPools.includes(pool.id)}
-                  onCheckedChange={() => togglePool(pool.id)}
-                  onClick={(e) => e.stopPropagation()}
-                />
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
+            )}
+            <div className="flex justify-end mt-6">
+              <Button className="w-full" onClick={() => setDialogOpen(false)} disabled={selectedPools.length === 0}>
+                确认
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
       <div className="mt-8 flex justify-between">
         <Button variant="outline" onClick={onBack}>
           ← 上一步

Server/application/cunkebao/config/route.php

@@ -64,6 +64,7 @@ Route::group('v1/', function () {
         Route::post('update', 'app\cunkebao\controller\WorkbenchController@update'); // 更新工作台
         Route::get('like-records', 'app\cunkebao\controller\WorkbenchController@getLikeRecords'); // 获取点赞记录列表
         Route::get('moments-records', 'app\cunkebao\controller\WorkbenchController@getMomentsRecords'); // 获取朋友圈发布记录列表
+        Route::get('device-labels', 'app\cunkebao\controller\WorkbenchController@getDeviceLabels'); // 获取设备微信好友标签统计
     });
 
     // 内容库相关

Server/application/cunkebao/controller/WorkbenchController.php

@@ -511,7 +511,7 @@ class WorkbenchController extends Controller
                     }
                     break;
                 case self::TYPE_TRAFFIC_DISTRIBUTION:
-                    $config = WorkbenchTrafficDistribution::where('workbenchId', $param['id'])->find();
+                    $config = WorkbenchTrafficConfig::where('workbenchId', $param['id'])->find();
                     if ($config) {
                         $config->distributeType = $param['distributeType'];
                         $config->maxPerDay = $param['maxPerDay'];
@@ -1127,4 +1127,63 @@ class WorkbenchController extends Controller
             return json(['code'=>500, 'msg'=>'创建失败:'.$e->getMessage()]);
         }
     }
+
+    /**
+     * 获取所有微信好友标签及数量统计
+     * @return \think\response\Json
+     */
+    public function getDeviceLabels()
+    {
+        $deviceIds = $this->request->param('deviceIds', '');
+        $companyId = $this->request->userInfo['companyId'];
+
+        $where = [
+            ['wc.companyId', '=', $companyId],
+        ];
+
+        if (!empty($deviceIds)) {
+            $deviceIds = explode(',', $deviceIds);
+            $where[] = ['dwl.deviceId', 'in', $deviceIds];
+        }
+
+        $wechatAccounts = Db::name('wechat_customer')->alias('wc')
+            ->join('device_wechat_login dwl', 'dwl.wechatId = wc.wechatId AND dwl.companyId = wc.companyId AND dwl.alive = 1')
+            ->join(['s2_wechat_account' => 'wa'], 'wa.wechatId = wc.wechatId')
+            ->where($where)
+            ->field('wa.id,wa.wechatId,wa.nickName,wa.labels')
+            ->select();
+
+        $labels = [];
+        $wechatIds = [];
+        foreach ($wechatAccounts as $account) {
+            $labelArr = json_decode($account['labels'], true);
+            if (is_array($labelArr)) {
+                foreach ($labelArr as $label) {
+                    if ($label !== '' && $label !== null) {
+                        $labels[] = $label;
+                    }
+                }
+            }
+            $wechatIds[] = $account['wechatId'];
+        }
+        // 去重（只保留一个）
+        $labels = array_values(array_unique($labels));
+        $wechatIds = array_unique($wechatIds);
+        
+        // 统计数量
+        $newLabel = [];
+        foreach ($labels as $label) {
+            $friendCount = Db::table('s2_wechat_friend')
+                ->whereIn('ownerWechatId',$wechatIds)
+                ->where('labels', 'like', '%'.$label.'%')
+                ->count();
+            $newLabel[] = [
+                'label' => $label,
+                'count' => $friendCount
+            ];
+        }
+
+        // 返回结果
+        return json(['code' => 200, 'msg' => '获取成功', 'data' => $newLabel,'total'=> count($newLabel)]);
+    }
 }