|
|
<template>
|
|
|
<div class="price-page student-training-shell">
|
|
|
<main class="price-core">
|
|
|
<section class="task-header">
|
|
|
<div class="task-head-main">
|
|
|
<h1 class="task-title">{{ taskTitle }}</h1>
|
|
|
<p class="task-brief">
|
|
|
<span class="task-brief-text">{{ taskBackground }}</span>
|
|
|
<button type="button" class="task-brief-toggle" @click="briefOpen = !briefOpen">
|
|
|
{{ briefOpen ? "收起" : "展开目标与要求" }}
|
|
|
</button>
|
|
|
<span v-if="briefOpen" class="task-brief-more">
|
|
|
<b>实训目标</b>
|
|
|
<ul>
|
|
|
<li v-for="goal in taskGoals" :key="goal">{{ goal }}</li>
|
|
|
</ul>
|
|
|
<b>实训要求</b>
|
|
|
<p>{{ taskRequirement }}</p>
|
|
|
</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="task-action-strip">
|
|
|
<TrainingTaskToolbar :task-key="TASK_KEY" :on-submit="saveStepFive" :on-export="exportPriceOutcome" />
|
|
|
</section>
|
|
|
|
|
|
<section class="price-workbench">
|
|
|
<nav class="step-indicator" aria-label="新产品定价步骤">
|
|
|
<template v-for="step in pricingSteps" :key="step.no">
|
|
|
<button type="button" class="step-tab"
|
|
|
:class="{ active: currentStep === step.no, complete: currentStep > step.no }"
|
|
|
:aria-current="currentStep === step.no ? 'step' : undefined" @click="switchStep(step.no)">
|
|
|
<span class="step-marker">{{ String(step.no).padStart(2, "0") }}</span>
|
|
|
<span class="step-copy">
|
|
|
<strong>{{ step.title }}</strong>
|
|
|
</span>
|
|
|
</button>
|
|
|
<span v-if="step.no < pricingSteps.length" :class="{ complete: currentStep > step.no }"
|
|
|
class="step-connector" aria-hidden="true"></span>
|
|
|
</template>
|
|
|
</nav>
|
|
|
|
|
|
<section class="step-card">
|
|
|
<header class="step-title-row">
|
|
|
<div>
|
|
|
<p class="section-eyebrow">STEP {{ String(currentStep).padStart(2, "0") }}</p>
|
|
|
<h3>{{ currentStepTitle }}</h3>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<template v-if="currentStep === 1">
|
|
|
<p class="intro-copy">{{ labels.formulaTip }}</p>
|
|
|
|
|
|
<section class="unit-cost-panel" :aria-label="labels.unitCost">
|
|
|
<div class="cost-panel-copy">
|
|
|
<span class="cost-dot"></span>
|
|
|
<div>
|
|
|
<p>{{ labels.unitCost }}</p>
|
|
|
<small>{{ labels.unitCostHelp }}</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-input v-model="unitCost" class="unit-cost-input" inputmode="decimal"
|
|
|
:placeholder="labels.unitCostPlaceholder" @input="clearValidation">
|
|
|
<template #append>{{ labels.yuan }}</template>
|
|
|
</el-input>
|
|
|
</section>
|
|
|
|
|
|
<section class="pricing-table-wrap">
|
|
|
<table class="pricing-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>{{ labels.serial }}</th>
|
|
|
<th>{{ labels.channel }}</th>
|
|
|
<th>{{ labels.markupRate }}</th>
|
|
|
<th>{{ labels.salePrice }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="(row, index) in pricingRows" :key="row.id">
|
|
|
<td class="serial-cell">{{ String(index + 1).padStart(2, "0") }}</td>
|
|
|
<td class="channel-cell">{{ row.channel }}</td>
|
|
|
<td>
|
|
|
<el-input v-model="row.markupRate" class="markup-input" inputmode="decimal"
|
|
|
:placeholder="ratePlaceholder(row)" @input="clearValidation">
|
|
|
<template #append>%</template>
|
|
|
</el-input>
|
|
|
<small class="range-hint">{{ rateHint(row) }}</small>
|
|
|
</td>
|
|
|
<td class="sale-price-cell">
|
|
|
<span v-if="salePrice(row) !== null">{{ labels.yuanSign }} {{
|
|
|
formatMoney(salePrice(row)) }}</span>
|
|
|
<span v-else class="empty-price">{{ labels.waitForInput }}</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</section>
|
|
|
|
|
|
<p v-if="validationMessage" class="validation-message">{{ validationMessage }}</p>
|
|
|
|
|
|
<footer class="workbench-footer">
|
|
|
<p>{{ labels.footerTip }}</p>
|
|
|
<div class="footer-actions">
|
|
|
<el-button plain :disabled="saving" @click="resetStepOne">{{ labels.clear }}</el-button>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="currentStep === 3">
|
|
|
<section class="value-pricing-section">
|
|
|
<div class="value-pricing-toolbar">
|
|
|
<p>{{ labels.valueBasedPricingIntro }}</p>
|
|
|
<div class="toolbar-actions">
|
|
|
<button type="button" class="primary-button" @click="addPerceivedValueItem">{{
|
|
|
labels.valueBasedAddRow }}</button>
|
|
|
<button type="button" class="secondary-button"
|
|
|
:disabled="!canRemovePerceivedValueItem" @click="removePerceivedValueItem">
|
|
|
{{ labels.valueBasedRemoveRow }}
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="pricing-table-wrap">
|
|
|
<table class="pricing-table perceived-value-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>{{ labels.perceivedValueItem }}</th>
|
|
|
<th>{{ labels.perceivedValueAmount }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="row in perceivedValueItems" :key="row.id">
|
|
|
<td><el-input v-model="row.name"
|
|
|
:placeholder="labels.perceivedValueItemPlaceholder"
|
|
|
@input="clearValidation" /></td>
|
|
|
<td>
|
|
|
<el-input v-model="row.perceivedValue" inputmode="decimal"
|
|
|
:placeholder="labels.perceivedValueAmountPlaceholder"
|
|
|
@input="clearValidation">
|
|
|
<template #append>{{ labels.yuan }}</template>
|
|
|
</el-input>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="total-row">
|
|
|
<td>{{ labels.perceivedValueTotal }}</td>
|
|
|
<td class="sale-price-cell">
|
|
|
<span v-if="perceivedValueTotal !== null">{{ labels.yuanSign }} {{
|
|
|
formatMoney(perceivedValueTotal) }}</span>
|
|
|
<span v-else class="empty-price">{{ labels.waitForInput }}</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<section class="value-pricing-result">
|
|
|
<label>
|
|
|
<span>{{ labels.profitDiscountRate }}</span>
|
|
|
<el-input v-model="perceivedValueDiscountRate" inputmode="decimal"
|
|
|
:placeholder="labels.discountRatePlaceholder" @input="clearValidation">
|
|
|
<template #append>%</template>
|
|
|
</el-input>
|
|
|
</label>
|
|
|
<div class="value-price-output">
|
|
|
<span>{{ labels.valueBasedPrice }}</span>
|
|
|
<strong v-if="valueBasedPrice !== null">{{ labels.yuanSign }} {{
|
|
|
formatMoney(valueBasedPrice) }}</strong>
|
|
|
<em v-else>{{ labels.waitForInput }}</em>
|
|
|
</div>
|
|
|
<p>{{ labels.valueBasedPriceFormula }}</p>
|
|
|
</section>
|
|
|
|
|
|
<p v-if="validationMessage" class="validation-message">{{ validationMessage }}</p>
|
|
|
|
|
|
<footer class="workbench-footer">
|
|
|
<p>{{ labels.valueBasedFooterTip }}</p>
|
|
|
<div class="footer-actions">
|
|
|
<el-button plain :disabled="saving" @click="resetStepThree">{{ labels.clearStepThree
|
|
|
}}</el-button>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="currentStep === 4">
|
|
|
<section class="psm-section">
|
|
|
<div class="psm-toolbar">
|
|
|
<div>
|
|
|
<p>{{ labels.psmIntro }}</p>
|
|
|
<p class="psm-subtitle">{{ labels.psmDataTitle }}</p>
|
|
|
</div> <div class="toolbar-actions">
|
|
|
<button type="button" class="primary-button" @click="addPsmRow">{{ labels.psmAddRow
|
|
|
}}</button>
|
|
|
<button type="button" class="secondary-button" :disabled="!canRemovePsmRow"
|
|
|
@click="removePsmRow">
|
|
|
{{ labels.psmRemoveRow }}
|
|
|
</button>
|
|
|
<button type="button" class="secondary-button" @click="exportPsmTable">{{
|
|
|
labels.psmExport }}</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="table-scroll">
|
|
|
<table class="price-table psm-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>{{ labels.psmPriceRange }}</th>
|
|
|
<th>{{ labels.psmTooExpensive }}</th>
|
|
|
<th>{{ labels.psmTooCheap }}</th>
|
|
|
<th>{{ labels.psmExpensiveAcceptable }}</th>
|
|
|
<th>{{ labels.psmCheapValue }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="row in psmRows" :key="row.id">
|
|
|
<td>
|
|
|
<span v-if="row.isDefault">{{ row.priceRange }}</span>
|
|
|
<input v-else v-model="row.priceRange" type="text"
|
|
|
:placeholder="labels.psmCustomRangePlaceholder" />
|
|
|
</td>
|
|
|
<td><input v-model="row.tooExpensive" type="number" min="0" max="100"
|
|
|
step="0.01" :placeholder="labels.psmPercentagePlaceholder"
|
|
|
@input="clearValidation" /></td>
|
|
|
<td><input v-model="row.tooCheap" type="number" min="0" max="100"
|
|
|
step="0.01" :placeholder="labels.psmPercentagePlaceholder"
|
|
|
@input="clearValidation" /></td>
|
|
|
<td><input v-model="row.expensiveAcceptable" type="number" min="0" max="100"
|
|
|
step="0.01" :placeholder="labels.psmPercentagePlaceholder"
|
|
|
@input="clearValidation" /></td>
|
|
|
<td><input v-model="row.cheapValue" type="number" min="0" max="100"
|
|
|
step="0.01" :placeholder="labels.psmPercentagePlaceholder"
|
|
|
@input="clearValidation" /></td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<section class="psm-chart-section">
|
|
|
<div class="psm-chart-head">
|
|
|
<div>
|
|
|
<h3>{{ labels.psmChartTitle }}</h3>
|
|
|
<p>根据上表，绘制PSM价格数据折线图：</p>
|
|
|
</div>
|
|
|
<button type="button" class="primary-button" :disabled="uploadingPsmChart"
|
|
|
@click="triggerPsmChartUpload">
|
|
|
{{ uploadingPsmChart ? labels.uploading : labels.psmUploadChart }}
|
|
|
</button>
|
|
|
</div>
|
|
|
<input ref="psmChartInput" class="file-picker" type="file" accept="image/*"
|
|
|
@change="handlePsmChartUpload" />
|
|
|
<div v-if="psmChart.url" class="psm-chart-preview">
|
|
|
<el-image :src="psmChart.url" :preview-src-list="psmChartPreviewList" fit="cover"
|
|
|
class="psm-chart-image" preview-teleported />
|
|
|
<div>
|
|
|
<p>{{ psmChart.name }}</p>
|
|
|
<button type="button" class="text-button" @click="removePsmChart">{{
|
|
|
labels.psmChartRemove }}</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="psm-point-section">
|
|
|
<h3>{{ labels.psmPricePointTitle }}</h3>
|
|
|
<div class="psm-point-grid">
|
|
|
<label>
|
|
|
<span>{{ labels.psmOptimalPrice }}</span>
|
|
|
<input v-model="psmPricePoints.optimalPrice" type="number" min="0" step="0.01"
|
|
|
:placeholder="labels.psmPricePointPlaceholder" @input="clearValidation" />
|
|
|
</label>
|
|
|
<label>
|
|
|
<span>{{ labels.psmAcceptablePrice }}</span>
|
|
|
<input v-model="psmPricePoints.acceptablePrice" type="number" min="0"
|
|
|
step="0.01" :placeholder="labels.psmPricePointPlaceholder"
|
|
|
@input="clearValidation" />
|
|
|
</label>
|
|
|
<label>
|
|
|
<span>{{ labels.psmAcceptableRange }}</span>
|
|
|
<input v-model="psmPricePoints.acceptableRange" type="text"
|
|
|
:placeholder="labels.psmPricePointPlaceholder" @input="clearValidation" />
|
|
|
</label>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<p v-if="validationMessage" class="validation-message">{{ validationMessage }}</p>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="currentStep === 5">
|
|
|
<section class="final-pricing-section">
|
|
|
<p class="intro-copy final-pricing-intro">{{ labels.finalPricingIntro }}</p>
|
|
|
|
|
|
<div class="final-pricing-channel">
|
|
|
<div>
|
|
|
<h3>{{ labels.costMarkupChannel }}</h3>
|
|
|
<p>{{ labels.costMarkupChannelHint }}</p>
|
|
|
</div>
|
|
|
<el-select v-model="selectedCostMarkupChannel"
|
|
|
:placeholder="labels.costMarkupChannelPlaceholder" @change="clearValidation">
|
|
|
<el-option v-for="option in costMarkupChannelOptions" :key="option.value"
|
|
|
:label="option.label" :value="option.value" :disabled="option.disabled" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
<div class="pricing-table-wrap">
|
|
|
<table class="pricing-table final-pricing-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>{{ labels.pricingMethod }}</th>
|
|
|
<th>{{ labels.measuredResult }}</th>
|
|
|
<th>{{ labels.grossMarginRate }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="result in stepFiveMethodResults" :key="result.key">
|
|
|
<td>{{ result.methodName }}</td>
|
|
|
<td>{{ result.measuredPrice === null ? labels.waitForInput :
|
|
|
`${labels.yuanSign} ${formatMoney(result.measuredPrice)}` }}</td>
|
|
|
<td>{{ result.grossMarginRate === null ? labels.waitForInput :
|
|
|
`${formatMoney(result.grossMarginRate)}%` }}</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<section class="final-analysis-section">
|
|
|
<h3>{{ labels.finalAnalysisTitle }}</h3>
|
|
|
<el-input v-model="finalPricingAnalysis" type="textarea"
|
|
|
:autosize="{ minRows: 7, maxRows: 12 }"
|
|
|
:placeholder="labels.finalAnalysisPlaceholder" @input="clearValidation" />
|
|
|
</section>
|
|
|
|
|
|
<p v-if="validationMessage" class="validation-message">{{ validationMessage }}</p>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="currentStep === 2">
|
|
|
<p class="intro-copy">{{ labels.competitorIntro }}</p>
|
|
|
|
|
|
<section class="competitor-section">
|
|
|
<div class="subsection-title">
|
|
|
<span>01</span>
|
|
|
<h3>{{ labels.competitorAnalysis }}</h3>
|
|
|
</div>
|
|
|
<div class="pricing-table-wrap">
|
|
|
<table class="pricing-table competitor-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>{{ labels.competitorProductType }}</th>
|
|
|
<th>{{ labels.competitorBrand }}</th>
|
|
|
<th>{{ labels.competitorEcommercePrice }}</th>
|
|
|
<th>{{ labels.competitorDifferentiator }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="row in competitorRows" :key="row.id">
|
|
|
<td>
|
|
|
<el-input v-model="row.productType" :placeholder="row.label"
|
|
|
@input="clearValidation" />
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-input v-model="row.brand" :placeholder="labels.brandPlaceholder"
|
|
|
@input="clearValidation" />
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-input v-model="row.ecommercePrice" inputmode="decimal"
|
|
|
:placeholder="labels.pricePlaceholder" @input="clearValidation">
|
|
|
<template #append>{{ labels.yuan }}</template>
|
|
|
</el-input>
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-input v-model="row.differentiator" type="textarea"
|
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
|
:placeholder="labels.differentiatorPlaceholder"
|
|
|
@input="clearValidation" />
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="competitor-section">
|
|
|
<div class="subsection-title">
|
|
|
<span>02</span>
|
|
|
<h3>{{ labels.decisionTitle }}</h3>
|
|
|
</div>
|
|
|
<div class="pricing-table-wrap">
|
|
|
<table class="pricing-table decision-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>{{ labels.benchmarkCompetitor }}</th>
|
|
|
<th>{{ labels.targetPrice }}</th>
|
|
|
<th>{{ labels.grossMarginRate }}</th>
|
|
|
<th>{{ labels.competitorDifferentiator }}</th>
|
|
|
<th>{{ labels.pricingReason }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<el-select v-model="pricingDecision.benchmarkCompetitor"
|
|
|
:placeholder="labels.benchmarkPlaceholder"
|
|
|
@change="clearValidation">
|
|
|
<el-option v-for="(row, index) in competitorRows" :key="row.id"
|
|
|
:label="competitorOptionLabel(row, index)"
|
|
|
:value="row.productType"
|
|
|
:disabled="!String(row.productType || '').trim()" />
|
|
|
</el-select>
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-input v-model="pricingDecision.targetPrice" inputmode="decimal"
|
|
|
:placeholder="labels.pricePlaceholder" @input="clearValidation">
|
|
|
<template #append>{{ labels.yuan }}</template>
|
|
|
</el-input>
|
|
|
</td>
|
|
|
<td class="sale-price-cell">
|
|
|
<span v-if="grossMarginRate !== null">{{ formatMoney(grossMarginRate)
|
|
|
}}%</span>
|
|
|
<span v-else class="empty-price">{{ labels.waitForInput }}</span>
|
|
|
</td>
|
|
|
<td><el-input v-model="pricingDecision.differentiator" type="textarea"
|
|
|
:autosize="{ minRows: 2, maxRows: 4 }" @input="clearValidation" />
|
|
|
</td>
|
|
|
<td><el-input v-model="pricingDecision.pricingReason" type="textarea"
|
|
|
:autosize="{ minRows: 2, maxRows: 4 }" @input="clearValidation" />
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<p v-if="validationMessage" class="validation-message">{{ validationMessage }}</p>
|
|
|
|
|
|
<footer class="workbench-footer">
|
|
|
<p>{{ labels.competitorFooterTip }}</p>
|
|
|
<div class="footer-actions">
|
|
|
<el-button plain :disabled="saving" @click="resetStepTwo">{{ labels.clearStepTwo
|
|
|
}}</el-button>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</template>
|
|
|
|
|
|
<div class="step-navigation">
|
|
|
<div class="step-nav-left">
|
|
|
<button v-if="currentStep > 1" type="button" class="btn-nav btn-ghost" :disabled="saving"
|
|
|
@click="previousStep">
|
|
|
<el-icon>
|
|
|
<ArrowLeft />
|
|
|
</el-icon>
|
|
|
上一步
|
|
|
</button>
|
|
|
<button type="button" class="btn-nav btn-save" :disabled="saving" @click="saveCurrentProgress">
|
|
|
<el-icon>
|
|
|
<CircleCheck />
|
|
|
</el-icon>
|
|
|
保存
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="step-nav-right">
|
|
|
<span class="step-progress">Step {{ String(currentStep).padStart(2, "0") }} / {{
|
|
|
String(pricingSteps.length).padStart(2, "0") }}</span>
|
|
|
<button v-if="currentStep < pricingSteps.length" type="button" class="btn-nav btn-primary"
|
|
|
:disabled="saving" @click="nextStep">
|
|
|
下一步
|
|
|
<el-icon>
|
|
|
<ArrowRight />
|
|
|
</el-icon>
|
|
|
</button>
|
|
|
<button v-else type="button" class="btn-nav btn-primary" :disabled="saving"
|
|
|
@click="saveStepFive">
|
|
|
提交并完成实训
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</section>
|
|
|
</main>
|
|
|
|
|
|
<TrainingAiSidebar :task-key="TASK_KEY" :has-saved-answer="hasSavedAnswer" :progress-items="progressItems"
|
|
|
:study-tip="labels.studyTip" :reference-title="labels.referenceTitle"
|
|
|
:reference-text="labels.referenceText" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, getCurrentInstance, onMounted, reactive, ref } from "vue"
|
|
|
import { ArrowLeft, ArrowRight, CircleCheck } from "@element-plus/icons-vue"
|
|
|
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue"
|
|
|
import TrainingTaskToolbar from "@/views/components/TrainingTaskToolbar.vue"
|
|
|
import {
|
|
|
getStudentTrainingAnswer,
|
|
|
saveStudentTrainingAnswer,
|
|
|
uploadStudentTrainingFile,
|
|
|
validateProductPricingStepOne,
|
|
|
validateProductPricingStepTwo,
|
|
|
validateProductPricingStepThree,
|
|
|
validateProductPricingStepFour,
|
|
|
validateProductPricingStepFive,
|
|
|
} from "@/api/studentTrainingAnswer"
|
|
|
import { getTrainingTaskByKey } from "@/api/trainingTask"
|
|
|
import { parseTrainingArray } from "@/views/training/taskKeyMap"
|
|
|
import { isStudentDemo } from "@/utils/studentDemo"
|
|
|
|
|
|
const TASK_KEY = "product-pricing"
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
|
|
const labels = {
|
|
|
psmTitle: "PSM价格敏感度测试",
|
|
|
psmIntro: "PSM（价格敏感度测试）通过四个问题调查用户对价格的敏感程度，包括：太贵不买；太便宜不买（怀疑质量）；偏高但可接受；便宜划算。请根据案例资料提供的PSM问卷原始数据，计算各价格区间四类回答的累计占比，计算价格敏感度。",
|
|
|
psmDataTitle: "（一）根据案例资料填写 PSM 累计占比表",
|
|
|
psmAddRow: "增加一行",
|
|
|
psmRemoveRow: "删除一行",
|
|
|
psmExport: "导出",
|
|
|
psmPriceRange: "价格（元）",
|
|
|
psmTooExpensive: "太贵不买累计占比（%）",
|
|
|
psmTooCheap: "太便宜不买累计占比（%）",
|
|
|
psmExpensiveAcceptable: "偏高可接受累计占比（%）",
|
|
|
psmCheapValue: "便宜划算累计占比（%）",
|
|
|
psmCustomRangePlaceholder: "填写价格区间",
|
|
|
psmPercentagePlaceholder: "0-100",
|
|
|
psmPricePointTitle: "（三）确定价格点",
|
|
|
psmOptimalPrice: "最优价格点",
|
|
|
psmAcceptablePrice: "可接受价格点",
|
|
|
psmAcceptableRange: "可接受价格范围",
|
|
|
psmPricePointPlaceholder: "学生手动填写",
|
|
|
psmChartTitle: "（二）PSM价格数据可视化",
|
|
|
psmChartHint: "根据上表，绘制PSM价格数据折线图：",
|
|
|
psmUploadChart: "上传PSM价格数据折线图",
|
|
|
psmChartUploadSuccess: "图表上传成功",
|
|
|
psmChartUploadError: "图表上传失败，请重试",
|
|
|
psmChartRemove: "移除图表",
|
|
|
psmSave: "保存PSM价格敏感度测试",
|
|
|
psmSaving: "保存中...",
|
|
|
psmSaveSuccess: "PSM价格敏感度测试已保存",
|
|
|
psmRowRequired: "请完整填写第 {index} 行 PSM 数据。",
|
|
|
psmPercentageRange: "第 {index} 行“{label}”累计占比应在 0%–100% 之间。",
|
|
|
psmPricePointsRequired: "请完整填写最优价格点、可接受价格点和可接受价格范围。",
|
|
|
finalPricingTitle: "最终量产定价",
|
|
|
finalPricingIntro: "汇总四种定价方法的测算结果，综合分析确定最终量产定价，并说明定价依据与利润空间。",
|
|
|
costMarkupChannel: "成本加成定价渠道",
|
|
|
costMarkupChannelHint: "从第 1 步已计算的渠道加成售价中选择一个作为成本加成定价结果。",
|
|
|
costMarkupChannelPlaceholder: "请选择第 1 步渠道售价",
|
|
|
pricingMethod: "定价方法",
|
|
|
measuredResult: "测算结果",
|
|
|
finalAnalysisTitle: "最终量产定价分析",
|
|
|
finalAnalysisPlaceholder: "请综合成本、竞品、用户感知价值和 PSM 价格敏感度，说明最终量产定价、定价依据与利润空间。",
|
|
|
finalPricingSave: "提交并完成实训",
|
|
|
finalPricingSaving: "提交中...",
|
|
|
finalPricingSaveSuccess: "实训任务提交成功",
|
|
|
finalPricingChannelRequired: "请选择用于汇总的成本加成定价渠道。",
|
|
|
finalPricingPrerequisiteRequired: "请先完成前四步定价测算，确保四种定价方法均有测算结果和毛利润率。",
|
|
|
finalPricingAnalysisRequired: "请填写最终量产定价分析。",
|
|
|
uploading: "上传中...",
|
|
|
pricingTitle: "\u6e20\u9053\u52a0\u6210\u5b9a\u4ef7",
|
|
|
formulaTip: "\u6838\u5fc3\u903b\u8f91\uff1a\u603b\u6210\u672c \u00d7\uff081 + \u52a0\u6210\u7387\uff09= \u6700\u7ec8\u552e\u4ef7\u3002\u4f01\u4e1a\u6839\u636e\u6e20\u9053\u7c7b\u578b\u548c\u54c1\u724c\u5b9a\u4f4d\u786e\u5b9a\u52a0\u6210\u7387\uff0c\u5728\u6210\u672c\u57fa\u7840\u4e0a\u52a0\u6210\u5b9a\u4ef7\u3002\u8bf7\u6839\u636e\u6848\u4f8b\u8d44\u6599\u63d0\u4f9b\u7684\u5355\u53f0\u7efc\u5408\u6210\u672c\uff0c\u8ba1\u7b97\u5404\u6e20\u9053\u52a0\u6210\u552e\u4ef7\u3002",
|
|
|
unitCost: "\u5355\u53f0\u7efc\u5408\u6210\u672c\uff08\u5143\uff09",
|
|
|
unitCostHelp: "\u7531\u5b66\u751f\u4f9d\u636e\u6848\u4f8b\u8d44\u6599\u5728\u672c\u9875\u586b\u5199\uff0c\u4ec5\u7528\u4e8e\u672c\u9875\u81ea\u52a8\u8ba1\u7b97\u3002",
|
|
|
unitCostPlaceholder: "\u8bf7\u8f93\u5165\u5355\u53f0\u7efc\u5408\u6210\u672c",
|
|
|
yuan: "\u5143",
|
|
|
yuanSign: "\u00a5",
|
|
|
serial: "\u5e8f\u53f7",
|
|
|
channel: "\u6e20\u9053",
|
|
|
markupRate: "\u52a0\u6210\u7387\uff08%\uff09",
|
|
|
salePrice: "\u52a0\u6210\u552e\u4ef7\uff08\u5143\uff09",
|
|
|
rangePrefix: "\u793a\u4f8b\u586b\u5199\u8303\u56f4\uff1a",
|
|
|
waitForInput: "\u7b49\u5f85\u586b\u5199",
|
|
|
footerTip: "\u586b\u5199\u5355\u53f0\u7efc\u5408\u6210\u672c\u548c\u4e09\u4e2a\u6e20\u9053\u7684\u52a0\u6210\u7387\u540e\uff0c\u7cfb\u7edf\u5c06\u81ea\u52a8\u8ba1\u7b97\u52a0\u6210\u552e\u4ef7\u3002",
|
|
|
clear: "\u6e05\u7a7a\u586b\u5199",
|
|
|
save: "\u4fdd\u5b58\u672c\u6b65\u9aa4",
|
|
|
studyTip: "\u5148\u6838\u5bf9\u6848\u4f8b\u4e2d\u7684\u5355\u53f0\u7efc\u5408\u6210\u672c\uff0c\u518d\u7ed3\u5408\u5404\u6e20\u9053\u5b9a\u4f4d\u586b\u5199\u52a0\u6210\u7387\uff1b\u552e\u4ef7\u4f1a\u6309\u516c\u5f0f\u81ea\u52a8\u8ba1\u7b97\u3002",
|
|
|
referenceTitle: "\u5b9a\u4ef7\u6838\u5bf9\u63d0\u793a",
|
|
|
referenceText: "\u8bf7\u68c0\u67e5\u5355\u53f0\u7efc\u5408\u6210\u672c\u662f\u5426\u6765\u81ea\u6848\u4f8b\u8d44\u6599\uff0c\u5e76\u786e\u8ba4\u4e09\u4e2a\u6e20\u9053\u7684\u52a0\u6210\u7387\u5747\u5728\u9875\u9762\u7ed9\u51fa\u7684\u5efa\u8bae\u8303\u56f4\u5185\u3002",
|
|
|
saveSuccess: "\u672c\u6b65\u9aa4\u5df2\u4fdd\u5b58",
|
|
|
resetSuccess: "\u5df2\u6e05\u7a7a\u672c\u9875\u586b\u5199\u5185\u5bb9",
|
|
|
costRequired: "\u8bf7\u586b\u5199\u5927\u4e8e 0 \u7684\u5355\u53f0\u7efc\u5408\u6210\u672c\u3002",
|
|
|
rateRequired: "\u8bf7\u586b\u5199\u201c{channel}\u201d\u7684\u52a0\u6210\u7387\u3002",
|
|
|
rateRange: "\u201c{channel}\u201d\u7684\u52a0\u6210\u7387\u5e94\u5728 {min}%\u2013{max}% \u4e4b\u95f4\u3002",
|
|
|
competitorPricingTitle: "\u7ade\u54c1\u4ef7\u683c\u5e26\u4e0e\u5b9a\u4ef7",
|
|
|
competitorIntro: "对标同品类竞品，根据产品差异化优势寻找价格空位。根据案例资料竞品信息，请分析竞品价格带与差异化定位，填写差异化优势，并确定本产品可切入的价格空位。",
|
|
|
competitorAnalysis: "\u7ade\u54c1\u5dee\u5f02\u5316\u4f18\u52bf\u53ca\u552e\u4ef7\u5206\u6790",
|
|
|
competitorProductType: "\u7ade\u54c1\u4ea7\u54c1\u7c7b\u578b",
|
|
|
competitorBrand: "\u54c1\u724c",
|
|
|
competitorEcommercePrice: "\u7535\u5546\u552e\u4ef7\uff08\u5143\uff09",
|
|
|
competitorDifferentiator: "\u5dee\u5f02\u5316\u4f18\u52bf",
|
|
|
brandPlaceholder: "\u8bf7\u586b\u5199\u54c1\u724c",
|
|
|
pricePlaceholder: "\u8bf7\u586b\u5199\u91d1\u989d",
|
|
|
differentiatorPlaceholder: "\u8bf7\u586b\u5199\u5dee\u5f02\u5316\u4f18\u52bf",
|
|
|
decisionTitle: "\u786e\u5b9a\u5bf9\u6807\u7ade\u54c1\u53ca\u5b9a\u4ef7",
|
|
|
benchmarkCompetitor: "\u5bf9\u6807\u7ade\u54c1",
|
|
|
benchmarkPlaceholder: "\u8bf7\u5148\u586b\u5199\u5e76\u9009\u62e9\u5bf9\u6807\u7ade\u54c1",
|
|
|
targetPrice: "\u5b9a\u4ef7\uff08\u5143\uff09",
|
|
|
grossMarginRate: "\u6bdb\u5229\u6da6\u7387",
|
|
|
pricingReason: "\u5b9a\u4ef7\u539f\u56e0\u5206\u6790",
|
|
|
competitorFooterTip: "\u7ade\u54c1\u4fe1\u606f\u548c\u5b9a\u4ef7\u539f\u56e0\u5747\u9700\u5b8c\u6574\u586b\u5199\uff1b\u6bdb\u5229\u6da6\u7387\u4f1a\u6839\u636e\u7b2c 1 \u6b65\u7684\u5355\u53f0\u7efc\u5408\u6210\u672c\u81ea\u52a8\u8ba1\u7b97\u3002",
|
|
|
saveStepOne: "\u4fdd\u5b58\u5e76\u8fdb\u5165\u7b2c 2 \u6b65",
|
|
|
clearStepTwo: "\u6e05\u7a7a\u7b2c 2 \u6b65",
|
|
|
saveStepTwo: "\u4fdd\u5b58\u7b2c 2 \u6b65",
|
|
|
stepOneSaveSuccess: "\u7b2c 1 \u6b65\u5df2\u4fdd\u5b58\uff0c\u5df2\u8fdb\u5165\u7b2c 2 \u6b65",
|
|
|
stepTwoSaveSuccess: "\u7b2c 2 \u6b65\u5df2\u4fdd\u5b58",
|
|
|
stepTwoResetSuccess: "\u5df2\u6e05\u7a7a\u7b2c 2 \u6b65\u586b\u5199\u5185\u5bb9",
|
|
|
valueBasedPricingTitle: "用户感知价值定价",
|
|
|
valueBasedPricingIntro: "基于用户感知价值定价。将产品可替代的功能或产品逐一折算价值并加总，再按一定折扣让渡利润给用户，确定最终售价。",
|
|
|
valueBasedAddRow: "增加一行",
|
|
|
valueBasedRemoveRow: "删除一行",
|
|
|
perceivedValueItem: "可替代产品/功能/额外价值感知",
|
|
|
perceivedValueAmount: "价值感知（元）",
|
|
|
perceivedValueItemPlaceholder: "示例：闹钟",
|
|
|
perceivedValueAmountPlaceholder: "示例：20",
|
|
|
perceivedValueTotal: "感知价值合计",
|
|
|
profitDiscountRate: "利润让渡折扣率",
|
|
|
discountRatePlaceholder: "1-100",
|
|
|
valueBasedPrice: "价值定价法价格",
|
|
|
valueBasedPriceFormula: "价值定价法价格 = 感知价值合计 × 折扣率",
|
|
|
valueBasedFooterTip: "首行示例可修改但不可删除；可增加或删除中间行，合计与价值定价法价格将自动计算。",
|
|
|
clearStepThree: "清空第 3 步",
|
|
|
saveStepThree: "保存第 3 步",
|
|
|
stepThreeSaveSuccess: "第 3 步已保存",
|
|
|
stepThreeResetSuccess: "已清空第 3 步填写内容",
|
|
|
perceivedValueItemRequired: "请完整填写第 {index} 项价值感知。",
|
|
|
perceivedValueAmountRequired: "第 {index} 项价值感知金额必须大于 0。",
|
|
|
discountRateRequired: "利润让渡折扣率应大于 0 且不超过 100%。",
|
|
|
costRequiredForStepTwo: "\u8bf7\u5148\u5728\u7b2c 1 \u6b65\u586b\u5199\u5927\u4e8e 0 \u7684\u5355\u53f0\u7efc\u5408\u6210\u672c\u3002",
|
|
|
competitorRequired: "\u8bf7\u5b8c\u6574\u586b\u5199\u7ade\u54c1 {index} \u7684\u4fe1\u606f\u3002",
|
|
|
competitorPriceRequired: "\u8bf7\u586b\u5199\u7ade\u54c1 {index} \u5927\u4e8e 0 \u7684\u7535\u5546\u552e\u4ef7\u3002",
|
|
|
benchmarkRequired: "\u8bf7\u586b\u5199\u5bf9\u6807\u7ade\u54c1\u3002",
|
|
|
targetPriceRequired: "\u8bf7\u586b\u5199\u5927\u4e8e 0 \u7684\u5b9a\u4ef7\u3002",
|
|
|
differentiatorRequired: "\u8bf7\u586b\u5199\u672c\u4ea7\u54c1\u7684\u5dee\u5f02\u5316\u4f18\u52bf\u3002",
|
|
|
pricingReasonRequired: "\u8bf7\u586b\u5199\u5b9a\u4ef7\u539f\u56e0\u5206\u6790\u3002",
|
|
|
}
|
|
|
|
|
|
const DEFAULT_ROWS = [
|
|
|
{ id: "dealer", channel: "\u5382\u5bb6\u7ed9\u7ecf\u9500\u5546", minRate: 15, maxRate: 25 },
|
|
|
{ id: "direct-retail", channel: "\u5382\u5bb6\u76f4\u63a5\u7535\u5546\u96f6\u552e", minRate: 40, maxRate: 60 },
|
|
|
{ id: "premium-brand", channel: "\u9ad8\u7aef\u5b9a\u4f4d\u54c1\u724c", minRate: 70, maxRate: 80 },
|
|
|
]
|
|
|
|
|
|
const taskConfig = ref(null)
|
|
|
const briefOpen = ref(true)
|
|
|
const saving = ref(false)
|
|
|
const hasSavedAnswer = ref(false)
|
|
|
const unitCost = ref("")
|
|
|
const pricingRows = ref(createPricingRows())
|
|
|
const validationMessage = ref("")
|
|
|
const currentStep = ref(1)
|
|
|
const competitorRows = ref(createCompetitorRows())
|
|
|
const pricingDecision = ref(createPricingDecision())
|
|
|
const DEFAULT_PERCEIVED_VALUE_ITEM = { id: "perceived-value-default", name: "闹钟", perceivedValue: "20" }
|
|
|
let perceivedValueItemSeed = 0
|
|
|
const perceivedValueItems = ref(createPerceivedValueItems())
|
|
|
const perceivedValueDiscountRate = ref("")
|
|
|
|
|
|
const DEFAULT_PSM_PRICE_RANGES = [
|
|
|
{ id: "psm-under-100", priceRange: "≤100元" },
|
|
|
{ id: "psm-100-150", priceRange: "100~150元" },
|
|
|
{ id: "psm-150-200", priceRange: "150~200元" },
|
|
|
{ id: "psm-200-250", priceRange: "200~250元" },
|
|
|
{ id: "psm-250-300", priceRange: "250~300元" },
|
|
|
{ id: "psm-over-300", priceRange: "≥300元" },
|
|
|
]
|
|
|
let psmRowSeed = 0
|
|
|
const psmRows = ref(createPsmRows())
|
|
|
const psmPricePoints = reactive({
|
|
|
optimalPrice: "",
|
|
|
acceptablePrice: "",
|
|
|
acceptableRange: "",
|
|
|
})
|
|
|
const psmChart = reactive({ url: "", name: "" })
|
|
|
const psmChartInput = ref(null)
|
|
|
const uploadingPsmChart = ref(false)
|
|
|
const psmChartPreviewList = computed(() => (psmChart.url ? [psmChart.url] : []))
|
|
|
const selectedCostMarkupChannel = ref("")
|
|
|
const finalPricingAnalysis = ref("")
|
|
|
const dynamicStepAnswers = ref({})
|
|
|
const canRemovePsmRow = computed(() => psmRows.value.some((row) => !row.isDefault))
|
|
|
const canRemovePerceivedValueItem = computed(() => perceivedValueItems.value.some((row) => !row.isDefault))
|
|
|
const DEFAULT_PRICING_STEPS = [labels.pricingTitle, labels.competitorPricingTitle, labels.valueBasedPricingTitle, labels.psmTitle, labels.finalPricingTitle]
|
|
|
const pricingSteps = computed(() => {
|
|
|
const configured = parseTrainingArray(taskConfig.value?.steps)
|
|
|
const names = configured.length ? configured.slice(0, DEFAULT_PRICING_STEPS.length) : DEFAULT_PRICING_STEPS
|
|
|
while (names.length < DEFAULT_PRICING_STEPS.length) names.push(DEFAULT_PRICING_STEPS[names.length])
|
|
|
return names.map((title, index) => ({ no: index + 1, title }))
|
|
|
})
|
|
|
const currentStepTitle = computed(() => pricingSteps.value[currentStep.value - 1]?.title || labels.pricingTitle)
|
|
|
|
|
|
const taskTitle = computed(() => taskConfig.value?.taskName || "\u65b0\u4ea7\u54c1\u5b9a\u4ef7")
|
|
|
const taskBackground = computed(
|
|
|
() =>
|
|
|
taskConfig.value?.background ||
|
|
|
"\u57fa\u4e8e\u6848\u4f8b\u4e2d\u7684\u5355\u53f0\u7efc\u5408\u6210\u672c\uff0c\u7ed3\u5408\u6e20\u9053\u7c7b\u578b\u548c\u54c1\u724c\u5b9a\u4f4d\uff0c\u5b8c\u6210\u4e0d\u540c\u6e20\u9053\u7684\u52a0\u6210\u5b9a\u4ef7\u3002",
|
|
|
)
|
|
|
const taskRequirement = computed(
|
|
|
() =>
|
|
|
taskConfig.value?.requirements ||
|
|
|
"\u586b\u5199\u5355\u53f0\u7efc\u5408\u6210\u672c\uff0c\u5e76\u4e3a\u4e09\u79cd\u6e20\u9053\u586b\u5199\u5efa\u8bae\u8303\u56f4\u5185\u7684\u52a0\u6210\u7387\uff0c\u7cfb\u7edf\u81ea\u52a8\u8ba1\u7b97\u52a0\u6210\u552e\u4ef7\u3002",
|
|
|
)
|
|
|
const taskGoals = computed(() =>
|
|
|
parseTrainingArray(taskConfig.value?.objectives, [
|
|
|
"\u7406\u89e3\u6210\u672c\u52a0\u6210\u5b9a\u4ef7\u7684\u57fa\u672c\u903b\u8f91",
|
|
|
"\u533a\u5206\u4e0d\u540c\u6e20\u9053\u7684\u52a0\u6210\u7b56\u7565",
|
|
|
"\u5b8c\u6210\u4e09\u7c7b\u6e20\u9053\u7684\u552e\u4ef7\u8ba1\u7b97",
|
|
|
]),
|
|
|
)
|
|
|
const progressItems = computed(() => [{ text: "\u65b0\u4ea7\u54c1\u5b9a\u4ef7", status: "doing" }])
|
|
|
|
|
|
const grossMarginRate = computed(() => {
|
|
|
const cost = parseNumber(unitCost.value)
|
|
|
const price = parseNumber(pricingDecision.value.targetPrice)
|
|
|
if (cost === null || cost <= 0 || price === null || price <= 0) return null
|
|
|
return ((price - cost) / price) * 100
|
|
|
})
|
|
|
|
|
|
const perceivedValueTotal = computed(() => {
|
|
|
const values = perceivedValueItems.value.map((row) => parseNumber(row.perceivedValue))
|
|
|
if (values.some((value) => value === null || value <= 0)) return null
|
|
|
return values.reduce((total, value) => total + value, 0)
|
|
|
})
|
|
|
|
|
|
const valueBasedPrice = computed(() => {
|
|
|
const discountRate = parseNumber(perceivedValueDiscountRate.value)
|
|
|
if (perceivedValueTotal.value === null || discountRate === null || discountRate <= 0 || discountRate > 100) return null
|
|
|
return perceivedValueTotal.value * discountRate / 100
|
|
|
})
|
|
|
|
|
|
const costMarkupChannelOptions = computed(() =>
|
|
|
pricingRows.value.map((row) => {
|
|
|
const price = salePrice(row)
|
|
|
return {
|
|
|
value: row.channel,
|
|
|
label: price === null ? `${row.channel}（待完成第 1 步）` : `${row.channel}（${labels.yuanSign} ${formatMoney(price)}）`,
|
|
|
disabled: price === null,
|
|
|
}
|
|
|
}),
|
|
|
)
|
|
|
|
|
|
const stepFiveMethodResults = computed(() => {
|
|
|
const unitCostValue = parseNumber(unitCost.value)
|
|
|
const selectedCostMarkupRow = pricingRows.value.find((row) => row.channel === selectedCostMarkupChannel.value)
|
|
|
const results = [
|
|
|
{ key: "cost-markup", methodName: "成本加成定价", measuredPrice: selectedCostMarkupRow ? salePrice(selectedCostMarkupRow) : null },
|
|
|
{ key: "competitive", methodName: "竞争定价", measuredPrice: parseNumber(pricingDecision.value.targetPrice) },
|
|
|
{ key: "value-based", methodName: "价值定价", measuredPrice: valueBasedPrice.value },
|
|
|
{ key: "psm", methodName: "PSM价格敏感度", measuredPrice: parseNumber(psmPricePoints.optimalPrice) },
|
|
|
]
|
|
|
return results.map((result) => ({
|
|
|
...result,
|
|
|
grossMarginRate: unitCostValue === null || unitCostValue <= 0 || result.measuredPrice === null || result.measuredPrice <= 0
|
|
|
? null
|
|
|
: ((result.measuredPrice - unitCostValue) / result.measuredPrice) * 100,
|
|
|
}))
|
|
|
})
|
|
|
|
|
|
function createPricingRows() {
|
|
|
return DEFAULT_ROWS.map((row) => ({ ...row, markupRate: "" }))
|
|
|
}
|
|
|
|
|
|
function createCompetitorRows() {
|
|
|
return Array.from({ length: 4 }, (_, index) => ({
|
|
|
id: `competitor-${index + 1}`,
|
|
|
label: `\u7ade\u54c1${index + 1}`,
|
|
|
productType: "",
|
|
|
brand: "",
|
|
|
ecommercePrice: "",
|
|
|
differentiator: "",
|
|
|
}))
|
|
|
}
|
|
|
|
|
|
function createPricingDecision() {
|
|
|
return {
|
|
|
benchmarkCompetitor: "",
|
|
|
targetPrice: "",
|
|
|
grossMarginRate: null,
|
|
|
differentiator: "",
|
|
|
pricingReason: "",
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function createPerceivedValueItem(row = {}) {
|
|
|
return {
|
|
|
id: row.id || `perceived-value-custom-${++perceivedValueItemSeed}`,
|
|
|
name: row.name ?? "",
|
|
|
perceivedValue: row.perceivedValue ?? "",
|
|
|
isDefault: Boolean(row.isDefault),
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function createPerceivedValueItems(savedItems = []) {
|
|
|
const sourceItems = Array.isArray(savedItems) ? savedItems : []
|
|
|
const defaultItem = createPerceivedValueItem({
|
|
|
...DEFAULT_PERCEIVED_VALUE_ITEM,
|
|
|
...sourceItems.find((item) => item?.id === DEFAULT_PERCEIVED_VALUE_ITEM.id),
|
|
|
isDefault: true,
|
|
|
})
|
|
|
const customItems = sourceItems
|
|
|
.filter((item) => item && item.id !== DEFAULT_PERCEIVED_VALUE_ITEM.id)
|
|
|
.map((item) => createPerceivedValueItem({ ...item, isDefault: false }))
|
|
|
return [defaultItem, ...customItems]
|
|
|
}
|
|
|
|
|
|
function addPerceivedValueItem() {
|
|
|
perceivedValueItems.value.push(createPerceivedValueItem())
|
|
|
}
|
|
|
|
|
|
function removePerceivedValueItem() {
|
|
|
for (let index = perceivedValueItems.value.length - 1; index >= 0; index -= 1) {
|
|
|
if (!perceivedValueItems.value[index].isDefault) {
|
|
|
perceivedValueItems.value.splice(index, 1)
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function createPsmRow(row = {}) {
|
|
|
return {
|
|
|
id: row.id || `psm-custom-${++psmRowSeed}`,
|
|
|
priceRange: row.priceRange || "",
|
|
|
isDefault: Boolean(row.isDefault),
|
|
|
tooExpensive: row.tooExpensive ?? "",
|
|
|
tooCheap: row.tooCheap ?? "",
|
|
|
expensiveAcceptable: row.expensiveAcceptable ?? "",
|
|
|
cheapValue: row.cheapValue ?? "",
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function createPsmRows(savedRows = []) {
|
|
|
const sourceRows = Array.isArray(savedRows) ? savedRows : []
|
|
|
const defaultRows = DEFAULT_PSM_PRICE_RANGES.map((row) =>
|
|
|
createPsmRow({
|
|
|
...row,
|
|
|
...sourceRows.find((item) => item?.id === row.id),
|
|
|
isDefault: true,
|
|
|
})
|
|
|
)
|
|
|
const customRows = sourceRows
|
|
|
.filter((row) => row && !DEFAULT_PSM_PRICE_RANGES.some((item) => item.id === row.id))
|
|
|
.map((row) => createPsmRow({ ...row, isDefault: false }))
|
|
|
return [...defaultRows, ...customRows]
|
|
|
}
|
|
|
|
|
|
function addPsmRow() {
|
|
|
psmRows.value.push(createPsmRow())
|
|
|
}
|
|
|
|
|
|
function removePsmRow() {
|
|
|
for (let index = psmRows.value.length - 1; index >= 0; index -= 1) {
|
|
|
if (!psmRows.value[index].isDefault) {
|
|
|
psmRows.value.splice(index, 1)
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function buildStepFourProgress() {
|
|
|
return {
|
|
|
psmRows: psmRows.value.map((row) => ({ ...row })),
|
|
|
pricePoints: { ...psmPricePoints },
|
|
|
chart: { ...psmChart },
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function applyStepFourProgress(progress) {
|
|
|
if (!progress || typeof progress !== "object") return
|
|
|
psmRows.value = createPsmRows(progress.psmRows)
|
|
|
Object.assign(
|
|
|
psmPricePoints,
|
|
|
{ optimalPrice: "", acceptablePrice: "", acceptableRange: "" },
|
|
|
progress.pricePoints || {}
|
|
|
)
|
|
|
Object.assign(psmChart, { url: "", name: "" }, progress.chart || {})
|
|
|
}
|
|
|
|
|
|
function buildStepFiveProgress() {
|
|
|
return {
|
|
|
selectedCostMarkupChannel: selectedCostMarkupChannel.value,
|
|
|
methodResults: stepFiveMethodResults.value.map((result) => ({ ...result })),
|
|
|
finalAnalysis: finalPricingAnalysis.value,
|
|
|
updatedAt: new Date().toISOString(),
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function applyStepFiveProgress(progress) {
|
|
|
if (!progress || typeof progress !== "object") return
|
|
|
selectedCostMarkupChannel.value = progress.selectedCostMarkupChannel ?? ""
|
|
|
finalPricingAnalysis.value = progress.finalAnalysis ?? ""
|
|
|
}
|
|
|
|
|
|
function triggerPsmChartUpload() {
|
|
|
psmChartInput.value?.click()
|
|
|
}
|
|
|
|
|
|
async function handlePsmChartUpload(event) {
|
|
|
const file = event?.target?.files?.[0]
|
|
|
if (event?.target) event.target.value = ""
|
|
|
if (!file) return
|
|
|
|
|
|
uploadingPsmChart.value = true
|
|
|
try {
|
|
|
let url = ""
|
|
|
if (isStudentDemo()) {
|
|
|
url = URL.createObjectURL(file)
|
|
|
} else {
|
|
|
const formData = new FormData()
|
|
|
formData.append("file", file)
|
|
|
const response = await uploadStudentTrainingFile(formData)
|
|
|
url = response?.url || response?.data?.url || ""
|
|
|
}
|
|
|
if (!url) throw new Error(labels.psmChartUploadError)
|
|
|
Object.assign(psmChart, { url, name: file.name })
|
|
|
proxy?.$modal?.msgSuccess?.(labels.psmChartUploadSuccess)
|
|
|
} catch (error) {
|
|
|
proxy?.$modal?.msgError?.(error?.message || labels.psmChartUploadError)
|
|
|
} finally {
|
|
|
uploadingPsmChart.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function removePsmChart() {
|
|
|
Object.assign(psmChart, { url: "", name: "" })
|
|
|
}
|
|
|
|
|
|
function formatPsmCsvCell(value) {
|
|
|
return `"${String(value ?? "").replace(/"/g, '""')}"`
|
|
|
}
|
|
|
|
|
|
function exportPsmTable() {
|
|
|
const rows = [
|
|
|
[
|
|
|
labels.psmPriceRange,
|
|
|
labels.psmTooExpensive,
|
|
|
labels.psmTooCheap,
|
|
|
labels.psmExpensiveAcceptable,
|
|
|
labels.psmCheapValue,
|
|
|
],
|
|
|
...psmRows.value.map((row) => [
|
|
|
row.priceRange,
|
|
|
row.tooExpensive,
|
|
|
row.tooCheap,
|
|
|
row.expensiveAcceptable,
|
|
|
row.cheapValue,
|
|
|
]),
|
|
|
[],
|
|
|
[labels.psmOptimalPrice, psmPricePoints.optimalPrice],
|
|
|
[labels.psmAcceptablePrice, psmPricePoints.acceptablePrice],
|
|
|
[labels.psmAcceptableRange, psmPricePoints.acceptableRange],
|
|
|
]
|
|
|
const blob = new Blob(
|
|
|
[`\ufeff${rows.map((row) => row.map(formatPsmCsvCell).join(",")).join("\n")}`],
|
|
|
{ type: "text/csv;charset=utf-8;" }
|
|
|
)
|
|
|
const url = URL.createObjectURL(blob)
|
|
|
const link = document.createElement("a")
|
|
|
link.href = url
|
|
|
link.download = "PSM价格敏感度测试.csv"
|
|
|
document.body.appendChild(link)
|
|
|
link.click()
|
|
|
document.body.removeChild(link)
|
|
|
URL.revokeObjectURL(url)
|
|
|
}
|
|
|
|
|
|
function exportPriceOutcome() {
|
|
|
const payload = {
|
|
|
task: taskTitle.value,
|
|
|
exportedAt: new Date().toISOString(),
|
|
|
stepOne: buildStepOneProgress(),
|
|
|
stepTwo: buildStepTwoProgress(),
|
|
|
stepThree: buildStepThreeProgress(),
|
|
|
stepFour: buildStepFourProgress(),
|
|
|
stepFive: buildStepFiveProgress(),
|
|
|
}
|
|
|
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json;charset=utf-8" })
|
|
|
const url = URL.createObjectURL(blob)
|
|
|
const link = document.createElement("a")
|
|
|
link.href = url
|
|
|
link.download = `${taskTitle.value}-实训成果.json`
|
|
|
link.click()
|
|
|
URL.revokeObjectURL(url)
|
|
|
}
|
|
|
|
|
|
|
|
|
function validateStepFour() {
|
|
|
for (const [index, row] of psmRows.value.entries()) {
|
|
|
if (isBlank(row.id) || isBlank(row.priceRange)) {
|
|
|
return interpolate(labels.psmRowRequired, { index: index + 1 })
|
|
|
}
|
|
|
for (const [field, label] of [["tooExpensive", "太贵不买"], ["tooCheap", "太便宜不买"], ["expensiveAcceptable", "偏高可接受"], ["cheapValue", "便宜划算"]]) {
|
|
|
const value = parseNumber(row[field])
|
|
|
if (value === null || value < 0 || value > 100) {
|
|
|
return interpolate(labels.psmPercentageRange, { index: index + 1, label })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
const optimalPrice = parseNumber(psmPricePoints.optimalPrice)
|
|
|
const acceptablePrice = parseNumber(psmPricePoints.acceptablePrice)
|
|
|
if (optimalPrice === null || optimalPrice <= 0 || acceptablePrice === null || acceptablePrice <= 0 || isBlank(psmPricePoints.acceptableRange)) {
|
|
|
return labels.psmPricePointsRequired
|
|
|
}
|
|
|
return ""
|
|
|
}
|
|
|
|
|
|
async function saveStepFour() {
|
|
|
if (saving.value) return false
|
|
|
const message = validateStepFour()
|
|
|
validationMessage.value = message
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message)
|
|
|
return false
|
|
|
}
|
|
|
saving.value = true
|
|
|
try {
|
|
|
const validationResponse = await validateProductPricingStepFour({
|
|
|
psmRows: psmRows.value.map((row) => ({
|
|
|
id: row.id,
|
|
|
priceRange: row.priceRange,
|
|
|
tooExpensive: parseNumber(row.tooExpensive),
|
|
|
tooCheap: parseNumber(row.tooCheap),
|
|
|
expensiveAcceptable: parseNumber(row.expensiveAcceptable),
|
|
|
cheapValue: parseNumber(row.cheapValue),
|
|
|
})),
|
|
|
pricePoints: {
|
|
|
optimalPrice: parseNumber(psmPricePoints.optimalPrice),
|
|
|
acceptablePrice: parseNumber(psmPricePoints.acceptablePrice),
|
|
|
acceptableRange: psmPricePoints.acceptableRange,
|
|
|
},
|
|
|
})
|
|
|
const validated = validationResponse?.data || validationResponse || {}
|
|
|
if (Array.isArray(validated.psmRows)) {
|
|
|
psmRows.value = createPsmRows(validated.psmRows)
|
|
|
}
|
|
|
if (validated.pricePoints) {
|
|
|
Object.assign(psmPricePoints, validated.pricePoints)
|
|
|
}
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 4,
|
|
|
step4Answer: JSON.stringify(buildStepFourProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.psmSaveSuccess)
|
|
|
return true
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function validateStepFive() {
|
|
|
if (isBlank(selectedCostMarkupChannel.value)) return labels.finalPricingChannelRequired
|
|
|
if (stepFiveMethodResults.value.some((result) => result.measuredPrice === null || result.measuredPrice <= 0 || result.grossMarginRate === null)) {
|
|
|
return labels.finalPricingPrerequisiteRequired
|
|
|
}
|
|
|
if (isBlank(finalPricingAnalysis.value)) return labels.finalPricingAnalysisRequired
|
|
|
return ""
|
|
|
}
|
|
|
|
|
|
async function saveStepFive() {
|
|
|
if (saving.value) return
|
|
|
const message = validateStepFive()
|
|
|
validationMessage.value = message
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message)
|
|
|
return
|
|
|
}
|
|
|
saving.value = true
|
|
|
try {
|
|
|
const validationResponse = await validateProductPricingStepFive({
|
|
|
selectedCostMarkupChannel: selectedCostMarkupChannel.value,
|
|
|
methodResults: stepFiveMethodResults.value.map((result) => ({
|
|
|
key: result.key,
|
|
|
methodName: result.methodName,
|
|
|
measuredPrice: result.measuredPrice,
|
|
|
grossMarginRate: result.grossMarginRate,
|
|
|
})),
|
|
|
finalAnalysis: finalPricingAnalysis.value,
|
|
|
})
|
|
|
const validated = validationResponse?.data || validationResponse || {}
|
|
|
selectedCostMarkupChannel.value = validated.selectedCostMarkupChannel ?? selectedCostMarkupChannel.value
|
|
|
finalPricingAnalysis.value = validated.finalAnalysis ?? finalPricingAnalysis.value
|
|
|
dynamicStepAnswers.value = { ...dynamicStepAnswers.value, step5: buildStepFiveProgress() }
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SUBMIT",
|
|
|
currentStep: 5,
|
|
|
submitted: true,
|
|
|
dynamicStepAnswers: JSON.stringify(dynamicStepAnswers.value),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.finalPricingSaveSuccess)
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function parseNumber(value) {
|
|
|
if (value === null || value === undefined || String(value).trim() === "") {
|
|
|
return null
|
|
|
}
|
|
|
const normalized = String(value).trim().replace(/[%\uff0c,]/g, "")
|
|
|
const number = Number(normalized)
|
|
|
return Number.isFinite(number) ? number : null
|
|
|
}
|
|
|
|
|
|
function salePrice(row) {
|
|
|
const cost = parseNumber(unitCost.value)
|
|
|
const rate = parseNumber(row.markupRate)
|
|
|
if (cost === null || cost < 0 || rate === null || rate < 0) {
|
|
|
return null
|
|
|
}
|
|
|
return cost * (1 + rate / 100)
|
|
|
}
|
|
|
|
|
|
function formatMoney(value) {
|
|
|
return Number(value).toFixed(2)
|
|
|
}
|
|
|
|
|
|
function ratePlaceholder(row) {
|
|
|
return `${row.minRate}%-${row.maxRate}%`
|
|
|
}
|
|
|
|
|
|
function rateHint(row) {
|
|
|
return `${labels.rangePrefix}${row.minRate}%-${row.maxRate}%`
|
|
|
}
|
|
|
|
|
|
function clearValidation() {
|
|
|
validationMessage.value = ""
|
|
|
}
|
|
|
|
|
|
function interpolate(template, values) {
|
|
|
return Object.entries(values).reduce(
|
|
|
(result, [key, value]) => result.replace(`{${key}}`, value),
|
|
|
template,
|
|
|
)
|
|
|
}
|
|
|
|
|
|
function validateStepOne() {
|
|
|
const cost = parseNumber(unitCost.value)
|
|
|
if (cost === null || cost <= 0) {
|
|
|
return labels.costRequired
|
|
|
}
|
|
|
for (const row of pricingRows.value) {
|
|
|
const rate = parseNumber(row.markupRate)
|
|
|
if (rate === null) {
|
|
|
return interpolate(labels.rateRequired, { channel: row.channel })
|
|
|
}
|
|
|
if (rate < row.minRate || rate > row.maxRate) {
|
|
|
return interpolate(labels.rateRange, {
|
|
|
channel: row.channel,
|
|
|
min: row.minRate,
|
|
|
max: row.maxRate,
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
return ""
|
|
|
}
|
|
|
|
|
|
function buildStepOneProgress() {
|
|
|
return {
|
|
|
version: 1,
|
|
|
unitCost: unitCost.value,
|
|
|
pricingRows: pricingRows.value.map((row) => ({
|
|
|
id: row.id,
|
|
|
markupRate: row.markupRate,
|
|
|
})),
|
|
|
updatedAt: new Date().toISOString(),
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function applyStepOneProgress(progress) {
|
|
|
if (!progress || typeof progress !== "object") {
|
|
|
return
|
|
|
}
|
|
|
unitCost.value = progress.unitCost ?? ""
|
|
|
const savedRows = new Map(
|
|
|
Array.isArray(progress.pricingRows)
|
|
|
? progress.pricingRows.map((row) => [row?.id, row])
|
|
|
: [],
|
|
|
)
|
|
|
pricingRows.value = DEFAULT_ROWS.map((row) => ({
|
|
|
...row,
|
|
|
markupRate: savedRows.get(row.id)?.markupRate ?? "",
|
|
|
}))
|
|
|
}
|
|
|
|
|
|
function buildStepTwoProgress() {
|
|
|
return {
|
|
|
version: 1,
|
|
|
competitorRows: competitorRows.value.map((row) => ({
|
|
|
id: row.id,
|
|
|
productType: row.productType,
|
|
|
brand: row.brand,
|
|
|
ecommercePrice: row.ecommercePrice,
|
|
|
differentiator: row.differentiator,
|
|
|
})),
|
|
|
pricingDecision: { ...pricingDecision.value },
|
|
|
updatedAt: new Date().toISOString(),
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function applyStepTwoProgress(progress) {
|
|
|
if (!progress || typeof progress !== "object") {
|
|
|
return
|
|
|
}
|
|
|
const savedRows = new Map(
|
|
|
Array.isArray(progress.competitorRows)
|
|
|
? progress.competitorRows.map((row) => [row?.id, row])
|
|
|
: [],
|
|
|
)
|
|
|
competitorRows.value = createCompetitorRows().map((row) => {
|
|
|
const saved = savedRows.get(row.id) || {}
|
|
|
return {
|
|
|
...row,
|
|
|
productType: saved.productType ?? "",
|
|
|
brand: saved.brand ?? "",
|
|
|
ecommercePrice: saved.ecommercePrice ?? "",
|
|
|
differentiator: saved.differentiator ?? "",
|
|
|
}
|
|
|
})
|
|
|
pricingDecision.value = {
|
|
|
...createPricingDecision(),
|
|
|
...(progress.pricingDecision || {}),
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function buildStepThreeProgress() {
|
|
|
return {
|
|
|
version: 1,
|
|
|
valueItems: perceivedValueItems.value.map((row) => ({
|
|
|
id: row.id,
|
|
|
name: row.name,
|
|
|
perceivedValue: row.perceivedValue,
|
|
|
})),
|
|
|
discountRate: perceivedValueDiscountRate.value,
|
|
|
perceivedValueTotal: perceivedValueTotal.value,
|
|
|
valueBasedPrice: valueBasedPrice.value,
|
|
|
updatedAt: new Date().toISOString(),
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function applyStepThreeProgress(progress) {
|
|
|
if (!progress || typeof progress !== "object") return
|
|
|
perceivedValueItems.value = createPerceivedValueItems(progress.valueItems)
|
|
|
perceivedValueDiscountRate.value = progress.discountRate ?? ""
|
|
|
}
|
|
|
|
|
|
function isBlank(value) {
|
|
|
return !String(value ?? "").trim()
|
|
|
}
|
|
|
|
|
|
function competitorOptionLabel(row, index) {
|
|
|
const productType = String(row?.productType || "").trim()
|
|
|
const brand = String(row?.brand || "").trim()
|
|
|
return productType ? `竞品${index + 1}：${productType}${brand ? `（${brand}）` : ""}` : `竞品${index + 1}：请先填写产品类型`
|
|
|
}
|
|
|
|
|
|
function validateStepTwo() {
|
|
|
const cost = parseNumber(unitCost.value)
|
|
|
if (cost === null || cost <= 0) {
|
|
|
return labels.costRequiredForStepTwo
|
|
|
}
|
|
|
for (const [index, row] of competitorRows.value.entries()) {
|
|
|
if (isBlank(row.productType) || isBlank(row.brand) || isBlank(row.differentiator)) {
|
|
|
return interpolate(labels.competitorRequired, { index: index + 1 })
|
|
|
}
|
|
|
const ecommercePrice = parseNumber(row.ecommercePrice)
|
|
|
if (ecommercePrice === null || ecommercePrice <= 0) {
|
|
|
return interpolate(labels.competitorPriceRequired, { index: index + 1 })
|
|
|
}
|
|
|
}
|
|
|
if (isBlank(pricingDecision.value.benchmarkCompetitor)) {
|
|
|
return labels.benchmarkRequired
|
|
|
}
|
|
|
const targetPrice = parseNumber(pricingDecision.value.targetPrice)
|
|
|
if (targetPrice === null || targetPrice <= 0) {
|
|
|
return labels.targetPriceRequired
|
|
|
}
|
|
|
if (isBlank(pricingDecision.value.differentiator)) {
|
|
|
return labels.differentiatorRequired
|
|
|
}
|
|
|
if (isBlank(pricingDecision.value.pricingReason)) {
|
|
|
return labels.pricingReasonRequired
|
|
|
}
|
|
|
return ""
|
|
|
}
|
|
|
|
|
|
function validateStepThree() {
|
|
|
for (const [index, row] of perceivedValueItems.value.entries()) {
|
|
|
if (isBlank(row.name)) {
|
|
|
return interpolate(labels.perceivedValueItemRequired, { index: index + 1 })
|
|
|
}
|
|
|
const perceivedValue = parseNumber(row.perceivedValue)
|
|
|
if (perceivedValue === null || perceivedValue <= 0) {
|
|
|
return interpolate(labels.perceivedValueAmountRequired, { index: index + 1 })
|
|
|
}
|
|
|
}
|
|
|
const discountRate = parseNumber(perceivedValueDiscountRate.value)
|
|
|
if (discountRate === null || discountRate <= 0 || discountRate > 100) {
|
|
|
return labels.discountRateRequired
|
|
|
}
|
|
|
return ""
|
|
|
}
|
|
|
|
|
|
function parseSavedJson(raw) {
|
|
|
if (!raw) {
|
|
|
return null
|
|
|
}
|
|
|
try {
|
|
|
return typeof raw === "string" ? JSON.parse(raw) : raw
|
|
|
} catch (error) {
|
|
|
return null
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function switchStep(step) {
|
|
|
currentStep.value = step
|
|
|
clearValidation()
|
|
|
}
|
|
|
|
|
|
function previousStep() {
|
|
|
if (currentStep.value > 1) switchStep(currentStep.value - 1)
|
|
|
}
|
|
|
|
|
|
function saveCurrentProgress() {
|
|
|
if (currentStep.value === 1) return saveStepOne(false)
|
|
|
if (currentStep.value === 2) return saveStepTwo()
|
|
|
if (currentStep.value === 3) return saveStepThree()
|
|
|
if (currentStep.value === 4) return saveStepFour()
|
|
|
return saveStepFiveDraft()
|
|
|
}
|
|
|
|
|
|
async function nextStep() {
|
|
|
const target = currentStep.value + 1
|
|
|
if (target > pricingSteps.value.length) return
|
|
|
if (currentStep.value === 1) {
|
|
|
await saveStepOne(true)
|
|
|
return
|
|
|
}
|
|
|
let saved = false
|
|
|
try {
|
|
|
if (currentStep.value === 2) saved = (await saveStepTwo()) === true
|
|
|
else if (currentStep.value === 3) saved = (await saveStepThree()) === true
|
|
|
else if (currentStep.value === 4) saved = (await saveStepFour()) === true
|
|
|
} catch (error) {
|
|
|
proxy?.$modal?.msgError?.(error?.message || "保存失败，请检查填写内容")
|
|
|
return
|
|
|
}
|
|
|
if (saved) switchStep(target)
|
|
|
}
|
|
|
|
|
|
async function saveStepFiveDraft() {
|
|
|
if (saving.value) return
|
|
|
saving.value = true
|
|
|
try {
|
|
|
dynamicStepAnswers.value = { ...dynamicStepAnswers.value, step5: buildStepFiveProgress() }
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 5,
|
|
|
dynamicStepAnswers: JSON.stringify(dynamicStepAnswers.value),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.("当前步骤已保存")
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function saveStepOne(advance = false) {
|
|
|
if (saving.value) {
|
|
|
return
|
|
|
}
|
|
|
const message = validateStepOne()
|
|
|
validationMessage.value = message
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message)
|
|
|
return
|
|
|
}
|
|
|
|
|
|
saving.value = true
|
|
|
try {
|
|
|
const validationResponse = await validateProductPricingStepOne({
|
|
|
unitCost: parseNumber(unitCost.value),
|
|
|
pricingRows: pricingRows.value.map((row) => ({ id: row.id, markupRate: parseNumber(row.markupRate) })),
|
|
|
})
|
|
|
const validated = validationResponse?.data || validationResponse || {}
|
|
|
if (validated.unitCost !== undefined && validated.unitCost !== null) {
|
|
|
unitCost.value = String(validated.unitCost)
|
|
|
}
|
|
|
const validatedRows = new Map((validated.pricingRows || []).map((row) => [row?.id, row]))
|
|
|
pricingRows.value = pricingRows.value.map((row) => ({
|
|
|
...row,
|
|
|
markupRate: validatedRows.get(row.id)?.markupRate ?? row.markupRate,
|
|
|
}))
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: advance ? 2 : 1,
|
|
|
step1Answer: JSON.stringify(buildStepOneProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
if (advance) {
|
|
|
currentStep.value = 2
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepOneSaveSuccess)
|
|
|
} else {
|
|
|
proxy?.$modal?.msgSuccess?.(labels.saveSuccess)
|
|
|
}
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function resetStepOne() {
|
|
|
if (saving.value) {
|
|
|
return
|
|
|
}
|
|
|
unitCost.value = ""
|
|
|
pricingRows.value = createPricingRows()
|
|
|
validationMessage.value = ""
|
|
|
|
|
|
saving.value = true
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "RESET",
|
|
|
currentStep: 1,
|
|
|
step1Answer: JSON.stringify(buildStepOneProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.resetSuccess)
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function saveStepTwo() {
|
|
|
if (saving.value) {
|
|
|
return false
|
|
|
}
|
|
|
const message = validateStepTwo()
|
|
|
validationMessage.value = message
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message)
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
saving.value = true
|
|
|
try {
|
|
|
const validationResponse = await validateProductPricingStepTwo({
|
|
|
unitCost: parseNumber(unitCost.value),
|
|
|
competitorRows: competitorRows.value.map((row) => ({ id: row.id, productType: row.productType, brand: row.brand, ecommercePrice: parseNumber(row.ecommercePrice), differentiator: row.differentiator })),
|
|
|
decision: { ...pricingDecision.value, targetPrice: parseNumber(pricingDecision.value.targetPrice) },
|
|
|
})
|
|
|
const validated = validationResponse?.data || validationResponse || {}
|
|
|
const validatedRows = new Map((validated.competitorRows || []).map((row) => [row?.id, row]))
|
|
|
competitorRows.value = competitorRows.value.map((row) => ({ ...row, ...(validatedRows.get(row.id) || {}) }))
|
|
|
pricingDecision.value = { ...pricingDecision.value, ...(validated.decision || {}) }
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 2,
|
|
|
step2Answer: JSON.stringify(buildStepTwoProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepTwoSaveSuccess)
|
|
|
return true
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function resetStepTwo() {
|
|
|
if (saving.value) {
|
|
|
return
|
|
|
}
|
|
|
competitorRows.value = createCompetitorRows()
|
|
|
pricingDecision.value = createPricingDecision()
|
|
|
validationMessage.value = ""
|
|
|
|
|
|
saving.value = true
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 2,
|
|
|
step2Answer: JSON.stringify(buildStepTwoProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepTwoResetSuccess)
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function saveStepThree() {
|
|
|
if (saving.value) return false
|
|
|
const message = validateStepThree()
|
|
|
validationMessage.value = message
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message)
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
saving.value = true
|
|
|
try {
|
|
|
const validationResponse = await validateProductPricingStepThree({
|
|
|
valueItems: perceivedValueItems.value.map((row) => ({
|
|
|
id: row.id,
|
|
|
name: row.name,
|
|
|
perceivedValue: parseNumber(row.perceivedValue),
|
|
|
})),
|
|
|
discountRate: parseNumber(perceivedValueDiscountRate.value),
|
|
|
})
|
|
|
const validated = validationResponse?.data || validationResponse || {}
|
|
|
if (Array.isArray(validated.valueItems)) {
|
|
|
perceivedValueItems.value = createPerceivedValueItems(validated.valueItems)
|
|
|
}
|
|
|
if (validated.discountRate !== undefined && validated.discountRate !== null) {
|
|
|
perceivedValueDiscountRate.value = String(validated.discountRate)
|
|
|
}
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 3,
|
|
|
step3Answer: JSON.stringify(buildStepThreeProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepThreeSaveSuccess)
|
|
|
return true
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function resetStepThree() {
|
|
|
if (saving.value) return
|
|
|
perceivedValueItems.value = createPerceivedValueItems()
|
|
|
perceivedValueDiscountRate.value = ""
|
|
|
validationMessage.value = ""
|
|
|
|
|
|
saving.value = true
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 3,
|
|
|
step3Answer: JSON.stringify(buildStepThreeProgress()),
|
|
|
})
|
|
|
hasSavedAnswer.value = true
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepThreeResetSuccess)
|
|
|
} finally {
|
|
|
saving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadTaskConfig() {
|
|
|
try {
|
|
|
const response = await getTrainingTaskByKey(TASK_KEY)
|
|
|
taskConfig.value = response?.data || response || null
|
|
|
} catch (error) {
|
|
|
taskConfig.value = null
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadSavedProgress() {
|
|
|
try {
|
|
|
const response = await getStudentTrainingAnswer(TASK_KEY)
|
|
|
const answer = response?.data || response || {}
|
|
|
const stepOneProgress = parseSavedJson(answer?.step1Answer)
|
|
|
const stepTwoProgress = parseSavedJson(answer?.step2Answer)
|
|
|
const stepThreeProgress = parseSavedJson(answer?.step3Answer)
|
|
|
const stepFourProgress = parseSavedJson(answer?.step4Answer)
|
|
|
dynamicStepAnswers.value = parseSavedJson(answer?.dynamicStepAnswers) || {}
|
|
|
const stepFiveProgress = dynamicStepAnswers.value?.step5
|
|
|
hasSavedAnswer.value = Boolean(stepOneProgress || stepTwoProgress || stepThreeProgress || stepFourProgress || stepFiveProgress)
|
|
|
if (stepOneProgress) {
|
|
|
applyStepOneProgress(stepOneProgress)
|
|
|
}
|
|
|
if (stepTwoProgress) {
|
|
|
applyStepTwoProgress(stepTwoProgress)
|
|
|
currentStep.value = 2
|
|
|
}
|
|
|
if (stepThreeProgress) {
|
|
|
applyStepThreeProgress(stepThreeProgress)
|
|
|
currentStep.value = 3
|
|
|
}
|
|
|
if (stepFourProgress) {
|
|
|
applyStepFourProgress(stepFourProgress)
|
|
|
currentStep.value = 4
|
|
|
}
|
|
|
if (stepFiveProgress) {
|
|
|
applyStepFiveProgress(stepFiveProgress)
|
|
|
currentStep.value = 5
|
|
|
}
|
|
|
} catch (error) {
|
|
|
hasSavedAnswer.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
await Promise.all([loadTaskConfig(), loadSavedProgress()])
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
/* ===== 页面级令牌（教育蓝极简主题） ===== */
|
|
|
.price-page {
|
|
|
--student-accent: #2563eb;
|
|
|
--student-accent-deep: #1d4ed8;
|
|
|
--student-accent-light: #3b82f6;
|
|
|
--student-accent-soft: #eff6ff;
|
|
|
--student-danger: #ef4444;
|
|
|
--student-success: #2ba471;
|
|
|
--student-layer-1: #1d4ed8;
|
|
|
--student-layer-2: #3b82f6;
|
|
|
--student-layer-3: #93c5fd;
|
|
|
--student-panel-border: #e5e7eb;
|
|
|
--student-card-bg: #ffffff;
|
|
|
--student-panel-bg: #fafbfc;
|
|
|
--student-text: #1f2937;
|
|
|
--student-text-secondary: #6b7280;
|
|
|
--el-color-primary: #2563eb;
|
|
|
--el-color-primary-light-3: #60a5fa;
|
|
|
--el-color-primary-light-5: #93c5fd;
|
|
|
--el-color-primary-light-7: #bfdbfe;
|
|
|
--el-color-primary-light-8: #dbeafe;
|
|
|
--el-color-primary-light-9: #eff6ff;
|
|
|
--el-color-primary-dark-2: #1d4ed8;
|
|
|
--el-input-hover-border-color: #3b82f6;
|
|
|
--el-input-focus-border-color: #2563eb;
|
|
|
--el-input-focus-ring-color: rgba(59, 130, 246, 0.15);
|
|
|
/* 字号梯度统一继承 .student-training-shell，页面不再重复声明 */
|
|
|
|
|
|
/* 不设 grid-template-columns，由全局 .student-training-shell 单列布局接管 */
|
|
|
min-width: 0;
|
|
|
color: var(--student-text);
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
/* 对齐 foundation 的 .training-core：只设 gap，无边框/背景/阴影 */
|
|
|
.price-core {
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
align-content: start;
|
|
|
min-width: 0;
|
|
|
border: 0;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
/* 任务头：独立白卡片（对齐 foundation 的 .task-header） */
|
|
|
.task-header {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
margin: 0;
|
|
|
padding: 18px 20px 18px 24px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 12px;
|
|
|
background: var(--student-card-bg);
|
|
|
overflow: hidden;
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 4px;
|
|
|
background: var(--student-accent);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* task-header 内部主列（对齐 foundation 的 .task-head-main） */
|
|
|
.task-head-main {
|
|
|
display: grid;
|
|
|
justify-items: start;
|
|
|
gap: 8px;
|
|
|
min-width: 0;
|
|
|
flex: 1 1 auto;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.task-title {
|
|
|
margin: 0;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-display);
|
|
|
font-weight: 700;
|
|
|
line-height: 1.35;
|
|
|
}
|
|
|
|
|
|
.task-brief {
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.task-brief-text {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.task-brief-toggle {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
color: var(--student-accent-deep);
|
|
|
background: transparent;
|
|
|
font: inherit;
|
|
|
font-weight: 700;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.task-brief-more {
|
|
|
display: grid;
|
|
|
gap: 6px;
|
|
|
margin-top: 8px;
|
|
|
padding-top: 8px;
|
|
|
border-top: 1px solid var(--student-panel-border);
|
|
|
|
|
|
b {
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
|
|
|
ul {
|
|
|
display: grid;
|
|
|
gap: 4px;
|
|
|
margin: 0;
|
|
|
padding-left: 18px;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.task-action-strip {
|
|
|
margin: 0;
|
|
|
padding: 10px 16px;
|
|
|
|
|
|
// 让 TrainingTaskToolbar 内部按钮在横条内右对齐
|
|
|
:deep(.training-task-toolbar) {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* workbench：透明容器，去掉旧 border/bg */
|
|
|
.price-workbench {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
/* step-card 层：透明容器，去掉旧的 border/bg */
|
|
|
.step-card {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.step-title-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.section-eyebrow {
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.12em;
|
|
|
text-transform: uppercase;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.step-title-row h3 {
|
|
|
margin: 4px 0 0;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-h1);
|
|
|
font-weight: 700;
|
|
|
line-height: 1.35;
|
|
|
}
|
|
|
|
|
|
.intro-copy {
|
|
|
margin: 14px 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
/* ===== 按钮 ===== */
|
|
|
.primary-button {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid var(--student-accent);
|
|
|
border-radius: 8px;
|
|
|
color: #ffffff;
|
|
|
background: var(--student-accent);
|
|
|
font: inherit;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 700;
|
|
|
cursor: pointer;
|
|
|
box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28);
|
|
|
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
background: var(--student-accent-deep);
|
|
|
border-color: var(--student-accent-deep);
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32);
|
|
|
}
|
|
|
|
|
|
&:disabled {
|
|
|
cursor: not-allowed;
|
|
|
opacity: 0.5;
|
|
|
transform: none;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.secondary-button {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 8px;
|
|
|
color: var(--student-text);
|
|
|
background: #ffffff;
|
|
|
font: inherit;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 700;
|
|
|
cursor: pointer;
|
|
|
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: var(--student-accent);
|
|
|
background: var(--student-accent-soft);
|
|
|
transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
&:disabled {
|
|
|
cursor: not-allowed;
|
|
|
opacity: 0.5;
|
|
|
transform: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text-button {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
color: var(--student-accent);
|
|
|
background: transparent;
|
|
|
font: inherit;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
text-decoration: underline;
|
|
|
color: var(--student-accent-deep);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.toolbar-actions {
|
|
|
display: flex;
|
|
|
flex: none;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-end;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
/* ===== 表格 ===== */
|
|
|
.pricing-table-wrap,
|
|
|
.table-scroll {
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.pricing-table,
|
|
|
.price-table,
|
|
|
.psm-table {
|
|
|
width: 100%;
|
|
|
min-width: 720px;
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
|
|
|
.pricing-table th,
|
|
|
.pricing-table td,
|
|
|
.price-table th,
|
|
|
.price-table td,
|
|
|
.psm-table th,
|
|
|
.psm-table td {
|
|
|
padding: 10px 12px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.pricing-table th,
|
|
|
.price-table th,
|
|
|
.psm-table th {
|
|
|
color: var(--student-text);
|
|
|
background: #fafbfc;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.serial-cell {
|
|
|
color: var(--student-text-secondary);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.channel-cell {
|
|
|
color: var(--student-text);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.sale-price-cell {
|
|
|
color: var(--student-accent);
|
|
|
font-size: 18px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.empty-price {
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.range-hint {
|
|
|
display: block;
|
|
|
margin-top: 6px;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
}
|
|
|
|
|
|
.validation-message {
|
|
|
margin: 14px 0 0;
|
|
|
color: var(--student-danger);
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.subsection-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
margin: 0 0 12px;
|
|
|
|
|
|
span {
|
|
|
display: grid;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
place-items: center;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 700;
|
|
|
background: var(--student-accent-soft);
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
|
|
|
h3 {
|
|
|
margin: 0;
|
|
|
font-size: var(--student-fs-h2);
|
|
|
color: var(--student-text);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ===== 面板容器 ===== */
|
|
|
.unit-cost-panel,
|
|
|
.value-pricing-result,
|
|
|
.final-pricing-channel,
|
|
|
.psm-point-section,
|
|
|
.psm-chart-section,
|
|
|
.psm-chart-preview {
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 10px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.unit-cost-panel {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 20px;
|
|
|
margin: 0 0 14px;
|
|
|
padding: 16px 18px;
|
|
|
}
|
|
|
|
|
|
.cost-panel-copy {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
gap: 12px;
|
|
|
|
|
|
p {
|
|
|
margin: 0 0 4px;
|
|
|
font-size: var(--student-fs-h2);
|
|
|
font-weight: 700;
|
|
|
color: var(--student-text);
|
|
|
}
|
|
|
|
|
|
small {
|
|
|
color: var(--student-text-secondary);
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cost-dot {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
margin-top: 7px;
|
|
|
border-radius: 50%;
|
|
|
background: var(--student-accent);
|
|
|
}
|
|
|
|
|
|
.unit-cost-input {
|
|
|
width: 270px;
|
|
|
}
|
|
|
|
|
|
.markup-input {
|
|
|
width: 190px;
|
|
|
}
|
|
|
|
|
|
.competitor-section {
|
|
|
margin-bottom: 14px;
|
|
|
}
|
|
|
|
|
|
.competitor-table {
|
|
|
min-width: 900px;
|
|
|
}
|
|
|
|
|
|
.decision-table {
|
|
|
min-width: 1160px;
|
|
|
}
|
|
|
|
|
|
.competitor-table td,
|
|
|
.decision-table td {
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
|
|
|
.perceived-value-table {
|
|
|
min-width: 620px;
|
|
|
|
|
|
th,
|
|
|
td {
|
|
|
width: 50%;
|
|
|
}
|
|
|
|
|
|
.total-row td {
|
|
|
color: var(--student-text);
|
|
|
font-weight: 700;
|
|
|
background: var(--student-accent-soft);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.value-pricing-section {
|
|
|
display: grid;
|
|
|
gap: 14px;
|
|
|
}
|
|
|
|
|
|
.value-pricing-toolbar {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
gap: 18px;
|
|
|
|
|
|
p {
|
|
|
max-width: 760px;
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
line-height: 1.6;
|
|
|
font-size: var(--student-fs-body);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.value-pricing-result {
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(230px, 0.8fr) minmax(220px, 0.7fr) minmax(290px, 1fr);
|
|
|
align-items: center;
|
|
|
gap: 20px;
|
|
|
padding: 18px 22px;
|
|
|
|
|
|
label {
|
|
|
display: grid;
|
|
|
gap: 8px;
|
|
|
color: var(--student-text);
|
|
|
font-weight: 600;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
line-height: 1.55;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.value-price-output {
|
|
|
display: grid;
|
|
|
gap: 6px;
|
|
|
color: var(--student-text);
|
|
|
font-weight: 600;
|
|
|
|
|
|
strong {
|
|
|
color: var(--student-accent);
|
|
|
font-size: 22px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
em {
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-style: normal;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ===== 工作台底部 ===== */
|
|
|
.workbench-footer {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 18px;
|
|
|
margin-top: 14px;
|
|
|
padding: 14px 18px;
|
|
|
border-top: 1px solid var(--student-panel-border);
|
|
|
|
|
|
p {
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.footer-actions {
|
|
|
display: flex;
|
|
|
flex: none;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
/* ===== Element Plus 输入换肤 ===== */
|
|
|
.price-page :deep(.el-input__wrapper) {
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0 0 0 1px var(--student-panel-border) inset;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.price-page :deep(.el-input__inner) {
|
|
|
color: var(--student-text);
|
|
|
}
|
|
|
|
|
|
.price-page :deep(.el-textarea__inner) {
|
|
|
color: var(--student-text);
|
|
|
background: #ffffff;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 8px;
|
|
|
font-family: inherit;
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
|
|
|
.price-page :deep(.el-textarea__inner:focus) {
|
|
|
outline: 2px solid rgba(31, 41, 55, 0.2);
|
|
|
outline-offset: -2px;
|
|
|
border-color: var(--student-accent);
|
|
|
}
|
|
|
|
|
|
.price-page :deep(.el-input-group__append) {
|
|
|
color: var(--student-accent);
|
|
|
border-left-color: var(--student-panel-border);
|
|
|
background: var(--student-accent-soft);
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
/* ===== Final Pricing ===== */
|
|
|
.final-pricing-section {
|
|
|
display: grid;
|
|
|
gap: 14px;
|
|
|
}
|
|
|
|
|
|
.final-pricing-intro {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.final-pricing-channel {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 20px;
|
|
|
margin: 0;
|
|
|
padding: 14px 18px;
|
|
|
|
|
|
h3,
|
|
|
p {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
h3 {
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-h2);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
margin-top: 4px;
|
|
|
color: var(--student-text-secondary);
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
|
|
|
:deep(.el-select) {
|
|
|
width: min(360px, 100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.final-pricing-table {
|
|
|
min-width: 680px;
|
|
|
}
|
|
|
|
|
|
.final-pricing-table td:nth-child(2),
|
|
|
.final-pricing-table td:nth-child(3) {
|
|
|
color: var(--student-accent);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.final-analysis-section h3 {
|
|
|
margin: 0 0 12px;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-h1);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
/* ===== PSM Section ===== */
|
|
|
.psm-section {
|
|
|
display: grid;
|
|
|
gap: 14px;
|
|
|
}
|
|
|
|
|
|
.psm-toolbar,
|
|
|
.psm-chart-head {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.psm-toolbar p,
|
|
|
.psm-chart-head p,
|
|
|
.psm-guide-row p {
|
|
|
margin: 0;
|
|
|
color: var(--student-text-secondary);
|
|
|
line-height: 1.6;
|
|
|
font-size: var(--student-fs-body);
|
|
|
}
|
|
|
|
|
|
.psm-subtitle {
|
|
|
margin-top: 8px !important;
|
|
|
color: var(--student-text) !important;
|
|
|
font-weight: 700;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
|
|
|
.table-scroll {
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
.psm-table {
|
|
|
min-width: 980px;
|
|
|
|
|
|
td {
|
|
|
min-width: 150px;
|
|
|
color: var(--student-text);
|
|
|
}
|
|
|
|
|
|
td:first-child {
|
|
|
min-width: 120px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.psm-table input,
|
|
|
.psm-point-grid input {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
min-height: 38px;
|
|
|
padding: 8px 10px;
|
|
|
color: var(--student-text);
|
|
|
background: #ffffff;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 8px;
|
|
|
outline: none;
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-body);
|
|
|
|
|
|
&:focus {
|
|
|
border-color: var(--student-accent);
|
|
|
outline: 2px solid rgba(31, 41, 55, 0.2);
|
|
|
outline-offset: -2px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.psm-point-section,
|
|
|
.psm-chart-section {
|
|
|
padding: 18px 20px;
|
|
|
}
|
|
|
|
|
|
.psm-point-section h3,
|
|
|
.psm-chart-section h3 {
|
|
|
margin: 0 0 14px;
|
|
|
color: var(--student-text);
|
|
|
font-size: var(--student-fs-h1);
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.psm-point-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.psm-point-grid label {
|
|
|
display: grid;
|
|
|
gap: 6px;
|
|
|
color: var(--student-text);
|
|
|
font-weight: 600;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
|
|
|
.file-picker {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.psm-chart-preview {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 14px;
|
|
|
padding: 12px;
|
|
|
margin-top: 14px;
|
|
|
|
|
|
p {
|
|
|
margin: 0 0 7px;
|
|
|
color: var(--student-text);
|
|
|
word-break: break-all;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.psm-chart-image {
|
|
|
width: 148px;
|
|
|
height: 92px;
|
|
|
overflow: hidden;
|
|
|
border-radius: 8px;
|
|
|
cursor: zoom-in;
|
|
|
}
|
|
|
|
|
|
.psm-guide-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
padding-top: 14px;
|
|
|
margin-top: 14px;
|
|
|
border-top: 1px solid var(--student-panel-border);
|
|
|
}
|
|
|
|
|
|
/* ===== Responsive ===== */
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
|
.unit-cost-panel,
|
|
|
.workbench-footer,
|
|
|
.value-pricing-toolbar,
|
|
|
.final-pricing-channel,
|
|
|
.psm-toolbar,
|
|
|
.psm-chart-head,
|
|
|
.psm-guide-row,
|
|
|
.task-header {
|
|
|
align-items: stretch;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.value-pricing-result {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
.unit-cost-input {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.footer-actions {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.step-navigation {
|
|
|
flex-direction: column;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.step-nav-left,
|
|
|
.step-nav-right {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.btn-nav {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.toolbar-actions {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.psm-point-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ===== 底部步骤导航按钮 ===== */
|
|
|
.step-navigation {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 10px;
|
|
|
margin-top: 16px;
|
|
|
padding: 12px 16px;
|
|
|
border: 1px solid var(--student-panel-border);
|
|
|
border-radius: 10px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.step-nav-left,
|
|
|
.step-nav-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
flex-wrap: nowrap;
|
|
|
}
|
|
|
|
|
|
.step-nav-right {
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid var(--student-accent);
|
|
|
border-radius: 8px;
|
|
|
color: #ffffff;
|
|
|
background: var(--student-accent);
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 600;
|
|
|
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(37, 99, 235, 0.15);
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: var(--student-accent-deep);
|
|
|
background: var(--student-accent-deep);
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 2px 6px rgba(29, 78, 216, 0.3), 0 4px 12px rgba(29, 78, 216, 0.22);
|
|
|
}
|
|
|
|
|
|
&:active:not(:disabled) {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-ghost {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35);
|
|
|
border-radius: 8px;
|
|
|
color: var(--student-accent);
|
|
|
background: #ffffff;
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: var(--student-accent);
|
|
|
background: var(--student-accent-soft);
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-save {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 6px;
|
|
|
min-height: 36px;
|
|
|
height: 36px;
|
|
|
padding: 0 14px;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 8px;
|
|
|
color: #4b5563;
|
|
|
background: #f9fafb;
|
|
|
font-family: inherit;
|
|
|
font-size: var(--student-fs-button);
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: #d1d5db;
|
|
|
background: #f3f4f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-primary:disabled,
|
|
|
.btn-ghost:disabled,
|
|
|
.btn-save:disabled,
|
|
|
.btn-nav:disabled {
|
|
|
cursor: not-allowed;
|
|
|
opacity: 0.5;
|
|
|
transform: none;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
.step-progress {
|
|
|
color: var(--student-text-secondary);
|
|
|
font-family: var(--student-font-data);
|
|
|
font-size: var(--student-fs-caption);
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.05em;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
/* ============================================================
|
|
|
* 教育蓝极简换肤 · product/price.vue
|
|
|
* ============================================================ */
|
|
|
|
|
|
/* 画布背景 */
|
|
|
#app .studentLayout .app-main:has(.price-page) {
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 步骤导航：分段连接胶囊（教育蓝极简）
|
|
|
* ============================================================ */
|
|
|
#app .studentLayout .app-main:has(.price-page) .step-indicator {
|
|
|
display: flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: stretch !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 0 !important;
|
|
|
width: 100% !important;
|
|
|
margin: 0 0 20px !important;
|
|
|
padding: 0 !important;
|
|
|
border: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
.step-connector {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.step-tab {
|
|
|
|
|
|
|
|
|
display: flex !important;
|
|
|
flex-direction: row !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
min-width: 0 !important;
|
|
|
height: auto !important;
|
|
|
min-height: 40px !important;
|
|
|
margin: 0 !important;
|
|
|
padding: 8px 14px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-right: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1.3 !important;
|
|
|
white-space: nowrap !important;
|
|
|
text-align: center !important;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.16s ease !important;
|
|
|
|
|
|
&:first-child {
|
|
|
border-radius: 8px 0 0 8px !important;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border-radius: 0 8px 8px 0 !important;
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
}
|
|
|
|
|
|
.step-bar {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.step-no,
|
|
|
.step-marker {
|
|
|
position: static !important;
|
|
|
flex: 0 0 auto !important;
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 22px !important;
|
|
|
height: 22px !important;
|
|
|
padding: 0 5px !important;
|
|
|
border-radius: 6px !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-family: var(--student-font-data), ui-monospace, "SF Mono", Consolas, monospace !important;
|
|
|
font-size: var(--student-fs-body-sm) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
transition: all 0.16s ease !important;
|
|
|
|
|
|
&::after {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.step-name {
|
|
|
color: inherit !important;
|
|
|
}
|
|
|
|
|
|
.step-copy {
|
|
|
margin-left: 0 !important;
|
|
|
gap: 4px !important;
|
|
|
}
|
|
|
|
|
|
&:hover:not(.active):not(.complete) {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
color: #2563eb !important;
|
|
|
z-index: 1 !important;
|
|
|
|
|
|
.step-no,
|
|
|
.step-marker {
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.complete:not(.active) {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #374151 !important;
|
|
|
|
|
|
.step-no,
|
|
|
.step-marker {
|
|
|
background: rgba(43, 164, 113, 0.12) !important;
|
|
|
color: #16915f !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2ba471 !important;
|
|
|
background: #f0fdf6 !important;
|
|
|
z-index: 1 !important;
|
|
|
|
|
|
.step-no,
|
|
|
.step-marker {
|
|
|
background: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
border-color: #2563eb !important;
|
|
|
background: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
font-weight: 700 !important;
|
|
|
z-index: 2 !important;
|
|
|
|
|
|
.step-no,
|
|
|
.step-marker {
|
|
|
background: #ffffff !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background: #1d4ed8 !important;
|
|
|
border-color: #1d4ed8 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 共用组件换肤：TrainingMaterialButton 资料按钮
|
|
|
* ============================================================ */
|
|
|
.price-page .workbench-actions .material-button.el-button {
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
transition:
|
|
|
border-color 0.16s ease,
|
|
|
background 0.16s ease,
|
|
|
color 0.16s ease,
|
|
|
box-shadow 0.16s ease !important;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
&.is-plain {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #9ca3af !important;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #9ca3af !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 顶部导出按钮（outline-action）
|
|
|
* ============================================================ */
|
|
|
.price-page .workbench-actions>button.outline-action {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 6px !important;
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
padding: 0 14px !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1 !important;
|
|
|
transition:
|
|
|
border-color 0.16s ease,
|
|
|
background 0.16s ease,
|
|
|
color 0.16s ease,
|
|
|
box-shadow 0.16s ease !important;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 底部操作按钮（el-button）
|
|
|
* ============================================================ */
|
|
|
.price-page .workbench-footer .el-button {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
padding: 0 14px !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 700 !important;
|
|
|
transition:
|
|
|
transform 0.16s ease,
|
|
|
border-color 0.16s ease,
|
|
|
background 0.16s ease,
|
|
|
box-shadow 0.16s ease !important;
|
|
|
}
|
|
|
|
|
|
.price-page .workbench-footer .el-button:hover:not(.is-disabled) {
|
|
|
transform: translateY(-1px) !important;
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
/* 主按钮（el-button--primary） */
|
|
|
.price-page .workbench-footer .el-button--primary {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #ffffff !important;
|
|
|
background: #2563eb !important;
|
|
|
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
.price-page .workbench-footer .el-button--primary:hover:not(.is-disabled) {
|
|
|
border-color: #1d4ed8 !important;
|
|
|
color: #ffffff !important;
|
|
|
background: #1d4ed8 !important;
|
|
|
box-shadow: 0 5px 14px rgba(29, 78, 216, 0.32) !important;
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 步骤内按钮（primary-button, secondary-button）
|
|
|
* ============================================================ */
|
|
|
.price-page .primary-button {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 6px !important;
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
padding: 0 14px !important;
|
|
|
border: 1px solid rgba(37, 99, 235, 0.35) !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
transition:
|
|
|
border-color 0.16s ease,
|
|
|
background 0.16s ease,
|
|
|
color 0.16s ease,
|
|
|
box-shadow 0.16s ease !important;
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.price-page .secondary-button {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 6px !important;
|
|
|
height: 34px !important;
|
|
|
min-height: 34px !important;
|
|
|
padding: 0 14px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #374151 !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 600 !important;
|
|
|
transition:
|
|
|
border-color 0.16s ease,
|
|
|
background 0.16s ease,
|
|
|
color 0.16s ease,
|
|
|
box-shadow 0.16s ease !important;
|
|
|
|
|
|
&:hover:not(:disabled) {
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 窄屏：横向滑动
|
|
|
* ============================================================ */
|
|
|
@media (max-width: 900px) {
|
|
|
#app .studentLayout .app-main:has(.price-page) .step-indicator {
|
|
|
justify-content: flex-start !important;
|
|
|
overflow-x: auto !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.price-page) .step-indicator .step-tab {
|
|
|
flex: 0 0 140px !important;
|
|
|
max-width: none !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|