|
|
<template>
|
|
|
<div class="price-page student-training-shell">
|
|
|
<main class="training-core">
|
|
|
<section class="task-header">
|
|
|
<p class="task-kicker">PRODUCT PRICING</p>
|
|
|
<h1>{{ taskTitle }}</h1>
|
|
|
</section>
|
|
|
|
|
|
<TrainingTaskBrief
|
|
|
:background="taskBackground"
|
|
|
:goals="taskGoals"
|
|
|
:requirements="taskRequirement"
|
|
|
:show-material="false"
|
|
|
/>
|
|
|
|
|
|
<section class="price-workbench">
|
|
|
<!-- legacy malformed navigation retained only for source compatibility
|
|
|
<nav class="step-switcher" aria-label="新产品定价步骤">
|
|
|
<button type="button" :class="{ active: currentStep === 1 }" @click="switchStep(1)">
|
|
|
<span>01</span>{{ labels.pricingTitle }}
|
|
|
</button>
|
|
|
<i>→</i>
|
|
|
<button type="button" :class="{ active: currentStep === 2 }" @click="switchStep(2)">
|
|
|
<span>02</span>{{ labels.competitorPricingTitle }}
|
|
|
</button>
|
|
|
<i>→</i>
|
|
|
<button type="button" :class="{ active: currentStep === 4 }" @click="switchStep(4)">
|
|
|
<span>04</span>{{ labels.psmTitle }}
|
|
|
</button>
|
|
|
</nav>
|
|
|
-->
|
|
|
<nav class="step-switcher" aria-label="新产品定价步骤">
|
|
|
<button type="button" :class="{ active: currentStep === 1 }" @click="switchStep(1)">
|
|
|
<span>01</span>{{ labels.pricingTitle }}
|
|
|
</button>
|
|
|
<i>→</i>
|
|
|
<button type="button" :class="{ active: currentStep === 2 }" @click="switchStep(2)">
|
|
|
<span>02</span>{{ labels.competitorPricingTitle }}
|
|
|
</button>
|
|
|
</nav>
|
|
|
|
|
|
<header class="workbench-head">
|
|
|
<div>
|
|
|
<p class="section-eyebrow">STEP {{ String(currentStep).padStart(2, "0") }}</p>
|
|
|
<h2>{{ currentStepTitle }}</h2>
|
|
|
</div>
|
|
|
<TrainingMaterialButton
|
|
|
:material-name="taskConfig?.materialName"
|
|
|
:material-url="taskConfig?.materialUrl"
|
|
|
/>
|
|
|
</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>
|
|
|
<el-button type="primary" :loading="saving" @click="saveStepOne">{{ labels.saveStepOne }}</el-button>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="currentStep === 4">
|
|
|
<section class="psm-section">
|
|
|
<div class="psm-toolbar">
|
|
|
<p>{{ labels.psmIntro }}</p>
|
|
|
<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" /></td>
|
|
|
<td><input v-model="row.tooCheap" type="number" min="0" max="100" step="0.01" :placeholder="labels.psmPercentagePlaceholder" /></td>
|
|
|
<td><input v-model="row.expensiveAcceptable" type="number" min="0" max="100" step="0.01" :placeholder="labels.psmPercentagePlaceholder" /></td>
|
|
|
<td><input v-model="row.cheapValue" type="number" min="0" max="100" step="0.01" :placeholder="labels.psmPercentagePlaceholder" /></td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<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="text" :placeholder="labels.psmPricePointPlaceholder" />
|
|
|
</label>
|
|
|
<label>
|
|
|
<span>{{ labels.psmAcceptablePrice }}</span>
|
|
|
<input v-model="psmPricePoints.acceptablePrice" type="text" :placeholder="labels.psmPricePointPlaceholder" />
|
|
|
</label>
|
|
|
<label>
|
|
|
<span>{{ labels.psmAcceptableRange }}</span>
|
|
|
<input v-model="psmPricePoints.acceptableRange" type="text" :placeholder="labels.psmPricePointPlaceholder" />
|
|
|
</label>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="psm-chart-section">
|
|
|
<div class="psm-chart-head">
|
|
|
<div>
|
|
|
<h3>{{ labels.psmChartTitle }}</h3>
|
|
|
<p>{{ labels.psmChartHint }}</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>
|
|
|
|
|
|
<div class="step-footer">
|
|
|
<button type="button" class="primary-button" :disabled="saving" @click="saveStepFour">
|
|
|
{{ saving ? labels.psmSaving : labels.psmSave }}
|
|
|
</button>
|
|
|
</div>
|
|
|
</section>
|
|
|
</template>
|
|
|
|
|
|
<template v-else>
|
|
|
<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-input v-model="pricingDecision.benchmarkCompetitor" :placeholder="labels.benchmarkPlaceholder" @input="clearValidation" /></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>
|
|
|
<el-button type="primary" :loading="saving" @click="saveStepTwo">{{ labels.saveStepTwo }}</el-button>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</template>
|
|
|
</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 TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
|
|
|
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
|
|
|
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
|
|
|
import {
|
|
|
getStudentTrainingAnswer,
|
|
|
saveStudentTrainingAnswer,
|
|
|
uploadStudentTrainingFile,
|
|
|
} 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 累计占比，并补充价格点结论。",
|
|
|
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价格敏感度测试已保存",
|
|
|
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\u8bf7\u4f9d\u636e\u6848\u4f8b\u8d44\u6599\uff0c\u4e3a\u4e0d\u540c\u6e20\u9053\u586b\u5199\u5408\u9002\u7684\u52a0\u6210\u7387\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: "\u5efa\u8bae\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: "\u8bf7\u57fa\u4e8e\u6848\u4f8b\u8d44\u6599\u5b8c\u6210 4 \u4e2a\u7ade\u54c1\u7684\u4ef7\u683c\u53ca\u5dee\u5f02\u5316\u5206\u6790\uff0c\u5e76\u9009\u62e9\u5bf9\u6807\u7ade\u54c1\u5236\u5b9a\u672c\u4ea7\u54c1\u5b9a\u4ef7\u3002",
|
|
|
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\u586b\u5199\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",
|
|
|
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 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_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 canRemovePsmRow = computed(() => psmRows.value.some((row) => !row.isDefault));
|
|
|
const currentStepTitle = computed(() => {
|
|
|
if (currentStep.value === 1) return labels.pricingTitle;
|
|
|
if (currentStep.value === 2) return labels.competitorPricingTitle;
|
|
|
return labels.psmTitle;
|
|
|
});
|
|
|
|
|
|
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?.taskRequirement ||
|
|
|
"\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?.trainingGoal, [
|
|
|
"\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;
|
|
|
});
|
|
|
|
|
|
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: "",
|
|
|
differentiator: "",
|
|
|
pricingReason: "",
|
|
|
};
|
|
|
}
|
|
|
|
|
|
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 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);
|
|
|
}
|
|
|
|
|
|
async function saveStepFour() {
|
|
|
if (saving.value) return;
|
|
|
saving.value = true;
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 4,
|
|
|
step4Answer: JSON.stringify(buildStepFourProgress()),
|
|
|
});
|
|
|
hasSavedAnswer.value = true;
|
|
|
proxy?.$modal?.msgSuccess?.(labels.psmSaveSuccess);
|
|
|
} 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 isBlank(value) {
|
|
|
return !String(value ?? "").trim();
|
|
|
}
|
|
|
|
|
|
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 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();
|
|
|
}
|
|
|
|
|
|
async function saveStepOne() {
|
|
|
if (saving.value) {
|
|
|
return;
|
|
|
}
|
|
|
const message = validateStepOne();
|
|
|
validationMessage.value = message;
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
saving.value = true;
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 2,
|
|
|
step1Answer: JSON.stringify(buildStepOneProgress()),
|
|
|
});
|
|
|
hasSavedAnswer.value = true;
|
|
|
currentStep.value = 2;
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepOneSaveSuccess);
|
|
|
} 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;
|
|
|
}
|
|
|
const message = validateStepTwo();
|
|
|
validationMessage.value = message;
|
|
|
if (message) {
|
|
|
proxy?.$modal?.msgWarning?.(message);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
saving.value = true;
|
|
|
try {
|
|
|
await saveStudentTrainingAnswer(TASK_KEY, {
|
|
|
saveAction: "SAVE",
|
|
|
currentStep: 2,
|
|
|
step2Answer: JSON.stringify(buildStepTwoProgress()),
|
|
|
});
|
|
|
hasSavedAnswer.value = true;
|
|
|
proxy?.$modal?.msgSuccess?.(labels.stepTwoSaveSuccess);
|
|
|
} 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 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 stepFourProgress = parseSavedJson(answer?.step4Answer);
|
|
|
hasSavedAnswer.value = Boolean(stepOneProgress || stepTwoProgress || stepFourProgress);
|
|
|
if (stepOneProgress) {
|
|
|
applyStepOneProgress(stepOneProgress);
|
|
|
}
|
|
|
if (stepTwoProgress) {
|
|
|
applyStepTwoProgress(stepTwoProgress);
|
|
|
currentStep.value = 2;
|
|
|
}
|
|
|
if (stepFourProgress) {
|
|
|
applyStepFourProgress(stepFourProgress);
|
|
|
currentStep.value = 4;
|
|
|
}
|
|
|
} catch (error) {
|
|
|
hasSavedAnswer.value = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
await Promise.all([loadTaskConfig(), loadSavedProgress()]);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.price-page {
|
|
|
--shell-bg: #061923;
|
|
|
--surface: rgba(8, 35, 48, 0.9);
|
|
|
--surface-soft: rgba(13, 51, 67, 0.7);
|
|
|
--line: rgba(91, 197, 231, 0.25);
|
|
|
--line-strong: rgba(87, 211, 247, 0.55);
|
|
|
--ink: #edfaff;
|
|
|
--muted: #a3c4d0;
|
|
|
--accent: #24c6f2;
|
|
|
--accent-deep: #1184bb;
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(0, 1fr) 330px;
|
|
|
gap: 24px;
|
|
|
min-height: 100%;
|
|
|
padding: 26px;
|
|
|
color: var(--ink);
|
|
|
background:
|
|
|
radial-gradient(circle at 10% 0%, rgba(24, 164, 213, 0.18), transparent 31rem),
|
|
|
linear-gradient(135deg, #061923 0%, #082633 46%, #061923 100%);
|
|
|
|
|
|
.training-core {
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
.task-header {
|
|
|
margin-bottom: 18px;
|
|
|
|
|
|
.task-kicker,
|
|
|
h1 {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.task-kicker,
|
|
|
.section-eyebrow {
|
|
|
color: #66d9fb;
|
|
|
font-size: 12px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.16em;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
margin-top: 6px;
|
|
|
font-size: 30px;
|
|
|
line-height: 1.25;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.price-workbench {
|
|
|
overflow: hidden;
|
|
|
margin-top: 18px;
|
|
|
border: 1px solid var(--line-strong);
|
|
|
border-radius: 18px;
|
|
|
background: var(--surface);
|
|
|
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
.step-switcher {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
padding: 18px 26px 0;
|
|
|
|
|
|
button {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
padding: 8px 12px;
|
|
|
color: var(--muted);
|
|
|
cursor: pointer;
|
|
|
border: 1px solid var(--line);
|
|
|
border-radius: 999px;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
button.active {
|
|
|
color: #e9fbff;
|
|
|
border-color: var(--line-strong);
|
|
|
background: rgba(20, 149, 190, 0.25);
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
display: grid;
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
place-items: center;
|
|
|
color: #7de2ff;
|
|
|
font-size: 11px;
|
|
|
font-weight: 700;
|
|
|
background: rgba(117, 226, 255, 0.18);
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
i {
|
|
|
color: #55d3f8;
|
|
|
font-size: 18px;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.workbench-head {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
padding: 24px 26px 18px;
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
|
|
|
h2 {
|
|
|
margin: 4px 0 0;
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.intro-copy {
|
|
|
margin: 20px 26px;
|
|
|
color: var(--muted);
|
|
|
line-height: 1.75;
|
|
|
}
|
|
|
|
|
|
.unit-cost-panel {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 20px;
|
|
|
margin: 0 26px 22px;
|
|
|
padding: 18px 20px;
|
|
|
border: 1px solid var(--line);
|
|
|
border-radius: 14px;
|
|
|
background: var(--surface-soft);
|
|
|
}
|
|
|
|
|
|
.cost-panel-copy {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
gap: 12px;
|
|
|
|
|
|
p {
|
|
|
margin: 0 0 4px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
small {
|
|
|
color: var(--muted);
|
|
|
line-height: 1.55;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cost-dot {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
margin-top: 7px;
|
|
|
border-radius: 50%;
|
|
|
background: var(--accent);
|
|
|
box-shadow: 0 0 12px var(--accent);
|
|
|
}
|
|
|
|
|
|
.unit-cost-input {
|
|
|
width: 270px;
|
|
|
}
|
|
|
|
|
|
.pricing-table-wrap {
|
|
|
overflow-x: auto;
|
|
|
margin: 0 26px;
|
|
|
border: 1px solid var(--line);
|
|
|
border-radius: 14px;
|
|
|
}
|
|
|
|
|
|
.pricing-table {
|
|
|
width: 100%;
|
|
|
min-width: 720px;
|
|
|
border-collapse: collapse;
|
|
|
|
|
|
th,
|
|
|
td {
|
|
|
padding: 16px;
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
th {
|
|
|
color: #ddf8ff;
|
|
|
font-size: 14px;
|
|
|
background: rgba(25, 122, 157, 0.46);
|
|
|
}
|
|
|
|
|
|
tbody tr:last-child td {
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
|
|
|
th:first-child,
|
|
|
td:first-child {
|
|
|
width: 84px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.competitor-section {
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
|
|
|
.subsection-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
margin: 0 26px 12px;
|
|
|
|
|
|
span {
|
|
|
display: grid;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
place-items: center;
|
|
|
color: #7de2ff;
|
|
|
font-size: 12px;
|
|
|
font-weight: 700;
|
|
|
background: rgba(117, 226, 255, 0.18);
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
h3 {
|
|
|
margin: 0;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.competitor-table {
|
|
|
min-width: 900px;
|
|
|
}
|
|
|
|
|
|
.decision-table {
|
|
|
min-width: 1160px;
|
|
|
}
|
|
|
|
|
|
.competitor-table th:first-child,
|
|
|
.competitor-table td:first-child,
|
|
|
.decision-table th:first-child,
|
|
|
.decision-table td:first-child {
|
|
|
width: auto;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.competitor-table td,
|
|
|
.decision-table td {
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
|
|
|
.serial-cell {
|
|
|
color: #7de2ff;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.channel-cell {
|
|
|
color: #f2fcff;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.markup-input {
|
|
|
width: 190px;
|
|
|
}
|
|
|
|
|
|
.range-hint {
|
|
|
display: block;
|
|
|
margin-top: 6px;
|
|
|
color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.sale-price-cell {
|
|
|
color: #7de2ff;
|
|
|
font-size: 17px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.empty-price {
|
|
|
color: #7998a3;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.validation-message {
|
|
|
margin: 14px 26px 0;
|
|
|
color: #ff9e9e;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.workbench-footer {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 18px;
|
|
|
margin-top: 22px;
|
|
|
padding: 18px 26px;
|
|
|
border-top: 1px solid var(--line);
|
|
|
background: rgba(2, 19, 28, 0.42);
|
|
|
|
|
|
p {
|
|
|
margin: 0;
|
|
|
color: var(--muted);
|
|
|
font-size: 13px;
|
|
|
line-height: 1.65;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.footer-actions {
|
|
|
display: flex;
|
|
|
flex: none;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
background: rgba(2, 19, 28, 0.7);
|
|
|
box-shadow: 0 0 0 1px rgba(94, 213, 245, 0.3) inset;
|
|
|
}
|
|
|
|
|
|
:deep(.el-input__inner) {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
:deep(.el-textarea__inner) {
|
|
|
color: #fff;
|
|
|
background: rgba(2, 19, 28, 0.7);
|
|
|
box-shadow: 0 0 0 1px rgba(94, 213, 245, 0.3) inset;
|
|
|
}
|
|
|
|
|
|
:deep(.el-input-group__append) {
|
|
|
color: #91dff5;
|
|
|
border-left-color: rgba(94, 213, 245, 0.3);
|
|
|
background: rgba(16, 98, 130, 0.4);
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
padding: 14px;
|
|
|
|
|
|
.workbench-head,
|
|
|
.unit-cost-panel,
|
|
|
.workbench-footer {
|
|
|
align-items: stretch;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.unit-cost-input {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.footer-actions {
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.psm-section {
|
|
|
display: grid;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
.psm-toolbar,
|
|
|
.psm-chart-head {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.psm-toolbar p,
|
|
|
.psm-chart-head p {
|
|
|
margin: 0;
|
|
|
color: #5e6b7b;
|
|
|
line-height: 1.7;
|
|
|
}
|
|
|
|
|
|
.toolbar-actions {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-end;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.psm-table input,
|
|
|
.psm-point-grid input {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
padding: 8px 10px;
|
|
|
color: #243447;
|
|
|
background: #fff;
|
|
|
border: 1px solid #d8e1eb;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
|
|
|
.psm-table td {
|
|
|
min-width: 170px;
|
|
|
}
|
|
|
|
|
|
.psm-point-section,
|
|
|
.psm-chart-section {
|
|
|
padding: 20px;
|
|
|
background: #fbfdff;
|
|
|
border: 1px solid #dbe5ef;
|
|
|
border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.psm-point-section h3,
|
|
|
.psm-chart-section h3 {
|
|
|
margin: 0 0 14px;
|
|
|
color: #20344b;
|
|
|
font-size: 17px;
|
|
|
}
|
|
|
|
|
|
.psm-point-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.psm-point-grid label {
|
|
|
display: grid;
|
|
|
gap: 8px;
|
|
|
color: #45566a;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.file-picker {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.psm-chart-preview {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 14px;
|
|
|
padding: 12px;
|
|
|
margin-top: 16px;
|
|
|
background: #fff;
|
|
|
border: 1px solid #dbe5ef;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
.psm-chart-image {
|
|
|
width: 148px;
|
|
|
height: 92px;
|
|
|
overflow: hidden;
|
|
|
border-radius: 8px;
|
|
|
cursor: zoom-in;
|
|
|
}
|
|
|
|
|
|
.psm-chart-preview p {
|
|
|
margin: 0 0 7px;
|
|
|
color: #45566a;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
.text-button {
|
|
|
padding: 0;
|
|
|
color: #1687c6;
|
|
|
cursor: pointer;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.psm-toolbar,
|
|
|
.psm-chart-head {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.toolbar-actions {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
.psm-point-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
}
|
|
|
</style>
|