fix: 首页搜索框增加猜你想要功能

xinkeaboard-web/assets/language/en.js

@@ -23,6 +23,7 @@ export const lang_en = {
     '立即发布您的需求': 'Post Your Request Now',
     '全部分类': 'All Category',
     '暂无文章数据':'No Article Data',
+    '猜你想要': 'Guess you want...',
 
     //登录页面
     '手机登录': 'login by phone',

xinkeaboard-web/assets/language/zh.js

@@ -22,6 +22,7 @@ export const lang_zn = {
     '下载中心':'下载中心',
     '暂无下载记录':'暂无下载记录',
     '暂无文章数据':'暂无文章数据',
+    '猜你想要': '猜你想要...',
 
     //登录页面
     '手机登录': '手机登录',

xinkeaboard-web/components/HotList.vue

@@ -0,0 +1,102 @@
+<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>

xinkeaboard-web/components/NavTopBar.vue

@@ -223,7 +223,7 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
       }
 
       .hello {
-        max-width: 300px;
+        max-width: 330px;
         text-overflow: ellipsis;
         overflow: hidden;
         margin-right: 20px;

xinkeaboard-web/components/SldHomeTopSearch.vue

@@ -9,44 +9,43 @@
     <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"
-          />
+          <el-popover
+            class="box-item"
+            placement="bottom-start"
+            width="536px"
+            :visible="visible"
+            :show-arrow="false"
+            :offset="2"
+          >
+            <HotList></HotList>
+            <template #reference>
+              <input
+                v-model="keyword"
+                type="text"
+                class="text"
+                autocomplete="off"
+                :placeholder="L['请输入关键词']"
+                @keyup.enter="search"
+                ref="searchInput"
+                @focus="visible = true"
+                @input="inputChange"
+                @blur="visible = false"
+              />
+            </template>
+          </el-popover>
           <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="search_association">
         <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>
     <div v-if="searchBarFixed" class="container_header">
       <div class="container_header_box flex_row_start_center">
@@ -101,10 +100,6 @@
     </div>
   </div>
     </div>
-    
-
-
-
 </template>
 
 <script setup>
@@ -117,40 +112,19 @@ const filtersStore = useFiltersStore()
 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 visible = ref(false)
 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 = () => {
-  searchInput.value.style.color = "rgb(153,153,153)";
+  // searchInput.value.style.color = "rgb(153,153,153)";
   if (keyword.value) {
     router.push({
       path: `/goods/list/search_keyword-`+keyword.value,
@@ -170,30 +144,13 @@ const searchAssociation = (input) => {
 
 const inputChange = (e) => {
   let input = e.target.value.trim();
-  SAShow.value = true;
-
-  if (input) {
-    searchAssociation(input);
-  } else {
-    SAList.value = [];
-  }
-};
+  // SAShow.value = true;
 
-//热门搜索事件
-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,
-    });
-    }
-  }
+  // if (input) {
+  //   searchAssociation(input);
+  // } else {
+  //   SAList.value = [];
+  // }
 };
 
 const inputFocus = () => {
@@ -422,36 +379,6 @@ a:visited {
           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 {