PC-mj/components/Header.vue

<template>
    <header class="header flexacenter">
        <div class="header-box flexacenter">
            <img class="logo-icon" @click="goIndex" src="@/assets/img/logo-icon.png" />
            <div class="header-right flexacenter">
                <div class="search-box flexacenter">
                    <input class="flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
                    <img class="search-icon" src="@/assets/img/search-icon.png" @click="searchClick" />
                    <div class="history-box" v-if="historicalSearchState">
                        <div class="history-title">历史搜索</div>
                        <div class="history-list">
                            <div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
                        </div>
                    </div>
                </div>
                <div class="my-btn-list flexacenter">
                    <div class="my-btn-item flexcenter">我的收藏</div>
                    <div class="my-btn-item flexcenter">我的面经</div>
                </div>
                <div class="sponsor-btn flexcenter" @click="goPublish">
                    <img class="add-icon" src="@/assets/img/add-icon.svg" />
                    发布面经
                </div>
            </div>
        </div>
    </header>

    <MyPopup v-if="false"></MyPopup>

</template>

<script setup>
const router = useRouter()
const route = useRoute()
let keyword = ref("")

onMounted(() => {
    getHistoricalSearchList()

    getUser()
})

const getUser = () => {
    MyUserInfoHttp().then(res => {
        if (res.code != 200) return
        let data = res.data
        console.log("data", data)
        let count = data['count']
    })
}

watchEffect(() => {
    keyword.value = route.query["keyword"]
})

// 点击跳转首页
const goIndex = () => {
    router.push(`/index.html`)
}
// 点击发布
const goPublish = () => {
    router.push(`/publish`)
}

// 获取历史记录方法
const getHistoricalSearchList = () => {
    const list = localStorage.getItem("historical-Search")

    if (list) historicalSearchList.value = JSON.parse(list) || []
    else historicalSearchList.value = []
}

// 存入历史记录 随便去重 和 限制长度 方法
const setHistoricalSearchList = () => {
    if (!keyword.value) return
    historicalSearchList.value.unshift(keyword.value)
    historicalSearchList.value = [...new Set(historicalSearchList.value)]
    historicalSearchList.value = historicalSearchList.value.slice(0, 10)

    localStorage.setItem("historical-Search", JSON.stringify(historicalSearchList.value))
}

// 搜索点击事件
const searchClick = () => {
    router.push(`/index.html?keyword=${keyword.value}`)
    setHistoricalSearchList()
    searchBlur()
}

// 搜索获取焦点
const searchFocus = () => {
    if (historicalSearchList.value.length == 0) return
    historicalSearchState.value = true
}

// 搜索失去焦点
const searchBlur = () => {
    setTimeout(() => (historicalSearchState.value = false), 300)
}

// 点击历史记录 item
const handleClickHistoricalItem = value => {
    keyword.value = value
    searchClick()
}

// 点击清除搜索
const handleClickClear = () => {
    console.log("点击清除")
}

let historicalSearchState = ref(false) // 历史记录弹窗状态
let historicalSearchList = ref([]) // 历史记录数据
</script>

<style scoped lang="less">
header.header {
    min-width: 1200px;
    padding-top: 30px;
    margin-bottom: 51px;

    .header-box {
        margin: 0 auto;
        width: 1200px;
        justify-content: space-between;

        .logo-icon {
            width: 103px;
            height: 50px;
            cursor: pointer;
        }

        .header-right {
            .search-box {
                width: 320px;
                height: 32px;
                background-color: #fff;
                border: 1px solid rgba(235, 235, 235, 1);
                border-radius: 104px;
                position: relative;

                input {
                    height: 100%;
                    border: none;
                    outline: none;
                    padding: 0 16px;
                    font-size: 13px;
                    border-radius: 104px;
                }

                .search-icon {
                    width: 20px;
                    height: 20px;
                    margin: 0 16px;
                    cursor: pointer;
                }

                .history-box {
                    position: absolute;
                    top: 36px;
                    left: 0;
                    width: 320px;
                    background-color: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(235, 235, 235, 1);
                    border-radius: 10px;
                    padding-top: 15px;
                    z-index: 2;
                    padding-bottom: 14px;

                    .history-title {
                        font-size: 13px;
                        color: #aaaaaa;
                        padding-left: 16px;
                        margin-bottom: 9px;
                    }

                    .history-list {
                        .history-item {
                            font-size: 14px;
                            color: #333;
                            height: 30px;
                            line-height: 30px;
                            padding: 0 16px;
                            cursor: pointer;
                        }
                    }
                }
            }

            .my-btn-list {
                margin-left: 20px;
                height: 32px;
                background-color: #fff;
                border: 1px solid rgba(235, 235, 235, 1);
                border-radius: 5px;
                font-size: 13px;
                padding: 0 7px;
                color: #555555;

                .my-btn-item {
                    padding: 0 10px;
                    cursor: pointer;
                    height: 100%;
                    position: relative;

                    &:not(:last-of-type)::after {
                        content: "|";
                        color: #d7d7d7;
                        position: absolute;
                        right: 0;
                    }
                }
            }

            .sponsor-btn {
                width: 130px;
                height: 32px;
                font-size: 13px;
                color: #000;
                margin-left: 20px;
                background: rgba(253, 223, 109, 1);
                border-radius: 5px;
                cursor: pointer;
                .add-icon {
                    width: 14px;
                    height: 14px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>