From 31b4821f310c57267f8d08229d6ad8d059e128ee Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期五, 02 九月 2022 15:01:57 +0800
Subject: [PATCH] 调整搜索界面
---
src/views/EBook/SeriesListLX.vue | 277 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 216 insertions(+), 61 deletions(-)
diff --git a/src/views/EBook/SeriesListLX.vue b/src/views/EBook/SeriesListLX.vue
index 812e834..19dd706 100644
--- a/src/views/EBook/SeriesListLX.vue
+++ b/src/views/EBook/SeriesListLX.vue
@@ -15,13 +15,20 @@
<!-- <van-icon name="search" size="18" /> -->
</template>
</van-nav-bar>
- <!-- 涓嬫媺杩囨护鑿滃崟 -->
- <van-dropdown-menu active-color="#528abe">
- <van-dropdown-item :title="$t('ebookPage.screen.TR')" ref="item">
+ <!-- 杩囨护鑿滃崟 -->
+
+ <van-dropdown-menu active-color="#528abe" style="flex: 1">
+ <van-dropdown-item :title="$t('ebookPage.screen.TR')" ref="filterOne">
<van-cell left :title="$t('ebookPage.motorFrequency.TR')">
<template #right-icon>
- <span style="margin-right: 10px">{{ m_MotorFrequece ? "60" : "50" }}Hz</span>
- <van-switch v-model="m_MotorFrequece" size="24" active-color="#528abe" />
+ <span style="margin-right: 10px"
+ >{{ m_MotorFrequece ? "60" : "50" }}Hz</span
+ >
+ <van-switch
+ v-model="m_MotorFrequece"
+ size="24"
+ active-color="#528abe"
+ />
</template>
</van-cell>
<van-cell left title="UL">
@@ -31,27 +38,42 @@
</van-cell>
<van-cell left :title="$t('indexPage.firePump.TR')">
<template #right-icon>
- <van-switch v-model="m_isFirePump" size="24" active-color="#528abe" />
+ <van-switch
+ v-model="m_isFirePump"
+ size="24"
+ active-color="#528abe"
+ />
</template>
</van-cell>
<div style="padding: 5px 16px">
<van-button color="#528abe" block round @click="getFilterValue">
- {{
- $t("header.define.TR")
- }}
+ {{ $t("header.define.TR") }}
+ </van-button>
+ </div>
+ </van-dropdown-item>
+ <!-- 鍝佺墝 -->
+ <van-dropdown-item title="鍝佺墝" ref="brandFilter">
+ <div class="brand-content">
+ <div
+ class="brand-item"
+ @click="onChangeBrandSelect(brand_item, brand_index)"
+ :class="brand_item.isSelect ? 'brand-item-active' : ''"
+ v-for="(brand_item, brand_index) in m_allBrandList"
+ :key="brand_index"
+ >
+ <span>{{ brand_item.name }}</span>
+ </div>
+ </div>
+ <div style="padding: 5px 16px">
+ <van-button color="#528abe" block round @click="getFilterBrand">
+ {{ $t("header.define.TR") }}
</van-button>
</div>
</van-dropdown-item>
</van-dropdown-menu>
- <!-- 鍏徃鏍囬 -->
- <div style="width: 100%">
- <!-- <img
- src="/static/img/Title.png"
- style="max-width: 100%; max-height: 100%; width: auto; height: 65px"
- />-->
- <!-- <img src style="max-width: 100%; max-height: 100%; width: auto; height: 10px" /> -->
- </div>
+ <!-- 鍏徃鏍囬 -->
+ <div style="width: 100%"></div>
<!-- 鏄剧ず鍐呭 -->
<div class="product-main" ref="productMain">
<van-cell
@@ -60,9 +82,17 @@
is-link
title-style="color:#000000 !important;margin-left:5px !important"
:key="item.ID"
- :title="item.Name"
+ :label="item.CatalogName"
@click="toSeriesDetailPump(item.ID)"
>
+ <template #title>
+ <span style="font-weight: 700; font-size: 16px">{{ item.Name }}</span>
+ </template>
+ <template #value>
+ <van-tag round type="primary" color="#528abe">{{
+ item.CorpName
+ }}</van-tag>
+ </template>
<template #icon>
<van-image :src="item.ThumbnailImage" width="80" height="45" />
</template>
@@ -70,7 +100,7 @@
</div>
<div class="backTop" v-show="backtopshow" @click="backTop">
<div class="iconfont iconfanhuidingbu3"></div>
- <div>{{$t('indexPage.top.TR')}}</div>
+ <div>{{ $t("indexPage.top.TR") }}</div>
</div>
</div>
</template>
@@ -86,7 +116,8 @@
m_CatalogList: [], //绫诲瀷鍒楄〃
m_pumpList: [], //娉靛垪琛�
m_showPumpList: [], //鐢ㄤ簬灞曠ず鐨勬车鍒楄〃
-
+ m_allBrandList: [], //鍝佺墝鍒楄〃
+ m_ShowBrandPicker: false, //鏄剧ず鍝佺墝閫夋嫨
m_MotorFrequece: false, //鐢垫満鍔熺巼 榛樿50Hz 濡傛灉涓簍rue鍒欒〃绀�60Hz
m_isUL: false, //鏄惁鏄疷L
m_isFirePump: false, //鏄惁鏄秷闃叉车
@@ -95,17 +126,15 @@
m_catalogSelectValue: 0, //绫诲瀷榛樿閫夋嫨鍏ㄩ儴
m_catalogSelectOption: [
//绫诲瀷閫夋嫨鍒楄〃
- { text: "鍏ㄩ儴", value: 0 }
+ { text: "鍏ㄩ儴", value: 0 },
],
//褰撳墠绫诲瀷閫夋嫨绛涢�夌殑绫�
m_currentSelectCatalogObj: {
Name: "",
ID: "",
- ChildName: ""
+ ChildName: "",
},
- backtopshow: false //鍥炲埌椤堕儴鍥炬爣鏄鹃殣鐘舵��
-
-
+ backtopshow: false, //鍥炲埌椤堕儴鍥炬爣鏄鹃殣鐘舵��
};
},
created() {},
@@ -114,28 +143,26 @@
_this.m_Title = _this.getSoftName();
document.title = _this.m_Title;
- _this.CatalogID = _this.$route.query.CatalogID
- console.log(_this.CatalogID,155)
- this.$nextTick(function() {
+ _this.CatalogID = _this.$route.query.CatalogID;
+ console.log(_this.CatalogID, 155);
+ this.$nextTick(function () {
//绉婚櫎婊氬姩浜嬩欢
document.removeEventListener("scroll", this.setBackShow, true);
//娣诲姞婊氬姩浜嬩欢
document.addEventListener("scroll", this.setBackShow, true);
});
- _this.getSeriesList();
-
+ _this.getSeriesList();
},
methods: {
//鑾峰彇浜у搧鍒楄〃
getSeriesList() {
let _this = this;
-
let Toast = this.$toast;
Toast.loading({
duration: 0, //涓�0鏃� 涓嶅叧闂璽oast妗�
message: "Loading...",
- forbidClick: true
+ forbidClick: true,
});
_this
.$axios({
@@ -145,12 +172,11 @@
"v1/Mobile/PumpSeries/GetListByCategoryID",
params: {
Lang: _this.getCurrentLanguageType(),
- CategoryID: _this.CatalogID
- }
+ CategoryID: _this.CatalogID,
+ },
})
- .then(function(res) {
- // console.log(res);
-
+ .then(function (res) {
+ // console.log(res, 158);
let result = res.data;
if (result.Code != 0) {
return;
@@ -158,7 +184,8 @@
if (result.Data) {
Toast.clear();
let pumpList = [];
- result.Data.forEach(item => {
+ let brandList = []
+ result.Data.forEach((item) => {
let productItem = {
CatalogID: item.CatalogID,
ID: item.ID,
@@ -171,35 +198,77 @@
RealFileName: item.RealFileName,
MotorFrequece: item.MotorFrequece,
DriveType: item.DriveType,
- FirePumpType: item.FirePumpType
+ FirePumpType: item.FirePumpType,
+ CorpName: item.CorpName,
};
+ let brandObj = {
+ name:item.CorpName,
+ isSelect:false
+ }
+ brandList.push(brandObj)
pumpList.push(productItem);
});
_this.m_pumpList = pumpList;
+ _this.m_allBrandList = _this.uniqueCorpList(brandList)
// console.log( _this.m_pumpList,178)
let motorFrequece = _this.m_MotorFrequece ? "60" : "50";
// console.log(motorFrequece,_this.m_catalogSelectValue,"鐢垫満棰戠巼鍜岀被鍨�")
_this.m_showPumpList = _this.filterSeriseList(
motorFrequece,
- _this.CatalogID
+ _this.CatalogID,
+ _this.m_pumpList
);
- // console.log(_this.m_showPumpList,181)
+ // console.log(_this.m_showPumpList, 181);
}
})
- .catch(function(err) {
+ .catch(function (err) {
Toast.clear();
console.log(err);
});
},
- //鑾峰彇鐢垫満鍔熺巼鐨勫��
+ //鏍规嵁鐢垫満鍔熺巼鐨勫�肩瓫閫夋车鍒楄〃
getFilterValue() {
- this.$refs.item.toggle();
+ this.$refs.item1.filterOne();
//console.log(val,777)
let motorFrequece = this.m_MotorFrequece ? "60" : "50";
this.m_showPumpList = this.filterSeriseList(
motorFrequece,
- this.CatalogID
+ this.CatalogID,
+ this.m_showPumpList
);
+ },
+ //鏍规嵁鍝佺墝绛涢�夋车鍒楄〃
+ getFilterBrand() {
+ this.$refs.brandFilter.toggle();
+ //console.log(val,777)
+ let motorFrequece = this.m_MotorFrequece ? "60" : "50";
+ let showSeriesList = [];
+ let currentSelectBrand = [];
+ this.m_allBrandList.forEach((item) => {
+ if (item.isSelect) {
+ currentSelectBrand.push(item.name);
+ }
+ });
+ if (currentSelectBrand.length == 0) {
+ this.m_showPumpList= this.filterSeriseList(
+ motorFrequece,
+ this.CatalogID,
+ this.m_pumpList);
+ return;
+ }
+ currentSelectBrand.forEach((brand) => {
+ this.m_showPumpList.forEach((series_item) => {
+ if (brand == series_item.CorpName) {
+ showSeriesList.push(series_item);
+ }
+ });
+ });
+ // console.log(showSeriesList,568)
+
+ this.m_showPumpList= this.filterSeriseList(
+ motorFrequece,
+ this.CatalogID,
+ showSeriesList);
},
//璺宠浆鍒拌鎯�
// goPumpDetail(ID) {
@@ -211,17 +280,17 @@
// });
// },
//绛涢�夌郴鍒楀垪琛�
- filterSeriseList(MotorFrequece, CatalogID) {
+ filterSeriseList(MotorFrequece, CatalogID,pumpList) {
// console.log(MotorFrequece,CatalogID,"绛涢�夋柟娉曚腑鐨勭數鏈洪鐜囧拰绫诲瀷")
let showSeriesArr = [];
// console.log(CatalogID,348)
if (CatalogID == 0) {
// console.log(this.m_CatalogList,this.m_pumpList,"绫诲瀷鍒楄〃鍜屾湰鍒楄〃")
- this.m_CatalogList.forEach(item => {
+ this.m_CatalogList.forEach((item) => {
let groupItem = {};
groupItem.groupName = "";
groupItem.nodeList = [];
- this.m_pumpList.forEach(seriesItem => {
+ pumpList.forEach((seriesItem) => {
//鍒ゆ柇绫诲瀷鏄惁鏄叏閮�
if (
item.ID == seriesItem.CatalogID &&
@@ -238,7 +307,7 @@
// console.log(showSeriesArr,279)
} else {
let nodeList = [];
- this.m_pumpList.forEach(seriesItem => {
+ pumpList.forEach((seriesItem) => {
//鍒ゆ柇绫诲瀷鏄惁鏄叏閮�
if (seriesItem.MotorFrequece == MotorFrequece) {
// console.log(CatalogID, seriesItem.CatalogID)
@@ -250,13 +319,13 @@
return showSeriesArr;
},
getCatalogNodeNum() {
- this.m_catalogSelectOption.forEach(catalog => {
+ this.m_catalogSelectOption.forEach((catalog) => {
let growNum = 0;
if (catalog.value != 0) {
catalog.nodeNum = 0;
}
- this.m_showPumpList.forEach(series => {
- series.nodeList.forEach(node => {
+ this.m_showPumpList.forEach((series) => {
+ series.nodeList.forEach((node) => {
if (catalog.value == node.CatalogID && catalog.value != 0) {
growNum++;
catalog.nodeNum = growNum;
@@ -267,7 +336,7 @@
},
toSeriesDetailPump(ID) {
this.$router.push({
- path: this.buildCurrentLanguageUrl(`/Series/Index/` + ID)
+ path: this.buildCurrentLanguageUrl(`/Series/Index/` + ID),
});
},
//杩斿洖涓婁竴椤�
@@ -286,7 +355,7 @@
}
},
backTop() {
- let timer = setInterval(function() {
+ let timer = setInterval(function () {
//鑾峰彇婊氬姩鏉＄殑婊氬姩楂樺害
var osTop =
document.documentElement.scrollTop || document.body.scrollTop;
@@ -300,8 +369,43 @@
clearInterval(timer);
}
}, 30);
- }
- }
+ },
+ // 鍏ㄩ��
+ onChangeBrandSelectAll() {
+ this.brandSelectAll = !this.brandSelectAll;
+ let currentBrandSelectArr = [];
+ let currentBrandSelectName = [];
+ this.m_BrandColumns.forEach((item) => {
+ if (this.brandSelectAll) {
+ item.IsSelect = true;
+ } else {
+ item.IsSelect = false;
+ }
+
+ if (item.IsSelect) {
+ currentBrandSelectArr.push(item.ID);
+ currentBrandSelectName.push(item.ShortName);
+ }
+ });
+
+ this.m_BrandShowValue = currentBrandSelectName.join(",");
+ this.m_BrandValue = currentBrandSelectArr;
+ },
+ //鐩戝惉鍝佺墝閫夋嫨
+ onChangeBrandSelect(e, index) {
+ this.m_allBrandList[index].isSelect = !this.m_allBrandList[index].isSelect;
+ },
+ //鍏徃绛涢�夊垪琛ㄥ幓閲�
+ uniqueCorpList(arr) {
+ let map = new Map();
+ for (let item of arr) {
+ if (!map.has(item.name)) {
+ map.set(item.name, item);
+ }
+ }
+ return [...map.values()];
+ },
+ },
};
</script>
@@ -346,9 +450,6 @@
width: 100%;
background-color: #ffffff;
}
- .van-cell {
- padding: 0px 16px;
- }
.van-card__desc {
color: #aaaaaa;
width: 235px;
@@ -361,7 +462,6 @@
color: #006782;
}
.van-cell {
- padding: 10px 16px !important;
align-items: center;
}
.van-cell-group__title {
@@ -376,7 +476,62 @@
text-align: left;
font-size: 13px;
color: #36489e;
- font-weight: 600;
+ height: 47px;
+ }
+ .van-cell__label {
+ width: 180px;
+ }
+ .van-tag {
+ position: absolute;
+ top: 3px;
+ right: 15px;
+ }
+ }
+ .filter-list {
+ display: flex;
+ width: 100%;
+ .van-dropdown-menu__bar {
+ box-shadow: unset;
+ }
+ .brand-filter {
+ flex: 1;
+ background-color: #fff;
+ text-align: center;
+ height: 48px;
+ line-height: 48px;
+ }
+ }
+ .brand-content {
+ height: 23vh;
+ padding: 0px 5px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-content: flex-start;
+ overflow: auto;
+ }
+ .brand-item {
+ display: flex;
+ flex-direction: column;
+ width: 120px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ background-color: #f1f2f3;
+ border-radius: 20px;
+ margin-top: 10px;
+ margin-right: 5px;
+ box-sizing: border-box;
+ span {
+ font-size: 12px;
+ }
+ }
+ .brand-item-active {
+ border: 1px solid #578ebe;
+ background-color: #ecf5ff;
+ span {
+ font-size: 12px;
+ color: #578ebe;
}
}
}
--
Gitblit v1.9.3