demo
/
zhiqi
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

价格优化

This commit is contained in:
JenniferW 2025-06-04 10:56:57 +08:00
parent 2aba91c5f4
commit 885a3e1d16
2 changed files with 188 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/order/intention/Step2.vue
View File

@ -26,11 +26,10 @@
>
<el-option-group label="最近常选">
<el-option label="CR400AF" value="CR400AF" />
<el-option label="CR800AF" value="CR800AF" />
</el-option-group>
<el-option-group label="全部车型">
<el-option label="CR400AF" value="CR400AF" />
<el-option label="CR800AF" value="CR800AF" />
<el-option label="JR800AF" value="JR800AF" />
<el-option label="其他" value="其他" />
</el-option-group>
</el-select>
@ -120,23 +119,88 @@
</template>
<script setup>
import { ref, computed } from "vue";
import { ref, computed, watch } from "vue";
const props = defineProps({
form: Object,
selectedCarType: String,
});
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
// 彻底双向绑定
const selectedCarTypeProxy = computed({
get() {
return props.form?.selectedCarType ?? "其他";
},
set(val) {
if (props.form) props.form.selectedCarType = val;
if (props.form) {
props.form.selectedCarType = val;
emit("update:form", props.form);
}
},
});
const planCount = ref("");
const modelInput = ref("");
const modelDesc = ref("");
const planCount = computed({
get() {
return props.form?.planCount ?? "";
},
set(val) {
if (props.form) {
props.form.planCount = val;
emit("update:form", props.form);
}
},
});
const modelInput = computed({
get() {
return props.form?.modelInput ?? "";
},
set(val) {
if (props.form) {
props.form.modelInput = val;
emit("update:form", props.form);
}
},
});
const modelDesc = computed({
get() {
return props.form?.modelDesc ?? "";
},
set(val) {
if (props.form) {
props.form.modelDesc = val;
emit("update:form", props.form);
}
},
});
const selectedPartInfo = computed({
get() {
return props.form?.selectedPartInfo ?? null;
},
set(val) {
if (props.form) {
props.form.selectedPartInfo = val;
emit("update:form", props.form);
}
},
});
// 监听车型变化，清空表单
watch(selectedCarTypeProxy, (newVal, oldVal) => {
if (newVal !== oldVal) {
// 清空所有相关字段
if (props.form) {
props.form.planCount = "";
props.form.modelInput = "";
props.form.modelDesc = "";
props.form.selectedPartInfo = null;
emit("update:form", props.form);
}
}
});
// 模拟树形结构数据
const treeData = [
@ -162,15 +226,15 @@ const treeProps = { children: "children", label: "label" };
// 模拟部件关键信息
const partInfoMap = {
1: { name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
2: { name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
3: { name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
4: { name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
5: { name: "左轴端装置", spec: "端装置", desc: "左端保护" },
6: { name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
7: { name: "右轴端装置", spec: "端装置", desc: "右端保护" },
1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
};
const selectedPartInfo = ref(null);
function handleTreeSelect(node) {
if (node && node.id && partInfoMap[node.id]) {
selectedPartInfo.value = partInfoMap[node.id];

113
src/views/order/intention/create.vue
View File

@ -2,9 +2,9 @@
<div class="app-container">
<div class="header">
<h2>创建订单/意向</h2>
<div class="price-box">
<div class="price-box" v-if="shouldShowPrice">
<span>预计总价：</span>
<span class="price">300万</span>
<span class="price">{{ currentPrice }}万</span>
</div>
</div>
<el-steps :active="stepForStepsBar" finish-status="success" align-center>
@ -15,12 +15,16 @@
description="根据客户要求录入商务信息"
:status="step3Status"
/>
<el-step :title="selectedCarType === '其他' ? '完成意向单' : '完成订单'" :description="selectedCarType === '其他' ? '完成意向单' : '完成订单'" />
<el-step
:title="selectedCarType === '其他' ? '完成意向单' : '完成订单'"
:description="selectedCarType === '其他' ? '完成意向单' : '完成订单'"
/>
</el-steps>
<component
:is="currentStepComponent"
:form="form"
:selected-car-type="selectedCarType"
@update:form="handleFormUpdate"
@next-step="handleNextStep"
@prev-step="handlePrevStep"
/>
@ -28,7 +32,7 @@
</template>
<script setup>
import { ref, computed } from "vue";
import { ref, computed, watch } from "vue";
import Step1 from "./Step1.vue";
import Step2 from "./Step2.vue";
import Step3 from "./Step3.vue";
@ -43,8 +47,104 @@ const form = ref({
linkway: "",
selectedCarType: "其他",
planCount: "",
modelInput: "",
modelDesc: "",
selectedPartInfo: null,
});
// 监听车型变化，清除价格
watch(
() => form.value.selectedCarType,
() => {
currentPrice.value = null;
}
);
// 当前价格
const currentPrice = ref(null);
// 是否应该显示价格
const shouldShowPrice = computed(() => {
if (step.value !== 2) return false;
if (form.value.selectedCarType === "其他") {
// 其他车型需要填写完所有信息
return (
form.value.modelInput && form.value.modelDesc && form.value.planCount
);
} else {
// 具体车型只需要选择商品参数
return form.value.selectedPartInfo !== null;
}
});
// 生成价格
const generatePrice = () => {
if (!shouldShowPrice.value) return;
if (form.value.selectedCarType === "其他") {
// 其他车型基础价格300-500万
const basePrice = Math.floor(Math.random() * (500 - 300 + 1)) + 300;
// 根据数量调整价格
const count = parseInt(form.value.planCount) || 1;
currentPrice.value = Math.floor(basePrice * count);
} else {
// 具体车型根据选择的部件生成不同价格
if (form.value.selectedPartInfo) {
const partId = parseInt(form.value.selectedPartInfo.id) || 1;
let price;
// 根据部件ID计算价格
switch (partId) {
case 1: // 动力轮对轴箱组装(带联轴节) - 父节点
// 包含动力轮对(300) + 左轴箱组装(250) + 左轴端装置(250) + 右轴箱组装(250) + 右轴端装置(250)
price = 300 + 250 + 250 + 250 + 250;
break;
case 2: // 动力轮对(带轴承+联轴节) - 父节点
// 包含动力轮对(300) + 左轴箱组装(250) + 左轴端装置(250) + 右轴箱组装(250) + 右轴端装置(250)
price = 300 + 250 + 250 + 250 + 250;
break;
case 3: // 动力轮对
price = 300;
break;
case 4: // 左轴箱组装
price = 250;
break;
case 5: // 左轴端装置
price = 250;
break;
case 6: // 右轴箱组装
price = 250;
break;
case 7: // 右轴端装置
price = 250;
break;
default:
price = 300;
}
currentPrice.value = price;
} else {
currentPrice.value = null;
}
}
};
// 监听表单变化，更新价格
watch(
[
() => form.value.modelInput,
() => form.value.modelDesc,
() => form.value.planCount,
() => form.value.selectedPartInfo,
() => form.value.selectedCarType,
],
() => {
generatePrice();
},
{ immediate: true }
);
const selectedCarType = computed(() => form.value.selectedCarType);
const currentStepComponent = computed(() => {
@ -96,6 +196,11 @@ function handlePrevStep() {
}
}
}
// 处理表单更新
function handleFormUpdate(newForm) {
form.value = { ...newForm };
}
</script>
<style scoped lang="scss">