产品搜索增加品牌筛选

tanghaolin

2022-09-07 f6ed109d2075ec9dd2a15d606be0a43129d080c9

 src/views/Select/FindKeyWordsData.vue

@@ -119,6 +119,7 @@
          </div>
        </div>
      </div>
      <!-- 搜索的产品弹框 -->
      <van-popup v-model:show="showSearchList">
        <div
          style="
@@ -158,6 +159,62 @@
            </template>
          </van-search>
        </div>
        <!-- 过滤菜单 -->
        <van-dropdown-menu active-color="#528abe" style="flex: 1">
            <van-dropdown-item :title="$t('ebookPage.screen.TR')" ref="filterOne">
            <van-cell v-if="false" 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 class="data_list">
          <van-cell
            @click="goPumpDetail(item)"
@@ -167,12 +224,15 @@
            title-style="color:#528abe"
            :title="item.Name"
            :label="item.CatalogName"
            v-for="(item, index) in m_dataList"
            v-for="(item, index) in m_visibleDataList"
            :key="index"
          >
            <template #icon>
              <van-image width="80" height="50" :src="item.ThumbnailImage">
              </van-image>
            </template>
            <template #value>
            <van-tag round type="primary" color="#528abe">{{item.CorpName}}</van-tag>
            </template>
          </van-cell></div
      ></van-popup>
@@ -283,7 +343,11 @@
        },
      ],
      m_dataList: [], //查询出来的列表
      m_visibleDataList:[],//用于展示的数据
      m_allBrandList:[],//品牌
      showSearchList: false,
      m_isUL: false, //是否是UL
      m_isFirePump: false, //是否是消防泵
    };
  },
  mounted() {
@@ -328,6 +392,7 @@
              _this.m_historyKeyWords.push(_this.m_keyWord);
            }
            db.set("historyRecord", _this.m_historyKeyWords);
            let brandList = []
            let seriesList = [];
            result.Data.forEach((item) => {
              let productItem = {
@@ -336,14 +401,21 @@
                SeriesID: item.SeriesID,
                CatalogName: item.CatalogName,
                Name: item.Name,
                ThumbnailImage:
                  _this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
                CorpName:item.CorpName,
                ThumbnailImage: item.ThumbnailImage,
                Description: item.Description,
              };
            let brandObj = {
              name:item.CorpName,
              isSelect:false
            }
              brandList.push(brandObj)
              seriesList.push(productItem);
            });
            _this.m_dataList = seriesList;

            _this.m_visibleDataList = _this.m_dataList
    
            _this.m_allBrandList = _this.uniqueCorpList(brandList)
            //console.log(Object.entries(_this.m_ShowSeriesList), 80);
          }
        })
@@ -351,6 +423,40 @@
          Toast.clear();
          console.log(err);
        });
    },
        //根据电机功率的值筛选泵列表
    getFilterValue() {
      this.$refs.filterOne.toggle();
    },
    //根据品牌筛选泵列表
    getFilterBrand() {
      this.$refs.brandFilter.toggle();
      //console.log(val,777)
      let showSeriesList = [];
      let currentSelectBrand = [];
      this.m_allBrandList.forEach((item) => {
        if (item.isSelect) {
          currentSelectBrand.push(item.name);
        }
      });
      if (currentSelectBrand.length == 0) {
      this.m_visibleDataList= this.m_dataList
        return;
      }
      currentSelectBrand.forEach((brand) => {
        this.m_visibleDataList.forEach((series_item) => {
          if (brand == series_item.CorpName) {
            showSeriesList.push(series_item);
          }
        });
      });
    //    console.log(showSeriesList,568)
      
     this.m_visibleDataList= showSeriesList
    },
        //监听品牌选择
    onChangeBrandSelect(e, index) {
      this.m_allBrandList[index].isSelect = !this.m_allBrandList[index].isSelect;
    },
    //点击历史记录标签搜索
    changeTagSearch(name) {
@@ -372,6 +478,16 @@
        let query = { ID: item.SeriesID };
        this.gotoPage("/EBook/SeriesDetailPump", query, null);
      }
    },
    //公司筛选列表去重
    uniqueCorpList(arr) {
      let map = new Map();
      for (let item of arr) {
        if (!map.has(item.name)) {
          map.set(item.name, item);
        }
      }
      return [...map.values()];
    },
    //返回上一页
    pageBack() {
@@ -420,20 +536,62 @@
    }
    .data_list {
      width: 100%;
      height: calc(100% - 55px);
      height: calc(100% - 103px);
      overflow: auto;
      margin-top: 1px;
      .van-cell__title,
      .van-cell__value {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
      }
      .van-index-anchor {
        text-align: left;
        font-weight: 600;
      }
    .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;
    }
    }
      .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;
    }
  }
  }
  .kwy-style {
    margin-right: 5px;
@@ -518,5 +676,11 @@
    width: 100%;
    height: 100%;
  }
  .van-dropdown-menu__bar{
    box-shadow: 0 2px 2px rgb(100 101 102 / 12%);
  }
  .van-cell__title, .van-cell__value{
    text-align: left;
  }
}
</style>