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

优化

This commit is contained in:
JenniferW 2025-07-08 18:39:58 +08:00
parent 9cb2fea0bb
commit 688719c2cd
1 changed files with 81 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@
placeholder="请选择车型"
filterable
class="param-input"
@change="onQuery"
>
<el-option-group
v-for="group in carTypeOptions"
@ -82,7 +83,7 @@
@click="onCompare"
circle
>
参数对比
参数<br />对比
</el-button>
<div class="result-card-list">
<el-card
@ -160,7 +161,11 @@
<script setup>
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)]);
}
</script>
@ -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;