From 66b6e51050da888ca81c04feaa503da2fbd67c51 Mon Sep 17 00:00:00 2001
From: JenniferW <1627055433@qq.com>
Date: Thu, 3 Jul 2025 16:38:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/intention/Step2.vue | 512 +----------------
 src/views/order/intention/Step3.vue | 816 ++++++++++++++++++++++++----
 src/views/order/intention/Step4.vue | 147 +++--
 src/views/order/intention/Step5.vue |  72 +++
 4 files changed, 913 insertions(+), 634 deletions(-)
 create mode 100644 src/views/order/intention/Step5.vue

diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue
index c71eb03..0908b71 100644
--- a/src/views/order/intention/Step2.vue
+++ b/src/views/order/intention/Step2.vue
@@ -2,20 +2,15 @@
   <div class="step2-container">
     <div class="main-row">
       <div class="right-content">
-        <div v-if="currentStep === 1">
+        <div>
           <!-- 车型横向单选区 -->
           <div class="search-row">
             <span class="search-label">车型：</span>
             <div class="car-type-text-list">
               <span
-                v-for="option in carTypeOptions.flatMap(
-                  (group) => group.options
-                )"
+                v-for="option in carTypeOptions.flatMap((group) => group.options)"
                 :key="option.value"
-                :class="[
-                  'car-type-text',
-                  selectedCarTypeProxy === option.value ? 'active' : '',
-                ]"
+                :class="['car-type-text', selectedCarTypeProxy === option.value ? 'active' : '']"
                 @click="selectCarType(option.value)"
               >
                 {{ option.label }}
@@ -29,56 +24,30 @@
           <div class="param-form-row">
             <div class="param-form-item">
               <span class="param-label">车轴：</span>
-              <el-input
-                v-model="paramAxle"
-                placeholder="不限"
-                class="param-input"
-              />
+              <el-input v-model="paramAxle" placeholder="不限" class="param-input" />
             </div>
             <div class="param-form-item">
               <span class="param-label">齿轮箱：</span>
-              <el-input
-                v-model="paramGearbox"
-                placeholder="不限"
-                class="param-input"
-              />
+              <el-input v-model="paramGearbox" placeholder="不限" class="param-input" />
             </div>
             <div class="param-form-item">
               <span class="param-label">车轮：</span>
-              <el-input
-                v-model="paramWheel"
-                placeholder="不限"
-                class="param-input"
-              />
+              <el-input v-model="paramWheel" placeholder="不限" class="param-input" />
             </div>
             <div class="param-form-item">
               <span class="param-label">制动盘：</span>
-              <el-input
-                v-model="paramBrake"
-                placeholder="不限"
-                class="param-input"
-              />
+              <el-input v-model="paramBrake" placeholder="不限" class="param-input" />
             </div>
             <div class="param-form-btns">
               <el-button class="param-btn" @click="onQuery">查询</el-button>
-              <el-button class="param-btn" type="primary" @click="onCompare"
-                >参数对比</el-button
-              >
+              <el-button class="param-btn" type="primary" @click="onCompare">参数对比</el-button>
             </div>
           </div>
           <!-- 查询结果卡片区 -->
           <div v-if="queryResultList.length" class="result-card-list">
-            <el-card
-              v-for="item in queryResultList"
-              :key="item.code"
-              class="result-card"
-            >
+            <el-card v-for="item in queryResultList" :key="item.code" class="result-card">
               <div class="result-card-checkbox-wrap">
-                <el-checkbox
-                  v-model="item.selected"
-                  class="result-card-checkbox"
-                  @click.stop
-                />
+                <el-checkbox v-model="item.selected" class="result-card-checkbox" @click.stop />
               </div>
               <img :src="item.image" class="result-card-img" />
               <div class="result-card-info">
@@ -90,11 +59,7 @@
           <!-- 参数对比弹窗 -->
           <el-dialog v-model="compareDialogVisible" title="参数对比" width="60%" top="40px" :close-on-click-modal="false">
             <div class="compare-dialog-cards">
-              <el-card
-                v-for="item in selectedCompareList"
-                :key="item.code"
-                class="compare-card"
-              >
+              <el-card v-for="item in selectedCompareList" :key="item.code" class="compare-card">
                 <img :src="item.image" class="compare-card-img" />
                 <div class="compare-card-info">
                   <div class="compare-card-name">{{ item.label }}</div>
@@ -105,249 +70,35 @@
             <div class="compare-table-wrap">
               <el-table :data="compareTableData" border style="width: 100%">
                 <el-table-column prop="param" label="差异参数" width="180" />
-                <el-table-column
-                  v-for="item in selectedCompareList"
-                  :key="item.code"
-                  :label="item.code"
-                  :prop="item.code"
-                />
+                <el-table-column v-for="item in selectedCompareList" :key="item.code" :label="item.code" :prop="item.code" />
               </el-table>
             </div>
           </el-dialog>
         </div>
-        <div v-else>
-          <div class="step">
-            <div class="step-left">
-              <div class="step-title">
-                车型:{{
-                  selectedCarTypeProxy === "其他"
-                    ? "其他"
-                    : selectedCarTypeProxy
-                }}
-                <div
-                  v-if="selectedCarTypeProxy === '其他'"
-                  class="reference-model"
-                >
-                  参考车型：{{ referenceCarType || "未选择" }}
-                </div>
-              </div>
-              <!-- <div
-                class="step-title"
-                :style="{
-                  marginTop:
-                    selectedCarTypeProxy === '其他' ? '165px' : '192px',
-                }"
-              >
-                第二步：选择轮对商品
-              </div> -->
-            </div>
-            <div class="image-box right-align">
-              <img src="/images/3D.png" alt="3D结构图" class="main-img" />
-            </div>
-          </div>
-          <div class="table-title">商品参数选择</div>
-          <!-- 一级菜单作为表头 -->
-          <div
-            class="header-title"
-            v-for="item in firstLevelItems"
-            :key="item.code"
-          >
-            <div class="header-code">编号：{{ item.code }}</div>
-            <div class="header-name">名称：{{ item.label }}</div>
-          </div>
-          <div class="tree-table-row">
-            <!-- 二级菜单作为tab页 -->
-            <div class="tab-container">
-              <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-                <el-tab-pane
-                  v-for="item in secondLevelItems"
-                  :key="item.code"
-                  :name="item.code"
-                >
-                  <template #label>
-                    <div class="custom-tab-label">
-                      <div class="tab-label-image">
-                        <img
-                          :src="item.image || '/images/part-default.png'"
-                          class="tab-img"
-                        />
-                      </div>
-                      <div class="tab-label-info">
-                        <div class="tab-label-code">{{ item.code }}</div>
-                        <div class="tab-label-name">{{ item.label }}</div>
-                      </div>
-                    </div>
-                  </template>
-                  <!-- 三级及以下树形结构 -->
-                  <div
-                    v-if="
-                      activeSecondLevelItem &&
-                      activeSecondLevelItem.children &&
-                      activeSecondLevelItem.children.length
-                    "
-                    class="tab-content tab-content-flex"
-                  >
-                    <div class="tab-left">
-                      <el-collapse v-model="collapseActiveNames" accordion>
-                        <el-collapse-item
-                          v-for="thirdLevel in activeSecondLevelItem.children"
-                          :key="thirdLevel.code"
-                          :name="thirdLevel.code"
-                          :disabled="
-                            !thirdLevel.children ||
-                            thirdLevel.children.length === 0
-                          "
-                        >
-                          <template #title>
-                            <span
-                              :class="[
-                                'tree-node',
-                                selectedNode &&
-                                selectedNode.code === thirdLevel.code
-                                  ? 'active'
-                                  : '',
-                              ]"
-                              @click.stop="handleNodeClick(thirdLevel)"
-                            >
-                              {{ thirdLevel.label }}
-                              <el-button
-                                v-if="thirdLevel.replaceable"
-                                type="primary"
-                                link
-                                @click.stop="openReplaceDialog(thirdLevel)"
-                                >替换</el-button
-                              >
-                            </span>
-                          </template>
-                          <ul
-                            v-if="
-                              thirdLevel.children &&
-                              thirdLevel.children.length > 0
-                            "
-                          >
-                            <li
-                              v-for="fourthLevel in thirdLevel.children"
-                              :key="fourthLevel.code"
-                              :class="[
-                                'tree-node',
-                                selectedNode &&
-                                selectedNode.code === fourthLevel.code
-                                  ? 'active'
-                                  : '',
-                              ]"
-                              @click="handleNodeClick(fourthLevel)"
-                            >
-                              <span>{{ fourthLevel.label }}</span>
-                              <el-button
-                                v-if="fourthLevel.replaceable"
-                                type="primary"
-                                link
-                                @click.stop="openReplaceDialog(fourthLevel)"
-                                >替换</el-button
-                              >
-                            </li>
-                          </ul>
-                        </el-collapse-item>
-                      </el-collapse>
-                    </div>
-                    <div class="tab-right" v-if="selectedNode">
-                      <img
-                        :src="selectedNode.image"
-                        class="detail-img"
-                        v-if="selectedNode.image"
-                      />
-                      <div class="detail-info">
-                        <div>编号：{{ selectedNode.code }}</div>
-                        <div>名称：{{ selectedNode.label }}</div>
-                        <el-button
-                          v-if="selectedNode.replaceable"
-                          type="primary"
-                          class="right-button"
-                          @click="openReplaceDialog(selectedNode)"
-                          >替换</el-button
-                        >
-                      </div>
-                    </div>
-                    <div class="tab-right" v-else>
-                      <span>请选择左侧商品</span>
-                    </div>
-                  </div>
-                  <div v-else class="tab-content no-data">暂无数据</div>
-                </el-tab-pane>
-              </el-tabs>
-            </div>
-          </div>
-          <el-dialog
-            v-model="replaceDialogVisible"
-            title="特定替换部件"
-            width="500px"
-          >
-            <div class="replace-list">
-              <div
-                v-for="item in replaceList"
-                :key="item.code"
-                class="replace-item"
-                :class="{ selected: replaceSelected === item.code }"
-                @click="replaceSelected = item.code"
-              >
-                <img :src="item.image" class="replace-img" v-if="item.image" />
-                <div>
-                  <div>编号：{{ item.code }}</div>
-                  <div>名称：{{ item.label }}</div>
-                </div>
-              </div>
-            </div>
-            <template #footer>
-              <el-button @click="replaceDialogVisible = false">取消</el-button>
-              <el-button type="primary" @click="handleReplace">替换</el-button>
-            </template>
-          </el-dialog>
-        </div>
         <div class="btn-row">
-          <el-button @click="handlePrevStep">上一步</el-button>
-          <el-button type="primary" @click="handleNextStep">下一步</el-button>
+          <el-button @click="emit('prev-step')">上一步</el-button>
+          <el-button type="primary" @click="emit('next-step')">下一步</el-button>
         </div>
       </div>
     </div>
-
     <!-- 车型信息弹窗 -->
-    <car-model-dialog
-      v-model="carModelDialogVisible"
-      :car-model="selectedCarModel"
-    />
+    <car-model-dialog v-model="carModelDialogVisible" :car-model="selectedCarModel" />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch, onMounted } from "vue";
-import {
-  carTypeOptions,
-  productTreeData,
-  replacePartsMap,
-} from "@/data/stepMockData";
+import { carTypeOptions } from "@/data/stepMockData";
 import CarModelDialog from "@/components/CarModelDialog.vue";
 
 const props = defineProps({
   form: Object,
   selectedCarType: String,
 });
-
 const emit = defineEmits(["update:form", "prev-step", "next-step"]);
 
-const currentStep = ref(1);
 const carModelDialogVisible = ref(false);
 const selectedCarModel = ref(null);
-const referenceCarType = ref("");
-const deliveryTime = ref("");
-const deliveryMethod = ref("");
-
-// 计算属性：参考车型选项（排除"其他"选项）
-const referenceCarTypeOptions = computed(() => {
-  return carTypeOptions.map((group) => ({
-    ...group,
-    options: group.options.filter((option) => option.value !== "其他"),
-  }));
-});
 
 // 彻底双向绑定
 const selectedCarTypeProxy = computed({
@@ -362,230 +113,18 @@ const selectedCarTypeProxy = computed({
   },
 });
 
-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 = ref(productTreeData);
-const selectedNode = ref(null);
-const replaceDialogVisible = ref(false);
-const replaceList = ref([]);
-const replaceSelected = ref(null);
-const activeTab = ref("");
-const collapseActiveNames = ref([]);
-
-// 计算一级菜单项
-const firstLevelItems = computed(() => treeData.value);
-
-// 计算二级菜单项（只取第一个一级菜单的 children 作为 tab）
-const secondLevelItems = computed(() => {
-  return treeData.value.length > 0 ? treeData.value[0].children || [] : [];
-});
-
-// 当前激活的二级菜单项
-const activeSecondLevelItem = computed(() => {
-  return secondLevelItems.value.find((item) => item.code === activeTab.value);
-});
-
-// 处理tab切换
-function handleTabClick(tab) {
-  activeTab.value = tab.props.name;
-  selectedNode.value = null;
-}
-
-// 处理节点点击
-function handleNodeClick(node) {
-  selectedNode.value = node;
-}
-
-// 打开替换对话框
-function openReplaceDialog(node) {
-  replaceList.value = replacePartsMap[node.code] || [];
-  replaceSelected.value = null;
-  replaceDialogVisible.value = true;
-}
-
-// 处理替换
-function handleReplace() {
-  if (!replaceSelected.value) return;
-  const newPart = replaceList.value.find(
-    (item) => item.code === replaceSelected.value
-  );
-  if (newPart) {
-    selectedNode.value.code = newPart.code;
-    selectedNode.value.label = newPart.label;
-    selectedNode.value.image = newPart.image;
-  }
-  replaceDialogVisible.value = false;
-}
-
-const treeProps = {
-  label: "label",
-  children: "children",
-};
-
-function handleCarTypeChange(value) {
-  // 只有非"其他"选项才显示车型信息弹窗
-  if (value !== "其他") {
-    const selectedOption = carTypeOptions
-      .flatMap((group) => group.options)
-      .find((option) => option.value === value);
-
-    if (selectedOption) {
-      selectedCarModel.value = {
-        name: selectedOption.label,
-        description: selectedOption.description || "",
-        specifications: selectedOption.specifications || {},
-        image: selectedOption.image || "",
-      };
-      carModelDialogVisible.value = true;
-    }
-  }
-}
-
-function handleReferenceCarTypeChange(value) {
-  // 显示参考车型信息弹窗
-  const selectedOption = referenceCarTypeOptions.value
-    .flatMap((group) => group.options)
-    .find((option) => option.value === value);
-
-  if (selectedOption) {
-    selectedCarModel.value = {
-      name: selectedOption.label,
-      description: selectedOption.description || "",
-      specifications: selectedOption.specifications || {},
-      image: selectedOption.image || "",
-    };
-    carModelDialogVisible.value = true;
-  }
-}
-
-function handlePrevStep() {
-  if (currentStep.value === 2) {
-    currentStep.value = 1;
-  } else {
-    emit("prev-step");
-  }
-}
-
-function handleNextStep() {
-  if (currentStep.value === 1) {
-    currentStep.value = 2;
-  } else {
-    emit("next-step");
-  }
-}
-
-function selectFirstNode() {
-  const thirdLevels = activeSecondLevelItem.value?.children || [];
-  if (thirdLevels.length > 0) {
-    // 默认选择第一个节点
-    selectedNode.value = thirdLevels[0];
-    // 如果第一个节点有子节点，则展开并选择第一个子节点
-    if (thirdLevels[0].children && thirdLevels[0].children.length > 0) {
-      collapseActiveNames.value = [thirdLevels[0].code];
-      selectedNode.value = thirdLevels[0].children[0];
-    } else {
-      collapseActiveNames.value = [];
-    }
-  } else {
-    selectedNode.value = null;
-    collapseActiveNames.value = [];
-  }
-}
-
-onMounted(() => {
-  if (secondLevelItems.value.length > 0) {
-    activeTab.value = secondLevelItems.value[0].code;
-  }
-  selectFirstNode();
-});
-
-watch(secondLevelItems, (newVal) => {
-  if (newVal.length > 0) {
-    activeTab.value = newVal[0].code;
-  }
-  selectFirstNode();
-});
-
-watch(activeTab, () => {
-  selectFirstNode();
-});
-
-// 新增参数输入区数据
-const paramOther = ref("");
 const paramAxle = ref("");
+const paramGearbox = ref("");
 const paramWheel = ref("");
 const paramBrake = ref("");
-const paramGearbox = ref("");
 
 function selectCarType(val) {
   selectedCarTypeProxy.value = val;
 }
 
-const showQueryResult = ref(false);
 const queryResultList = ref([]);
-
-function setDefaultQueryResult() {
+function onQuery() {
+  // 示例数据，实际应根据参数查询
   queryResultList.value = [
     {
       code: "D310000000030",
@@ -608,19 +147,8 @@ function setDefaultQueryResult() {
   ];
 }
 
-onMounted(() => {
-  setDefaultQueryResult();
-});
-
-function onQuery() {
-  // 示例数据，实际应根据参数查询
-  setDefaultQueryResult();
-  showQueryResult.value = true;
-}
-
 const compareDialogVisible = ref(false);
 const selectedCompareList = computed(() => queryResultList.value.filter(i => i.selected));
-
 const compareTableData = ref([
   {
     param: "动车组联轴节",
@@ -653,9 +181,7 @@ const compareTableData = ref([
     D310000000032: "耐寒",
   },
 ]);
-
 function onCompare() {
-  // 只弹出已选卡片
   if (selectedCompareList.value.length === 0) {
     ElMessage.warning("请先选择要对比的卡片");
     return;
diff --git a/src/views/order/intention/Step3.vue b/src/views/order/intention/Step3.vue
index 9e605bc..f71e901 100644
--- a/src/views/order/intention/Step3.vue
+++ b/src/views/order/intention/Step3.vue
@@ -1,88 +1,303 @@
 <template>
   <div class="step3-container">
-    <div class="content-wrapper">
-      <el-tabs v-model="activeTab" tab-position="left" class="left-tabs">
-        <el-tab-pane label="付款条件" name="pay">
-          <div class="editor-container">
-            <el-input
-              type="textarea"
-              :rows="10"
-              v-model="form.pay"
-              placeholder="请输入付款条件"
-            />
+    <div class="main-row">
+      <div class="right-content">
+        <!-- 商品参数选择页面内容 -->
+        <div class="step">
+          <div class="step-left">
+            <div class="step-title">
+              车型:{{
+                selectedCarTypeProxy === "其他" ? "其他" : selectedCarTypeProxy
+              }}
+              <div
+                v-if="selectedCarTypeProxy === '其他'"
+                class="reference-model"
+              >
+                参考车型：{{ referenceCarType || "未选择" }}
+              </div>
+            </div>
           </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="异议" name="objection">
-          <div class="editor-container">
-            <el-input
-              type="textarea"
-              :rows="10"
-              v-model="form.objection"
-              placeholder="请输入异议信息"
-            />
+          <div class="image-box right-align">
+            <img src="/images/3D.png" alt="3D结构图" class="main-img" />
           </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="不可抗力" name="force">
-          <div class="editor-container">
-            <el-input
-              type="textarea"
-              :rows="10"
-              v-model="form.force"
-              placeholder="请输入不可抗力信息"
-            />
+        </div>
+        <div class="table-title">商品参数选择</div>
+        <!-- 一级菜单作为表头 -->
+        <div
+          class="header-title"
+          v-for="item in firstLevelItems"
+          :key="item.code"
+        >
+          <div class="header-code">编号：{{ item.code }}</div>
+          <div class="header-name">名称：{{ item.label }}</div>
+        </div>
+        <div class="tree-table-row">
+          <!-- 二级菜单作为tab页 -->
+          <div class="tab-container">
+            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+              <el-tab-pane
+                v-for="item in secondLevelItems"
+                :key="item.code"
+                :name="item.code"
+              >
+                <template #label>
+                  <div class="custom-tab-label">
+                    <div class="tab-label-image">
+                      <img
+                        :src="item.image || '/images/part-default.png'"
+                        class="tab-img"
+                      />
+                    </div>
+                    <div class="tab-label-info">
+                      <div class="tab-label-code">{{ item.code }}</div>
+                      <div class="tab-label-name">{{ item.label }}</div>
+                    </div>
+                  </div>
+                </template>
+                <!-- 三级及以下树形结构 -->
+                <div
+                  v-if="
+                    activeSecondLevelItem &&
+                    activeSecondLevelItem.children &&
+                    activeSecondLevelItem.children.length
+                  "
+                  class="tab-content tab-content-flex"
+                >
+                  <div class="tab-left">
+                    <el-collapse v-model="collapseActiveNames" accordion>
+                      <el-collapse-item
+                        v-for="thirdLevel in activeSecondLevelItem.children"
+                        :key="thirdLevel.code"
+                        :name="thirdLevel.code"
+                        :disabled="
+                          !thirdLevel.children ||
+                          thirdLevel.children.length === 0
+                        "
+                      >
+                        <template #title>
+                          <span
+                            :class="[
+                              'tree-node',
+                              selectedNode &&
+                              selectedNode.code === thirdLevel.code
+                                ? 'active'
+                                : '',
+                            ]"
+                            @click.stop="handleNodeClick(thirdLevel)"
+                          >
+                            {{ thirdLevel.label }}
+                            <el-button
+                              v-if="thirdLevel.replaceable"
+                              type="primary"
+                              link
+                              @click.stop="openReplaceDialog(thirdLevel)"
+                              >替换</el-button
+                            >
+                          </span>
+                        </template>
+                        <ul
+                          v-if="
+                            thirdLevel.children &&
+                            thirdLevel.children.length > 0
+                          "
+                        >
+                          <li
+                            v-for="fourthLevel in thirdLevel.children"
+                            :key="fourthLevel.code"
+                            :class="[
+                              'tree-node',
+                              selectedNode &&
+                              selectedNode.code === fourthLevel.code
+                                ? 'active'
+                                : '',
+                            ]"
+                            @click="handleNodeClick(fourthLevel)"
+                          >
+                            <span>{{ fourthLevel.label }}</span>
+                            <el-button
+                              v-if="fourthLevel.replaceable"
+                              type="primary"
+                              link
+                              @click.stop="openReplaceDialog(fourthLevel)"
+                              >替换</el-button
+                            >
+                          </li>
+                        </ul>
+                      </el-collapse-item>
+                    </el-collapse>
+                  </div>
+                  <div class="tab-right" v-if="selectedNode">
+                    <img
+                      :src="selectedNode.image"
+                      class="detail-img"
+                      v-if="selectedNode.image"
+                    />
+                    <div class="detail-info">
+                      <div>编号：{{ selectedNode.code }}</div>
+                      <div>名称：{{ selectedNode.label }}</div>
+                      <el-button
+                        v-if="selectedNode.replaceable"
+                        type="primary"
+                        class="right-button"
+                        @click="openReplaceDialog(selectedNode)"
+                        >替换</el-button
+                      >
+                    </div>
+                  </div>
+                  <div class="tab-right" v-else>
+                    <span>请选择左侧商品</span>
+                  </div>
+                </div>
+                <div v-else class="tab-content no-data">暂无数据</div>
+              </el-tab-pane>
+            </el-tabs>
           </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="争议解决" name="dispute">
-          <div class="editor-container">
-            <el-input
-              type="textarea"
-              :rows="10"
-              v-model="form.dispute"
-              placeholder="请输入争议解决方式"
-            />
+        </div>
+        <el-dialog
+          v-model="replaceDialogVisible"
+          title="特定替换部件"
+          width="500px"
+        >
+          <div class="replace-list">
+            <div
+              v-for="item in replaceList"
+              :key="item.code"
+              class="replace-item"
+              :class="{ selected: replaceSelected === item.code }"
+              @click="replaceSelected = item.code"
+            >
+              <img :src="item.image" class="replace-img" v-if="item.image" />
+              <div>
+                <div>编号：{{ item.code }}</div>
+                <div>名称：{{ item.label }}</div>
+              </div>
+            </div>
           </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="其他" name="other">
-          <div class="editor-container">
-            <el-input
-              type="textarea"
-              :rows="10"
-              v-model="form.other"
-              placeholder="请输入其他信息"
-            />
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-
-    <div class="btn-row">
-      <el-button @click="$emit('prev-step')">上一步</el-button>
-      <el-button type="primary" @click="$emit('next-step')">下一步</el-button>
+          <template #footer>
+            <el-button @click="replaceDialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="handleReplace">替换</el-button>
+          </template>
+        </el-dialog>
+        <div class="btn-row">
+          <el-button @click="emit('prev-step')">上一步</el-button>
+          <el-button type="primary" @click="emit('next-step')"
+            >下一步</el-button
+          >
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import {
-  defaultPaymentTerms,
-  defaultObjectionTerms,
-  defaultForceTerms,
-  defaultDisputeTerms,
+  carTypeOptions,
+  productTreeData,
+  replacePartsMap,
 } from "@/data/stepMockData";
 
-const activeTab = ref("pay");
+const props = defineProps({
+  form: Object,
+  selectedCarType: String,
+});
+const emit = defineEmits(["update:form", "prev-step", "next-step"]);
 
-const form = reactive({
-  pay: defaultPaymentTerms,
-  objection: defaultObjectionTerms,
-  force: defaultForceTerms,
-  dispute: defaultDisputeTerms,
-  other: "",
+const referenceCarType = ref("");
+const selectedCarTypeProxy = computed({
+  get() {
+    return props.form?.selectedCarType ?? "其他";
+  },
+  set(val) {
+    if (props.form) {
+      props.form.selectedCarType = val;
+      emit("update:form", props.form);
+    }
+  },
+});
+
+// 商品参数选择相关逻辑
+const treeData = ref(productTreeData);
+const selectedNode = ref(null);
+const replaceDialogVisible = ref(false);
+const replaceList = ref([]);
+const replaceSelected = ref(null);
+const activeTab = ref("");
+const collapseActiveNames = ref([]);
+
+// 计算一级菜单项
+const firstLevelItems = computed(() => treeData.value);
+// 计算二级菜单项（只取第一个一级菜单的 children 作为 tab）
+const secondLevelItems = computed(() => {
+  return treeData.value.length > 0 ? treeData.value[0].children || [] : [];
+});
+// 当前激活的二级菜单项
+const activeSecondLevelItem = computed(() => {
+  return secondLevelItems.value.find((item) => item.code === activeTab.value);
+});
+// 处理tab切换
+function handleTabClick(tab) {
+  activeTab.value = tab.props.name;
+  selectedNode.value = null;
+}
+// 处理节点点击
+function handleNodeClick(node) {
+  selectedNode.value = node;
+}
+// 打开替换对话框
+function openReplaceDialog(node) {
+  replaceList.value = replacePartsMap[node.code] || [];
+  replaceSelected.value = null;
+  replaceDialogVisible.value = true;
+}
+// 处理替换
+function handleReplace() {
+  if (!replaceSelected.value) return;
+  const newPart = replaceList.value.find(
+    (item) => item.code === replaceSelected.value
+  );
+  if (newPart) {
+    selectedNode.value.code = newPart.code;
+    selectedNode.value.label = newPart.label;
+    selectedNode.value.image = newPart.image;
+  }
+  replaceDialogVisible.value = false;
+}
+const treeProps = {
+  label: "label",
+  children: "children",
+};
+function selectFirstNode() {
+  const thirdLevels = activeSecondLevelItem.value?.children || [];
+  if (thirdLevels.length > 0) {
+    // 默认选择第一个节点
+    selectedNode.value = thirdLevels[0];
+    // 如果第一个节点有子节点，则展开并选择第一个子节点
+    if (thirdLevels[0].children && thirdLevels[0].children.length > 0) {
+      collapseActiveNames.value = [thirdLevels[0].code];
+      selectedNode.value = thirdLevels[0].children[0];
+    } else {
+      collapseActiveNames.value = [];
+    }
+  } else {
+    selectedNode.value = null;
+    collapseActiveNames.value = [];
+  }
+}
+onMounted(() => {
+  if (secondLevelItems.value.length > 0) {
+    activeTab.value = secondLevelItems.value[0].code;
+  }
+  selectFirstNode();
+});
+watch(secondLevelItems, (newVal) => {
+  if (newVal.length > 0) {
+    activeTab.value = newVal[0].code;
+  }
+  selectFirstNode();
+});
+watch(activeTab, () => {
+  selectFirstNode();
 });
 </script>
 
@@ -91,45 +306,448 @@ const form = reactive({
   background: #fff;
   padding: 24px;
   border-radius: 8px;
-  height: calc(100vh - 320px);
+}
+.main-row {
+  display: flex;
+  align-items: flex-start;
+}
+.right-content {
+  flex: 1;
+}
+.step {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.step-left {
+  flex: 1;
+  margin-right: 10px;
+}
+.step-title {
+  font-size: 18px;
+  margin: 15px 0;
+  color: #333;
+  font-weight: 500;
+
+  &.active {
+    color: #2156f3;
+  }
+
+  .reference-model {
+    font-size: 14px;
+    color: #666;
+    margin-top: 8px;
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 12px;
+      height: 12px;
+      background: #2156f3;
+      border-radius: 50%;
+    }
+  }
+}
+.image-box.right-align {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+.table-title {
+  font-weight: bold;
+  margin: 16px 0 8px 0;
+  color: #333;
+}
+.tree-table-row {
   display: flex;
   flex-direction: column;
+  border: 1px solid #bbb;
+  border-radius: 4px;
+  padding: 12px;
+  background: #fff;
 }
-
-.content-wrapper {
+.header-title {
   flex: 1;
-  overflow: hidden;
+  padding: 10px;
+  border-radius: 4px;
 }
-
-.left-tabs {
+.header-code,
+.header-name {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 5px;
+}
+.tab-container {
+  width: 100%;
+}
+.tab-header {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+.tab-header-item {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+.tab-header-image {
+  width: 200px;
+  height: 150px;
+  flex-shrink: 0;
+}
+.tab-header-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.tab-header-code,
+.tab-header-name {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+.part-img {
+  width: 100%;
   height: 100%;
-
-  :deep(.el-tabs__content) {
-    height: 100%;
-    padding: 20px;
-  }
-
-  :deep(.el-tabs__nav-wrap) {
-    padding-right: 20px;
-  }
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
 }
-
-.editor-container {
-  height: 100%;
-  padding: 0 20px;
-
-  :deep(.el-textarea__inner) {
-    height: 100%;
-    min-height: 300px;
-  }
+.model-form {
+  max-width: 900px;
+  margin-top: 16px;
 }
-
 .btn-row {
   display: flex;
   justify-content: flex-end;
   gap: 16px;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #eee;
+  margin-top: 20px;
 }
-</style> 
\ No newline at end of file
+.main-img {
+  width: 580px;
+  height: 260px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #eee;
+}
+.custom-tab-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.tab-label-image {
+  width: 80px;
+  height: 60px;
+  margin-bottom: 8px;
+}
+
+.tab-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+
+.tab-label-info {
+  text-align: center;
+}
+
+.tab-label-code {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.tab-label-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+:deep(.el-tabs__item) {
+  height: auto !important;
+  padding: 0 20px !important;
+}
+
+:deep(.el-tabs__nav) {
+  display: flex;
+  gap: 20px;
+}
+
+:deep(.el-tabs__item.is-active) {
+  .tab-label-code,
+  .tab-label-name {
+    color: var(--el-color-primary);
+  }
+}
+
+.tree-node {
+  transition: background 0.2s;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tree-node.active {
+  color: #2156f3;
+}
+.tree-node:hover {
+  color: #2156f3;
+}
+.tab-content-flex {
+  display: flex;
+  min-height: 300px;
+  height: 400px;
+  max-height: 400px;
+  overflow: hidden;
+}
+.tab-left {
+  width: 260px;
+  border-right: 1px solid #eee;
+  padding-right: 16px;
+  overflow-y: auto;
+  height: 100%;
+}
+.tab-right {
+  flex: 1;
+  padding-left: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+  height: 100%;
+}
+.right-button {
+  margin: 15px 0 0 260px;
+}
+.detail-img {
+  width: 180px;
+  height: 120px;
+  object-fit: contain;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+.replace-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.replace-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.replace-item.selected {
+  border-color: #2156f3;
+}
+.replace-img {
+  width: 80px;
+  height: 60px;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  color: #999;
+  font-size: 18px;
+}
+
+// 新增样式
+:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
+  cursor: default;
+  color: #303133;
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+:deep(.el-collapse-item.is-disabled .el-collapse-item__arrow) {
+  display: none;
+}
+
+:deep(.el-collapse-item__header) {
+  padding: 0;
+  height: auto;
+}
+
+:deep(.el-collapse-item__content) {
+  padding: 0;
+  padding-left: 16px;
+}
+
+:deep(.el-collapse-item__wrap) {
+  border-bottom: none;
+}
+
+.search-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.search-label {
+  font-size: 15px;
+  color: #666;
+  margin-right: 8px;
+}
+.car-type-text-list {
+  display: flex;
+  gap: 32px;
+}
+.car-type-text {
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  padding: 0 4px 4px 4px;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s, border 0.2s;
+}
+.car-type-text.active {
+  color: #2156f3;
+  border-bottom: 2px solid #2156f3;
+  font-weight: 500;
+}
+.search-divider {
+  border-bottom: 1px dashed #e5e5e5;
+  margin: 8px 0 16px 0;
+}
+.param-group-title {
+  font-size: 15px;
+  color: #333;
+  font-weight: 600;
+  margin: 12px 0 12px 0;
+}
+.param-form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 24px 32px;
+  margin-bottom: 0;
+  position: relative;
+}
+.param-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.param-label {
+  font-size: 14px;
+  color: #666;
+  min-width: 60px;
+  text-align: right;
+}
+.param-input {
+  width: 120px;
+}
+.param-form-btns {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+  min-width: 200px;
+}
+.param-btn {
+  min-width: 90px;
+}
+.result-card-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-top: 24px;
+}
+.result-card {
+  width: 220px;
+  position: relative;
+  padding-top: 16px;
+  box-sizing: border-box;
+}
+.result-card-checkbox-wrap {
+  position: absolute;
+  left: 20px;
+  top: 22px;
+  z-index: 2;
+}
+.result-card-checkbox {
+  position: static;
+}
+.result-card-img {
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  margin-bottom: 12px;
+}
+.result-card-info {
+  text-align: left;
+}
+.result-card-name {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.result-card-code {
+  font-size: 13px;
+  color: #888;
+}
+.compare-dialog-cards {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 24px;
+}
+.compare-card {
+  width: 220px;
+  text-align: center;
+  box-sizing: border-box;
+}
+.compare-card-img {
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  margin-bottom: 12px;
+}
+.compare-card-info {
+  text-align: center;
+}
+.compare-card-name {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.compare-card-code {
+  font-size: 13px;
+  color: #888;
+}
+.compare-table-wrap {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/order/intention/Step4.vue b/src/views/order/intention/Step4.vue
index 2c87927..327abe2 100644
--- a/src/views/order/intention/Step4.vue
+++ b/src/views/order/intention/Step4.vue
@@ -1,42 +1,88 @@
 <template>
   <div class="step4-container">
-    <div class="success-box">
-      <div class="success-icon">
-        <svg viewBox="0 0 100 100" width="100" height="100">
-          <circle cx="50" cy="50" r="48" fill="#b6ff3a" />
-          <polyline
-            points="30,55 48,72 72,38"
-            fill="none"
-            stroke="#222"
-            stroke-width="8"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>
-      <div class="success-text">
-        {{
-          selectedCarType === "其他"
-            ? "意向单生成，我们会尽快安排研发"
-            : "订单生成，我们会尽快安排生产"
-        }}
-      </div>
+    <div class="content-wrapper">
+      <el-tabs v-model="activeTab" tab-position="left" class="left-tabs">
+        <el-tab-pane label="付款条件" name="pay">
+          <div class="editor-container">
+            <el-input
+              type="textarea"
+              :rows="10"
+              v-model="form.pay"
+              placeholder="请输入付款条件"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="异议" name="objection">
+          <div class="editor-container">
+            <el-input
+              type="textarea"
+              :rows="10"
+              v-model="form.objection"
+              placeholder="请输入异议信息"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="不可抗力" name="force">
+          <div class="editor-container">
+            <el-input
+              type="textarea"
+              :rows="10"
+              v-model="form.force"
+              placeholder="请输入不可抗力信息"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="争议解决" name="dispute">
+          <div class="editor-container">
+            <el-input
+              type="textarea"
+              :rows="10"
+              v-model="form.dispute"
+              placeholder="请输入争议解决方式"
+            />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="其他" name="other">
+          <div class="editor-container">
+            <el-input
+              type="textarea"
+              :rows="10"
+              v-model="form.other"
+              placeholder="请输入其他信息"
+            />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
     </div>
+
     <div class="btn-row">
       <el-button @click="$emit('prev-step')">上一步</el-button>
-      <el-button type="primary" @click="$emit('view-list')">查看列表</el-button>
+      <el-button type="primary" @click="$emit('next-step')">下一步</el-button>
     </div>
   </div>
 </template>
 
 <script setup>
-const emit = defineEmits(["view-list"]);
+import { reactive, ref } from "vue";
+import {
+  defaultPaymentTerms,
+  defaultObjectionTerms,
+  defaultForceTerms,
+  defaultDisputeTerms,
+} from "@/data/stepMockData";
 
-const props = defineProps({
-  selectedCarType: {
-    type: String,
-    required: true,
-  },
+const activeTab = ref("pay");
+
+const form = reactive({
+  pay: defaultPaymentTerms,
+  objection: defaultObjectionTerms,
+  force: defaultForceTerms,
+  dispute: defaultDisputeTerms,
+  other: "",
 });
 </script>
 
@@ -45,28 +91,45 @@ const props = defineProps({
   background: #fff;
   padding: 24px;
   border-radius: 8px;
-}
-.success-box {
+  height: calc(100vh - 320px);
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin: 48px 0 24px 0;
 }
-.success-icon {
-  margin-bottom: 24px;
+
+.content-wrapper {
+  flex: 1;
+  overflow: hidden;
 }
-.success-text {
-  padding: 24px 0;
-  width: 100%;
-  text-align: center;
-  font-size: 22px;
-  color: #333;
-  border-radius: 6px;
+
+.left-tabs {
+  height: 100%;
+
+  :deep(.el-tabs__content) {
+    height: 100%;
+    padding: 20px;
+  }
+
+  :deep(.el-tabs__nav-wrap) {
+    padding-right: 20px;
+  }
 }
+
+.editor-container {
+  height: 100%;
+  padding: 0 20px;
+
+  :deep(.el-textarea__inner) {
+    height: 100%;
+    min-height: 300px;
+  }
+}
+
 .btn-row {
   display: flex;
   justify-content: flex-end;
   gap: 16px;
-  margin-top: 20px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #eee;
 }
 </style> 
\ No newline at end of file
diff --git a/src/views/order/intention/Step5.vue b/src/views/order/intention/Step5.vue
new file mode 100644
index 0000000..e260b15
--- /dev/null
+++ b/src/views/order/intention/Step5.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="step5-container">
+    <div class="success-box">
+      <div class="success-icon">
+        <svg viewBox="0 0 100 100" width="100" height="100">
+          <circle cx="50" cy="50" r="48" fill="#b6ff3a" />
+          <polyline
+            points="30,55 48,72 72,38"
+            fill="none"
+            stroke="#222"
+            stroke-width="8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <div class="success-text">
+        {{
+          selectedCarType === "其他"
+            ? "意向单生成，我们会尽快安排研发"
+            : "订单生成，我们会尽快安排生产"
+        }}
+      </div>
+    </div>
+    <div class="btn-row">
+      <el-button @click="$emit('prev-step')">上一步</el-button>
+      <el-button type="primary" @click="$emit('view-list')">查看列表</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["view-list"]);
+
+const props = defineProps({
+  selectedCarType: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.step5-container {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+}
+.success-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 48px 0 24px 0;
+}
+.success-icon {
+  margin-bottom: 24px;
+}
+.success-text {
+  padding: 24px 0;
+  width: 100%;
+  text-align: center;
+  font-size: 22px;
+  color: #333;
+  border-radius: 6px;
+}
+.btn-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 20px;
+}
+</style> 
\ No newline at end of file