xinkeaboard/xinkeaboard-web/components/HotList.vue

<template>
  <div class="hot_search_wrap">
    <div class="hot_search_wrap__title">{{ L["猜你想要"] }}</div>
    <div class="hot_search_wrap__list">
      <div
        v-for="(item, index) in hotList.data"
        :key="index"
        class="hot_search_wrap__list-item"
        @click="quickSearch(index, 'quick')"
        :title="tmpHotList[index]"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
const L = getCurLanguage();
const hotList = reactive({ data: [] }); //热门搜索词列表
const tmpHotList = ref([]);
const router = useRouter();

const getInitData = async () => {
  const { data: res } = await useFetchRaw(
    apiUrl +
      "v3/system/front/setting/getSettings?names=hot_search_words,gz_code"
  );
  if (res._rawValue.state == 200) {
    hotList.data = res._rawValue.data;
    let tmp_data = hotList.data[0]
      ? hotList.data[0].split(",").filter((i) => i != "")
      : [];
    tmpHotList.value = tmp_data;
    hotList.data = tmp_data;
    hotList.data = hotList.data.map((key) => {
      if (key.length > 20) {
        return key.substring(0, 20) + "...";
      } else {
        return key;
      }
    });
  }
};

//热门搜索事件
const quickSearch = (val, type) => {
  if (type == "quick") {
    router.push({
      path: `/goods/list/search_keyword-` + tmpHotList.value[val],
    });
  } else {
    // if (val == keyword.value) {
    //   keyword.value = val;
    // } else {
    //   router.push({
    //     path: `/goods/list/search_keyword-`+val,
    // });
    // }
  }
};

getInitData();
</script>

<style lang="scss" scoped>
.hot_search_wrap {
    width: 100%;
    max-height: 500px;
    overflow: auto;
  &__title {
    font-weight: 400;
    font-size: 14px;
    color: rgba(40, 46, 48, 0.6);
    margin-bottom: 15px;
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    &-item {
      width: max-content;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #f6f8fa;
      font-weight: 400;
      font-size: 14px;
      color: #282e30;
      padding: 0px 15px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;

      &:hover {
        background-color: $colorMain;
        color: #FFF;
      }
    }
  }
}
</style>