feat: 本次提交更新内容如下
样式构建完成
This commit is contained in:
笔记本里的永平
666
nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
Normal file
666
nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
Normal file
@@ -0,0 +1,666 @@
|
||||
import type React from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button, Input, Tag, Grid, Dialog, ImageViewer, Table, Switch } from 'tdesign-mobile-react';
|
||||
|
||||
|
||||
// 调整场景顺序，确保API获客在最后，并且前三个是最常用的场景
|
||||
const scenarios = [
|
||||
{ id: "haibao", name: "海报获客", type: "material" },
|
||||
{ id: "order", name: "订单获客", type: "api" },
|
||||
{ id: "douyin", name: "抖音获客", type: "social" },
|
||||
{ id: "xiaohongshu", name: "小红书获客", type: "social" },
|
||||
{ id: "phone", name: "电话获客", type: "social" },
|
||||
{ id: "gongzhonghao", name: "公众号获客", type: "social" },
|
||||
{ id: "weixinqun", name: "微信群获客", type: "social" },
|
||||
{ id: "payment", name: "付款码获客", type: "material" },
|
||||
{ id: "api", name: "API获客", type: "api" }, // API获客放在最后
|
||||
]
|
||||
|
||||
const phoneCallTags = [
|
||||
{ id: "tag-1", name: "咨询", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "tag-2", name: "投诉", color: "bg-red-100 text-red-800" },
|
||||
{ id: "tag-3", name: "合作", color: "bg-green-100 text-green-800" },
|
||||
{ id: "tag-4", name: "价格", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "tag-5", name: "售后", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "tag-6", name: "订单", color: "bg-yellow-100 text-yellow-800" },
|
||||
{ id: "tag-7", name: "物流", color: "bg-teal-100 text-teal-800" },
|
||||
]
|
||||
|
||||
// 不同场景的预设标签
|
||||
const scenarioTags = {
|
||||
haibao: [
|
||||
{ id: "poster-tag-1", name: "活动推广", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "poster-tag-2", name: "产品宣传", color: "bg-green-100 text-green-800" },
|
||||
{ id: "poster-tag-3", name: "品牌展示", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "poster-tag-4", name: "优惠促销", color: "bg-red-100 text-red-800" },
|
||||
{ id: "poster-tag-5", name: "新品发布", color: "bg-orange-100 text-orange-800" },
|
||||
],
|
||||
order: [
|
||||
{ id: "order-tag-1", name: "新订单", color: "bg-green-100 text-green-800" },
|
||||
{ id: "order-tag-2", name: "复购客户", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "order-tag-3", name: "高价值订单", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "order-tag-4", name: "待付款", color: "bg-yellow-100 text-yellow-800" },
|
||||
{ id: "order-tag-5", name: "已完成", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
douyin: [
|
||||
{ id: "douyin-tag-1", name: "短视频", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "douyin-tag-2", name: "直播", color: "bg-red-100 text-red-800" },
|
||||
{ id: "douyin-tag-3", name: "带货", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "douyin-tag-4", name: "粉丝互动", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "douyin-tag-5", name: "热门话题", color: "bg-purple-100 text-purple-800" },
|
||||
],
|
||||
xiaohongshu: [
|
||||
{ id: "xhs-tag-1", name: "种草笔记", color: "bg-red-100 text-red-800" },
|
||||
{ id: "xhs-tag-2", name: "美妆", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "xhs-tag-3", name: "穿搭", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "xhs-tag-4", name: "生活方式", color: "bg-green-100 text-green-800" },
|
||||
{ id: "xhs-tag-5", name: "好物推荐", color: "bg-orange-100 text-orange-800" },
|
||||
],
|
||||
phone: phoneCallTags,
|
||||
gongzhonghao: [
|
||||
{ id: "gzh-tag-1", name: "文章推送", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "gzh-tag-2", name: "活动通知", color: "bg-green-100 text-green-800" },
|
||||
{ id: "gzh-tag-3", name: "产品介绍", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "gzh-tag-4", name: "用户服务", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "gzh-tag-5", name: "品牌故事", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
weixinqun: [
|
||||
{ id: "wxq-tag-1", name: "群活动", color: "bg-green-100 text-green-800" },
|
||||
{ id: "wxq-tag-2", name: "产品分享", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "wxq-tag-3", name: "用户交流", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "wxq-tag-4", name: "优惠信息", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "wxq-tag-5", name: "答疑解惑", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "wxq-tag-6", name: "新人欢迎", color: "bg-yellow-100 text-yellow-800" },
|
||||
{ id: "wxq-tag-7", name: "群规通知", color: "bg-gray-100 text-gray-800" },
|
||||
{ id: "wxq-tag-8", name: "活跃互动", color: "bg-indigo-100 text-indigo-800" },
|
||||
],
|
||||
payment: [
|
||||
{ id: "pay-tag-1", name: "扫码支付", color: "bg-green-100 text-green-800" },
|
||||
{ id: "pay-tag-2", name: "线下门店", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "pay-tag-3", name: "活动收款", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "pay-tag-4", name: "服务费用", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "pay-tag-5", name: "会员充值", color: "bg-yellow-100 text-yellow-800" },
|
||||
],
|
||||
api: [
|
||||
{ id: "api-tag-1", name: "系统对接", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "api-tag-2", name: "数据同步", color: "bg-green-100 text-green-800" },
|
||||
{ id: "api-tag-3", name: "自动化", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "api-tag-4", name: "第三方平台", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "api-tag-5", name: "实时推送", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
}
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext?: () => void
|
||||
sceneList: any[]
|
||||
sceneLoading: boolean
|
||||
}
|
||||
|
||||
interface Account {
|
||||
id: string
|
||||
nickname: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
interface Material {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
preview: string
|
||||
}
|
||||
|
||||
const posterTemplates = [
|
||||
{
|
||||
id: "poster-1",
|
||||
name: "点击领取",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E9%A2%86%E5%8F%961-tipd1HI7da6qooY5NkhxQnXBnT5LGU.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-2",
|
||||
name: "点击合作",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%90%88%E4%BD%9C-LPlMdgxtvhqCSr4IM1bZFEFDBF3ztI.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-3",
|
||||
name: "点击咨询",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%92%A8%E8%AF%A2-FTiyAMAPop2g9LvjLOLDz0VwPg3KVu.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-4",
|
||||
name: "点击签到",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E7%AD%BE%E5%88%B0-94TZIkjLldb4P2jTVlI6MkSDg0NbXi.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-5",
|
||||
name: "点击了解",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E4%BA%86%E8%A7%A3-6GCl7mQVdO4WIiykJyweSubLsTwj71.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-6",
|
||||
name: "点击报名",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E6%8A%A5%E5%90%8D-Mj0nnva0BiASeDAIhNNaRRAbjPgjEj.gif",
|
||||
},
|
||||
]
|
||||
|
||||
const generateRandomAccounts = (count: number): Account[] => {
|
||||
return Array.from({ length: count }, (_, index) => ({
|
||||
id: `account-${index + 1}`,
|
||||
nickname: `账号-${Math.random().toString(36).substring(2, 7)}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&text=${index + 1}`,
|
||||
}))
|
||||
}
|
||||
|
||||
const generatePosterMaterials = (): Material[] => {
|
||||
return posterTemplates.map((template) => ({
|
||||
id: template.id,
|
||||
name: template.name,
|
||||
type: "poster",
|
||||
preview: template.preview,
|
||||
}))
|
||||
}
|
||||
|
||||
export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoading }: BasicSettingsProps) {
|
||||
const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false)
|
||||
const [isMaterialDialogOpen, setIsMaterialDialogOpen] = useState(false)
|
||||
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
||||
const [isPhoneSettingsOpen, setIsPhoneSettingsOpen] = useState(false)
|
||||
const [accounts] = useState<Account[]>(generateRandomAccounts(50))
|
||||
const [materials] = useState<Material[]>(generatePosterMaterials())
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<Account[]>(
|
||||
formData.accounts?.length > 0 ? formData.accounts : [],
|
||||
)
|
||||
const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
|
||||
formData.materials?.length > 0 ? formData.materials : [],
|
||||
)
|
||||
// showAllScenarios 默认为 true
|
||||
const [showAllScenarios, setShowAllScenarios] = useState(true);
|
||||
const [isImportDialogOpen, setIsImportDialogOpen] = useState(false)
|
||||
const [importedTags, setImportedTags] = useState<
|
||||
Array<{
|
||||
phone: string
|
||||
wechat: string
|
||||
source?: string
|
||||
orderAmount?: number
|
||||
orderDate?: string
|
||||
}>
|
||||
>(formData.importedTags || [])
|
||||
|
||||
// 自定义标签相关状态
|
||||
const [customTagInput, setCustomTagInput] = useState("");
|
||||
const [customTags, setCustomTags] = useState(formData.customTags || []);
|
||||
const [selectedScenarioTags, setSelectedScenarioTags] = useState(formData.scenarioTags || []);
|
||||
|
||||
// 电话获客相关状态
|
||||
const [phoneSettings, setPhoneSettings] = useState({
|
||||
autoAdd: formData.phoneSettings?.autoAdd ?? true,
|
||||
speechToText: formData.phoneSettings?.speechToText ?? true,
|
||||
questionExtraction: formData.phoneSettings?.questionExtraction ?? true,
|
||||
});
|
||||
|
||||
// 群设置相关状态
|
||||
const [weixinqunName, setWeixinqunName] = useState(formData.weixinqunName || "");
|
||||
const [weixinqunNotice, setWeixinqunNotice] = useState(formData.weixinqunNotice || "");
|
||||
|
||||
// 更新电话获客设置
|
||||
const handlePhoneSettingsUpdate = () => {
|
||||
onChange({ ...formData, phoneSettings });
|
||||
setIsPhoneSettingsOpen(false);
|
||||
};
|
||||
|
||||
// 处理标签选择
|
||||
const handleTagToggle = (tagId: string) => {
|
||||
const newTags = selectedScenarioTags.includes(tagId)
|
||||
? selectedScenarioTags.filter((id: string) => id !== tagId)
|
||||
: [...selectedScenarioTags, tagId]
|
||||
|
||||
setSelectedScenarioTags(newTags)
|
||||
onChange({ ...formData, scenarioTags: newTags })
|
||||
}
|
||||
|
||||
// 处理通话类型选择
|
||||
const handleCallTypeChange = (type: string) => {
|
||||
// setPhoneCallType(type) // This line was removed as per the edit hint.
|
||||
onChange({ ...formData, phoneCallType: type })
|
||||
}
|
||||
|
||||
// 初始化时，如果没有选择场景，默认选择海报获客
|
||||
useEffect(() => {
|
||||
if (!formData.scenario) {
|
||||
onChange({ ...formData, scenario: "haibao" })
|
||||
}
|
||||
|
||||
if (!formData.planName) {
|
||||
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
|
||||
onChange({ ...formData, planName: `海报${today}` })
|
||||
}
|
||||
}, [formData, onChange])
|
||||
|
||||
// 选中场景
|
||||
const handleScenarioSelect = (sceneId: number) => {
|
||||
onChange({ ...formData, scenario: sceneId })
|
||||
}
|
||||
|
||||
// 选中/取消标签
|
||||
const handleScenarioTagToggle = (tag: string) => {
|
||||
const newTags = selectedScenarioTags.includes(tag)
|
||||
? selectedScenarioTags.filter((t: string) => t !== tag)
|
||||
: [...selectedScenarioTags, tag]
|
||||
setSelectedScenarioTags(newTags)
|
||||
onChange({ ...formData, scenarioTags: newTags })
|
||||
}
|
||||
|
||||
// 添加自定义标签
|
||||
const handleAddCustomTag = () => {
|
||||
if (!customTagInput.trim()) return;
|
||||
const newTag = {
|
||||
id: `custom-${Date.now()}`,
|
||||
name: customTagInput.trim(),
|
||||
};
|
||||
const updatedCustomTags = [...customTags, newTag];
|
||||
setCustomTags(updatedCustomTags);
|
||||
setCustomTagInput("");
|
||||
onChange({ ...formData, customTags: updatedCustomTags });
|
||||
};
|
||||
|
||||
// 删除自定义标签
|
||||
const handleRemoveCustomTag = (tagId: string) => {
|
||||
const updatedCustomTags = customTags.filter((tag: any) => tag.id !== tagId);
|
||||
setCustomTags(updatedCustomTags);
|
||||
onChange({ ...formData, customTags: updatedCustomTags });
|
||||
// 同时从选中标签中移除
|
||||
const updatedSelectedTags = selectedScenarioTags.filter((t: string) => t !== tagId);
|
||||
setSelectedScenarioTags(updatedSelectedTags);
|
||||
onChange({ ...formData, scenarioTags: updatedSelectedTags, customTags: updatedCustomTags });
|
||||
};
|
||||
|
||||
// 选择素材（单选）
|
||||
const handleMaterialSelect = (material: Material) => {
|
||||
setSelectedMaterials([material]);
|
||||
onChange({ ...formData, materials: [material] });
|
||||
setIsMaterialDialogOpen(false);
|
||||
};
|
||||
|
||||
// 移除已选素材
|
||||
const handleRemoveMaterial = (id: string) => {
|
||||
setSelectedMaterials([]);
|
||||
onChange({ ...formData, materials: [] });
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const handlePreviewImage = (url: string) => {
|
||||
setIsPreviewOpen(true);
|
||||
};
|
||||
|
||||
// 账号多选切换
|
||||
const handleAccountToggle = (account: Account) => {
|
||||
const isSelected = selectedAccounts.some((a: Account) => a.id === account.id);
|
||||
let newSelected;
|
||||
if (isSelected) {
|
||||
newSelected = selectedAccounts.filter((a: Account) => a.id !== account.id);
|
||||
} else {
|
||||
newSelected = [...selectedAccounts, account];
|
||||
}
|
||||
setSelectedAccounts(newSelected);
|
||||
onChange({ ...formData, accounts: newSelected });
|
||||
};
|
||||
|
||||
// 移除已选账号
|
||||
const handleRemoveAccount = (id: string) => {
|
||||
const newSelected = selectedAccounts.filter((a: Account) => a.id !== id);
|
||||
setSelectedAccounts(newSelected);
|
||||
onChange({ ...formData, accounts: newSelected });
|
||||
};
|
||||
|
||||
// 只显示前三个场景，其他的需要点击展开
|
||||
const displayedScenarios = showAllScenarios ? scenarios : scenarios.slice(0, 3)
|
||||
|
||||
// 处理文件导入
|
||||
const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const content = e.target?.result as string;
|
||||
const rows = content.split("\n").filter((row) => row.trim());
|
||||
const tags = rows.slice(1).map((row) => {
|
||||
const [phone, wechat, source, orderAmount, orderDate] = row.split(",");
|
||||
return {
|
||||
phone: phone?.trim(),
|
||||
wechat: wechat?.trim(),
|
||||
source: source?.trim(),
|
||||
orderAmount: orderAmount ? Number(orderAmount) : undefined,
|
||||
orderDate: orderDate?.trim(),
|
||||
};
|
||||
});
|
||||
setImportedTags(tags);
|
||||
onChange({ ...formData, importedTags: tags });
|
||||
} catch (error) {
|
||||
// 可用 toast 提示
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
|
||||
// 下载模板
|
||||
const handleDownloadTemplate = () => {
|
||||
const template = "电话号码,微信号,来源,订单金额,下单日期\n13800138000,wxid_123,抖音,99.00,2024-03-03";
|
||||
const blob = new Blob([template], { type: "text/csv" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "订单导入模板.csv";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// 账号弹窗关闭时清理搜索等状态
|
||||
const handleAccountDialogClose = () => {
|
||||
setIsAccountDialogOpen(false);
|
||||
// 可在此清理账号搜索等临时状态
|
||||
};
|
||||
// 素材弹窗关闭时清理搜索等状态
|
||||
const handleMaterialDialogClose = () => {
|
||||
setIsMaterialDialogOpen(false);
|
||||
// 可在此清理素材搜索等临时状态
|
||||
};
|
||||
// 订单导入弹窗关闭时清理文件输入等状态
|
||||
const handleImportDialogClose = () => {
|
||||
setIsImportDialogOpen(false);
|
||||
// 可在此清理文件输入等临时状态
|
||||
};
|
||||
// 电话获客弹窗关闭
|
||||
const handlePhoneSettingsDialogClose = () => {
|
||||
setIsPhoneSettingsOpen(false);
|
||||
};
|
||||
// 图片预览关闭
|
||||
const handleImagePreviewClose = () => {
|
||||
setIsPreviewOpen(false);
|
||||
};
|
||||
|
||||
// 当前选中的场景对象
|
||||
const currentScene = sceneList.find(s => s.id === formData.scenario);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 场景选择区块 */}
|
||||
{sceneLoading ? (
|
||||
<div style={{ padding: 16, textAlign: 'center' }}>加载中...</div>
|
||||
) : (
|
||||
<Grid gutter={20} column={3}>
|
||||
{sceneList.map((scene) => (
|
||||
<Button
|
||||
key={scene.id}
|
||||
theme={formData.scenario === scene.id ? 'primary' : 'light'}
|
||||
onClick={() => handleScenarioSelect(scene.id)}
|
||||
size="small"
|
||||
>
|
||||
{scene.name.replace('获客', '')}
|
||||
</Button>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* 计划名称输入区 */}
|
||||
<div className="mb-4">计划名称</div>
|
||||
<div className="border p-2 mb-4">
|
||||
<input
|
||||
className="w-full"
|
||||
type="text"
|
||||
value={formData.planName}
|
||||
onChange={(e) => onChange({ ...formData, planName: String(e.target.value) })}
|
||||
placeholder="请输入计划名称"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 标签选择区块 */}
|
||||
{formData.scenario && (
|
||||
<div className="flex" style={{ flexWrap: 'wrap', gap: 8 }}>
|
||||
{(currentScene?.scenarioTags || []).map((tag: string) => (
|
||||
<Tag
|
||||
key={tag}
|
||||
shape="round"
|
||||
theme={selectedScenarioTags.includes(tag) ? 'primary' : 'default'}
|
||||
onClick={() => handleScenarioTagToggle(tag)}
|
||||
style={{ marginBottom: 4 }}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
{/* 自定义标签 */}
|
||||
{customTags.map((tag: any) => (
|
||||
<Tag
|
||||
key={tag.id}
|
||||
shape="round"
|
||||
theme={selectedScenarioTags.includes(tag.id) ? 'primary' : 'default'}
|
||||
onClick={() => handleScenarioTagToggle(tag.id)}
|
||||
style={{ marginBottom: 4 }}
|
||||
closable
|
||||
onClose={() => handleRemoveCustomTag(tag.id)}
|
||||
>
|
||||
{tag.name}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* 自定义标签输入区 */}
|
||||
<div className="flex p" style={{ gap: 8 }}>
|
||||
<div className="border p-2 flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={customTagInput}
|
||||
onChange={(v) => setCustomTagInput(String(v))}
|
||||
placeholder="添加自定义标签"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<Button theme="primary" size="small" onClick={handleAddCustomTag}>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 账号选择区块 */}
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsAccountDialogOpen(true)}>
|
||||
{selectedAccounts.length ? `已选账号（${selectedAccounts.length}）` : '选择账号'}
|
||||
</Button>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
|
||||
{selectedAccounts.map((account: Account) => (
|
||||
<Tag
|
||||
key={account.id}
|
||||
shape="round"
|
||||
theme="primary"
|
||||
closable
|
||||
onClose={() => handleRemoveAccount(account.id)}
|
||||
>
|
||||
{account.nickname}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
<Dialog
|
||||
visible={isAccountDialogOpen}
|
||||
onClose={handleAccountDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>选择账号</div>
|
||||
<div style={{ maxHeight: 300, overflow: 'auto' }}>
|
||||
{accounts.map((account) => (
|
||||
<div
|
||||
key={account.id}
|
||||
style={{ display: 'flex', alignItems: 'center', marginBottom: 8, cursor: 'pointer' }}
|
||||
onClick={() => handleAccountToggle(account)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedAccounts.some((a: Account) => a.id === account.id)}
|
||||
readOnly
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<span>{account.nickname}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button block theme="primary" onClick={() => setIsAccountDialogOpen(false)} style={{ marginTop: 16 }}>
|
||||
完成
|
||||
</Button>
|
||||
</Dialog>
|
||||
</div>
|
||||
{/* 素材选择区块 */}
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsMaterialDialogOpen(true)}>
|
||||
{selectedMaterials.length ? `已选素材（${selectedMaterials.length}）` : '选择素材'}
|
||||
</Button>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
|
||||
{selectedMaterials.map((material: Material) => (
|
||||
<Tag
|
||||
key={material.id}
|
||||
shape="round"
|
||||
theme="primary"
|
||||
closable
|
||||
onClose={() => handleRemoveMaterial(material.id)}
|
||||
onClick={() => handlePreviewImage(material.preview)}
|
||||
>
|
||||
{material.name}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
<Dialog
|
||||
visible={isMaterialDialogOpen}
|
||||
onClose={handleMaterialDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>选择素材</div>
|
||||
<div style={{ maxHeight: 300, overflow: 'auto' }}>
|
||||
{materials.map((material) => (
|
||||
<div
|
||||
key={material.id}
|
||||
style={{ display: 'flex', alignItems: 'center', marginBottom: 8, cursor: 'pointer' }}
|
||||
onClick={() => handleMaterialSelect(material)}
|
||||
>
|
||||
<img src={material.preview} alt={material.name} style={{ width: 40, height: 40, marginRight: 8, borderRadius: 4 }} />
|
||||
<span>{material.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Dialog>
|
||||
<ImageViewer
|
||||
images={selectedMaterials.map((m: Material) => m.preview)}
|
||||
visible={isPreviewOpen}
|
||||
onClose={handleImagePreviewClose}
|
||||
index={0}
|
||||
/>
|
||||
</div>
|
||||
{/* 订单导入区块 */}
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsImportDialogOpen(true)}>
|
||||
{importedTags.length ? `已导入订单（${importedTags.length}）` : '导入订单'}
|
||||
</Button>
|
||||
<Dialog
|
||||
visible={isImportDialogOpen}
|
||||
onClose={handleImportDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>导入订单</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Button theme="primary" onClick={handleDownloadTemplate} style={{ marginRight: 8 }}>
|
||||
下载模板
|
||||
</Button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={handleFileImport}
|
||||
style={{ display: 'inline-block' }}
|
||||
/>
|
||||
</div>
|
||||
{importedTags.length > 0 && (
|
||||
<Table
|
||||
columns={[
|
||||
{ colKey: 'phone', title: '手机号' },
|
||||
{ colKey: 'wechat', title: '微信号' },
|
||||
{ colKey: 'source', title: '来源' },
|
||||
{ colKey: 'orderAmount', title: '订单金额' },
|
||||
{ colKey: 'orderDate', title: '下单日期' },
|
||||
]}
|
||||
data={importedTags}
|
||||
rowKey="phone"
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</div>
|
||||
{/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
|
||||
{formData.scenario === 'phone' && (
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsPhoneSettingsOpen(true)}>
|
||||
电话获客设置
|
||||
</Button>
|
||||
<Dialog
|
||||
visible={isPhoneSettingsOpen}
|
||||
onClose={handlePhoneSettingsDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>电话获客设置</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span>自动加好友</span>
|
||||
<Switch
|
||||
value={phoneSettings.autoAdd}
|
||||
onChange={(v) => setPhoneSettings((s) => ({ ...s, autoAdd: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span>语音转文字</span>
|
||||
<Switch
|
||||
value={phoneSettings.speechToText}
|
||||
onChange={(v) => setPhoneSettings((s) => ({ ...s, speechToText: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span>问题提取</span>
|
||||
<Switch
|
||||
value={phoneSettings.questionExtraction}
|
||||
onChange={(v) => setPhoneSettings((s) => ({ ...s, questionExtraction: v }))}
|
||||
/>
|
||||
</div>
|
||||
<Button block theme="primary" onClick={handlePhoneSettingsUpdate}>
|
||||
保存设置
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
)}
|
||||
{/* 微信群设置区块，仅在选择微信群场景时显示 */}
|
||||
{formData.scenario === 'weixinqun' && (
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<Input
|
||||
value={weixinqunName}
|
||||
onChange={setWeixinqunName}
|
||||
placeholder="微信群名称"
|
||||
maxlength={20}
|
||||
onBlur={() => onChange({ ...formData, weixinqunName })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
value={weixinqunNotice}
|
||||
onChange={setWeixinqunNotice}
|
||||
placeholder="群公告/欢迎语"
|
||||
maxlength={50}
|
||||
onBlur={() => onChange({ ...formData, weixinqunNotice })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Button block theme="primary" onClick={onNext}>下一步</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user