xinkeaboard/xinkeaboard-web/components/SldHomeTopSearch.vue

<template>
    <div class="sld_home_top">
      <div class="sld_home_top_search container">
    <div class="ld sld_home_top_search_left">
      <a href="javascript:void(0)" class="sld_logo_wrap flex_row_start_center" @click="go_home">
        <img :src="filtersStore.getSiteLogo" />
      </a>
    </div>
    <div class="sld_seach_wrap">
      <div class="sld_seach_box ld">
        <div class="form" @submit.prevent>
          <input
            v-model="keyword"
            type="text"
            class="text"
            autocomplete="off"
            :placeholder="L['请输入关键词']"
            @keyup.enter="search"
            ref="searchInput"
            @focus="inputFocus"
            @input="inputChange"
            @blur="inputBlur"
          />
          <input type="submit" :value="L['搜索']" class="button" @click="search" />
        </div>
        <!-- <div class="hot_search_wrap">
          <div>
            <template v-for="(item, index) in hotList.data" :key="index">
              <a
                href="javascript:void(0)"
                @click="quickSearch(index, 'quick')"
                :title="tmpHotList[index]"
                >{{ item }}</a
              >
            </template>
          </div>
        </div> -->
      </div>
      <div class="search_association" id="searchA" v-show="SAList.length && SAShow">
        <div
          class="s_a_item"
          v-for="(item, index) in SAList"
          @mousedown="quickSearch(item.wordsContent, 'associ')"
        >
          <!-- 因为click事件与blur事件冲突，blur事件优先，于是换成mousedown -->
          <div>{{ item.wordsContent }}</div>
          <div>{{ item.searchGoodsNum }} {{L['个商品']}}</div>
        </div>
      </div>
    </div>
    <div v-if="searchBarFixed" class="container_header">
      <div class="container_header_box flex_row_start_center">
        <div class="sld_cart_wrap fixed_sld_cart_wrap">
          <nuxt-link tag="a" class="sld_logo_wrap flex_row_start_center" :to="`/`">
            <img :src="filtersStore.getSiteLogo" />
          </nuxt-link>
        </div>
        <div class="sld_seach_wrap" style="margin-right: 90px">
          <div class="sld_seach_box ld">
            <div class="form">
              <input
                v-model="keyword"
                type="text"
                class="text"
                autocomplete="off"
                style="color: rgb(153, 153, 153)"
                :placeholder="L['请输入关键词']"
                ref="searchInput"
                @focus="inputFocus"
              />
              <input type=" submit" :value="L['搜索']" class="button" @click="search" />
            </div>
          </div>
        </div>
        <div class="sld_cart_wrap">
          <dl class>
            <dt
              class="ld cart_icon_text_wrap"
            >
            <img src="/email.svg"  />
              <nuxt-link target="_self" :to="`/home/contact`">{{
                L["发布需求"]
              }}</nuxt-link>

            </dt>
          </dl>
        </div>
      </div>
    </div>
    <div class="sld_cart_wrap">
      <dl class>
        <nuxt-link target="_self" :to="`/home/contact`">
          <dt
            class="ld cart_icon_text_wrap"
          >
          <img src="/email.svg"  />
            <span>{{ L["发布需求"] }}</span>
          </dt>
        </nuxt-link>
      </dl>
    </div>
  </div>
    </div>
    



</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh.js";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from '@/store/filter.js'
import {ref} from "vue";
const filtersStore = useFiltersStore()
// const L = lang_zn;
const L = getCurLanguage();
const { proxy } = getCurrentInstance();
const searchBarFixed = ref(false);
const hotList = reactive({ data: [] }); //热门搜索词列表
const tmpHotList = ref([]);
const SAList = ref([]);
const SAShow = ref(false);
const router = useRouter();
const route = useRoute();
const keyword = ref(calcMallUrlKeyword(route.path))

const go_home = () => {
  window.location.href="/"
};

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;
      }
    });
  }

}

getInitData()

//搜索事件
const search = () => {
  proxy.$refs.searchInput.style.color = "rgb(153,153,153)";
  if (keyword.value) {
    router.push({
      path: `/goods/list/search_keyword-`+keyword.value,
    });
  }
};

const searchAssociation = (input) => {
  get("v3/goods/front/goods/searchWords/list", {
    keyWord: input,
  }).then((res) => {
    if (res.state == 200) {
      SAList.value = res.data;
    }
  });
};

const inputChange = (e) => {
  let input = e.target.value.trim();
  SAShow.value = true;

  if (input) {
    searchAssociation(input);
  } else {
    SAList.value = [];
  }
};

//热门搜索事件
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,
    });
    }
  }
};

const inputFocus = () => {
  proxy.$refs.searchInput.style.color = "#333";
  SAShow.value = true;
  if (keyword.value && SAList.value.length == 0) {
    searchAssociation(keyword.value);
  }
};

const inputBlur = () => {
  SAShow.value = false;
};

//滚动事件
if (process.client) {
  const handleScroll = () => {
    var height = 600;
    var scrollTop =
      window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > height) {
      searchBarFixed.value = true;
    } else {
      searchBarFixed.value = false;
    }
  };
  window.addEventListener("scroll", handleScroll);
}
</script>

<style lang="scss" scoped>
a:active,
a:visited {
  color: #333;
}

.sld_home_top {
  width: 100%;
  background: #F6F8FA;
  border-bottom: 1px solid #dbdbdb;
}

.sld_home_top_search {
    height: 80px;
    position: relative;
    z-index: 12;
    width: 1210px;
    margin: 0 auto;
    display: flex;
    align-items: center;
  .container_header {
    width: 100%;
    position: fixed;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    border-bottom: 2px solid $colorMain;

    .sld_seach_wrap,
    .sld_cart_wrap {
      margin: 5px;
      position: relative;
    }

    .container_header_box {
      width: 1200px;
      margin: 0 auto;
      >div:last-child{
          width: 400px;
        }
      .fixed_sld_cart_wrap {
        margin-right: 120px;

        a {
          width: 100%;
          height: 100%;

          img {
            max-width: 100%;
            max-height: 100%;
          }
        }


      }
    }
  }

  .container_header {
    -webkit-animation: searchTop 0.5s ease-in-out;
    animation: searchTop 0.5s ease-in-out;
  }

  @-webkit-keyframes searchTop {
    0% {
      top: -50px;
    }

    to {
      top: 0;
    }
  }

  @keyframes searchTop {
    0% {
      top: -50px;
    }

    to {
      top: 0;
    }
  }

  &:before {
    display: table;
    content: " ";
  }

  .sld_home_top_search_left {
    height: 100%;
    // flex:0 0 200px;
    // position: absolute;
    // left: 240px;
    width: 200px;

    .sld_logo_wrap {
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .sld_seach_wrap {
    // width: 536px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    overflow: hidden;
    padding: 4px 20px;
    position: relative;

    .sld_seach_box {
      width: 536px;
      z-index: 11;
      height: 38px;
      border: 2px solid $colorMain;
      .form {
        background-color: $colorMain;
        height: 34px;
        overflow: hidden;
        .text {
          height: 36px;
          background-color: #fff;
          width: calc(100% - 103px);
          -webkit-appearance: none;
          -webkit-border-radius: 0;
          height: 34px;
          color: rgb(153, 153, 153);
          padding: 5px 5px 5px 10px;
          background-position: 0 -360px;
          background-color: #fff;
          background-repeat: repeat-x;
          line-height: 20px;
          font-family: arial, "\5b8b\4f53";
          font-size: 12px;
          outline: none;
          border: none;
        }

        input {
          margin: 0;
          padding: 0;
          height: 34px;
          border: 0;
        }

        input::placeholder {
          font-size: $fontE;
          /*font-family: Microsoft YaHei;*/
          font-weight: 400;
          color: rgba(40,46,48,0.6);
        }

        ::-webkit-input-placeholder {
          margin-left: 20px;
          font-size: $fontE;
          /*font-family: Microsoft YaHei;*/
          font-weight: 400;
          color: rgba(40,46,48,0.6);
        }

        /* 使用webkit内核的浏览器 */
        :-moz-placeholder {
          font-size: $fontE;
          /*font-family: Microsoft YaHei;*/
          font-weight: 400;
          color: rgba(40,46,48,0.6);
        }

        /* Firefox版本19+ */
        :-ms-input-placeholder {
          font-size: $fontE;
          /*font-family: Microsoft YaHei;*/
          font-weight: 400;
          color: rgba(40,46,48,0.6);
        }

        /* IE浏览器 */

        .button {
          width: 103px;
          background: $colorMain;
          font-size: $fontE;
          font-weight: 600;
          color: #fff;
          float: right;
          cursor: pointer;
          text-align: center;
        }
      }

      .hot_search_wrap {
        height: 30px;
        line-height: 30px;
        color: #999;
        overflow: hidden;

        strong {
          float: left;
          font-weight: 400;
        }

        a {
          color: #666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;

          &:link,
          &:visited {
            float: left;
            margin-right: 10px;
          }

          &:hover {
            color: $colorMain;
          }
        }
      }
    }

    .search_association {
      background: #fff;
      position: absolute;
      top: 43px;
      overflow: hidden;
      position: absolute;
      left: 0;
      width: 580px;
      border: 1px solid #ccc;
      background: #fff;
      z-index: 99;

      .s_a_item {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        padding: 1px 5px;
        line-height: 24px;
        cursor: pointer;
        font-size: 12px;
        -webkit-font-smoothing: antialiased;
        color: #666;

        div:first-child {
          width: 250px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        div:last-child {
          overflow: hidden;
          color: #aaa;
        }

        &:hover {
          background-color: rgb(255, 233, 188);
        }
      }
    }
  }
}

.sld_cart_wrap {
  // position: absolute;
  // right: 240px;
  z-index: 99;
  height: 40px;
  width: 210px;
  text-align: center;

  dl {
    margin-bottom: 0px;

    .cart_goods_num {
      font: 11px/16px Verdana;
      color: #fff;
      background: $colorMain;
      text-align: center;
      display: inline-block;
      height: 16px;
      min-width: 16px;
      border: none 0;
      border-radius: 8px;
      margin-left: 10px;
    }

    dt {
      // position: absolute;
      z-index: 3;
      width: 100%;
      height: 38px;
      cursor: pointer;
      font-weight: 400;
      line-height: 38px;
      padding: 0;
      color: $colorMain;
      font-size: 15px;
      img {
        margin: -2px 11px 0 0px;
        vertical-align: middle;
        width: 20px;
      }

      &.cart_icon_text_wrap {
        background-color: #fff;
        a {
          color: #666666;
          font-size: 15px;
          line-height: 36px;
        }

        span {
          font-weight: bold;
          font-size: $fontE;
          color: $colorMain;
        }
      }
    }

    dd {
      .cart_goods {
        dl {
          padding-top: 8px;
        }

        dd {
          &.cart_goods_price {
            position: static;

            em {
              margin-right: 6px;
              width: auto;
              color: #666;

              &:nth-child(1) {
                display: block;
                font-weight: 600;
              }

              &:nth-child(2) {
                display: block;
                text-align: right;
                margin-top: 6px;
              }
            }
          }
        }
      }
    }
  }

  dd {
    position: absolute;
    top: 37px;
    right: 0;
    width: 355px;
    border: 1px solid #e3e3e3;
    background: #fff;
    z-index: 1;
  }
}

.ld {
  position: relative;
  zoom: 1;
}

.cart_data {
  height: 300px;
  display: flex;
  flex-direction: column;
  position: relative;

  .cart_data_title {
    font-weight: 600;
    float: left;
    padding: 7px;
    line-height: 32px;
    height: 32px;
  }

  .cart_list {
    padding: 20px;
    overflow-y: scroll;

    .cart_list_pre {
      margin-bottom: 20px;

      .cart_pre_left {
        .cart_pre_img {
          width: 48px;
          height: 48px;
          border: 1px solid #e3e3e3;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .cart_pre_cen {
          width: 150px;
          margin-left: 20px;
          cursor: pointer;

          .cart_pre_name {
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .cart_pre_spec {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 5px;
          }
        }
      }

      .cart_pre_right {
        .cart_pre_price {
          color: #666;
        }

        .cart_pre_del {
          color: #666;
          cursor: pointer;
          margin-top: 10px;

          &:hover {
            color: $colorMain;
          }
        }
      }
    }
  }

  .cart_bottom {
    width: 100%;
    height: 44px;
    border: 1px solid #e3e3e3;

    .cart_bottom_left {
      padding-left: 11px;
      height: 44px;

      span {
        color: #666;

        &:nth-child(2) {
          margin-left: 5px;
        }
      }
    }

    .cart_bottom_right {
      width: 110px;
      height: 44px;
      text-align: center;
      color: #fff;
      line-height: 44px;
      cursor: pointer;
    }
  }
}
</style>