产品搜索增加品牌筛选

tanghaolin

2022-09-07 f6ed109d2075ec9dd2a15d606be0a43129d080c9

 src/views/Select/FindKeyWordsData.vue

@@ -1,114 +1,387 @@
<template>
  <div class="findData_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('ebookPage.search.TR')}}</label>
      </template>
      <template #right>
        <div></div>
      </template>
    </van-nav-bar>
    <div class="findData_main">
      <van-search v-model="m_keyWord" show-action :placeholder="$t('ebookPage.keyWordRule.TR')" @search="onSearch">
        <template #action>
          <div @click="onSearch">
            <span style="color:#36489e">{{$t('ebookPage.search.TR')}}</span>
          </div>
        </template>
      </van-search>
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          justify-content: center;
        "
      >
        <div
          @click="pageBack"
          style="
            display: flex;
            align-items: center;
            width: 10%;
            justify-content: center;
          "
        >
          <van-icon name="arrow-left" size="18" />
        </div>
        <van-search
          v-model="m_keyWord"
          shape="round"
          background="#fff"
          show-action
          style="width: 90%"
          :placeholder="$t('ebookPage.keyWordRule.TR')"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">
              <span style="color: #36489e">{{
                $t("ebookPage.search.TR")
              }}</span>
            </div>
          </template>
        </van-search>
      </div>
      <!-- 历史记录列表 -->
      <div class="history_record" v-if="m_historyKeyWords.length>0">
      <div class="history_record" v-if="m_historyKeyWords.length > 0">
        <div class="recode_btn">
          <span>搜索历史</span>
          <van-icon name="delete-o" @click="deletedHistoryTag" />
        </div>
        <div class="tag_list">
          <van-tag
            v-for="(tagItem,index) in m_historyKeyWords"
            v-for="(tagItem, index) in m_historyKeyWords"
            @click="changeTagSearch(tagItem)"
            :key="index"
            round
            type="primary"
            style="margin-right:5px;"
          >{{tagItem}}</van-tag>
            class="kwy-style"
            style="margin-right: 5px"
            >{{ tagItem }}</van-tag
          >
        </div>
      </div>
      <div class="data_list">
        <van-cell
          @click="goPumpDetail(item)"
          clickable
          center
          is-link
          title-style="color:#528abe"
          :title="item.Name"
          :label="item.CatalogName"
          v-for="(item, index) in m_dataList"
          :key="index"
        >
          <template #icon>
            <van-image
          width="80"
          height="50"
          :src="item.ThumbnailImage"
          >
            </van-image>
          </template>
        </van-cell>
      <!-- 推荐搜索 -->
      <div
        class="history_record"
        style="height: 149px"
        v-if="m_recommendList.length > 0"
      >
        <div class="recode_btn">
          <span>推荐搜索</span>
        </div>
        <div class="tag_list">
          <van-tag
            v-for="(recomm_item, index) in m_recommendList"
            @click="changeTagSearch(recomm_item.name)"
            :key="index"
            round
            type="primary"
            class="kwy-style"
            style="margin-right: 5px"
            >{{ recomm_item.name }}
            <div
              v-if="recomm_item.statusContent"
              class="recommend-dot"
              :style="{ backgroundColor: recomm_item.statusColor }"
            >
              <span style="color: #fff">{{ recomm_item.statusContent }}</span>
            </div>
          </van-tag>
        </div>
      </div>
      <!-- 热搜 -->
      <div
        class="history_record"
        style="height: calc(100vh - 300px)"
        v-if="m_recommendList.length > 0"
      >
        <div class="recode_btn" style="height: 15%">
          <span style="color: red">热搜</span>
        </div>
        <div
          class="tag_list hot-list"
          style="width: unset; padding-right: 10px; height: 85%"
        >
          <div
            class="hot-li"
            v-for="(hot_item, hot_index) in m_HotSearchList"
            :key="hot_index"
            @click="changeTagSearch(hot_item.name)"
          >
            <div class="hot-icon" :class="hot_item.isHot ? '' : 'normal-icon'">
              <i
                class="iconfont iconremen"
                v-if="hot_item.isHot"
                :style="{ color: hot_item.hotColor }"
              ></i>
              <div v-else class="normal-icon-style"></div>
              <text>{{ hot_item.hotLevel }}</text>
            </div>
            <div class="hot-title">{{ hot_item.name }}</div>
            <div class="hot-view-count">{{ hot_item.downCount }}次</div>
          </div>
        </div>
      </div>
      <!-- 搜索的产品弹框 -->
      <van-popup v-model:show="showSearchList">
        <div
          style="
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
          "
        >
          <div
            @click="showSearchList = false"
            style="
              display: flex;
              align-items: center;
              width: 10%;
              justify-content: center;
              font-size: 14px;
            "
          >
            取消
          </div>
          <van-search
            v-model="m_keyWord"
            shape="round"
            background="#fff"
            show-action
            style="width: 90%;padding-left: unset;"
            :placeholder="$t('ebookPage.keyWordRule.TR')"
            @search="onSearch"
          >
            <template #action>
              <div @click="onSearch">
                <span style="color: #36489e">{{
                  $t("ebookPage.search.TR")
                }}</span>
              </div>
            </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)"
            clickable
            center
            is-link
            title-style="color:#528abe"
            :title="item.Name"
            :label="item.CatalogName"
            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>
    </div>
  </div>
</template>

<script>
import languageMixin from "@/mixin/language.js";

import db from "@/store/db.js";
export default {
  mixins: [languageMixin],
  data() {
    return {
      m_Title:"",
      m_Title: "",
      m_keyWord: "", //关键词
      m_historyKeyWords: [], //历史关键词记录
      m_dataList: [] //查询出来的列表
      m_recommendList: [
        {
          name: "AS",
          statusContent: "热",
          statusColor: "red",
        },
        {
          name: "CDL",
          statusContent: "新",
          statusColor: "#528abe",
        },
        {
          name: "CDM",
          statusContent: "",
          statusColor: "",
        },
        {
          name: "CDS",
          statusContent: "",
          statusColor: "",
        },
        {
          name: "CDF",
          statusContent: "",
          statusColor: "",
        },
      ], //推荐搜索
      m_HotSearchList: [
        {
          name: "CDL",
          downCount: "12567",
          hotLevel: "1",
          hotColor: "red",
          isHot: true,
        },
        {
          name: "AS",
          downCount: "12375",
          hotLevel: "2",
          hotColor: "#fda085",
          isHot: true,
        },
        {
          name: "TP",
          downCount: "6666",
          hotLevel: "3",
          hotColor: "#f6d365",
          isHot: true,
        },
        {
          name: "SOW",
          downCount: "3333",
          hotLevel: "4",
          hotColor: "",
          isHot: false,
        },
        {
          name: "TQL",
          downCount: "2222",
          hotLevel: "5",
          hotColor: "",
          isHot: false,
        },
        {
          name: "BW",
          downCount: "1111",
          hotLevel: "6",
          hotColor: "",
          isHot: false,
        },
        {
          name: "WQ",
          downCount: "1001",
          hotLevel: "7",
          hotColor: "",
          isHot: false,
        },
        {
          name: "SGW-G",
          downCount: "999",
          hotLevel: "8",
          hotColor: "",
          isHot: false,
        },
        {
          name: "BWJ",
          downCount: "987",
          hotLevel: "9",
          hotColor: "",
          isHot: false,
        },
      ],
      m_dataList: [], //查询出来的列表
      m_visibleDataList:[],//用于展示的数据
      m_allBrandList:[],//品牌
      showSearchList: false,
      m_isUL: false, //是否是UL
      m_isFirePump: false, //是否是消防泵
    };
  },
  mounted() {
    this.m_Title =  this.getSoftName();
    document.title = this.m_Title
    if (this.$cookies.isKey("historyRecord")) {
    this.m_Title = this.getSoftName();
    document.title = this.m_Title;
    if (db.get("historyRecord")) {
      //console.log(this.$cookies.get("historyRecord"),74)
      this.m_historyKeyWords = this.$cookies.get("historyRecord").split(",");
      this.m_historyKeyWords = db.get("historyRecord");
    }
  },
  methods: {
    onSearch() {
      let _this = this;
      _this.showSearchList = true;
      let Toast = _this.$toast;
      Toast.loading({
        duration: 0, //为0时 不关闭toast框
        message: "Loading...",
        forbidClick: true
        forbidClick: true,
      });
      _this
        .$axios({
          methods: "get",
          url:
            _this.$globalConfig.WebApiUrl.MainUrl + "v1/Mobile/FilterByKeyWrd/GetList",
            _this.$globalConfig.WebApiUrl.MainUrl +
            "v1/Mobile/FilterByKeyWrd/GetList",
          params: {
            KeyWord: _this.m_keyWord,
            Lang: _this.getCurrentLanguageUrl()
          }
            Lang: _this.getCurrentLanguageUrl(),
          },
        })
        .then(function(res) {
        .then(function (res) {
          Toast.clear();
          //console.log(res);
          console.log(res);
          let result = res.data;
          if (result.Code != 0) {
            Toast.fail(result.Message);
@@ -118,30 +391,72 @@
            if (_this.m_historyKeyWords.indexOf(_this.m_keyWord) == -1) {
              _this.m_historyKeyWords.push(_this.m_keyWord);
            }

            _this.$cookies.set("historyRecord", _this.m_historyKeyWords);
            db.set("historyRecord", _this.m_historyKeyWords);
            let brandList = []
            let seriesList = [];
            result.Data.forEach(item => {
            result.Data.forEach((item) => {
              let productItem = {
                ObjectType: item.ObjectType,
                PumpID: item.PumpID,
                SeriesID: item.SeriesID,
                CatalogName: item.CatalogName,
                Name: item.Name,
                ThumbnailImage: _this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
                Description: item.Description
                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);
          }
        })
        .catch(function(err) {
        .catch(function (err) {
          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) {
@@ -151,24 +466,34 @@
    //删除历史记录标签
    deletedHistoryTag() {
      this.m_historyKeyWords = [];
      this.$cookies.remove("historyRecord");
      db.remove("historyRecord");
    },
    //跳转到详情
    goPumpDetail(item) {
      // console.log(item, 204);
       console.log(item, 204);
      if (item.ObjectType != 0) {
        let query = { SID: item.SeriesID, PID: item.PumpID }
        let query = { SID: item.SeriesID, PID: item.PumpID };
        this.gotoPage("/byParas/Index", query, null);
      } else if (item.ObjectType == 0) {
        let query = { ID: item.SeriesID }
        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() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>

@@ -179,11 +504,12 @@
  background-color: #fafafa;
  .findData_main {
    width: 100%;
    height: calc(100% - 46px);
    background-color: #fafafa;
    height: calc(100% - 0px);
    background-color: #fff;
    .history_record {
      width: 100%;
      height: 45px;
      height: 90px;
      background-color: #fff;
      .recode_btn {
        width: 96%;
        height: 30%;
@@ -193,34 +519,168 @@
        padding-top: 5px;
        padding-left: 10px;
        span {
          font-size: 12px;
          color: #aaaaaa;
          font-size: 16px;
          color: #000;
          font-weight: 600;
        }
      }
      .tag_list {
        width: 96%;
        display: flex;
        height: 70%;
        align-items: center;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        padding-left: 10px;
      }
    }
    .data_list {
      width: 100%;
      height: calc(100% - 100px);
      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;
    margin-bottom: 15px;
    width: 80px;
    height: 25px;
    justify-content: center;
    background-color: #f7f8fa;
    color: #000000;
  }
  .recommend-dot {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .hot-list {
    border: 1px solid #f1f2f3;
    box-sizing: border-box;
    width: unset;
    margin: 0 15px;
    border-bottom: unset;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    .hot-li {
      width: 100%;
      display: flex;
      margin: 5px 0px;
      line-height: 30px;
      align-items: center;
      .hot-title {
        flex: 1;
        text-align: left;
        text-indent: 16px;
        font-weight: 600;
      }
      .hot-icon {
        position: relative;
        i {
          font-size: 30px;
          color: red;
        }
        text {
          position: absolute;
          left: 10px;
          top: 5px;
          color: #fff;
          font-weight: 600;
          font-family: "iconfont";
          font-size: 14px;
        }
      }
      .normal-icon {
        position: relative;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 30px;
        .normal-icon-style {
          width: 25px;
          height: 25px;
          background-color: #cccccc;
          border-radius: 8px;
          text-align: center;
          line-height: 30px;
        }
        text {
          top: 0px;
        }
      }
      .hot-view-count {
        color: #c1c2c3;
        font-size: 14px;
      }
    }
  }
  .van-popup--center {
    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>