library-inquiry-machine/src/views/module/search.vue

<template>
  <div>
    <div class="search-header-bg" />
    <el-card class="box-card" style="margin: -220px 44px 0 44px; padding-bottom: 12px;">
      <h4 style="font-size: 30px; margin-bottom: 24px; text-align: center;">图书检索</h4>
      <div class="search-main">
        <!-- 搜索栏 -->
        <div class="search-content">
          <div class="input-search">
            <el-input
              v-model="keyword"
              placeholder="请输入关键词进行检索"
            />
            <el-button type="primary" @click="toSearch">搜索</el-button>
          </div>
          <el-button @click="resetSearch">重置</el-button>
        </div>
        <!-- 热门检索 -->
        <div class="hot-keyword">
          <p style="margin-left: 10px;">热门检索</p>
          <div class="keyword-item">
            <!-- @click="selectKeyWord(index)" -->
            <span v-for="(item,index) in keywordData" :key="index" :class="{ 'active': keyWordIndex === index }" @click="selectKeyWord(index)">{{ item }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { FetchFindHotSearch } from '@/api/inquiryMachine'
import { positionCrud } from '../mixins/index.js'
export default {
  name: 'Search',
  mixins: [positionCrud],
  props: {
    searchType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      keyword: '',
      keyWordIndex: null,
      keywordData: []
    }
  },
  created() {
    this.getHotSearch()
  },
  mounted() {
  },
  methods: {
    getHotSearch() {
      const params = {
        'fondsCode': this.libcode,
        'size': 30
      }
      FetchFindHotSearch(params).then(res => {
        this.keywordData = res.filter(item => {
          return item !== ''
        })
      }).catch(() => {
        this.$message.error('接口错误')
      })
    },
    resetData() {
      this.$parent.pageIndex = 1
      this.$parent.hasNextPage = true
      this.keyword = ''
      this.$parent.bookList = []
    },
    resetSearch() {
      this.$parent.pageIndex = 1
      this.$parent.hasNextPage = false
      this.keyword = ''
      this.$parent.bookList = []
      this.keyWordIndex = null
      console.log('this.totalNum ', this.$parent.totalNum)
      this.$parent.totalNum = 0
      // this.$parent.addMoreData()
    },
    toSearch() {
      if (this.keyword) {
        this.keyWordIndex = null
        if (this.searchType === 'noList') {
          localStorage.setItem('searchKey', this.keyword)
          this.$router.push({ path: '/bookList' })
        } else {
          this.$parent.pageIndex = 1
          this.$parent.hasNextPage = true
          this.$parent.bookList = []
          this.$parent.addMoreData()
        }
      } else {
        this.$message.error('请输入检索关键词')
      }
    },
    selectKeyWord(index) {
      this.resetData()
      if (parseInt(this.keyWordIndex) === index) {
        this.keyWordIndex = null
      } else {
        this.keyWordIndex = index
        this.keyword = this.keywordData[index]
      }
      this.$forceUpdate()
      if (this.searchType === 'noList') {
        localStorage.setItem('searchKey', this.keyword)
        localStorage.setItem('keyWordIndex', this.keyWordIndex)
        this.$router.push({ path: '/bookList' })
        this.$parent.pageIndex = 1
      } else {
        this.$parent.pageIndex = 1
        this.$parent.hasNextPage = true
        this.$parent.bookList = []
        this.$parent.addMoreData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
.search-header-bg{
  height: 298px;
  background: url("~@/assets/images/top-bg.png") no-repeat left top;
  background-size: 100% 100%;
}
</style>