123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="header">
|
||
<h2>创建订单/意向</h2>
|
||
<div class="price-box">
|
||
<span>预计总价：</span>
|
||
<span class="price">300万</span>
|
||
</div>
|
||
</div>
|
||
<el-steps :active="stepForStepsBar" finish-status="success" align-center>
|
||
<el-step title="选择客户信息" description="选择销售客户对象" />
|
||
<el-step title="选择商品规格" description="根据客户需求选择商品" />
|
||
<el-step
|
||
title="录入商务信息"
|
||
description="根据客户要求录入商务信息"
|
||
:status="step3Status"
|
||
/>
|
||
<el-step title="完成创建" description="完成订单/意向" />
|
||
</el-steps>
|
||
<component
|
||
:is="currentStepComponent"
|
||
:form="form"
|
||
:selected-car-type="selectedCarType"
|
||
@next-step="handleNextStep"
|
||
@prev-step="handlePrevStep"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
import Step1 from "./Step1.vue";
|
||
import Step2 from "./Step2.vue";
|
||
import Step3 from "./Step3.vue";
|
||
import Step4 from "./Step4.vue";
|
||
|
||
const step = ref(1);
|
||
const form = ref({
|
||
customerName: "",
|
||
customerAddress: "",
|
||
zip: "",
|
||
linkman: "",
|
||
linkway: "",
|
||
selectedCarType: "其他",
|
||
planCount: "",
|
||
});
|
||
|
||
const selectedCarType = computed(() => form.value.selectedCarType);
|
||
|
||
const currentStepComponent = computed(() => {
|
||
if (step.value === 1) return Step1;
|
||
if (step.value === 2) return Step2;
|
||
if (step.value === 3) return Step3;
|
||
if (step.value === 4) return Step4;
|
||
return Step1;
|
||
});
|
||
|
||
// 步骤条动态高亮/置灰
|
||
const stepForStepsBar = computed(() => {
|
||
// 车型为其他且在step2时，步骤条高亮到2，step4时高亮到4
|
||
if (selectedCarType.value === "其他") {
|
||
if (step.value === 2) return 2;
|
||
if (step.value === 4) return 4;
|
||
}
|
||
return step.value;
|
||
});
|
||
const step3Status = computed(() => {
|
||
// 车型为其他且在step2或step4时，步骤三置灰
|
||
if (
|
||
selectedCarType.value === "其他" &&
|
||
(step.value === 2 || step.value === 4)
|
||
) {
|
||
return "wait";
|
||
}
|
||
return undefined;
|
||
});
|
||
|
||
function handleNextStep() {
|
||
// 车型为其他时直接跳到step4
|
||
if (step.value === 2 && selectedCarType.value === "其他") {
|
||
step.value = 4;
|
||
} else if (step.value < 4) {
|
||
step.value++;
|
||
}
|
||
}
|
||
function handlePrevStep() {
|
||
if (step.value === 2) {
|
||
step.value = 1;
|
||
} else if (step.value === 3) {
|
||
step.value = 2;
|
||
} else if (step.value === 4) {
|
||
if (selectedCarType.value === "其他") {
|
||
step.value = 2;
|
||
} else {
|
||
step.value = 3;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.price-box {
|
||
margin-top: 10px;
|
||
font-size: 20px;
|
||
}
|
||
.price {
|
||
background: #a6a6fa;
|
||
color: #fff;
|
||
padding: 4px 16px;
|
||
border-radius: 4px;
|
||
font-size: 28px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
</style> |