价格优化

src/views/order/intention/Step2.vue

@@ -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 planCount = computed({
-const modelDesc = ref("");
+  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: "包含轮对、轴箱等" },
+  1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
-  2: { name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
+  2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
-  3: { name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
+  3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
-  4: { name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
+  4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
-  5: { name: "左轴端装置", spec: "端装置", desc: "左端保护" },
+  5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
-  6: { name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
+  6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
-  7: { 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];

src/views/order/intention/create.vue

@@ -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">