调整搜索界面

tanghaolin

2022-09-02 31b4821f310c57267f8d08229d6ad8d059e128ee

 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 如果为true则表示60Hz
      m_isUL: false, //是否是UL
      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时 不关闭toast框
        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;
    }
  }
}