|
|
@@ -44,8 +44,12 @@
|
|
|
<h4><i class="fas fa-info-circle"></i> 活动基本信息</h4>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">活动名称 <span class="required">*</span></label>
|
|
|
- <input type="text" class="form-input" v-model="newCampaign.name"
|
|
|
- placeholder="例如：2026春季中东客户开发活动" />
|
|
|
+ <el-input
|
|
|
+ v-model="newCampaign.name"
|
|
|
+ maxlength="30"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="例如：2026春季中东客户开发活动"
|
|
|
+ />
|
|
|
<div class="form-hint" v-if="!newCampaign.name">
|
|
|
建议格式：时间+区域+目标+活动类型
|
|
|
</div>
|
|
|
@@ -53,70 +57,83 @@
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">活动类型</label>
|
|
|
- <select class="form-select" v-model="newCampaign.type">
|
|
|
- <option value="prospect">潜客开发</option>
|
|
|
- <option value="nurture">客户培育</option>
|
|
|
- <option value="reactivate">客户唤醒</option>
|
|
|
- <option value="promote">产品推广</option>
|
|
|
- <option value="seasonal">节日营销</option>
|
|
|
- <option value="exhibition">展会跟进</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.type" placeholder="请选择活动类型">
|
|
|
+ <el-option label="潜客开发" value="潜客开发" />
|
|
|
+ <el-option label="客户培育" value="客户培育" />
|
|
|
+ <el-option label="客户唤醒" value="客户唤醒" />
|
|
|
+ <el-option label="产品推广" value="产品推广" />
|
|
|
+ <el-option label="节日营销" value="节日营销" />
|
|
|
+ <el-option label="展会跟进" value="展会跟进" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">优先级</label>
|
|
|
- <select class="form-select" v-model="newCampaign.priority">
|
|
|
- <option value="urgent">紧急</option>
|
|
|
- <option value="high">高优先</option>
|
|
|
- <option value="medium">中等</option>
|
|
|
- <option value="low">低优先</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.priority" placeholder="请选择优先级">
|
|
|
+ <el-option label="高" value="高" />
|
|
|
+ <el-option label="中" value="中" />
|
|
|
+ <el-option label="低" value="低" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">开始日期</label>
|
|
|
- <input type="date" class="form-input" v-model="newCampaign.startDate" />
|
|
|
+ <el-date-picker
|
|
|
+ v-model="newCampaign.startDate"
|
|
|
+ type="datetime"
|
|
|
+ format="YYYY-MM-DD HH:mm"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="选择开始时间"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">结束日期</label>
|
|
|
- <input type="date" class="form-input" v-model="newCampaign.endDate" />
|
|
|
+ <el-date-picker
|
|
|
+ v-model="newCampaign.endDate"
|
|
|
+ type="datetime"
|
|
|
+ format="YYYY-MM-DD HH:mm"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="选择结束时间"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">负责人</label>
|
|
|
- <select class="form-select" v-model="newCampaign.owner">
|
|
|
- <option value="">选择负责人</option>
|
|
|
- <option value="sales1">张经理</option>
|
|
|
- <option value="sales2">李主管</option>
|
|
|
- <option value="sales3">王小明</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.owner" multiple collapse-tags placeholder="选择负责人">
|
|
|
+ <el-option label="张经理" value="sales1" />
|
|
|
+ <el-option label="李主管" value="sales2" />
|
|
|
+ <el-option label="王小明" value="sales3" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">活动描述</label>
|
|
|
- <textarea class="form-textarea" v-model="newCampaign.description" rows="3"
|
|
|
- placeholder="描述本次营销活动的目标和策略..."></textarea>
|
|
|
+ <el-input
|
|
|
+ v-model="newCampaign.description"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ maxlength="150"
|
|
|
+ show-word-limit
|
|
|
+ placeholder="描述本次营销活动的目标和策略..."
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">活动目标</label>
|
|
|
<div class="goal-inputs">
|
|
|
<div class="goal-item">
|
|
|
<i class="fas fa-envelope"></i>
|
|
|
- <input type="number" class="goal-input" v-model="newCampaign.goals.sent"
|
|
|
- placeholder="0" />
|
|
|
+ <el-input-number v-model="newCampaign.goals.sent" :controls="false" :min="0" />
|
|
|
<span>发送量</span>
|
|
|
</div>
|
|
|
<div class="goal-item">
|
|
|
<i class="fas fa-envelope-open"></i>
|
|
|
- <input type="number" class="goal-input" v-model="newCampaign.goals.openRate"
|
|
|
- placeholder="0" />
|
|
|
+ <el-input-number v-model="newCampaign.goals.openRate" :controls="false" :min="0" :max="100" />
|
|
|
<span>% 打开率</span>
|
|
|
</div>
|
|
|
<div class="goal-item">
|
|
|
<i class="fas fa-reply"></i>
|
|
|
- <input type="number" class="goal-input" v-model="newCampaign.goals.replyRate"
|
|
|
- placeholder="0" />
|
|
|
+ <el-input-number v-model="newCampaign.goals.replyRate" :controls="false" :min="0" :max="100" />
|
|
|
<span>% 回复率</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -188,54 +205,49 @@
|
|
|
<div class="filter-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">地区</label>
|
|
|
- <select class="form-select" v-model="newCampaign.filters.region">
|
|
|
- <option value="">全部地区</option>
|
|
|
- <option value="middle-east">中东</option>
|
|
|
- <option value="europe">欧洲</option>
|
|
|
- <option value="north-america">北美</option>
|
|
|
- <option value="southeast-asia">东南亚</option>
|
|
|
- <option value="africa">非洲</option>
|
|
|
- <option value="south-america">南美</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.filters.region" clearable placeholder="全部地区">
|
|
|
+ <el-option label="中东" value="middle-east" />
|
|
|
+ <el-option label="欧洲" value="europe" />
|
|
|
+ <el-option label="北美" value="north-america" />
|
|
|
+ <el-option label="东南亚" value="southeast-asia" />
|
|
|
+ <el-option label="非洲" value="africa" />
|
|
|
+ <el-option label="南美" value="south-america" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">行业</label>
|
|
|
- <select class="form-select" v-model="newCampaign.filters.industry">
|
|
|
- <option value="">全部行业</option>
|
|
|
- <option value="datacenter">数据中心</option>
|
|
|
- <option value="consumer">消费电子</option>
|
|
|
- <option value="distributor">电子分销</option>
|
|
|
- <option value="retail">零售</option>
|
|
|
- <option value="manufacturing">制造业</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.filters.industry" clearable placeholder="全部行业">
|
|
|
+ <el-option label="数据中心" value="datacenter" />
|
|
|
+ <el-option label="消费电子" value="consumer" />
|
|
|
+ <el-option label="电子分销" value="distributor" />
|
|
|
+ <el-option label="零售" value="retail" />
|
|
|
+ <el-option label="制造业" value="manufacturing" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">意向分数</label>
|
|
|
- <select class="form-select" v-model="newCampaign.filters.scoreRange">
|
|
|
- <option value="">不限</option>
|
|
|
- <option value="high">80-100分</option>
|
|
|
- <option value="medium">60-79分</option>
|
|
|
- <option value="low">40-59分</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.filters.scoreRange" clearable placeholder="不限">
|
|
|
+ <el-option label="80-100分" value="high" />
|
|
|
+ <el-option label="60-79分" value="medium" />
|
|
|
+ <el-option label="40-59分" value="low" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">客户规模</label>
|
|
|
- <select class="form-select" v-model="newCampaign.filters.companySize">
|
|
|
- <option value="">不限</option>
|
|
|
- <option value="large">大型企业(500+)</option>
|
|
|
- <option value="medium">中型企业(100-500)</option>
|
|
|
- <option value="small">小微企业(<100)</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.filters.companySize" clearable placeholder="不限">
|
|
|
+ <el-option label="大型企业(500+)" value="large" />
|
|
|
+ <el-option label="中型企业(100-500)" value="medium" />
|
|
|
+ <el-option label="小微企业(<100)" value="small" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 自定义关键词搜索 -->
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">关键词搜索</label>
|
|
|
<div class="keyword-search">
|
|
|
- <input type="text" class="form-input" v-model="newCampaign.filters.keyword"
|
|
|
- placeholder="搜索公司名、联系人、产品关键词..." />
|
|
|
+ <el-input v-model="newCampaign.filters.keyword" placeholder="搜索公司名、联系人、产品关键词..." clearable />
|
|
|
<button class="btn btn-secondary">
|
|
|
<i class="fas fa-search"></i>
|
|
|
</button>
|
|
|
@@ -331,47 +343,44 @@
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">发件邮箱</label>
|
|
|
- <select class="form-select" v-model="newCampaign.emailSender">
|
|
|
- <option>sales@company.com</option>
|
|
|
- <option>marketing@company.com</option>
|
|
|
- <option>support@company.com</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.emailSender" placeholder="请选择发件邮箱">
|
|
|
+ <el-option label="sales@company.com" value="sales@company.com" />
|
|
|
+ <el-option label="marketing@company.com" value="marketing@company.com" />
|
|
|
+ <el-option label="support@company.com" value="support@company.com" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">发送时间</label>
|
|
|
- <select class="form-select" v-model="newCampaign.emailSendTime">
|
|
|
- <option value="optimal">AI推荐最优时间</option>
|
|
|
- <option value="morning">上午 9:00-11:00</option>
|
|
|
- <option value="afternoon">下午 14:00-16:00</option>
|
|
|
- <option value="evening">晚上 19:00-21:00</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.emailSendTime" placeholder="请选择发送时间">
|
|
|
+ <el-option label="AI推荐最优时间" value="optimal" />
|
|
|
+ <el-option label="上午 9:00-11:00" value="morning" />
|
|
|
+ <el-option label="下午 14:00-16:00" value="afternoon" />
|
|
|
+ <el-option label="晚上 19:00-21:00" value="evening" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">生成方式</label>
|
|
|
- <select class="form-select" v-model="newCampaign.emailTemplate">
|
|
|
- <option value="default">默认模板</option>
|
|
|
- <option value="professional">专业商务</option>
|
|
|
- <option value="friendly">友好亲切</option>
|
|
|
- <option value="minimal">极简风格</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.emailTemplate" placeholder="请选择生成方式">
|
|
|
+ <el-option label="AI自主" value="AI自主" />
|
|
|
+ <el-option label="人工协同" value="人工协同" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">每批发送量</label>
|
|
|
- <select class="form-select" v-model="newCampaign.batchSize">
|
|
|
- <option value="50">50封/批</option>
|
|
|
- <option value="100">100封/批</option>
|
|
|
- <option value="200">200封/批</option>
|
|
|
- <option value="500">500封/批</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.batchSize" placeholder="请选择每批发送量">
|
|
|
+ <el-option label="50封/批" value="50" />
|
|
|
+ <el-option label="100封/批" value="100" />
|
|
|
+ <el-option label="200封/批" value="200" />
|
|
|
+ <el-option label="500封/批" value="500" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">邮件主题 <span class="required">*</span></label>
|
|
|
<div class="subject-input-group">
|
|
|
- <input type="text" class="form-input" v-model="newCampaign.emailSubject"
|
|
|
- placeholder="输入邮件主题" />
|
|
|
+ <el-input style="flex: 1" v-model="newCampaign.emailSubject" placeholder="输入邮件主题" />
|
|
|
<button class="btn btn-primary" @click="generateSubjectAI">
|
|
|
<i class="fas fa-magic"></i> AI优化
|
|
|
</button>
|
|
|
@@ -386,8 +395,7 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">邮件预览文本</label>
|
|
|
- <input type="text" class="form-input" v-model="newCampaign.emailPreviewText"
|
|
|
- placeholder="邮件列表中显示的预览文字（可选）" />
|
|
|
+ <el-input v-model="newCampaign.emailPreviewText" placeholder="邮件列表中显示的预览文字（可选）" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -397,24 +405,23 @@
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">发送账号</label>
|
|
|
- <select class="form-select" v-model="newCampaign.whatsappAccount">
|
|
|
- <option>业务账号1</option>
|
|
|
- <option>业务账号2</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.whatsappAccount" placeholder="请选择发送账号">
|
|
|
+ <el-option label="业务账号1" value="业务账号1" />
|
|
|
+ <el-option label="业务账号2" value="业务账号2" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">发送间隔</label>
|
|
|
- <select class="form-select" v-model="newCampaign.whatsappInterval">
|
|
|
- <option value="30">30秒/条</option>
|
|
|
- <option value="60">1分钟/条</option>
|
|
|
- <option value="120">2分钟/条</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.whatsappInterval" placeholder="请选择发送间隔">
|
|
|
+ <el-option label="30秒/条" value="30" />
|
|
|
+ <el-option label="1分钟/条" value="60" />
|
|
|
+ <el-option label="2分钟/条" value="120" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">消息模板</label>
|
|
|
- <textarea class="form-textarea" v-model="newCampaign.whatsappTemplate" rows="3"
|
|
|
- placeholder="输入 WhatsApp 消息模板..."></textarea>
|
|
|
+ <el-input v-model="newCampaign.whatsappTemplate" type="textarea" :rows="3" placeholder="输入 WhatsApp 消息模板..." />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -424,19 +431,19 @@
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">操作类型</label>
|
|
|
- <select class="form-select" v-model="newCampaign.linkedinAction">
|
|
|
- <option value="message">发送消息</option>
|
|
|
- <option value="connect">发送连接请求</option>
|
|
|
- <option value="inmail">InMail</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.linkedinAction" placeholder="请选择操作类型">
|
|
|
+ <el-option label="发送消息" value="message" />
|
|
|
+ <el-option label="发送连接请求" value="connect" />
|
|
|
+ <el-option label="InMail" value="inmail" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">每日上限</label>
|
|
|
- <select class="form-select" v-model="newCampaign.linkedinLimit">
|
|
|
- <option value="20">20次/天</option>
|
|
|
- <option value="30">30次/天</option>
|
|
|
- <option value="50">50次/天</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.linkedinLimit" placeholder="请选择每日上限">
|
|
|
+ <el-option label="20次/天" value="20" />
|
|
|
+ <el-option label="30次/天" value="30" />
|
|
|
+ <el-option label="50次/天" value="50" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -501,12 +508,12 @@
|
|
|
<div class="rule-desc">3天后发送提醒邮件，更换主题行</div>
|
|
|
</div>
|
|
|
<div class="rule-config" v-if="newCampaign.rules.noOpenFollowup">
|
|
|
- <select class="mini-select" v-model="newCampaign.rules.noOpenFollowupDays">
|
|
|
- <option value="2">2天后</option>
|
|
|
- <option value="3">3天后</option>
|
|
|
- <option value="5">5天后</option>
|
|
|
- <option value="7">7天后</option>
|
|
|
- </select>
|
|
|
+ <el-select class="mini-select" v-model="newCampaign.rules.noOpenFollowupDays" placeholder="请选择">
|
|
|
+ <el-option label="2天后" value="2" />
|
|
|
+ <el-option label="3天后" value="3" />
|
|
|
+ <el-option label="5天后" value="5" />
|
|
|
+ <el-option label="7天后" value="7" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rule-item">
|
|
|
@@ -519,11 +526,11 @@
|
|
|
<div class="rule-desc">7天后跟进</div>
|
|
|
</div>
|
|
|
<div class="rule-config" v-if="newCampaign.rules.noReplyFollowup">
|
|
|
- <select class="mini-select" v-model="newCampaign.rules.noReplyFollowupDays">
|
|
|
- <option value="5">5天后</option>
|
|
|
- <option value="7">7天后</option>
|
|
|
- <option value="10">10天后</option>
|
|
|
- </select>
|
|
|
+ <el-select class="mini-select" v-model="newCampaign.rules.noReplyFollowupDays" placeholder="请选择">
|
|
|
+ <el-option label="5天后" value="5" />
|
|
|
+ <el-option label="7天后" value="7" />
|
|
|
+ <el-option label="10天后" value="10" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rule-item">
|
|
|
@@ -551,29 +558,29 @@
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">测试变量</label>
|
|
|
- <select class="form-select" v-model="newCampaign.abTest.variable">
|
|
|
- <option value="subject">邮件主题</option>
|
|
|
- <option value="content">邮件内容</option>
|
|
|
- <option value="sendTime">发送时间</option>
|
|
|
- <option value="fromName">发件人名称</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.abTest.variable" placeholder="请选择测试变量">
|
|
|
+ <el-option label="邮件主题" value="subject" />
|
|
|
+ <el-option label="邮件内容" value="content" />
|
|
|
+ <el-option label="发送时间" value="sendTime" />
|
|
|
+ <el-option label="发件人名称" value="fromName" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">测试比例</label>
|
|
|
- <select class="form-select" v-model="newCampaign.abTest.ratio">
|
|
|
- <option value="50">50% : 50%</option>
|
|
|
- <option value="30">30% : 70%</option>
|
|
|
- <option value="20">20% : 80%</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.abTest.ratio" placeholder="请选择测试比例">
|
|
|
+ <el-option label="50% : 50%" value="50" />
|
|
|
+ <el-option label="30% : 70%" value="30" />
|
|
|
+ <el-option label="20% : 80%" value="20" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">胜出条件</label>
|
|
|
- <select class="form-select" v-model="newCampaign.abTest.winnerCriteria">
|
|
|
- <option value="openRate">打开率最高</option>
|
|
|
- <option value="clickRate">点击率最高</option>
|
|
|
- <option value="replyRate">回复率最高</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="newCampaign.abTest.winnerCriteria" placeholder="请选择胜出条件">
|
|
|
+ <el-option label="打开率最高" value="openRate" />
|
|
|
+ <el-option label="点击率最高" value="clickRate" />
|
|
|
+ <el-option label="回复率最高" value="replyRate" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="ab-test-preview">
|
|
|
<div class="ab-variant">
|
|
|
@@ -584,8 +591,7 @@
|
|
|
</div>
|
|
|
<div class="ab-variant">
|
|
|
<span class="variant-label">B 版本</span>
|
|
|
- <input type="text" class="variant-input" v-model="newCampaign.abTest.variantB"
|
|
|
- placeholder="输入测试主题..." />
|
|
|
+ <el-input v-model="newCampaign.abTest.variantB" class="variant-input" placeholder="输入测试主题..." />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -628,11 +634,11 @@
|
|
|
<div class="form-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">开始日期</label>
|
|
|
- <input type="date" class="form-input" v-model="newCampaign.scheduledDate" />
|
|
|
+ <el-date-picker v-model="newCampaign.scheduledDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期" />
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">开始时间</label>
|
|
|
- <input type="time" class="form-input" v-model="newCampaign.scheduledTime" />
|
|
|
+ <el-time-picker v-model="newCampaign.scheduledTime" format="HH:mm" value-format="HH:mm" placeholder="选择时间" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -797,7 +803,7 @@
|
|
|
<button v-if="currentStep < 5" class="btn btn-primary" @click="currentStep++">
|
|
|
下一步 <i class="fas fa-arrow-right"></i>
|
|
|
</button>
|
|
|
- <button v-else class="btn btn-primary" :disabled="!canCreate" @click="createCampaign">
|
|
|
+ <button v-else class="btn btn-primary" :disabled="!canCreate || isSubmitting" @click="createCampaign">
|
|
|
<i class="fas fa-rocket"></i> 创建活动
|
|
|
</button>
|
|
|
</div>
|
|
|
@@ -815,7 +821,7 @@
|
|
|
<!-- SOP 名称 -->
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">序列名称 <span class="required">*</span></label>
|
|
|
- <input type="text" class="form-input" v-model="customSopData.name" placeholder="例如：我的自定义开发序列">
|
|
|
+ <el-input v-model="customSopData.name" placeholder="例如：我的自定义开发序列" />
|
|
|
</div>
|
|
|
|
|
|
<!-- 步骤列表 -->
|
|
|
@@ -834,25 +840,23 @@
|
|
|
<div class="step-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">步骤名称</label>
|
|
|
- <input type="text" class="form-input" v-model="step.title"
|
|
|
- placeholder="例如：发送产品介绍">
|
|
|
+ <el-input v-model="step.title" placeholder="例如：发送产品介绍" />
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">间隔天数</label>
|
|
|
- <input type="number" class="form-input" v-model="step.day" min="1" max="30">
|
|
|
+ <el-input-number v-model="step.day" :controls="false" :min="1" :max="30" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="step-row">
|
|
|
<div class="form-group">
|
|
|
<label class="form-label">触达渠道</label>
|
|
|
- <select class="form-select" v-model="step.channel"
|
|
|
- @change="updateChannelIcon(index)">
|
|
|
- <option value="email">邮件</option>
|
|
|
- <option value="whatsapp">WhatsApp</option>
|
|
|
- <option value="linkedin">LinkedIn</option>
|
|
|
- <option value="phone">电话</option>
|
|
|
- <option value="wechat">微信</option>
|
|
|
- </select>
|
|
|
+ <el-select v-model="step.channel" placeholder="请选择渠道" @change="updateChannelIcon(index)">
|
|
|
+ <el-option label="邮件" value="email" />
|
|
|
+ <el-option label="WhatsApp" value="whatsapp" />
|
|
|
+ <el-option label="LinkedIn" value="linkedin" />
|
|
|
+ <el-option label="电话" value="phone" />
|
|
|
+ <el-option label="微信" value="wechat" />
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="channel-preview">
|
|
|
<div class="preview-badge" :class="step.channel">
|
|
|
@@ -913,12 +917,20 @@
|
|
|
<script setup>
|
|
|
import { ref, computed } from 'vue'
|
|
|
import PreviewCustomerModal from './PreviewCustomerModal.vue'
|
|
|
+ import { getSopList, addMarketing } from '@/api/marketing'
|
|
|
|
|
|
const showCreateModal = ref(false)
|
|
|
const currentStep = ref(1)
|
|
|
+ const toast = (message, type = 'success') => {
|
|
|
+ if (typeof window !== 'undefined' && typeof window.toast === 'function') {
|
|
|
+ window.toast(message, type)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console[type === 'success' ? 'log' : 'warn'](`[toast] ${message}`)
|
|
|
+ }
|
|
|
const newCampaign = ref({
|
|
|
- name: '', type: 'prospect', priority: 'medium', description: '',
|
|
|
- startDate: '', endDate: '', owner: '', relatedOpportunity: '',
|
|
|
+ name: '', type: '潜客开发', priority: '中', description: '',
|
|
|
+ startDate: '', endDate: '', owner: [], relatedOpportunity: '',
|
|
|
segment: 'all', aiRecommend: 'high-value',
|
|
|
filters: {
|
|
|
region: '', industry: '', scoreRange: '', stage: '', companySize: '', purchaseCycle: '',
|
|
|
@@ -927,7 +939,7 @@
|
|
|
goals: { sent: 500, openRate: 40, replyRate: 10, opportunities: 15 },
|
|
|
channels: ['email'],
|
|
|
emailSender: 'sales@company.com', emailSendTime: 'optimal',
|
|
|
- emailTemplate: 'default', batchSize: '100',
|
|
|
+ emailTemplate: 'AI自主', batchSize: '100',
|
|
|
emailSubject: '', emailPreviewText: '',
|
|
|
trackOpen: true, trackClick: true, trackReply: true,
|
|
|
whatsappAccount: '业务账号1', whatsappInterval: '60', whatsappTemplate: '',
|
|
|
@@ -1017,9 +1029,91 @@
|
|
|
const getChannelIconById = (id) => ({ email: 'fas fa-envelope', whatsapp: 'fab fa-whatsapp', linkedin: 'fab fa-linkedin', wechat: 'fab fa-weixin' }[id] || 'fas fa-comment')
|
|
|
const hasWarnings = computed(() => selectedCustomerCount.value > 500 || !newCampaign.value.emailSubject || newCampaign.value.channels.length === 0)
|
|
|
const confirmChecks = ref({ content: false, schedule: false, compliance: false, unsubscribe: true })
|
|
|
+ const isSubmitting = ref(false)
|
|
|
const canCreate = computed(() => confirmChecks.value.content && confirmChecks.value.schedule && confirmChecks.value.compliance)
|
|
|
|
|
|
- const createCampaign = () => { closeCreateModal(); toast('营销活动已创建', 'success') }
|
|
|
+ const goToStep = (step) => { currentStep.value = step }
|
|
|
+
|
|
|
+ const createCampaign = async () => {
|
|
|
+ if (!newCampaign.value.name) {
|
|
|
+ currentStep.value = 1
|
|
|
+ toast('请填写活动名称', 'error')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (newCampaign.value.channels.includes('email') && !newCampaign.value.emailSubject) {
|
|
|
+ currentStep.value = 3
|
|
|
+ toast('请设置邮件主题', 'error')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!canCreate.value) {
|
|
|
+ toast('请完成确认事项后创建活动', 'error')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ isSubmitting.value = true
|
|
|
+ try {
|
|
|
+ const typeMap = { prospect: 1, nurture: 2, reactivate: 3, promote: 4, seasonal: 5, exhibition: 6 }
|
|
|
+ const priorityMap = { urgent: 1, high: 2, medium: 3, low: 4 }
|
|
|
+ const ownerMap = { sales1: 1, sales2: 2, sales3: 3 }
|
|
|
+ const selectedOwners = Array.isArray(newCampaign.value.owner)
|
|
|
+ ? newCampaign.value.owner.filter(Boolean)
|
|
|
+ : [newCampaign.value.owner].filter(Boolean)
|
|
|
+ const sopIdMap = { standard: 1, aggressive: 2, nurture: 3, reactivate: 4, custom: 0 }
|
|
|
+ const channelConfig = newCampaign.value.channels.reduce((acc, channel) => {
|
|
|
+ if (channel === 'email') return acc + 1
|
|
|
+ if (channel === 'whatsapp') return acc + 2
|
|
|
+ if (channel === 'linkedin') return acc + 4
|
|
|
+ return acc
|
|
|
+ }, 0)
|
|
|
+ const payload = {
|
|
|
+ name: newCampaign.value.name,
|
|
|
+ type: typeMap[newCampaign.value.type] || 1,
|
|
|
+ priority: priorityMap[newCampaign.value.priority] || 3,
|
|
|
+ description: newCampaign.value.description,
|
|
|
+ beginData: newCampaign.value.startDate || null,
|
|
|
+ endDate: newCampaign.value.endDate || null,
|
|
|
+ supervisor: selectedOwners.length ? ownerMap[selectedOwners[0]] || null : null,
|
|
|
+ linkToOpportunity: newCampaign.value.relatedOpportunity || null,
|
|
|
+ sendVolume: Number(newCampaign.value.goals.sent) || null,
|
|
|
+ openRate: Number(newCampaign.value.goals.openRate) || null,
|
|
|
+ replyRate: Number(newCampaign.value.goals.replyRate) || null,
|
|
|
+ opportunityCount: Number(newCampaign.value.goals.opportunities) || null,
|
|
|
+ channelConfiguration: channelConfig,
|
|
|
+ emailAddress: newCampaign.value.emailSender,
|
|
|
+ emailSentTime: newCampaign.value.emailSendTime,
|
|
|
+ emailTemplate: newCampaign.value.emailTemplate,
|
|
|
+ emailBatchSize: Number(newCampaign.value.batchSize) || null,
|
|
|
+ emailSubject: newCampaign.value.emailSubject,
|
|
|
+ trackConfigOpen: newCampaign.value.trackOpen ? 1 : 0,
|
|
|
+ trackConfigClick: newCampaign.value.trackClick ? 1 : 0,
|
|
|
+ trackConfigReply: newCampaign.value.trackReply ? 1 : 0,
|
|
|
+ sopId: sopIdMap[newCampaign.value.sopTemplate] || 0,
|
|
|
+ followUpRulesNotOpened: newCampaign.value.rules.noOpenFollowup ? 1 : 0,
|
|
|
+ followUpRulesNotOpenedDays: newCampaign.value.rules.noOpenFollowupDays,
|
|
|
+ followUpRulesNotReplied: newCampaign.value.rules.noReplyFollowup ? 1 : 0,
|
|
|
+ followUpRulesNotRepliedDays: newCampaign.value.rules.noReplyFollowupDays,
|
|
|
+ followUpRulesLinkNotClicked: newCampaign.value.rules.noClickFollowup ? 1 : 0,
|
|
|
+ followUpRulesLinkNotClickedDays: newCampaign.value.rules.noClickFollowupDays || null,
|
|
|
+ followUpRulesReplied: newCampaign.value.rules.stopOnReply ? 1 : 0,
|
|
|
+ followUpRulesAppointmentBooked: newCampaign.value.rules.stopOnBooking ? 1 : 0,
|
|
|
+ aBTesting: newCampaign.value.abTest.enabled ? 1 : 0,
|
|
|
+ smartSchedulingType: newCampaign.value.scheduleMode,
|
|
|
+ smartSchedulingStartDate: newCampaign.value.scheduledDate || null,
|
|
|
+ smartSchedulingStartTime: newCampaign.value.scheduledTime || null,
|
|
|
+ hasContentCompliant: confirmChecks.value.content ? 1 : 0,
|
|
|
+ hasScheduleApproved: confirmChecks.value.schedule ? 1 : 0,
|
|
|
+ hasGdprCompliant: confirmChecks.value.compliance ? 1 : 0,
|
|
|
+ hasUnsubscribeLink: confirmChecks.value.unsubscribe ? 1 : 0
|
|
|
+ }
|
|
|
+ console.log(payload)
|
|
|
+ await addMarketing(payload)
|
|
|
+ toast('营销活动已创建', 'success')
|
|
|
+ closeCreateModal()
|
|
|
+ } catch (error) {
|
|
|
+ toast(error?.message || '创建营销活动失败', 'error')
|
|
|
+ } finally {
|
|
|
+ isSubmitting.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
const selectSubject = (subj) => { newCampaign.value.emailSubject = subj; showSubjectSuggestions.value = false }
|
|
|
const toggleChannel = (id) => {
|
|
|
@@ -1136,7 +1230,17 @@
|
|
|
toast('自定义SOP已保存', 'success')
|
|
|
}
|
|
|
|
|
|
- const open = () => { currentStep.value = 1; showCreateModal.value = true }
|
|
|
+ const getSop = () => {
|
|
|
+ getSopList({ pageIndex: 1, pageSize: 100 }).then(res => {
|
|
|
+ console.log('res :>> ', res);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const open = () => {
|
|
|
+ currentStep.value = 1;
|
|
|
+ showCreateModal.value = true;
|
|
|
+ getSop()
|
|
|
+ }
|
|
|
const closeCreateModal = () => { showCreateModal.value = false; currentStep.value = 1 }
|
|
|
|
|
|
defineExpose({
|
|
|
@@ -1146,5 +1250,100 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-@import '../assets/styles/marketing.css'
|
|
|
+@import '../assets/styles/marketing.css';
|
|
|
+
|
|
|
+.create-modal :deep(.el-input__wrapper),
|
|
|
+.create-modal :deep(.el-textarea__inner),
|
|
|
+.create-modal :deep(.el-select .el-select__wrapper),
|
|
|
+.create-modal :deep(.el-input-number__wrapper),
|
|
|
+.create-modal :deep(.el-date-editor.el-input__wrapper) {
|
|
|
+ background: var(--bg-dark);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ box-shadow: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-date-editor) {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input__wrapper.is-focus),
|
|
|
+.create-modal :deep(.el-select .el-select__wrapper.is-focus),
|
|
|
+.create-modal :deep(.el-input-number__wrapper.is-focus),
|
|
|
+.create-modal :deep(.el-date-editor.el-input__wrapper.is-focus) {
|
|
|
+ background: var(--bg-card);
|
|
|
+ border-color: var(--primary);
|
|
|
+ box-shadow: 0 0 0 1px var(--primary) inset;
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input__inner),
|
|
|
+.create-modal :deep(.el-textarea__inner),
|
|
|
+.create-modal :deep(.el-input-number__inner),
|
|
|
+.create-modal :deep(.el-date-editor .el-input__inner) {
|
|
|
+ background: transparent;
|
|
|
+ color: var(--text-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input__inner::placeholder),
|
|
|
+.create-modal :deep(.el-textarea__inner::placeholder),
|
|
|
+.create-modal :deep(.el-date-editor .el-input__inner::placeholder) {
|
|
|
+ color: var(--text-muted);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-select-dropdown),
|
|
|
+.create-modal :deep(.el-picker-panel) {
|
|
|
+ background: var(--bg-card);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ color: var(--text-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-select-dropdown__item.hover),
|
|
|
+.create-modal :deep(.el-select-dropdown__item:hover) {
|
|
|
+ background: rgba(99, 102, 241, 0.12);
|
|
|
+ color: var(--primary);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-select-dropdown__item.is-selected) {
|
|
|
+ background: rgba(99, 102, 241, 0.2);
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-date-table td.current:not(.disabled) .el-date-table-cell__text),
|
|
|
+.create-modal :deep(.el-date-table td.today .el-date-table-cell__text) {
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input__count),
|
|
|
+.create-modal :deep(.el-input__count-inner) {
|
|
|
+ background: transparent;
|
|
|
+ color: var(--text-muted);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input-number) {
|
|
|
+ width: 130px;
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input-number__increase),
|
|
|
+.create-modal :deep(.el-input-number__decrease) {
|
|
|
+ background: var(--bg-hover);
|
|
|
+ color: var(--text-primary);
|
|
|
+ border-color: var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-input-number__increase:hover),
|
|
|
+.create-modal :deep(.el-input-number__decrease:hover) {
|
|
|
+ background: rgba(99, 102, 241, 0.12);
|
|
|
+ color: var(--primary);
|
|
|
+}
|
|
|
+
|
|
|
+.create-modal :deep(.el-select__selection .el-select__placeholder:not(.is-transparent)) {
|
|
|
+ color: var(--text-primary);
|
|
|
+}
|
|
|
</style>
|
