YuHuaTai-Mobile/src/components/HotspotList.vue

<template>
  <div
    class="hotspot-list"
  >
    <div class="top-bar">
      <button
        class="back"
        @click="$emit('back')"
      >
        <img
          src="@/assets/images/swkk/back-simple.png"
          alt=""
          draggable="false"
        >
      </button>
      <div class="search-wrap">
        <input
          v-model.trim="keyword"
          maxlength="30"
          type="text"
          placeholder="请输入关键字"
          @keydown.enter="onClickSearch"
        >
        <button
          class="search"
          @click="onClickSearch"
        >
          搜索
        </button>
      </div>
    </div>
    <div
      v-if="historyList.length"
      class="search-history"
    >
      <div class="title-bar">
        <h2>历史搜索</h2>
        <button
          class="clear"
          @click="onClickDelete"
        >
          <img
            src="@/assets/images/swkk/delete.png"
            alt=""
            draggable="false"
          >
        </button>
      </div>
      <ul class="history-list">
        <li
          v-for="(item, index) in historyList"
          :key="index"
          @click="onClickHistoryItem(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <ul class="search-result">
      <li
        v-for="(item, index) in resultList"
        :key="index"
        @click="$emit('click-hotspot', item)"
        v-html="highlightKeyword(item.title.split('&')[0])"
      />
      <div
        v-if="!resultList.length"
        class="no-data"
      >
        <img
          src="@/assets/images/swkk/no-data-gray.png"
          alt=""
          draggable="false"
        >
        <div class="text">
          暂无内容
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    hotspotData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      keyword: '',
      historyList: [],
      resultList: [],
    }
  },
  computed: {
    hotspotsCombiled() {
      return this.hotspotData.filter(v => v.title.split("&")[2] || !v.title.includes("&"))
    },
  },
  mounted() {
    this.historyList = JSON.parse(localStorage.getItem('hotspot-search-history')) || []
    this.onClickSearch()
  },
  destroyed() {
    localStorage.setItem('hotspot-search-history', JSON.stringify(this.historyList))
  },
  methods: {
    onClickSearch() {
      if (this.keyword && !this.historyList.includes(this.keyword)) {
        this.historyList.unshift(this.keyword)
        if (this.keyword.length === 31) {
          this.keyword.pop()
        }
      }
      this.resultList = this.hotspotsCombiled.filter(v => v.title.split("&")[0].includes(this.keyword))
    },
    onClickDelete() {
      this.historyList = []
    },
    onClickHistoryItem(historyItem) {
      this.keyword = historyItem
      this.onClickSearch()
    },
    highlightKeyword(title) {
      if (this.keyword) {
        const reg = new RegExp(`(${this.keyword})`, 'gi')
        const replace = '<span style="color:#930909;">$1</span>'
        return title.replace(reg, replace)
      } else {
        return title
      }
    }
  }
}
</script>

<style lang="less" scoped>
.hotspot-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,251,245,0.9);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  > .top-bar {
    flex: 0 0 auto;
    margin-top: 3.67rem;
    margin-left: 0.33rem;
    margin-right: 1.33rem;
    display: flex;
    align-items: center;
    > button.back {
      width: 1.08rem;
      height: 2.46rem;
      box-sizing: content-box;
      padding: 1rem;
      flex: 0 0 auto;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    > .search-wrap {
      margin-left: 0.71rem;
      height: 5rem;
      flex: 1 0 1px;
      background: #FFFFFF;
      border-radius: 4.17rem 4.17rem 4.17rem 4.17rem;
      border: 0.08rem solid #930909;
      display: flex;
      padding: 0.54rem 0.54rem 0.54rem 1.21rem;
      > input {
        flex: 1 0 1px;
        height: 100%;
        color: #666666;
        font-size: 1.67rem;
      }
      > button.search {
        height: 100%;
        width: 8.33rem;
        font-size: 1.67rem;
        color: #D8B275;
        background: #930909;
        border-radius: 2.08rem 2.08rem 2.08rem 2.08rem;
        margin-left: 0.54rem;
      }
    }
  }
  > .search-history {
    flex: 0 0 auto;
    margin-top: 2.92rem;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    > .title-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > h2 {
        font-size: 1.83rem;
        font-weight: bold;
        color: #333333;
      }
      > button.clear {
        width: 2.08rem;
        height: 2.15rem;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    > .history-list {
      margin-top: 1.46rem;
      display: flex;
      flex-wrap: wrap;
      margin-right: -1.25rem;
      > li {
        height: 3.33rem;
        line-height: 3.33rem;
        background-color: #fff;
        border-radius: 1.67rem;
        padding: 0 1.71rem;
        display: inline-block;
        margin-right: 1.25rem;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        color: #666666;
        max-width: 20rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  > .search-result {
    flex: 1 0 1px;
    margin-top: 1.92rem;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    overflow: auto;
    position: relative;
    > li {
      display: block;
      color: #666666;
      font-size: 1.67rem;
      padding: 1em 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    > .no-data {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      > img {
        width: 18.21rem;
        height: 16.54rem;
      }
      > .text {
        margin-top: 1.88rem;
        font-size: 1.83rem;
        color: #666666;
      }
    }
  }
}
</style>