优化

src/components/CarModelDialog.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="车型信息"
+    width="800px"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+  >
+    <div class="car-model-info">
+      <div class="info-content">
+        <div class="text-info">
+          <h3>{{ carModel.name }}</h3>
+          <p class="description">{{ carModel.description }}</p>
+          <div class="specs">
+            <div class="spec-item" v-for="(spec, key) in carModel.specifications" :key="key">
+              <span class="label">{{ key }}:</span>
+              <span class="value">{{ spec }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="image-info">
+          <img :src="carModel.image" :alt="carModel.name" class="car-image" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  modelValue: Boolean,
+  carModel: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+const closeDialog = () => {
+  dialogVisible.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.car-model-info {
+  padding: 20px;
+  
+  .info-content {
+    display: flex;
+    gap: 30px;
+    
+    .text-info {
+      flex: 1;
+      
+      h3 {
+        margin: 0 0 15px 0;
+        font-size: 20px;
+        color: #333;
+      }
+      
+      .description {
+        color: #666;
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+      
+      .specs {
+        .spec-item {
+          margin-bottom: 10px;
+          
+          .label {
+            font-weight: bold;
+            margin-right: 10px;
+            color: #333;
+          }
+          
+          .value {
+            color: #666;
+          }
+        }
+      }
+    }
+    
+    .image-info {
+      width: 400px;
+      
+      .car-image {
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+  padding-top: 20px;
+}
+</style> 

src/data/stepMockData.js

@@ -20,19 +20,77 @@ export const customerOptions = {
 
 export const carTypeOptions = [
   {
-    label: "最近常选",
+    label: "最常选择",
     options: [
-      { label: "CR400AF", value: "CR400AF" },
+      {
-    ],
+        value: "CR400AF",
+        label: "CR400AF",
+        description: "中国标准动车组，最高运营速度350km/h",
+        specifications: {
+          "最高运营速度": "350km/h",
+          "编组方式": "8辆编组",
+          "定员": "556人",
+          "轴重": "≤17t"
+        },
+        image: "/src/assets/images/cars/CR400AF.jpg"
+      }
+    ]
   },
   {
-    label: "全部车型",
+    label: "高速动车组",
     options: [
-      { label: "CR400AF", value: "CR400AF" },
+      {
-      { label: "JR800AF", value: "JR800AF" },
+        value: "CR400AF",
-      { label: "其他", value: "其他" },
+        label: "CR400AF",
-    ],
+        description: "中国标准动车组，最高运营速度350km/h",
+        specifications: {
+          "最高运营速度": "350km/h",
+          "编组方式": "8辆编组",
+          "定员": "556人",
+          "轴重": "≤17t"
+        },
+        image: "/src/assets/images/cars/CR400AF.jpg"
+      },
+      {
+        value: "CR400BF",
+        label: "CR400BF",
+        description: "中国标准动车组，最高运营速度350km/h",
+        specifications: {
+          "最高运营速度": "350km/h",
+          "编组方式": "8辆编组",
+          "定员": "556人",
+          "轴重": "≤17t"
+        },
+        image: "/src/assets/images/cars/CR400BF.jpg"
+      }
+    ]
   },
+  {
+    label: "城际动车组",
+    options: [
+      {
+        value: "CRH3A",
+        label: "CRH3A",
+        description: "城际动车组，最高运营速度250km/h",
+        specifications: {
+          "最高运营速度": "250km/h",
+          "编组方式": "8辆编组",
+          "定员": "613人",
+          "轴重": "≤16t"
+        },
+        image: "/src/assets/images/cars/CRH3A.jpg"
+      }
+    ]
+  },
+  {
+    label: "其他",
+    options: [
+      {
+        value: "其他",
+        label: "其他"
+      }
+    ]
+  }
 ];
 
 export const treeData = [

src/views/order/intention/Step2.vue

@@ -2,27 +2,20 @@
   <div class="step2-container">
     <div class="main-row">
       <div class="step-indicator">
-        <div
+        <div :class="['circle', currentStep === 1 ? 'active' : '']">1</div>
-          :class="['circle', selectedCarTypeProxy === '其他' ? 'active' : '']"
-        >
-          1
-        </div>
         <div class="line"></div>
-        <div
+        <div :class="['circle', currentStep === 2 ? 'active' : '']">2</div>
-          :class="['circle', selectedCarTypeProxy !== '其他' ? 'active' : '']"
-        >
-          2
-        </div>
       </div>
       <div class="right-content">
-        <div v-if="selectedCarTypeProxy === '其他'">
+        <div v-if="currentStep === 1">
           <div class="step-title">第一步：选择车型</div>
           <el-form label-width="120px" class="model-form">
-            <el-form-item label="可参考车型列表" required>
+            <el-form-item label="车型列表" required>
               <el-select
                 v-model="selectedCarTypeProxy"
                 placeholder="请选择车型"
                 filterable
+                @change="handleCarTypeChange"
               >
                 <el-option-group
                   v-for="group in carTypeOptions"
@@ -38,51 +31,87 @@
                 </el-option-group>
               </el-select>
             </el-form-item>
-            <el-form-item label="计划购买数量">
+            <el-form-item label="计划购买数量" required>
-              <el-input v-model="planCount" placeholder="请输入计划购买数量" />
+              <el-input-number v-model="planCount" :min="1" :max="999" />
             </el-form-item>
-            <el-form-item label="车型输入">
+            <el-form-item label="计划交付时间" required>
-              <el-input v-model="modelInput" placeholder="请输入车型" />
+              <el-date-picker
-            </el-form-item>
+                v-model="deliveryTime"
-            <el-form-item label="车型描述">
+                type="date"
-              <el-input
+                placeholder="选择日期"
-                type="textarea"
+                format="YYYY-MM-DD"
-                :rows="5"
+                value-format="YYYY-MM-DD"
-                v-model="modelDesc"
-                placeholder="请输入车型描述"
               />
             </el-form-item>
+            <el-form-item label="计划交付方式" required>
+              <el-radio-group v-model="deliveryMethod">
+                <el-radio label="self">自行提货</el-radio>
+                <el-radio label="logistics">物流配送</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <!-- 其他车型的额外表单 -->
+            <template v-if="selectedCarTypeProxy === '其他'">
+              <el-form-item label="可参考车型列表">
+                <el-select
+                  v-model="referenceCarType"
+                  placeholder="请选择参考车型"
+                  filterable
+                  @change="handleReferenceCarTypeChange"
+                >
+                  <el-option-group
+                    v-for="group in referenceCarTypeOptions"
+                    :key="group.label"
+                    :label="group.label"
+                  >
+                    <el-option
+                      v-for="option in group.options"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-option-group>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="车型输入">
+                <el-input v-model="modelInput" placeholder="请输入车型" />
+              </el-form-item>
+              <el-form-item label="车型描述">
+                <el-input
+                  type="textarea"
+                  :rows="5"
+                  v-model="modelDesc"
+                  placeholder="请输入车型描述"
+                />
+              </el-form-item>
+            </template>
           </el-form>
         </div>
         <div v-else>
           <div class="step">
             <div class="step-left">
               <div class="step-title">
-                第一步：选择车型
+                第一步：车型{{
-                <el-form label-width="120px" class="model-form">
+                  selectedCarTypeProxy === "其他"
-                  <el-form-item label="可参考车型列表" required>
+                    ? "其他"
-                    <el-select
+                    : selectedCarTypeProxy
-                      v-model="selectedCarTypeProxy"
+                }}
-                      placeholder="请选择车型"
+                <div
-                      filterable
+                  v-if="selectedCarTypeProxy === '其他'"
-                    >
+                  class="reference-model"
-                      <el-option-group
+                >
-                        v-for="group in carTypeOptions"
+                  参考车型：{{ referenceCarType || "未选择" }}
-                        :key="group.label"
+                </div>
-                        :label="group.label"
+              </div>
-                      >
+              <div
-                        <el-option
+                class="step-title"
-                          v-for="option in group.options"
+                :style="{
-                          :key="option.value"
+                  marginTop:
-                          :label="option.label"
+                    selectedCarTypeProxy === '其他' ? '165px' : '192px',
-                          :value="option.value"
+                }"
-                        />
+              >
-                      </el-option-group>
+                第二步：选择轮对商品
-                    </el-select>
-                  </el-form-item>
-                </el-form>
               </div>
-              <div class="step-title">第二步：选择轮对商品</div>
             </div>
             <div class="image-box right-align">
               <img
@@ -109,26 +138,43 @@
               class="part-table"
               style="width: 600px; margin-left: 24px"
             >
-              <el-table-column prop="name" label="部件名称" />
+              <el-table-column prop="name" label="部件名称">
-              <el-table-column prop="spec" label="规格" />
+                <template #default="scope">
-              <el-table-column prop="desc" label="描述" />
+                  <el-input v-model="scope.row.name" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="spec" label="规格">
+                <template #default="scope">
+                  <el-input v-model="scope.row.spec" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="desc" label="描述">
+                <template #default="scope">
+                  <el-input v-model="scope.row.desc" />
+                </template>
+              </el-table-column>
             </el-table>
           </div>
         </div>
         <div class="btn-row">
-          <el-button @click="$emit('prev-step')">上一步</el-button>
+          <el-button @click="handlePrevStep">上一步</el-button>
-          <el-button type="primary" @click="$emit('next-step')"
+          <el-button type="primary" @click="handleNextStep">下一步</el-button>
-            >下一步</el-button
-          >
         </div>
       </div>
     </div>
+
+    <!-- 车型信息弹窗 -->
+    <car-model-dialog
+      v-model="carModelDialogVisible"
+      :car-model="selectedCarModel"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch } from "vue";
-import { carTypeOptions, treeData, partInfoMap } from '@/data/stepMockData';
+import { carTypeOptions, treeData, partInfoMap } from "@/data/stepMockData";
+import CarModelDialog from "@/components/CarModelDialog.vue";
 
 const props = defineProps({
   form: Object,
@@ -137,6 +183,21 @@ const props = defineProps({
 
 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({
   get() {
@@ -217,11 +278,63 @@ const treeProps = { children: "children", label: "label" };
 
 function handleTreeSelect(node) {
   if (node && node.id && partInfoMap[node.id]) {
-    selectedPartInfo.value = partInfoMap[node.id];
+    selectedPartInfo.value = { ...partInfoMap[node.id] };
   } else {
     selectedPartInfo.value = null;
   }
 }
+
+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");
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -268,6 +381,7 @@ function handleTreeSelect(node) {
 .step {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 .step-left {
   flex: 1;
@@ -276,9 +390,32 @@ function handleTreeSelect(node) {
 .step-title {
   font-size: 18px;
   margin: 15px 0;
-}
+  color: #333;
-.step-title:last-child {
+  font-weight: 500;
-  margin-top: 145px;
+
+  &.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;
@@ -289,6 +426,7 @@ function handleTreeSelect(node) {
 .table-title {
   font-weight: bold;
   margin: 16px 0 8px 0;
+  color: #333;
 }
 .tree-table-row {
   display: flex;