<template>
|
<div class="serieszm_box">
|
<!-- 头部导航栏 -->
|
<van-nav-bar>
|
<template #left>
|
<div style="display: flex; align-items: center" @click="pageBack">
|
<van-icon name="arrow-left" size="18" />
|
<span>{{ $t("selectPage.index.TR") }}</span>
|
</div>
|
</template>
|
<template #title>
|
<label style="color: #ffffff">{{ $t("indexPage.zmSearch.TR") }}</label>
|
</template>
|
<template #right>
|
<div @click="changeMotor">
|
<van-icon
|
:class="changeMotorFrequece == 50 ? 'roate_90' : 'roate_270'"
|
name="exchange"
|
/>{{ changeMotorFrequece }}Hz
|
</div>
|
</template>
|
</van-nav-bar>
|
<van-search
|
v-model="m_keyWords"
|
clearable
|
show-action
|
:placeholder="$t('ebookPage.keyWordRule.TR')"
|
input-align="center"
|
@clear="changeClearKeyWord"
|
>
|
<template #action>
|
<div @click="onSearch">
|
<span>{{ $t("ebookPage.search.TR") }}</span>
|
</div>
|
</template>
|
</van-search>
|
<div class="serieszm_main">
|
<van-index-bar
|
:sticky="false"
|
:index-list="Object.keys(m_ShowSeriesList)"
|
>
|
<template
|
v-for="(item, index) in Object.entries(m_ShowSeriesList)"
|
:key="item[0] + index"
|
>
|
<van-index-anchor :index="item[0]">{{ item[0] }}</van-index-anchor>
|
<van-cell
|
@click="goPumpDetail(valItem.ID)"
|
clickable
|
center
|
title-style="color:#528abe"
|
:title="valItem.Name + ' (' + valItem.CorpName + ')'"
|
:label="valItem.CatalogName"
|
v-for="(valItem, index) in item[1]"
|
:key="valItem.Name + index"
|
>
|
<template #icon>
|
<van-image :src="valItem.ThumbnailImage" width="80" height="50" >
|
<template v-slot:error><i class="iconfont iconshuibeng" style="font-size:40px;"></i></template>
|
</van-image>
|
</template>
|
</van-cell>
|
</template>
|
</van-index-bar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import utils from "@/utils/utils";
|
import { Toast } from "vant";
|
import languageMixin from "@/mixin/language";
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
m_keyWords: "", //搜索的关键字
|
m_ZMIndex: [], //字母索引
|
|
m_allSeriesList: [], //系列列表
|
m_ShowSeriesList: [], //用于展示的系列列表
|
changeMotorFrequece: 50, //默认50Hz
|
};
|
},
|
mounted() {
|
Toast.loading({
|
message: "Loading...",
|
duration: 0,
|
});
|
|
document.title = "泵管家";
|
this.initialSeriesList();
|
},
|
methods: {
|
//获取产品列表
|
initialSeriesList() {
|
let _this = this;
|
_this
|
.$axios({
|
methods: "get",
|
url:
|
_this.$globalConfig.WebApiUrl.MainUrl +
|
"v1/Mobile/PumpSeries/GetAllBaseInfoList",
|
params: {
|
Lang: _this.getCurrentLanguageType(),
|
},
|
})
|
.then(function (res) {
|
Toast.clear();
|
let result = res.data;
|
//console.log(result, 105);
|
if (result.Code != 0) {
|
return;
|
}
|
if (result.Data) {
|
_this.m_allSeriesList = result.Data;
|
_this.m_ShowSeriesList = _this.buildZMList(
|
JSON.parse(JSON.stringify(_this.m_allSeriesList))
|
);
|
// console.log(Object.entries(_this.m_ShowSeriesList), 80);
|
}
|
})
|
.catch(function (err) {
|
Toast.clear();
|
console.log(err);
|
});
|
},
|
|
//构建字母列表
|
buildZMList(allSeriesList) {
|
let _this = this;
|
let seriesList = [];
|
let ZMGroup = [];
|
allSeriesList.forEach((element) => {
|
let reg = /^[A-Za-z]*$/;
|
if (
|
element.Name != "" &&
|
element.MotorFrequece == _this.changeMotorFrequece
|
) {
|
if (reg.test(element.Name.substr(0, 1).toUpperCase())) {
|
// console.log(element.Name,111)
|
ZMGroup.push(element.Name.substr(0, 1).toUpperCase());
|
} else {
|
ZMGroup.push("#");
|
}
|
} else {
|
ZMGroup.push("#");
|
}
|
});
|
// console.log(ZMGroup,119)
|
//字母筛选
|
_this.m_ZMIndex = utils.uniqueInArray(ZMGroup);
|
//字母排序
|
_this.m_ZMIndex.sort().join("");
|
|
//将#号放在后边
|
for (let index = 0, len = _this.m_ZMIndex.length; index < len; index++) {
|
const ele = _this.m_ZMIndex[index];
|
if (ele == "#") {
|
_this.m_ZMIndex.splice(index, 1);
|
_this.m_ZMIndex.splice(_this.m_ZMIndex.length, 0, ele);
|
}
|
}
|
|
allSeriesList.forEach((item) => {
|
let seriesItem = {
|
CatalogID: item.CatalogID,
|
ID: item.ID,
|
CatalogName: item.CatalogName,
|
Name: item.Name,
|
//KingName: item.KingName,
|
ThumbnailImage: item.ThumbnailImage,
|
RealFileName: item.RealFileName,
|
MotorFrequece: item.MotorFrequece,
|
CorpName: item.CorpName,
|
};
|
seriesList.push(seriesItem);
|
});
|
|
let showSeriesNode = {};
|
_this.m_ZMIndex.forEach((lableName) => {
|
showSeriesNode[lableName] = [];
|
seriesList.forEach((seriesItem) => {
|
let fistName = seriesItem.Name.substring(0, 1).toUpperCase();
|
let reg = /^[A-Za-z]*$/;
|
if (seriesItem.Name != "") {
|
if (reg.test(seriesItem.Name.substr(0, 1).toUpperCase())) {
|
fistName = seriesItem.Name.substr(0, 1).toUpperCase();
|
} else {
|
fistName = "#";
|
}
|
} else {
|
fistName = "#";
|
}
|
if (fistName == lableName) {
|
if (seriesItem.MotorFrequece == _this.changeMotorFrequece) {
|
showSeriesNode[lableName].push(seriesItem);
|
}
|
}
|
});
|
});
|
|
return showSeriesNode;
|
},
|
//切换电机频率
|
changeMotor() {
|
if (this.changeMotorFrequece == 50) {
|
this.changeMotorFrequece = 60;
|
} else if (this.changeMotorFrequece == 60) {
|
this.changeMotorFrequece = 50;
|
}
|
|
this.m_ShowSeriesList = this.buildZMList(
|
JSON.parse(JSON.stringify(this.m_allSeriesList))
|
);
|
},
|
//跳转到详情
|
goPumpDetail(ID) {
|
this.$router.push({
|
path: this.buildCurrentLanguageUrl(`/Series/Index/` + ID),
|
});
|
// this.$router.push({
|
// path: `/${this.$getCurrentLanguageUrl()}/EBook/SeriesDetailPump`,
|
// query: { ID: ID },
|
// });
|
},
|
//搜索按钮
|
onSearch() {
|
let searchList = this.fuzzyQuery(
|
this.m_allSeriesList,
|
this.m_keyWords,
|
"Name"
|
);
|
this.m_ShowSeriesList = this.buildZMList(searchList);
|
},
|
//清楚搜索关键词按钮触发
|
changeClearKeyWord() {
|
let searchList = this.fuzzyQuery(
|
this.m_allSeriesList,
|
this.m_keyWords,
|
"Name"
|
);
|
this.m_ShowSeriesList = this.buildZMList(searchList);
|
},
|
//模糊查询
|
fuzzyQuery(list, keyWord, Str) {
|
let reg = new RegExp(keyWord, "i");
|
let arr = [];
|
for (var i = 0; i < list.length; i++) {
|
if (reg.test(list[i][Str])) {
|
arr.push(list[i]);
|
}
|
}
|
return arr;
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.serieszm_box {
|
width: 100%;
|
height: 100vh;
|
.serieszm_main {
|
width: 100%;
|
height: calc(100% - 102px);
|
background-color: #fafafa;
|
overflow: auto;
|
margin-top: 1px;
|
.van-cell__title,
|
.van-cell__value {
|
display: flex;
|
align-items: flex-start;
|
flex-direction: column;
|
color: #36489e;
|
}
|
.van-cell__title {
|
padding-left: 10px;
|
}
|
.van-index-anchor {
|
text-align: left;
|
font-weight: 600;
|
}
|
}
|
.roate_270 {
|
transform: rotate(270deg);
|
transition: 0.3s;
|
}
|
.roate_90 {
|
transform: rotate(90deg);
|
transition: 0.3s;
|
}
|
}
|
</style>
|
