< template >
< div class = "promotion-page student-training-shell" >
< main class = "training-core" >
< section class = "task-header" >
< div class = "task-badge" > < el -icon > < Document / > < / e l - i c o n > 核 心 实 训 · 产 品 上 线 与 运 营 推 广 < / d i v >
< h1 > { { taskTitle } } < / h1 >
< / section >
< TrainingTaskBrief :background ="taskBackground" :goals ="taskGoals" :requirements ="taskRequirement" :show-material ="false" :show-toolbar ="false" / >
< section class = "task-card promotion-phase" >
< header class = "workbench-head" >
< div >
< p class = "section-eyebrow" > STEP { { String ( activeStep ) . padStart ( 2 , "0" ) } } < / p >
< h2 > { { stepTitle } } < / h2 >
< / div >
< TrainingTaskToolbar class = "promotion-toolbar" :task-key ="TASK_KEY" / >
< / header >
< nav class = "step-tabs" aria -label = " 投 放 效 果 评 估 与 优 化 步 骤 " >
< button type = "button" : class = "['step-tab', { active: activeStep === 1, complete: activeStep > 1 }]" : aria -current = " activeStep = = = 1 ? ' step ' : undefined " @ click = "activeStep = 1" >
< span class = "step-marker" > 01 < / span > < span class = "step-copy" > < b > 预算分配 < / b > < small > { { activeStep === 1 ? '当前步骤 →' : '点击切换 →' } } < / small > < / span >
< / button >
< span class = "step-connector" aria -hidden = " true " / >
< button type = "button" : class = "['step-tab', { active: activeStep === 2, complete: activeStep > 2 }]" : aria -current = " activeStep = = = 2 ? ' step ' : undefined " @click ="openStepTwo" >
< span class = "step-marker" > 02 < / span > < span class = "step-copy" > < b > 投放策略 < / b > < small > { { activeStep === 2 ? '当前步骤 →' : '点击切换 →' } } < / small > < / span >
< / button >
< span class = "step-connector" aria -hidden = " true " / >
< button type = "button" : class = "['step-tab', { active: activeStep === 3, complete: activeStep > 3 }]" : aria -current = " activeStep = = = 3 ? ' step ' : undefined " @click ="openStepThree" >
< span class = "step-marker" > 03 < / span > < span class = "step-copy" > < b > 投放数据与 ROI < / b > < small > { { activeStep === 3 ? '当前步骤 →' : '点击切换 →' } } < / small > < / span >
< / button >
< span class = "step-connector" aria -hidden = " true " / >
< button type = "button" : class = "['step-tab', { active: activeStep === 4 }]" : aria -current = " activeStep = = = 4 ? ' step ' : undefined " @click ="openStepFour" >
< span class = "step-marker" > 04 < / span > < span class = "step-copy" > < b > 效果评估与优化 < / b > < small > { { activeStep === 4 ? '当前步骤 →' : '点击切换 →' } } < / small > < / span >
< / button >
< / nav >
< section v-if ="activeStep === 1" class="budget-form" >
< label class = "total-budget-field" >
< span > 请设置新产品投放试错预算 < / span >
< el -input -number v -model = " totalBudget " :min ="0" :precision ="2" :step ="100" controls -position = " right " placeholder = "请输入预算" / >
< em > 元 < / em >
< / label >
< p class = "lead" > 投放周期分为冷启动期 、 增长期 、 稳定期三个阶段 。 请将预算分配到渠道和三个时间段中 。 < / p >
< div class = "table-actions" >
< el -button type = "primary" : disabled = "budgetRows.length >= 5" @click ="addBudgetRow" > < el -icon > < Plus / > < / e l - i c o n > 增 加 一 行 < / e l - b u t t o n >
< el -button : disabled = "budgetRows.length <= 1" @click ="removeBudgetRow" > < el -icon > < Minus / > < / e l - i c o n > 删 除 一 行 < / e l - b u t t o n >
< / div >
< div class = "table-wrap" >
< table class = "budget-table" >
< thead > < tr > < th > 渠道 < / th > < th > 渠道定位 < / th > < th > 预算占比 （ % ） < / th > < th > 预算金额 （ 元 ） < / th > < th > 冷启动期投放预算 （ 元 ） < / th > < th > 增长期投放预算 （ 元 ） < / th > < th > 稳定期投放预算 （ 元 ） < / th > < / tr > < / thead >
< tbody >
< tr v-for ="(row, index) in budgetRows" :key="row.id" >
< td > < el -select v -model = " row.channel " placeholder = "请选择渠道" filterable > < el -option v -for = " channel in availableChannels " :key ="channel" :label ="channel" :value ="channel" : disabled = "isChannelUnavailable(channel, index)" / > < / e l - s e l e c t > < / t d >
< td > < el -select v-model ="row.channelPositioning" placeholder="请选择" > < el -option v -for = " positioning in channelPositionings " :key ="positioning" :label ="positioning" :value ="positioning" / > < / e l - s e l e c t > < / t d >
< td > < el -input -number v -model = " row.budgetPercentage " :min ="0" :max ="100" :precision ="2" :step ="1" controls -position = " right " / > < / td >
< td class = "computed-money" > { { displayMoney ( rowBudgetAmount ( row ) ) } } < / td >
< td > < el -input -number v -model = " row.coldStartBudget " :min ="0" :precision ="2" :step ="100" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.growthBudget " :min ="0" :precision ="2" :step ="100" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.stableBudget " :min ="0" :precision ="2" :step ="100" controls -position = " right " / > < / td >
< / tr >
< / tbody >
< tfoot > < tr > < th colspan = "2" > 当前渠道预算占比合计 < / th > < td : class = "{ 'total-error': budgetPercentageTotal !== 100 }" > { { displayMoney ( budgetPercentageTotal ) } } % < / td > < td : class = "{ 'total-error': rowBudgetTotal !== normalizedTotalBudget }" > { { displayMoney ( rowBudgetTotal ) } } < / td > < td colspan = "3" class = "table-note" > 预算金额由总预算 × 预算占比自动计算 < / td > < / tr > < / tfoot >
< / table >
< / div >
< p v-if ="!availableChannels.length" class="source-warning" > 尚 未 读 取 到 产 品 发 布 渠 道 评 估 的 渠 道 数 据 。 请 先 完 成 并 保 存 该 模 块 的 渠 道 数 据 。 < / p >
< footer class = "footer-actions" > < el -button :loading ="saving" @click ="saveBudgetDraft" > 保 存 当 前 进 度 < / el -button > < el -button type = "primary" :loading ="validating" @click ="validateBudgetAndContinue" > 下 一 步 < el -icon > < ArrowRight / > < / e l - i c o n > < / e l - b u t t o n > < / f o o t e r >
< / section >
< section v -else -if = " activeStep = = = 2 " class = "strategy-form" >
< p class = "lead" > 新品投放的 6 周内 ， 不同阶段 、 不同渠道需要执行不同的投放策略 。 请从策略选项池参考并为每个渠道在每个阶段选择或填写两项投放策略 。 < / p >
< div class = "strategy-table-wrap" >
< table class = "strategy-table" >
< thead > < tr > < th > 阶段 < / th > < th v-for ="channel in stepOneChannels" :key ="channel" > {{ channel }} < / th > < / tr > < / thead >
< tbody >
< tr v-for ="phase in phases" :key ="phase" >
< th > { { phase } } < / th >
< td v-for ="channel in stepOneChannels" :key="`${phase}-${channel}`" >
< el -select v-model ="strategyCell(phase, channel).strategies" multiple filterable allow-create default-first-option :multiple-limit="2" collapse-tags collapse-tags-tooltip placeholder="选择或填写两项策略" >
< el -option v -for = " strategy in strategyOptions ( phase ) " :key ="strategy" :label ="strategy" :value ="strategy" / >
< / e l - s e l e c t >
< small > { { strategyCell ( phase , channel ) . strategies . length } } / 2 项策略 < / small >
< / td >
< / tr >
< tr v-if ="!stepOneChannels.length" > < td colspan = "2" class = "empty-row" > 请先完成第一步并填写至少两个渠道 。 < / td > < / tr >
< / tbody >
< / table >
< / div >
< el -collapse class = "strategy-reference" >
< el -collapse -item title = "查看策略选项池参考" name = "strategy-pool" >
< div class = "reference-table-wrap" >
< table class = "reference-table" > < thead > < tr > < th > 策略描述 < / th > < th > 适用阶段 < / th > < th > 适用渠道 < / th > < / tr > < / thead > < tbody > < tr v-for ="item in strategyPool" :key="item.description" > < td > { { item . description } } < / td > < td > { { item . phase } } < / td > < td > { { item . channel } } < / td > < / tr > < / tbody > < / table >
< / div >
< / e l - c o l l a p s e - i t e m >
< / e l - c o l l a p s e >
< footer class = "footer-actions" > < el -button @ click = "activeStep = 1" > 上一步 < / e l - b u t t o n > < e l - b u t t o n : l o a d i n g = " s a v i n g " @ c l i c k = " s a v e S t r a t e g y D r a f t " > 保 存 当 前 进 度 < / e l - b u t t o n > < e l - b u t t o n t y p e = " p r i m a r y " : l o a d i n g = " v a l i d a t i n g " @ c l i c k = " v a l i d a t e S t r a t e g i e s " > 下 一 步 < e l - i c o n > < A r r o w R i g h t / > < / e l - i c o n > < / e l - b u t t o n > < / f o o t e r >
< / section >
< section v -else -if = " activeStep = = = 3 " class = "performance-form" >
< p class = "lead" > 产品投放结束后 ， 请根据案例资料填写各渠道的曝光量 、 点击量 、 成交额和推广花费 ， 并核算点击率与实际 ROI （ 投产比 ） 。 < / p >
< section class = "roi-baseline" >
< div class = "subsection-title" > （ 一 ） 计算保本 ROI < / div >
< p > 根据案例资料填写产品毛利率 ， 计算保本 ROI 。 < / p >
< div class = "roi-inputs" >
< label > 产品毛利率 < el -input -number v -model = " grossMargin " :min ="0" :max ="100" :precision ="2" :step ="1" controls -position = " right " / > < span > % < / span > < / label >
< label > 保本 ROI < el -input -number v -model = " breakEvenRoi " :min ="0" :precision ="2" :step ="0.01" controls -position = " right " / > < span > 计算结果保留两位小数 < / span > < / label >
< / div >
< p class = "formula-note" > 保本 ROI = 1 ÷ 毛利率 ； 当投产比达到该数值时 ， 推广花费刚好等于产品的毛利额 ， 实现投放盈亏平衡 。 < / p >
< / section >
< section class = "performance-data" >
< div class = "subsection-title" > （ 二 ） 完善投放数据 < / div >
< p > 根据案例资料填写下表 ， 并计算点击率和实际 ROI 。 < / p >
< div class = "performance-table-wrap" >
< table class = "performance-table" >
< thead > < tr > < th > 渠道 < / th > < th > 曝光量 < / th > < th > 点击量 < / th > < th > 点击率 （ % ） < / th > < th > 成交额 （ 元 ） < / th > < th > 推广花费 （ 元 ） < / th > < th > 实际 ROI < / th > < / tr > < / thead >
< tbody >
< tr v-for ="row in performanceRows" :key="row.id" :class="{ 'total-row': row.channel === '合计' }" >
< th > { { row . channel } } < / th >
< td > < el -input -number v -model = " row.impressions " :min ="0" :precision ="0" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.clicks " :min ="0" :precision ="0" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.clickRate " :min ="0" :precision ="2" :step ="0.01" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.turnover " :min ="0" :precision ="2" :step ="100" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.promotionCost " :min ="0" :precision ="2" :step ="100" controls -position = " right " / > < / td >
< td > < el -input -number v -model = " row.actualRoi " :min ="0" :precision ="2" :step ="0.01" controls -position = " right " / > < / td >
< / tr >
< tr v-if ="!performanceRows.length" > < td colspan = "7" class = "empty-row" > 请先完成第一步并填写至少两个渠道 。 < / td > < / tr >
< / tbody >
< / table >
< / div >
< / section >
< footer class = "footer-actions" > < el -button @ click = "activeStep = 2" > 上一步 < / e l - b u t t o n > < e l - b u t t o n : l o a d i n g = " s a v i n g " @ c l i c k = " s a v e P e r f o r m a n c e D r a f t " > 保 存 当 前 进 度 < / e l - b u t t o n > < e l - b u t t o n t y p e = " p r i m a r y " : l o a d i n g = " v a l i d a t i n g " @ c l i c k = " v a l i d a t e P e r f o r m a n c e " > 下 一 步 < e l - i c o n > < A r r o w R i g h t / > < / e l - i c o n > < / e l - b u t t o n > < / f o o t e r >
< / section >
< section v -else class = "evaluation-form" >
< section class = "evaluation-intro" >
< div class = "subsection-title" > （ 一 ） 投放效果评估 < / div >
< p > 企业投放目标为整体 ROI 不低于保本 ROI 。 请根据第三步核算结果 ， 判断各渠道投放是否达标 ； 对不达标渠道填写最可能的问题诊断与优化动作 。 < / p >
< div class = "overall-roi" > < span > 保本 ROI ： { { displayFixed ( breakEvenRoi ) } } < / span > < span > 整体 ROI ： { { displayFixed ( overallRoi ) } } < / span > < span : class = "{ achieved: overallAchieved, underperforming: !overallAchieved }" > 整体 { { overallAchieved ? '达标' : '不达标' } } < / span > < / div >
< / section >
< div class = "evaluation-table-wrap" >
< table class = "evaluation-table" >
< thead > < tr > < th > 渠道 < / th > < th > ROI < / th > < th > 是否达标 < / th > < th > 问题诊断 < / th > < th > 优化动作 < / th > < / tr > < / thead >
< tbody >
< tr v-for ="row in evaluationRows" :key="row.id" >
< th > { { row . channel } } < / th >
< td class = "synced-roi" > { { displayFixed ( row . roi ) } } < / td >
< td > < el -select v-model ="row.achievement" placeholder="请选择" > < el -option label = "达标" value = "达标" / > < el -option label = "不达标" value = "不达标" / > < / e l - s e l e c t > < / t d >
< td > < el -input v -model = " row.problemDiagnosis " type = "textarea" : autosize = "{ minRows: 2, maxRows: 5 }" placeholder = "未达标渠道必填" / > < / td >
< td > < el -input v -model = " row.optimizationAction " type = "textarea" : autosize = "{ minRows: 2, maxRows: 5 }" placeholder = "未达标渠道必填" / > < / td >
< / tr >
< tr v-if ="!evaluationRows.length" > < td colspan = "5" class = "empty-row" > 请先完成并保存第三步投放数据 。 < / td > < / tr >
< / tbody >
< / table >
< / div >
< section class = "decision-section" >
< div class = "subsection-title" > （ 二 ） 优化决策 < / div >
< p > 结合整体 ROI 与各渠道达标情况 ， 总结本方案是否需要调整 、 调整方向 ， 以及优先调整的渠道 。 < / p >
< el -input v -model = " optimizationDecision " type = "textarea" : autosize = "{ minRows: 7, maxRows: 14 }" placeholder = "填写整体 ROI 是否达标、拖累整体效果的渠道及优先优化方向" / >
< / section >
< footer class = "footer-actions" > < el -button @ click = "activeStep = 3" > 上一步 < / e l - b u t t o n > < e l - b u t t o n t y p e = " p r i m a r y " : l o a d i n g = " s a v i n g " @ c l i c k = " s a v e E v a l u a t i o n D r a f t " > 保 存 当 前 进 度 < / e l - b u t t o n > < / f o o t e r >
< / section >
< / section >
< / main >
< TrainingAiSidebar :study-tip ="'先核对预算分配，再为每个渠道在冷启动、增长和稳定三个阶段分别确定两项可执行的投放策略。'" :progress-items ="progressItems" / >
< / div >
< / template >
< script setup >
import { computed , onMounted , ref } from "vue" ;
import { ArrowRight , Document , Minus , Plus } from "@element-plus/icons-vue" ;
import { ElMessage } from "element-plus" ;
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue" ;
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue" ;
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue" ;
import { getTrainingTaskByKey } from "@/api/trainingTask" ;
import { getStudentTrainingAnswer , saveStudentTrainingAnswer , validatePromotionEffectOptimizationStepOne , validatePromotionEffectOptimizationStepTwo , validatePromotionEffectOptimizationStepThree , validatePromotionEffectOptimizationStepFour } from "@/api/studentTrainingAnswer" ;
import { parseTrainingArray } from "@/views/training/taskKeyMap" ;
const TASK _KEY = "promotion-effect-optimization" ;
const RELEASE _CHANNEL _TASK _KEY = "release-channel-evaluation" ;
const phases = [ "冷启动期" , "增长期" , "稳定期" ] ;
const channelPositionings = [ "品牌曝光" , "种草引流" , "新品转化" ] ;
const strategyPool = [
[ "投放泛流量关键词+测试3-5组不同内容素材， , "冷启动期" , "抖音" ] , [ "优化商品标题和主图，承接自然搜索流量，暂不开启大规模付费推广" , "冷启动期" , "天猫" ] , [ "设置低价引流款，报名“新品秒杀”活动，获取初始销量和评价" , "冷启动期" , "拼多多" ] ,
[ "将冷启动期跑出的TOP2内容素材加大投放， （ ， ） , "增长期" , "抖音" ] , [ "开启直通车，主推核心大词，截取竞品搜索流量" , "增长期" , "天猫" ] , [ "参与平台大促活动（如百亿补贴），设置满减券，快速拉升销量" , "增长期" , "拼多多" ] ,
[ "稳定更新日常内容，维持直播间日播，以“老客复购+会员日”为主" , "稳定期" , "抖音" ] , [ "稳定类目排名，优化评价管理，维持搜索位，减少付费投放比例" , "稳定期" , "天猫" ] , [ "持续参与秒杀活动，维持价格力标签，以自然流量为主、付费为辅" , "稳定期" , "拼多多" ] ,
] . map ( ( [ description , phase , channel ] ) => ( { description , phase , channel } ) ) ;
const activeStep = ref ( 1 ) ;
const taskConfig = ref ( null ) ;
const totalBudget = ref ( undefined ) ;
const budgetRows = ref ( [ ] ) ;
const availableChannels = ref ( [ ] ) ;
const strategyRows = ref ( [ ] ) ;
const grossMargin = ref ( undefined ) ;
const breakEvenRoi = ref ( undefined ) ;
const performanceRows = ref ( [ ] ) ;
const evaluationRows = ref ( [ ] ) ;
const optimizationDecision = ref ( "" ) ;
const saving = ref ( false ) ;
const validating = ref ( false ) ;
let nextId = 1 ;
const makeRow = ( values = { } ) => ( { id : nextId ++ , channel : "" , channelPositioning : "" , budgetPercentage : undefined , coldStartBudget : undefined , growthBudget : undefined , stableBudget : undefined , ... values } ) ;
const makeStrategyRow = ( values = { } ) => ( { id : nextId ++ , phase : "" , channel : "" , strategies : [ ] , ... values } ) ;
const makePerformanceRow = ( values = { } ) => ( { id : nextId ++ , channel : "" , impressions : undefined , clicks : undefined , clickRate : undefined , turnover : undefined , promotionCost : undefined , actualRoi : undefined , ... values } ) ;
const makeEvaluationRow = ( values = { } ) => ( { id : nextId ++ , channel : "" , roi : undefined , achievement : "" , problemDiagnosis : "" , optimizationAction : "" , ... values } ) ;
const taskTitle = computed ( ( ) => taskConfig . value ? . taskName || "投放效果评估与优化" ) ;
const stepTitle = computed ( ( ) => [ "投放试错预算与阶段分配" , "各阶段渠道投放策略" , "保本 ROI 与投放数据核算" , "投放效果评估与优化决策" ] [ activeStep . value - 1 ] ) ;
const taskBackground = computed ( ( ) => taskConfig . value ? . background || "基于渠道评估结果制定新产品投放试错预算，并按投放阶段安排资源。" ) ;
const taskRequirement = computed ( ( ) => taskConfig . value ? . requirements || "设置总预算，完成渠道预算占比与投放阶段策略分配。" ) ;
const taskGoals = computed ( ( ) => parseTrainingArray ( taskConfig . value ? . objectives , [ "理解投放试错预算的作用" , "能够将预算分配到渠道与投放阶段" , "能够根据投放阶段选择策略" ] ) ) ;
const progressItems = computed ( ( ) => {
const steps = parseTrainingArray ( taskConfig . value ? . steps ) ;
const items = steps . length ? steps : [ "投放预算分配" , "分阶段投放策略" , "投放数据与 ROI" , "效果评估与优化" ] ;
return items . map ( ( text , index ) => ( { text , status : index + 1 < activeStep . value ? "done" : index + 1 === activeStep . value ? "doing" : "" } ) ) ;
} ) ;
const normalizedTotalBudget = computed ( ( ) => toMoney ( totalBudget . value ) ) ;
const budgetPercentageTotal = computed ( ( ) => Number ( budgetRows . value . reduce ( ( sum , row ) => sum + ( Number ( row . budgetPercentage ) || 0 ) , 0 ) . toFixed ( 6 ) ) ) ;
const rowBudgetTotal = computed ( ( ) => Number ( budgetRows . value . reduce ( ( sum , row ) => sum + rowBudgetAmount ( row ) , 0 ) . toFixed ( 2 ) ) ) ;
const stepOneChannels = computed ( ( ) => [ ... new Set ( budgetRows . value . map ( ( row ) => String ( row . channel || "" ) . trim ( ) ) . filter ( Boolean ) ) ] ) ;
const overallRoi = computed ( ( ) => Number ( performanceRows . value . find ( ( row ) => row . channel === "合计" ) ? . actualRoi ) ) ;
const overallAchieved = computed ( ( ) => Number . isFinite ( overallRoi . value ) && Number . isFinite ( Number ( breakEvenRoi . value ) ) && overallRoi . value >= Number ( breakEvenRoi . value ) ) ;
function toMoney ( value ) { const number = Number ( value ) ; return Number . isFinite ( number ) ? Number ( number . toFixed ( 2 ) ) : 0 ; }
function rowBudgetAmount ( row ) { return toMoney ( Number ( totalBudget . value ) * ( Number ( row ? . budgetPercentage ) || 0 ) / 100 ) ; }
function displayMoney ( value ) { return Number ( value || 0 ) . toLocaleString ( "zh-CN" , { minimumFractionDigits : 2 , maximumFractionDigits : 2 } ) ; }
function isChannelUnavailable ( channel , rowIndex ) { return budgetRows . value . some ( ( row , index ) => index !== rowIndex && row . channel === channel ) ; }
function addBudgetRow ( ) { if ( budgetRows . value . length < 5 ) budgetRows . value . push ( makeRow ( ) ) ; }
function removeBudgetRow ( ) { if ( budgetRows . value . length > 1 ) budgetRows . value . pop ( ) ; }
function budgetPayload ( ) { return { totalBudget : totalBudget . value , rows : budgetRows . value . map ( ( row ) => ( { channel : row . channel , channelPositioning : row . channelPositioning , budgetPercentage : row . budgetPercentage , budgetAmount : rowBudgetAmount ( row ) , coldStartBudget : row . coldStartBudget , growthBudget : row . growthBudget , stableBudget : row . stableBudget } ) ) } ; }
function strategyPayload ( ) { return { rows : strategyRows . value . map ( ( row ) => ( { phase : row . phase , channel : row . channel , strategies : [ ... row . strategies ] } ) ) } ; }
function strategyOptions ( phase ) { return strategyPool . filter ( ( item ) => item . phase === phase ) . map ( ( item ) => item . description ) ; }
function strategyCell ( phase , channel ) {
let row = strategyRows . value . find ( ( item ) => item . phase === phase && item . channel === channel ) ;
if ( ! row ) { row = makeStrategyRow ( { phase , channel , strategies : [ ] } ) ; strategyRows . value . push ( row ) ; }
return row ;
}
function syncStrategyRows ( savedRows = [ ] ) {
const saved = new Map ( savedRows . map ( ( row ) => [ ` ${ row ? . phase } \ u0000 ${ row ? . channel } ` , row ] ) ) ;
strategyRows . value = phases . flatMap ( ( phase ) => stepOneChannels . value . map ( ( channel ) => makeStrategyRow ( { phase , channel , strategies : Array . isArray ( saved . get ( ` ${ phase } \ u0000 ${ channel } ` ) ? . strategies ) ? [ ... saved . get ( ` ${ phase } \ u0000 ${ channel } ` ) . strategies ] : [ ] } ) ) ) ;
}
function performancePayload ( ) { return { grossMargin : grossMargin . value , breakEvenRoi : breakEvenRoi . value , rows : performanceRows . value . map ( ( row ) => ( { channel : row . channel , impressions : row . impressions , clicks : row . clicks , clickRate : row . clickRate , turnover : row . turnover , promotionCost : row . promotionCost , actualRoi : row . actualRoi } ) ) } ; }
function syncPerformanceRows ( savedRows = [ ] ) {
const saved = new Map ( savedRows . map ( ( row ) => [ row ? . channel , row ] ) ) ;
performanceRows . value = [ ... stepOneChannels . value , "合计" ] . map ( ( channel ) => makePerformanceRow ( { channel , ... saved . get ( channel ) } ) ) ;
}
function openStepThree ( ) { syncPerformanceRows ( performanceRows . value ) ; activeStep . value = 3 ; }
function displayFixed ( value ) { return Number . isFinite ( Number ( value ) ) ? Number ( value ) . toFixed ( 2 ) : "—" ; }
function evaluationPayload ( ) { return { rows : evaluationRows . value . map ( ( row ) => ( { channel : row . channel , roi : row . roi , achievement : row . achievement , problemDiagnosis : row . problemDiagnosis , optimizationAction : row . optimizationAction } ) ) , optimizationDecision : optimizationDecision . value } ; }
function syncEvaluationRows ( savedRows = [ ] ) {
const saved = new Map ( savedRows . map ( ( row ) => [ row ? . channel , row ] ) ) ;
evaluationRows . value = performanceRows . value . filter ( ( row ) => row . channel && row . channel !== "合计" ) . map ( ( row ) => makeEvaluationRow ( { channel : row . channel , roi : row . actualRoi , ... saved . get ( row . channel ) } ) ) ;
}
function openStepFour ( ) { syncEvaluationRows ( evaluationRows . value ) ; activeStep . value = 4 ; }
async function saveAnswer ( currentStep , fields ) { await saveStudentTrainingAnswer ( TASK _KEY , { saveAction : "SAVE" , currentStep , ... fields } ) ; }
async function saveBudgetDraft ( ) { if ( saving . value ) return ; saving . value = true ; try { await saveAnswer ( 1 , { step1Answer : JSON . stringify ( budgetPayload ( ) ) } ) ; ElMessage . success ( "当前进度已保存" ) ; } finally { saving . value = false ; } }
async function validateBudgetAndContinue ( ) { if ( validating . value ) return ; validating . value = true ; try { await validatePromotionEffectOptimizationStepOne ( budgetPayload ( ) ) ; await saveAnswer ( 2 , { step1Answer : JSON . stringify ( budgetPayload ( ) ) } ) ; syncStrategyRows ( strategyRows . value ) ; activeStep . value = 2 ; ElMessage . success ( "第一步预算分配校验通过，已进入第二步" ) ; } catch ( error ) { ElMessage . error ( error ? . message || "请检查投放试错预算、渠道预算占比和阶段投放预算" ) ; } finally { validating . value = false ; } }
function openStepTwo ( ) { syncStrategyRows ( strategyRows . value ) ; activeStep . value = 2 ; }
async function saveStrategyDraft ( ) { if ( saving . value ) return ; saving . value = true ; try { await saveAnswer ( 2 , { step2Answer : JSON . stringify ( strategyPayload ( ) ) } ) ; ElMessage . success ( "当前进度已保存" ) ; } finally { saving . value = false ; } }
async function validateStrategies ( ) { if ( validating . value ) return ; validating . value = true ; try { await validatePromotionEffectOptimizationStepTwo ( strategyPayload ( ) ) ; await saveAnswer ( 3 , { step2Answer : JSON . stringify ( strategyPayload ( ) ) } ) ; syncPerformanceRows ( performanceRows . value ) ; activeStep . value = 3 ; ElMessage . success ( "第二步投放策略校验通过，已进入第三步" ) ; } catch ( error ) { ElMessage . error ( error ? . message || "请为每个阶段和渠道填写两项不重复的投放策略" ) ; } finally { validating . value = false ; } }
async function savePerformanceDraft ( ) { if ( saving . value ) return ; saving . value = true ; try { await saveAnswer ( 3 , { step3Answer : JSON . stringify ( performancePayload ( ) ) } ) ; ElMessage . success ( "当前进度已保存" ) ; } finally { saving . value = false ; } }
async function validatePerformance ( ) { if ( validating . value ) return ; validating . value = true ; try { await validatePromotionEffectOptimizationStepThree ( performancePayload ( ) ) ; await saveAnswer ( 4 , { step3Answer : JSON . stringify ( performancePayload ( ) ) } ) ; syncEvaluationRows ( evaluationRows . value ) ; activeStep . value = 4 ; ElMessage . success ( "第三步保本 ROI 与投放数据校验通过，已进入第四步" ) ; } catch ( error ) { ElMessage . error ( error ? . message || "请检查毛利率、保本 ROI 及各渠道投放数据计算" ) ; } finally { validating . value = false ; } }
function restorePerformance ( raw ) { try { const saved = typeof raw === "string" ? JSON . parse ( raw || "{}" ) : raw || { } ; grossMargin . value = saved . grossMargin ; breakEvenRoi . value = saved . breakEvenRoi ; syncPerformanceRows ( Array . isArray ( saved . rows ) ? saved . rows : [ ] ) ; } catch ( error ) { grossMargin . value = undefined ; breakEvenRoi . value = undefined ; syncPerformanceRows ( ) ; } }
async function saveEvaluationDraft ( ) { if ( saving . value ) return ; saving . value = true ; try { await saveAnswer ( 4 , { step4Answer : JSON . stringify ( evaluationPayload ( ) ) } ) ; ElMessage . success ( "当前进度已保存" ) ; } finally { saving . value = false ; } }
async function submitEvaluation ( ) { if ( validating . value ) return ; validating . value = true ; try { await validatePromotionEffectOptimizationStepFour ( evaluationPayload ( ) ) ; await saveStudentTrainingAnswer ( TASK _KEY , { saveAction : "SUBMIT" , currentStep : 4 , step4Answer : JSON . stringify ( evaluationPayload ( ) ) } ) ; ElMessage . success ( "投放效果评估与优化任务已提交" ) ; } catch ( error ) { ElMessage . error ( error ? . message || "请检查各渠道达标判断、未达标渠道的诊断与优化动作" ) ; } finally { validating . value = false ; } }
function restoreEvaluation ( raw ) { try { const saved = typeof raw === "string" ? JSON . parse ( raw || "{}" ) : raw || { } ; optimizationDecision . value = String ( saved . optimizationDecision || "" ) ; syncEvaluationRows ( Array . isArray ( saved . rows ) ? saved . rows : [ ] ) ; } catch ( error ) { optimizationDecision . value = "" ; syncEvaluationRows ( ) ; } }
function restoreBudget ( raw ) { try { const saved = typeof raw === "string" ? JSON . parse ( raw || "{}" ) : raw || { } ; totalBudget . value = saved . totalBudget ; if ( Array . isArray ( saved . rows ) && saved . rows . length ) budgetRows . value = saved . rows . slice ( 0 , 5 ) . map ( ( row ) => makeRow ( { channel : row ? . channel || "" , channelPositioning : row ? . channelPositioning || "" , budgetPercentage : row ? . budgetPercentage , coldStartBudget : row ? . coldStartBudget , growthBudget : row ? . growthBudget , stableBudget : row ? . stableBudget } ) ) ; } catch ( error ) { budgetRows . value = [ ] ; } if ( ! budgetRows . value . length ) budgetRows . value = [ makeRow ( ) ] ; }
function readRows ( raw ) { try { const saved = typeof raw === "string" ? JSON . parse ( raw || "{}" ) : raw || { } ; return Array . isArray ( saved . rows ) ? saved . rows : [ ] ; } catch ( error ) { return [ ] ; } }
async function loadReleaseChannels ( ) { try { const result = await getStudentTrainingAnswer ( RELEASE _CHANNEL _TASK _KEY ) ; const saved = typeof result ? . data ? . step2Answer === "string" ? JSON . parse ( result . data . step2Answer || "{}" ) : result ? . data ? . step2Answer || { } ; availableChannels . value = [ ... new Set ( ( Array . isArray ( saved ? . rows ) ? saved . rows : [ ] ) . map ( ( row ) => String ( row ? . channel || "" ) . trim ( ) ) . filter ( Boolean ) ) ] ; } catch ( error ) { availableChannels . value = [ ] ; } }
async function loadProgress ( ) { try { const result = await getStudentTrainingAnswer ( TASK _KEY ) ; const answer = result ? . data || { } ; restoreBudget ( answer . step1Answer ) ; syncStrategyRows ( readRows ( answer . step2Answer ) ) ; restorePerformance ( answer . step3Answer ) ; restoreEvaluation ( answer . step4Answer ) ; activeStep . value = Math . min ( Math . max ( Number ( answer . currentStep ) || 1 , 1 ) , 4 ) ; } catch ( error ) { restoreBudget ( ) ; syncStrategyRows ( ) ; restorePerformance ( ) ; restoreEvaluation ( ) ; } }
onMounted ( async ( ) => { try { const result = await getTrainingTaskByKey ( TASK _KEY ) ; taskConfig . value = result ? . data || null ; } catch ( error ) { taskConfig . value = null ; } await Promise . all ( [ loadReleaseChannels ( ) , loadProgress ( ) ] ) ; } ) ;
< / script >
< style scoped lang = "scss" >
. promotion - page { display : grid ; grid - template - columns : minmax ( 720 px , 1 fr ) 340 px ; gap : 24 px ; min - height : calc ( 100 vh - 76 px ) ; padding : 24 px ; color : # 1 e3a5f ; background : # ffffff } . training - core { min - width : 0 ; padding : 28 px ; border : 1 px solid # cfe2f5 ; border - radius : 30 px ; background : # f0f6fd } . task - header { margin - bottom : 24 px } . task - badge { display : inline - flex ; gap : 8 px ; align - items : center ; padding : 5 px 14 px ; border : 1 px solid # cfe2f5 ; border - radius : 999 px ; color : # 2 c4a6a ; background : # e3f2fd ; font - size : 12 px ; font - weight : 700 } . task - header h1 { margin : 12 px 0 0 ; color : # 1 e3a5f ; font - size : 30 px } . task - card { margin - top : 28 px ; padding : 24 px ; border : 1 px solid # cfe2f5 ; border - radius : 24 px ; background : # f0f6fd } . workbench - head { display : flex ; align - items : flex - start ; justify - content : space - between ; gap : 18 px ; padding - bottom : 18 px ; border - bottom : 1 px solid # cfe2f5 } . promotion - toolbar { align - self : center ; justify - content : flex - end ; max - width : 100 % } . section - eyebrow { margin : 0 ; color : # 1 e88e5 ; font - size : 12 px ; font - weight : 800 } . workbench - head h2 { margin : 4 px 0 0 ; color : # 1 e3a5f ; font - size : 24 px } . step - tabs { display : flex ; gap : 10 px ; margin : 20 px 0 } . step - tabs button { min - height : 36 px ; padding : 0 15 px ; border : 1 px solid # cfe2f5 ; border - radius : 8 px ; color : # 5 a7a9a ; background : # f0f6fd ; font : inherit ; font - size : 13 px ; font - weight : 800 ; cursor : pointer } . step - tabs button . active { border - color : # 1 e88e5 ; color : # 1 e3a5f ; background : # 1 e88e5 } . budget - form , . strategy - form , . performance - form { padding - top : 4 px } . total - budget - field , . roi - inputs { display : flex ; align - items : center ; gap : 12 px ; color : # 1 e3a5f ; font - size : 17 px ; font - weight : 800 } . total - budget - field : deep ( . el - input - number ) { width : 250 px } . total - budget - field em { font - style : normal } . lead { margin : 22 px 0 ; color : # 2 c4a6a ; font - size : 16 px ; line - height : 1.9 } . table - actions { display : flex ; justify - content : flex - end ; gap : 12 px ; margin : 0 0 16 px } . table - actions : deep ( . el - button ) { min - width : 110 px ; height : 42 px ; font - weight : 800 } . table - wrap , . strategy - table - wrap , . performance - table - wrap { overflow - x : auto ; border : 1 px solid # cfe2f5 ; border - radius : 14 px } . budget - table , . strategy - table , . reference - table , . performance - table { width : 100 % ; border - collapse : collapse } . budget - table { min - width : 1300 px } . strategy - table { min - width : 860 px } . performance - table { min - width : 1080 px } . budget - table th , . budget - table td , . strategy - table th , . strategy - table td , . reference - table th , . reference - table td , . performance - table th , . performance - table td { padding : 12 px ; border - right : 1 px solid # cfe2f5 ; border - bottom : 1 px solid # cfe2f5 ; vertical - align : middle } . budget - table th , . strategy - table th , . reference - table th , . performance - table th { white - space : nowrap ; color : # ffffff ; background : # 1565 c0 ; font - size : 14 px } . budget - table td , . strategy - table td , . reference - table td , . performance - table td { min - width : 170 px ; background : # ffffff } . budget - table td : first - child , . budget - table td : nth - child ( 2 ) { min - width : 155 px } . budget - table : deep ( . el - select ) , . budget - table : deep ( . el - input - number ) , . strategy - table : deep ( . el - select ) , . performance - table : deep ( . el - input - number ) { width : 100 % } . budget - table : deep ( . el - input _ _wrapper ) , . strategy - table : deep ( . el - input _ _wrapper ) , . performance - table : deep ( . el - input _ _wrapper ) { box - shadow : 0 0 0 1 px # cfe2f5 inset ; background : # ffffff } . budget - table : deep ( . el - input _ _inner ) , . strategy - table : deep ( . el - input _ _inner ) , . performance - table : deep ( . el - input _ _inner ) { color : # 1 e3a5f } . computed - money { color : # 1 e88e5 ; text - align : right ; font - variant - numeric : tabular - nums ; font - weight : 900 } . budget - table tfoot th , . budget - table tfoot td { border - bottom : 0 ; background : # e3f2fd } . budget - table tfoot td { color : # b7df5d ; text - align : center ; font - weight : 800 } . budget - table . total - error { color : # ff9898 } . table - note { font - size : 12 px ; font - weight : 400 } . strategy - table th : first - child { min - width : 116 px } . strategy - table td { min - width : 240 px } . strategy - table small { display : block ; margin - top : 8 px ; color : # 5 a7a9a ; font - size : 12 px ; text - align : right } . empty - row { text - align : center ; color : # 5 a7a9a } . hint { margin : 18 px 0 0 ; color : # 5 a7a9a ; line - height : 1.85 } . source - warning { margin : 14 px 0 0 ; color : # ffb6a2 } . strategy - reference { margin - top : 22 px ; border : 1 px solid # cfe2f5 ; border - radius : 12 px ; padding : 0 14 px ; background : # e3f2fd } . strategy - reference : deep ( . el - collapse ) { border : 0 } . strategy - reference : deep ( . el - collapse - item _ _header ) { height : 50 px ; border : 0 ; color : # 2 c4a6a ; backgr
. budget - table tfoot td { color : # 1565 c0 }
/* 统一为标准实训页步骤条：编号圆点、状态说明和连接箭头。 */
. step - tabs { display : flex ; align - items : center ; gap : 8 px ; margin : 20 px 0 28 px ; padding : 18 px 22 px ; overflow - x : auto ; border : 1 px solid # cfe2f5 ; border - radius : 22 px ; background : # f0f6fd } . step - tabs . step - tab { display : flex ; flex : 1 1 0 ; align - items : center ; min - width : 145 px ; min - height : 66 px ; gap : 10 px ; padding : 8 px 12 px ; border : 1 px solid # cfe2f5 ; border - radius : 12 px ; color : # 5 a7a9a ; background : # f0f6fd ; font : inherit ; text - align : left ; cursor : pointer ; transition : .2 s ease } . step - tabs . step - tab : hover { border - color : # 1 e88e5 ; color : # 1 e3a5f ; background : # bbdefb ; transform : translateY ( - 1 px ) } . step - tabs . step - tab : focus - visible { outline : 2 px solid # 1 e88e5 ; outline - offset : 3 px } . step - tabs . step - marker { display : grid ; flex : 0 0 38 px ; width : 38 px ; height : 38 px ; place - items : center ; border : 1 px solid # cfe2f5 ; border - radius : 50 % ; color : # 5 a7a9a ; background : # e3f2fd ; font - size : 12 px ; font - weight : 900 } . step - tabs . step - copy { display : grid ; min - width : 0 ; gap : 4 px } . step - tabs . step - copy b { overflow : hidden ; font - size : 14 px ; font - weight : 800 ; text - overflow : ellipsis ; white - space : nowrap } . step - tabs . step - copy small { color : # 1565 c0 ; font - size : 10 px ; font - weight : 800 ; letter - spacing : .06 em } . step - tabs . step - tab . active { border - color : # 1 e88e5 ; color : # ffffff ; background : linear - gradient ( 135 deg , # 1 e88e5 , # 1565 c0 ) ; box - shadow : inset 0 0 24 px rgba ( 30 , 136 , 229 , 0.18 ) } . step - tabs . step - tab . active . step - marker { border - color : # 1 e88e5 ; color : # ffffff ; background : linear - gradient ( 135 deg , # 1 e88e5 , # 1565 c0 ) ; box - shadow : 0 0 0 5 px rgba ( 30 , 136 , 229 , 0.12 ) , 0 0 18 px rgba ( 30 , 136 , 229 , 0.35 ) } . step - tabs . step - tab . complete { color : # 2 c4a6a } . step - tabs . step - tab . complete . step - marker { border - color : rgba ( 84 , 230 , 221 , .85 ) ; color : # ffffff ; background : # 6 ef0e1 } . step - tabs . step - connector { position : relative ; flex : 0 0 24 px ; height : 2 px ; background : # cfe2f5 } . step - tabs . step - connector : : after { position : absolute ; top : 50 % ; right : 0 ; width : 7 px ; height : 7 px ; border - top : 1 px solid # 5 a7a9a ; border - right : 1 px solid # 5 a7a9a ; content : '' ; transform : translateY ( - 50 % ) rotate ( 45 deg ) }
@ media ( max - width : 720 px ) { . step - tabs { align - items : stretch ; flex - direction : column ; padding : 14 px } . step - tabs . step - tab { flex : 0 0 auto ; width : 100 % } . step - tabs . step - connector { flex : 0 0 18 px ; width : 2 px ; height : 18 px ; margin - left : 18 px } . step - tabs . step - connector : : after { top : auto ; right : auto ; bottom : 0 ; left : 50 % ; transform : translateX ( - 50 % ) rotate ( 135 deg ) } }
@ media ( max - width : 900 px ) { . promotion - phase : deep ( . el - button ) { width : 100 % ; } }
< / style >
< style scoped lang = "scss" >
. evaluation - form { padding - top : 4 px } . evaluation - intro { padding : 18 px ; margin - top : 14 px ; border : 1 px solid # cfe2f5 ; border - radius : 14 px ; background : # e3f2fd } . evaluation - intro p , . decision - section > p { color : # 2 c4a6a ; line - height : 1.75 } . overall - roi { display : flex ; flex - wrap : wrap ; gap : 12 px ; margin - top : 14 px } . overall - roi span { padding : 7 px 12 px ; border : 1 px solid # cfe2f5 ; border - radius : 999 px ; color : # 2 c4a6a ; background : # f0f6fd ; font - weight : 800 } . overall - roi . achieved { border - color : rgba ( 81 , 224 , 178 , .72 ) ; color : # 86 f3ca } . overall - roi . underperforming { border - color : rgba ( 255 , 152 , 152 , .7 ) ; color : # ffb0b0 } . evaluation - table - wrap { overflow - x : auto ; margin - top : 24 px ; border : 1 px solid # cfe2f5 ; border - radius : 14 px } . evaluation - table { width : 100 % ; min - width : 1050 px ; border - collapse : collapse } . evaluation - table th , . evaluation - table td { padding : 12 px ; border - right : 1 px solid # cfe2f5 ; border - bottom : 1 px solid # cfe2f5 ; vertical - align : middle } . evaluation - table th { white - space : nowrap ; color : # ffffff ; background : # 1565 c0 ; font - size : 14 px } . evaluation - table td { background : # ffffff } . evaluation - table th : first - child { min - width : 110 px } . evaluation - table td : nth - child ( 2 ) { min - width : 100 px } . evaluation - table td : nth - child ( 3 ) { min - width : 145 px } . evaluation - table td : nth - child ( 4 ) , . evaluation - table td : nth - child ( 5 ) { min - width : 250 px } . evaluation - table : deep ( . el - select ) { width : 100 % } . evaluation - table : deep ( . el - input _ _wrapper ) , . evaluation - table : deep ( . el - textarea _ _inner ) , . decision - section : deep ( . el - textarea _ _inner ) { box - shadow : 0 0 0 1 px # cfe2f5 inset ; color : # 1 e3a5f ; background : # ffffff } . synced - roi { color : # 1 e88e5 ; text - align : center ; font - size : 16 px ; font - weight : 900 } . decision - section { margin - top : 30 px } . decision - section : deep ( . el - textarea _ _inner ) { min - height : 170 px ! important ; padding : 12 px 14 px ; line - height : 1.75 } @ media ( max - width : 720 px ) { . overall - roi { align - items : stretch ; flex - direction : column } }
. strategy - reference : deep ( . el - collapse - item _ _content ) { color : # 2 c4a6a } . strategy - reference . reference - table td { color : # 2 c4a6a ; font - size : 14 px ; font - weight : 500 } . strategy - reference . reference - table td : nth - child ( 2 ) , . strategy - reference . reference - table td : nth - child ( 3 ) { color : # 1565 c0 ; font - weight : 700 }
< / style >
