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

优化

This commit is contained in:
JenniferW 2025-07-03 17:42:47 +08:00
parent 98509d1d39
commit 8635d974e3
1 changed files with 148 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,42 +29,93 @@
</div>
<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 type="primary" class="param-btn" @click="onQuery"
>查询</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">
<div class="result-card-checkbox-wrap">
<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">
<div class="result-card-name">{{ item.label }}</div>
<div class="result-card-code">{{ item.code }}</div>
</div>
</el-card>
<div
v-if="queryResultList.length"
class="result-card-list-wrap"
style="position: relative"
>
<el-button
v-if="selectedCompareList.length > 0"
type="warning"
class="compare-btn-float"
@click="onCompare"
circle
>
参数对比
</el-button>
<div class="result-card-list">
<el-card
v-for="item in queryResultList"
:key="item.code"
class="result-card"
:class="{ active: item.selected }"
@click="toggleSelect(item)"
>
<div class="result-card-checkbox-wrap" @click.stop>
<el-checkbox
v-model="item.selected"
class="result-card-checkbox"
/>
</div>
<img :src="item.image" class="result-card-img" @click.stop="toggleSelect(item)" />
<div class="result-card-info">
<div class="result-card-name">{{ item.label }}</div>
<div class="result-card-code">{{ item.code }}</div>
</div>
</el-card>
</div>
</div>
<!-- 参数对比弹窗 -->
<el-dialog v-model="compareDialogVisible" title="参数对比" width="60%" top="40px" :close-on-click-modal="false">
<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>
@ -75,19 +126,29 @@
<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 class="btn-row">
<el-button @click="emit('prev-step')">上一步</el-button>
<el-button type="primary" @click="emit('next-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>
@ -118,10 +179,17 @@ 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 = "其他";
}
onQuery(); // 首次自动查询，展示卡片
});
function selectCarType(val) {
selectedCarTypeProxy.value = val;
@ -153,7 +221,9 @@ function onQuery() {
}
const compareDialogVisible = ref(false);
const selectedCompareList = computed(() => queryResultList.value.filter(i => i.selected));
const selectedCompareList = computed(() =>
queryResultList.value.filter((i) => i.selected)
);
const compareTableData = ref([
{
param: "动车组联轴节",
@ -193,6 +263,10 @@ function onCompare() {
}
compareDialogVisible.value = true;
}
function toggleSelect(item) {
item.selected = !item.selected;
}
</script>
<style scoped lang="scss">
@ -579,6 +653,20 @@ function onCompare() {
position: relative;
padding-top: 16px;
box-sizing: border-box;
transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
cursor: pointer;
border: 1px solid #eee;
}
.result-card:hover {
box-shadow: 0 4px 16px rgba(33, 86, 243, 0.12);
transform: translateY(-4px) scale(1.03);
border-color: #2156f3;
}
.result-card.active {
box-shadow: 0 6px 20px rgba(33, 86, 243, 0.18);
border-color: #2156f3;
background: #f5f8ff;
transform: scale(1.04);
}
.result-card-checkbox-wrap {
position: absolute;
@ -596,6 +684,11 @@ function onCompare() {
border-radius: 4px;
border: 1px solid #eee;
margin-bottom: 12px;
transition: transform 0.2s;
}
.result-card:hover .result-card-img,
.result-card.active .result-card-img {
transform: scale(1.08);
}
.result-card-info {
text-align: left;
@ -644,4 +737,32 @@ function onCompare() {
.compare-table-wrap {
margin-top: 16px;
}
.compare-btn-float {
position: absolute;
right: 20px;
top: 170px;
z-index: 10;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
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;
}
.compare-btn-float:hover {
background: #ffe9c6;
color: #999;
box-shadow: 0 4px 16px rgba(255, 153, 0, 0.18);
}
.result-card-list-wrap {
position: relative;
}
.result-card-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
border-color: #2156f3 !important;
background-color: #2156f3 !important;
}
</style>