搜索热词

package-lock.json

@@ -21,6 +21,7 @@
                 "file-saver": "^2.0.5",
                 "force": "^0.0.3",
                 "js-base64": "^3.7.7",
+                "lodash": "^4.17.21",
                 "lodash-es": "^4.17.21",
                 "mitt": "^3.0.1",
                 "moment": "^2.29.4",
@@ -3390,9 +3391,8 @@
         },
         "node_modules/lodash": {
             "version": "4.17.21",
-            "resolved": "https://repo.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz",
+            "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-            "license": "MIT"
         },
         "node_modules/lodash-es": {
             "version": "4.17.21",

package.json

@@ -28,6 +28,7 @@
         "file-saver": "^2.0.5",
         "force": "^0.0.3",
         "js-base64": "^3.7.7",
+        "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1",
         "moment": "^2.29.4",

src/http/api/home/index.ts

@@ -37,3 +37,8 @@ export const apiGetCollect = (params = {}) => {
 export const loginNewApi = (data: any) => {
     return post('/auth/iwsLogin', data)
 }
+
+// 热词查询
+export const getHotSearch = (data: any) => {
+    return post('/material-mall/dev/list', data)
+}

src/layout/header.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { debounce } from 'lodash'
 import $bus from '@/utils/bus'
 import { mainStore } from 'store/main'
 import { useStore } from 'store/user'
 import { cartStore } from 'store/cart'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getHotSearchListApi, getBookCarDetailsApi, getCompanyListApi } from 'http/api/home/index'
+import {
+    getHotSearchListApi,
+    getBookCarDetailsApi,
+    getCompanyListApi,
+    getHotSearch,
+} from 'http/api/home/index'
 import userClass from '../hooks/userClass'
 import {
     getUserInfo, //用户信息
@@ -387,6 +393,45 @@ const resetPhone = async () => {
     })
 }
 
+const hotWordList = ref<any[]>([])
+// 输入框值改变
+const changeInputValue = debounce(async () => {
+    // console.log('🚀 ~ changeInputValue ~ keywordIptValue.value:', keywordIptValue.value)
+    if (!keywordIptValue.value) {
+        hotWordList.value = []
+        return
+    }
+    // 这里调用接口
+    try {
+        const params = {
+            deviceName: keywordIptValue.value,
+            maStatus: 2,
+        }
+        const res: any = await getHotSearch(params)
+        // console.log('🚀 ~ changeInputValue ~ res:', res)
+        // 取前5个
+        const arr = res.data.rows.filter((item: any, index: number, self: any) => {
+            return self.findIndex((e: any) => e.deviceName === item.deviceName) === index
+        })
+        if (res.data.rows && res.data.rows.length > 5) {
+            // 过滤掉 deviceName 重复的数据
+            hotWordList.value = arr.slice(0, 5)
+        } else {
+            hotWordList.value = arr
+        }
+        // console.log('🚀 ~ changeInputValue ~ hotWordList.value:', hotWordList.value)
+    } catch (error) {
+        console.log('🚀 ~ changeInputValue ~ error:', error)
+        hotWordList.value = []
+    }
+}, 500)
+
+// 点击热词
+const onHotWord = (item: any) => {
+    // console.log('🚀 ~ onHotWord ~ e:', item.deviceName)
+    keywordIptValue.value = item.deviceName
+}
+
 onMounted(() => {
     if (tokenNew) {
         getUserListData()
@@ -427,7 +472,14 @@ onMounted(() => {
 
                 <div class="header-item" v-if="isShowLogout">
                     <a @click="onJumpMessage" v-if="!form.msgNum || form.msgNum == 0">消息</a>
-                    <el-badge v-else :value="form.msgNum ? Number(form.msgNum) : ''" :max="99" @click="onJumpMessage" style="margin: 0 10px;">消息</el-badge>
+                    <el-badge
+                        v-else
+                        :value="form.msgNum ? Number(form.msgNum) : ''"
+                        :max="99"
+                        @click="onJumpMessage"
+                        style="margin: 0 10px"
+                        >消息</el-badge
+                    >
                     <div class="line"></div>
                 </div>
                 <div class="header-item" v-if="isShowLogout">
@@ -467,6 +519,7 @@ onMounted(() => {
                         placeholderText =
                             searchTypeName === '装备' ? '搜索装备关键词' : '搜索需求关键词'
                     "
+                    @input="changeInputValue"
                 />
                 <button class="search-btn" @click="searchKeywordBtn">搜索</button>
                 <div
@@ -505,6 +558,17 @@ onMounted(() => {
                         需求
                     </div>
                 </div>
+                <!-- 热词 -->
+                <div class="hot-word">
+                    <span
+                        v-for="(item, index) in hotWordList"
+                        :key="index"
+                        @click="onHotWord(item)"
+                        style="margin-right: 10px; cursor: pointer"
+                    >
+                        {{ item.deviceName }}
+                    </span>
+                </div>
             </div>
             <div class="cart-container">
                 <div class="cart-icon" @click="onCarts">
@@ -758,6 +822,13 @@ onMounted(() => {
             // width: 1000px;
             // margin-left: 40px;
 
+            .hot-word {
+                margin: 15px 0 0 10%;
+                max-width: 80%;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
             .left-check-box {
                 position: absolute;
                 left: 0;