HM21St_Page_User/src/views/search/index.vue

<template>
  <div class="search">
    <Header
      :headerBg="'#299772'"
      :headerBorder="'#30A47D'"
      :userBg="'rgba(0, 0, 0, 0.08)'"
      :LoginNavIndex="-1"
    />
    <div class="banner">
      <a class="goback" @click="$router.go(-1)"
        ><i class="el-icon-arrow-left"></i>返回</a
      >
      <img src="../../assets/search-big.png" />
    </div>
    <SearchInput
      class="search-compent"
      :selectIndex="selectIndex"
      @changeSelectIndex="changeSelectIndex"
      :isIndex="true"
    />
    <div class="main">
      <div v-if="lastSearchList.length > 0">
        <h2>搜索历史</h2>
        <ul>
          <li v-for="(item, index) in lastSearchList" :key="index">
            <b @click="goto(item)">{{ item }}</b>
            <i class="el-icon-close" @click="handleDelete(index)"></i>
          </li>
        </ul>
      </div>
      <div v-if="hotSearchList.length > 0">
        <h2>热门搜索</h2>
        <ul class="hotSearch">
          <li
            v-for="(item, index) in hotSearchList"
            :key="index"
            :class="[index % 3 == 2 ? 'noMargin' : '']"
            @click="goto(item)"
          >
            <span :class="['xuhao_' + index]">{{ index + 1 }}</span>
            <b :title="item">{{ item }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import SearchInput from "./components/SearchInput.vue";
import { getLogin } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, SearchInput },
  props: {},
  data() {
    //这里存放数据
    return {
      selectIndex: 0,
      hotSearchList: [],
      lastSearchList: [], // 查询记录列表
      config: this.$route.query.headerConfig
        ? decodeURIComponent(this.$route.query.headerConfig)
        : "",
      LoginNavIndex: 0,
      userBg: "rgba(0, 0, 0, 0.24)",
      headerBorder: "#5C5C5C",
      headerBg: "#1F1F1F",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 删除热门查询某条
    handleDelete(index) {
      this.lastSearchList.splice(index, 1);
    },
    goto(content) {
      this.$router.push({
        path: "/search/detail",
        query: {
          content: content,
          headerConfig: encodeURIComponent(this.config),
        },
      });
    },
    // 查询系统搜索关键热词
    getHotWordList() {
      let MethodName = "/PaperServer/Client/Search/QueryHotWordList";
      let data = {
        limit: 9,
      };
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.hotSearchList = res.data;
        }
      });
    },
    // 查询用户最近搜索的单词
    getUserSearchList() {
      let MethodName = "/PaperServer/Client/Dict/QueryUserSearchWordList";
      let data = {
        limit: 10,
      };
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.lastSearchList = res.data;
        }
      });
    },
    changeSelectIndex(val) {
      this.selectIndex = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.config) {
      let arr = this.config.split("&&&");
      this.LoginNavIndex = arr[0] * 1;
      this.userBg = arr[1];
      this.headerBorder = arr[2];
      this.headerBg = arr[3];
      this.selectIndex = arr[0] * 1 < 2 ? arr[0] * 1 : 0;
    }
    this.getHotWordList();
    this.getUserSearchList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.search {
  position: relative;
  .banner {
    background: #299772;
    height: 209px;
    text-align: center;
    position: relative;
    .goback {
      position: absolute;
      left: 24px;
      top: 24px;
      width: 96px;
      height: 40px;
      display: block;
      text-align: center;
      cursor: pointer;
      color: #ffffff;
      line-height: 40px;
      .el-icon-arrow-left {
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        margin: 0 4px;
      }
    }
    img {
      height: 64px;
      margin-top: 73px;
    }
  }
  .search-compent {
    box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
      0px 16px 24px 2px rgba(0, 0, 0, 0.04),
      0px 8px 10px -5px rgba(0, 0, 0, 0.08);
    width: 740px;
    position: absolute;
    top: 181px;
    left: 50%;
    margin-left: -370px;
  }
  .main {
    width: 740px;
    margin: 0 auto;
    padding-top: 36px;
    h2 {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 32px;
      margin-bottom: 0;
    }
    ul {
      list-style: none;
      display: flex;
      flex-flow: wrap;
      margin: 0;
      padding: 8px 0 0 0;
      li {
        padding: 8px 12px 8px;
        background: #e9f7f2;
        border-radius: 20px;
        display: flex;
        align-items: center;
        margin: 8px 7px 8px 0;
        b {
          color: #299772;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          cursor: pointer;
        }
        .el-icon-close {
          color: #299772;
          cursor: pointer;
          margin-left: 8px;
        }
      }
    }
    .hotSearch {
      li {
        width: 240px;
        height: 56px;
        background: #ffffff;
        border-radius: 8px;
        cursor: pointer;
        margin-right: 10px;
        padding: 16px 26px;
        &.noMargin {
          margin-right: 0;
        }
        span {
          display: block;
          background: #7796c4;
          border-radius: 2px;
          width: 18px;
          height: 18px;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          text-align: center;
          color: #ffffff;
          &.xuhao_0 {
            background: #ea1e1e;
          }
          &.xuhao_1 {
            background: #ff8e4f;
          }
          &.xuhao_2 {
            background: #f0a432;
          }
        }
        b {
          color: #000;
          margin-left: 10px;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>