调整搜索界面

tanghaolin

2022-09-02 31b4821f310c57267f8d08229d6ad8d059e128ee

 src/views/Select/FindKeyWordsData.vue

@@ -1,114 +1,323 @@
<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>
        <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
      ></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: [], //查询出来的列表
      showSearchList: 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,18 +327,18 @@
            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 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
                ThumbnailImage:
                  _this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
                Description: item.Description,
              };
              seriesList.push(productItem);
            });
@@ -138,7 +347,7 @@
            //console.log(Object.entries(_this.m_ShowSeriesList), 80);
          }
        })
        .catch(function(err) {
        .catch(function (err) {
          Toast.clear();
          console.log(err);
        });
@@ -151,24 +360,24 @@
    //删除历史记录标签
    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);
      }
    },
    //返回上一页
    pageBack() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>

@@ -179,11 +388,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,21 +403,24 @@
        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% - 55px);
      overflow: auto;
      margin-top: 1px;
      .van-cell__title,
@@ -222,5 +435,88 @@
      }
    }
  }
  .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%;
  }
}
</style>