<template>
|
<div class="product-box">
|
<!-- 头部导航栏 -->
|
<van-nav-bar style="background-color: #528abe">
|
<template #left>
|
<div @click="pageBack" style="display: flex; align-items: center">
|
<van-icon name="arrow-left" size="18" />
|
<span>返回</span>
|
</div>
|
</template>
|
<template #title>
|
<label>{{ $t("indexPage.byType.TR") }}</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
<!-- 过滤菜单 -->
|
|
<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"
|
/>
|
</template>
|
</van-cell>
|
<van-cell left title="UL">
|
<template #right-icon>
|
<van-switch v-model="m_isUL" size="24" active-color="#528abe" />
|
</template>
|
</van-cell>
|
<van-cell left :title="$t('indexPage.firePump.TR')">
|
<template #right-icon>
|
<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") }}
|
</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%"></div>
|
<!-- 显示内容 -->
|
<div class="product-main" ref="productMain">
|
<van-cell
|
v-for="item in m_showPumpList"
|
clickable
|
is-link
|
title-style="color:#000000 !important;margin-left:5px !important"
|
:key="item.ID"
|
: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>
|
</van-cell>
|
</div>
|
<div class="backTop" v-show="backtopshow" @click="backTop">
|
<div class="iconfont iconfanhuidingbu3"></div>
|
<div>{{ $t("indexPage.top.TR") }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import languageMixin from "@/mixin/language";
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
activeNames: "0", //默认打开的折叠面板
|
m_Title: "",
|
m_CatalogList: [], //类型列表
|
m_pumpList: [], //泵列表
|
m_showPumpList: [], //用于展示的泵列表
|
m_allBrandList: [], //品牌列表
|
m_ShowBrandPicker: false, //显示品牌选择
|
m_MotorFrequece: false, //电机功率 默认50Hz 如果为true则表示60Hz
|
m_isUL: false, //是否是UL
|
m_isFirePump: false, //是否是消防泵
|
m_selectCatalogName: "全部",
|
m_Screen: "", //筛选
|
m_catalogSelectValue: 0, //类型默认选择全部
|
m_catalogSelectOption: [
|
//类型选择列表
|
{ text: "全部", value: 0 },
|
],
|
//当前类型选择筛选的类
|
m_currentSelectCatalogObj: {
|
Name: "",
|
ID: "",
|
ChildName: "",
|
},
|
backtopshow: false, //回到顶部图标显隐状态
|
};
|
},
|
created() {},
|
mounted() {
|
let _this = this;
|
_this.m_Title = _this.getSoftName();
|
document.title = _this.m_Title;
|
|
_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();
|
},
|
methods: {
|
//获取产品列表
|
getSeriesList() {
|
let _this = this;
|
let Toast = this.$toast;
|
Toast.loading({
|
duration: 0, //为0时 不关闭toast框
|
message: "Loading...",
|
forbidClick: true,
|
});
|
_this
|
.$axios({
|
method: "get",
|
url: _this.$globalConfig.WebApiUrl.MainUrl + "v1/Mobile/PumpSeries/GetListByCategoryID",
|
params: {
|
Lang: _this.getCurrentLanguageType(),
|
CategoryID: _this.CatalogID,
|
},
|
})
|
.then(function (res) {
|
// console.log(res, 158);
|
let result = res.data;
|
if (result.Code != 0) {
|
return;
|
}
|
if (result.Data) {
|
Toast.clear();
|
let pumpList = [];
|
let brandList = []
|
result.Data.forEach((item) => {
|
let productItem = {
|
CatalogID: item.CatalogID,
|
ID: item.ID,
|
CatalogName: item.CatalogName,
|
Name: item.Name,
|
KingName: item.KingName,
|
ChartType: item.ChartType,
|
ThumbnailImage: item.ThumbnailImage,
|
Version: item.Version,
|
RealFileName: item.RealFileName,
|
MotorFrequece: item.MotorFrequece,
|
DriveType: item.DriveType,
|
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.m_pumpList
|
);
|
// console.log(_this.m_showPumpList, 181);
|
}
|
})
|
.catch(function (err) {
|
Toast.clear();
|
console.log(err);
|
});
|
},
|
//根据电机功率的值筛选泵列表
|
getFilterValue() {
|
this.$refs.item1.filterOne();
|
//console.log(val,777)
|
let motorFrequece = this.m_MotorFrequece ? "60" : "50";
|
this.m_showPumpList = this.filterSeriseList(
|
motorFrequece,
|
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) {
|
// //console.log(ID,204)
|
// console.log('我被点击了')
|
// this.$router.push({
|
// path: "/CN/EBook/SeriesDetailPump",
|
// query: { ID: ID },
|
// });
|
// },
|
//筛选系列列表
|
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) => {
|
let groupItem = {};
|
groupItem.groupName = "";
|
groupItem.nodeList = [];
|
pumpList.forEach((seriesItem) => {
|
//判断类型是否是全部
|
if (
|
item.ID == seriesItem.CatalogID &&
|
seriesItem.MotorFrequece == MotorFrequece
|
) {
|
// console.log(seriesItem,304)
|
groupItem.groupName = item.Name;
|
groupItem.nodeList.push(seriesItem);
|
}
|
});
|
// console.log(22222)
|
showSeriesArr.push(groupItem);
|
});
|
// console.log(showSeriesArr,279)
|
} else {
|
let nodeList = [];
|
pumpList.forEach((seriesItem) => {
|
//判断类型是否是全部
|
if (seriesItem.MotorFrequece == MotorFrequece) {
|
// console.log(CatalogID, seriesItem.CatalogID)
|
nodeList.push(seriesItem);
|
}
|
});
|
showSeriesArr = nodeList;
|
}
|
return showSeriesArr;
|
},
|
getCatalogNodeNum() {
|
this.m_catalogSelectOption.forEach((catalog) => {
|
let growNum = 0;
|
if (catalog.value != 0) {
|
catalog.nodeNum = 0;
|
}
|
this.m_showPumpList.forEach((series) => {
|
series.nodeList.forEach((node) => {
|
if (catalog.value == node.CatalogID && catalog.value != 0) {
|
growNum++;
|
catalog.nodeNum = growNum;
|
}
|
});
|
});
|
});
|
},
|
toSeriesDetailPump(ID) {
|
this.$router.push({
|
path: this.buildCurrentLanguageUrl(`/Series/Index/` + ID),
|
});
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
},
|
setBackShow() {
|
if (this.$refs.productMain) {
|
let top = this.$refs.productMain.getBoundingClientRect().top;
|
// console.log(top,545)
|
if (top < -500) {
|
this.backtopshow = true;
|
} else {
|
this.backtopshow = false;
|
}
|
}
|
},
|
backTop() {
|
let timer = setInterval(function () {
|
//获取滚动条的滚动高度
|
var osTop =
|
document.documentElement.scrollTop || document.body.scrollTop;
|
//用于设置速度差，产生缓动的效果
|
var speed = Math.floor(-osTop / 6);
|
document.documentElement.scrollTop = document.body.scrollTop =
|
osTop + speed;
|
// let isTop = true; //用于阻止滚动事件清除定时器
|
// console.log(osTop,566)
|
if (osTop == 0) {
|
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>
|
|
<style lang="scss">
|
.product-box {
|
background: #fafafa;
|
width: 100%;
|
height: 100vh;
|
|
.van-dropdown-item__content {
|
max-height: 34%;
|
}
|
.van-cell__title {
|
text-align: start;
|
}
|
.van-collapse-item__content {
|
padding: 0px 0px;
|
}
|
.product-main {
|
width: 100%;
|
height: calc(100% - 95px);
|
overflow: auto;
|
.van-cell {
|
color: #528abe;
|
}
|
.van-cell__right-icon {
|
color: #528abe;
|
}
|
.van-collapse-item__content {
|
padding: 0px 0px;
|
}
|
.van-card__content {
|
text-align: start;
|
width: calc(100% - 88px);
|
}
|
.van-card__title {
|
font-size: 14px;
|
font-weight: 600;
|
}
|
.van-card {
|
padding: 0px 0px;
|
width: 100%;
|
background-color: #ffffff;
|
}
|
.van-card__desc {
|
color: #aaaaaa;
|
width: 235px;
|
height: 50px;
|
}
|
.van-cell {
|
color: #528abe;
|
}
|
.van-cell__right-icon {
|
color: #006782;
|
}
|
.van-cell {
|
align-items: center;
|
}
|
.van-cell-group__title {
|
padding: 7px 16px 7px !important;
|
text-align: left;
|
background: #aaaaaa;
|
font-weight: 600;
|
color: #000000;
|
}
|
.van-cell__title,
|
.van-cell__value {
|
text-align: left;
|
font-size: 13px;
|
color: #36489e;
|
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;
|
}
|
}
|
}
|
.backTop {
|
position: fixed;
|
width: 50px;
|
height: 50px;
|
right: 10px;
|
bottom: 30px;
|
border-radius: 100%;
|
text-align: center;
|
background-color: #528abe;
|
color: #fff;
|
}
|
.backTop > div:first-of-type {
|
height: 25px;
|
font-size: 28px;
|
text-align: center;
|
}
|
|
.backTop > div:last-of-type {
|
height: 20px;
|
line-height: 18px;
|
font-size: 10px;
|
text-align: center;
|
}
|
</style>
|
