941 lines
30 KiB
TypeScript
941 lines
30 KiB
TypeScript
import type React from "react";
|
||
import { useState, useEffect, useRef } from "react";
|
||
import {
|
||
Button,
|
||
Input,
|
||
Tag,
|
||
Grid,
|
||
Dialog,
|
||
ImageViewer,
|
||
Table,
|
||
Switch,
|
||
} from "tdesign-mobile-react";
|
||
import EyeIcon from "@/components/icons/EyeIcon";
|
||
import UploadImage from "@/components/UploadImage";
|
||
|
||
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 [customPosters, setCustomPosters] = useState<Material[]>([]);
|
||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||
|
||
// 新增：用于文件选择的ref
|
||
const uploadInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
// 更新电话获客设置
|
||
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 handleCustomPosterUpload = (urls: string[]) => {
|
||
if (urls && urls.length > 0) {
|
||
const newPoster: Material = {
|
||
id: `custom-${Date.now()}`,
|
||
name: "自定义海报",
|
||
type: "poster",
|
||
preview: urls[0],
|
||
};
|
||
setCustomPosters((prev) => [...prev, newPoster]);
|
||
}
|
||
};
|
||
|
||
// 新增：删除自定义海报
|
||
const handleRemoveCustomPoster = (id: string) => {
|
||
setCustomPosters((prev) => prev.filter((p) => p.id !== id));
|
||
// 如果选中则取消选中
|
||
if (selectedMaterials.some((m) => m.id === id)) {
|
||
setSelectedMaterials([]);
|
||
onChange({ ...formData, materials: [] });
|
||
}
|
||
};
|
||
|
||
// 修改：选中/取消选中海报
|
||
const handleMaterialSelect = (material: Material) => {
|
||
const isSelected = selectedMaterials.some((m) => m.id === material.id);
|
||
if (isSelected) {
|
||
setSelectedMaterials([]);
|
||
onChange({ ...formData, materials: [] });
|
||
} else {
|
||
setSelectedMaterials([material]);
|
||
onChange({ ...formData, materials: [material] });
|
||
}
|
||
};
|
||
|
||
// 移除已选素材
|
||
const handleRemoveMaterial = (id: string) => {
|
||
setSelectedMaterials([]);
|
||
onChange({ ...formData, materials: [] });
|
||
};
|
||
|
||
// 新增：全屏预览
|
||
const handlePreviewImage = (url: string) => {
|
||
setPreviewUrl(url);
|
||
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 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);
|
||
//打开订单
|
||
const openOrder =
|
||
formData.scenario !== 2 ? { display: "none" } : { display: "block" };
|
||
|
||
const openPoster =
|
||
formData.scenario !== 1 ? { display: "none" } : { display: "block" };
|
||
|
||
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>
|
||
|
||
<div className="mb-4">获客标签（可多选）</div>
|
||
{/* 标签选择区块 */}
|
||
{formData.scenario && (
|
||
<div className="flex pb-4" 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 }}
|
||
size="large"
|
||
variant="light"
|
||
>
|
||
{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
|
||
size="large"
|
||
variant="light"
|
||
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={(e) => setCustomTagInput(e.target.value)}
|
||
placeholder="添加自定义标签"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
<div className="pt-1">
|
||
<Button theme="primary" size="small" onClick={handleAddCustomTag}>
|
||
添加
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 选素材 */}
|
||
<div className="my-4" style={openPoster}>
|
||
<div className="mb-4">选择海报</div>
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(3, 1fr)",
|
||
gap: 12,
|
||
}}
|
||
>
|
||
{[...materials, ...customPosters].map((material) => {
|
||
const isSelected = selectedMaterials.some(
|
||
(m) => m.id === material.id
|
||
);
|
||
const isCustom = material.id.startsWith("custom-");
|
||
return (
|
||
<div
|
||
key={material.id}
|
||
style={{
|
||
border: isSelected ? "2px solid #1890ff" : "2px solid #eee",
|
||
borderRadius: 8,
|
||
padding: 6,
|
||
cursor: "pointer",
|
||
background: isSelected ? "#e6f7ff" : "#fff",
|
||
transition: "border 0.2s",
|
||
textAlign: "center",
|
||
position: "relative",
|
||
}}
|
||
onClick={() => handleMaterialSelect(material)}
|
||
>
|
||
{/* 预览按钮：自定义海报在左上，内置海报在右上 */}
|
||
<button
|
||
type="button"
|
||
style={{
|
||
position: "absolute",
|
||
top: 8,
|
||
left: isCustom ? 8 : "auto",
|
||
right: isCustom ? "auto" : 8,
|
||
background: "rgba(0,0,0,0.5)",
|
||
border: "none",
|
||
borderRadius: "50%",
|
||
padding: 2,
|
||
zIndex: 2,
|
||
cursor: "pointer",
|
||
}}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handlePreviewImage(material.preview);
|
||
}}
|
||
>
|
||
<EyeIcon style={{ color: "#fff", width: 18, height: 18 }} />
|
||
</button>
|
||
{/* 删除自定义海报按钮 */}
|
||
{isCustom && (
|
||
<button
|
||
type="button"
|
||
style={{
|
||
position: "absolute",
|
||
top: 8,
|
||
right: 8,
|
||
width: 24,
|
||
height: 24,
|
||
background: "rgba(0,0,0,0.5)",
|
||
border: "none",
|
||
borderRadius: "50%",
|
||
padding: 0,
|
||
zIndex: 2,
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleRemoveCustomPoster(material.id);
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
color: "#fff",
|
||
fontWeight: 700,
|
||
fontSize: 16,
|
||
lineHeight: "24px",
|
||
}}
|
||
>
|
||
×
|
||
</span>
|
||
</button>
|
||
)}
|
||
<img
|
||
src={material.preview}
|
||
alt={material.name}
|
||
style={{
|
||
width: 100,
|
||
height: 180,
|
||
objectFit: "cover",
|
||
borderRadius: 4,
|
||
marginBottom: 0,
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "relative",
|
||
top: "-32px",
|
||
width: "100%",
|
||
background: "rgba(0,0,0,0.5)",
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
padding: "4px 0",
|
||
borderBottomLeftRadius: 4,
|
||
borderBottomRightRadius: 4,
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
{material.name}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
{/* 添加海报卡片 */}
|
||
<div
|
||
style={{
|
||
border: "2px dashed #bbb",
|
||
borderRadius: 8,
|
||
padding: 6,
|
||
cursor: "pointer",
|
||
background: "#fafbfc",
|
||
textAlign: "center",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
height: 220,
|
||
}}
|
||
onClick={() => uploadInputRef.current?.click()}
|
||
>
|
||
<span style={{ fontSize: 36, color: "#bbb", marginBottom: 8 }}>
|
||
+
|
||
</span>
|
||
<span style={{ color: "#888" }}>添加海报</span>
|
||
<input
|
||
ref={uploadInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
style={{ display: "none" }}
|
||
onChange={async (e) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) {
|
||
// 直接上传
|
||
try {
|
||
const url = await (
|
||
await import("@/api/upload")
|
||
).uploadImage(file);
|
||
const newPoster = {
|
||
id: `custom-${Date.now()}`,
|
||
name: "自定义海报",
|
||
type: "poster",
|
||
preview: url,
|
||
};
|
||
setCustomPosters((prev) => [...prev, newPoster]);
|
||
} catch (err) {
|
||
// 可加toast提示
|
||
}
|
||
e.target.value = "";
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{/* 全屏图片预览 */}
|
||
<ImageViewer
|
||
images={previewUrl ? [previewUrl] : []}
|
||
visible={isPreviewOpen}
|
||
onClose={() => {
|
||
setIsPreviewOpen(false);
|
||
setPreviewUrl(null);
|
||
}}
|
||
index={0}
|
||
/>
|
||
</div>
|
||
{/* 订单导入区块 */}
|
||
<div style={openOrder} className="my-4">
|
||
<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>
|
||
);
|
||
}
|