<template>
|
<div class="catalog-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>{{ $t("selectPage.index.TR") }}</span>
|
</div>
|
</template>
|
<template #title>
|
<label>{{ $t("indexPage.byType.TR") }}</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
<!-- 公司标题 -->
|
<div style="width: 100%"></div>
|
<!-- 显示内容 -->
|
<div class="product-main" ref="productMain">
|
<van-tree-select
|
v-model:active-id="m_currentSelectCatalogObj.ID"
|
v-model:main-active-index="activeIndex"
|
height="100%"
|
:items="m_catalogSelectOption"
|
@click-item="clickRightItem"
|
selected-icon="arrow"
|
></van-tree-select>
|
</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 {
|
activeIndex: 0, //默认选中的类型 默认选择第一个
|
activeId: 2,
|
CorpName: "",
|
m_Title: "",
|
m_CatalogList: [], //类型列表
|
m_pumpList: [], //泵列表
|
m_showPumpList: [], //用于展示的泵列表
|
|
m_MotorFrequece: false, //电机功率 默认50Hz 如果为true则表示60Hz
|
m_isUL: false, //是否是UL
|
m_isFirePump: false, //是否是消防泵
|
m_selectCatalogName: "全部",
|
m_Screen: "", //筛选
|
m_catalogSelectValue: 0, //类型默认选择全部
|
m_catalogSelectOption: [],
|
//当前类型选择筛选的类
|
m_currentSelectCatalogObj: {
|
Name: "",
|
ID: "",
|
ChildName: ""
|
},
|
backtopshow: false //回到顶部图标显隐状态
|
};
|
},
|
created() {},
|
mounted() {
|
let _this = this;
|
_this.m_Title = _this.getSoftName();
|
document.title = _this.m_Title;
|
|
this.$nextTick(function() {
|
//移除滚动事件
|
document.removeEventListener("scroll", this.setBackShow, true);
|
//添加滚动事件
|
document.addEventListener("scroll", this.setBackShow, true);
|
});
|
|
_this.getCatalogList();
|
},
|
methods: {
|
//获取类型列表
|
getCatalogList() {
|
let _this = this;
|
_this
|
.$axios({
|
methods: "get",
|
url:
|
_this.$globalConfig.WebApiUrl.MainUrl +
|
"v1/Mobile/PumpCategory/Get4BengXing",
|
params: {
|
lang: _this.getCurrentLanguageType()
|
}
|
})
|
.then(function(res) {
|
// console.log(res,"类型列表");
|
let result = res.data;
|
if (result.Code != 0) {
|
return;
|
}
|
if (result.Data) {
|
let catalogGroups = [];
|
let catalogChilds = [];
|
|
result.Data.forEach(item => {
|
if (item.ParentID == 0) {
|
let cataGup = {
|
value: item.ID,
|
label: item.Name,
|
parentID: item.ParentID
|
};
|
catalogGroups.push(cataGup);
|
} else {
|
let cataChild = {
|
value: item.ID,
|
label: item.Name,
|
parentID: item.ParentID,
|
seriesNumber: item.SeriesNumber
|
};
|
catalogChilds.push(cataChild);
|
}
|
});
|
// console.log(catalogGroups, catalogChilds);
|
|
let currentCatalogOptions = [];
|
|
catalogGroups.forEach(group => {
|
let catalogOption = {
|
text: group.label,
|
children: []
|
};
|
catalogChilds.forEach(child => {
|
// console.log(group,child)
|
if (child.parentID == group.value) {
|
let node = {
|
text: child.label,
|
id: child.value
|
};
|
catalogOption.children.push(node);
|
}
|
});
|
currentCatalogOptions.push(catalogOption);
|
});
|
// console.log(currentCatalogOptions, 362);
|
_this.m_currentSelectCatalogObj.ID = currentCatalogOptions[0]
|
.children[0].value
|
? currentCatalogOptions[0].children[0].value
|
: currentCatalogOptions[0].value;
|
|
currentCatalogOptions[0].isExpland = true;
|
_this.m_catalogSelectOption = currentCatalogOptions;
|
}
|
})
|
.catch(function(err) {
|
console.log(err);
|
});
|
},
|
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;
|
}
|
});
|
});
|
});
|
},
|
clickRightItem(e) {
|
// console.log(e, 182);
|
this.$router.push({
|
path: this.buildCurrentLanguageUrl(`/EBook/SeriesListLX`),
|
query: { CatalogID: e.id }
|
});
|
},
|
//返回上一页
|
pageBack() {
|
this.gotoIndexPage();
|
},
|
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);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.catalog-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% - 46px);
|
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-cell {
|
padding: 0px 16px;
|
}
|
.van-card__desc {
|
color: #aaaaaa;
|
width: 235px;
|
height: 50px;
|
}
|
.van-cell {
|
color: #528abe;
|
}
|
.van-cell__right-icon {
|
color: #006782;
|
}
|
.van-cell {
|
padding: 10px 16px !important;
|
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;
|
font-weight: 600;
|
}
|
}
|
}
|
.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>
|
