diff --git a/src/views/order/intention/Step2.vue b/src/views/order/intention/Step2.vue index 4eb0d20..0726749 100644 --- a/src/views/order/intention/Step2.vue +++ b/src/views/order/intention/Step2.vue @@ -12,6 +12,7 @@ placeholder="请选择车型" filterable class="param-input" + @change="onQuery" > - 参数对比 + 参数
对比
import { ref, computed, watch, onMounted } from "vue"; -import { carTypeOptions, allParts, compareTableData } from "@/data/stepMockData"; +import { + carTypeOptions, + allParts, + compareTableData, +} from "@/data/stepMockData"; import CarModelDialog from "@/components/CarModelDialog.vue"; import { ElMessage } from "element-plus"; @@ -176,7 +181,7 @@ const selectedCarModel = ref(null); // 彻底双向绑定 const selectedCarTypeProxy = computed({ get() { - return props.form?.selectedCarType ?? "其他"; + return props.form?.selectedCarType ?? ""; }, set(val) { if (props.form) { @@ -186,16 +191,16 @@ const selectedCarTypeProxy = computed({ }, }); -const paramAxle = ref("不限"); -const paramGearbox = ref("不限"); -const paramWheel = ref("不限"); -const paramBrake = ref("不限"); +const paramAxle = ref(""); +const paramGearbox = ref(""); +const paramWheel = ref(""); +const paramBrake = ref(""); onMounted(() => { - if (!props.form.selectedCarType) { - selectedCarTypeProxy.value = "其他"; + // 只有已选车型才自动查询,否则等待用户选择 + if (props.form.selectedCarType) { + onQuery(); } - onQuery(); // 首次自动查询,展示卡片 }); function selectCarType(val) { @@ -204,33 +209,39 @@ function selectCarType(val) { const queryResultList = ref([]); function onQuery() { - queryResultList.value = allParts.filter(item => { - // 车型过滤 - if (selectedCarTypeProxy.value && item.carType !== selectedCarTypeProxy.value) return false; + queryResultList.value = allParts + .filter((item) => { + // 车型过滤 + if ( + selectedCarTypeProxy.value && + item.carType !== selectedCarTypeProxy.value + ) + return false; - // 车轴 - if (item.type === "车轴") { - if (paramAxle.value === "不限") return true; - return item.feature.includes(paramAxle.value); - } - // 齿轮箱 - if (item.type === "齿轮箱") { - if (paramGearbox.value === "不限") return true; - return item.feature.includes(paramGearbox.value); - } - // 车轮 - if (item.type === "车轮") { - if (paramWheel.value === "不限") return true; - return item.feature.includes(paramWheel.value); - } - // 制动盘 - if (item.type === "制动盘") { - if (paramBrake.value === "不限") return true; - return item.feature.includes(paramBrake.value); - } - // 其它类型不显示 - return false; - }).map(item => ({ ...item, selected: false })); + // 车轴 + if (item.type === "车轴") { + if (paramAxle.value === "不限") return true; + return item.feature.includes(paramAxle.value); + } + // 齿轮箱 + if (item.type === "齿轮箱") { + if (paramGearbox.value === "不限") return true; + return item.feature.includes(paramGearbox.value); + } + // 车轮 + if (item.type === "车轮") { + if (paramWheel.value === "不限") return true; + return item.feature.includes(paramWheel.value); + } + // 制动盘 + if (item.type === "制动盘") { + if (paramBrake.value === "不限") return true; + return item.feature.includes(paramBrake.value); + } + // 其它类型不显示 + return false; + }) + .map((item) => ({ ...item, selected: false })); } const compareDialogVisible = ref(false); @@ -280,27 +291,48 @@ function onNextStep() { // 智能模糊建议方法 function queryAxleSuggestions(queryString, cb) { const results = allParts - .filter(item => item.type === "车轴" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString)) - .map(item => ({ value: item.feature })); - cb(results.length ? results : [{ value: queryString }]); + .filter( + (item) => + item.type === "车轴" && + item.carType === selectedCarTypeProxy.value && + item.feature.includes(queryString) + ) + .map((item) => ({ value: item.feature })); + // 增加'不限'选项 + cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]); } function queryGearboxSuggestions(queryString, cb) { const results = allParts - .filter(item => item.type === "齿轮箱" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString)) - .map(item => ({ value: item.feature })); - cb(results.length ? results : [{ value: queryString }]); + .filter( + (item) => + item.type === "齿轮箱" && + item.carType === selectedCarTypeProxy.value && + item.feature.includes(queryString) + ) + .map((item) => ({ value: item.feature })); + cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]); } function queryWheelSuggestions(queryString, cb) { const results = allParts - .filter(item => item.type === "车轮" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString)) - .map(item => ({ value: item.feature })); - cb(results.length ? results : [{ value: queryString }]); + .filter( + (item) => + item.type === "车轮" && + item.carType === selectedCarTypeProxy.value && + item.feature.includes(queryString) + ) + .map((item) => ({ value: item.feature })); + cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]); } function queryBrakeSuggestions(queryString, cb) { const results = allParts - .filter(item => item.type === "制动盘" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString)) - .map(item => ({ value: item.feature })); - cb(results.length ? results : [{ value: queryString }]); + .filter( + (item) => + item.type === "制动盘" && + item.carType === selectedCarTypeProxy.value && + item.feature.includes(queryString) + ) + .map((item) => ({ value: item.feature })); + cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]); } @@ -786,7 +818,7 @@ function queryBrakeSuggestions(queryString, cb) { border-radius: 8px; box-shadow: 0 2px 12px rgba(33, 86, 243, 0.12); transition: box-shadow 0.2s, background 0.2s; - font-size: 12px; + font-size: 14px; } .compare-btn-float:hover { background: #ffe9c6;