PC-mj/components/top-head.vue

<template>
    <section class="header flexacenter">
        <div class="header-box flexacenter">
            <a href="/index.html"><img class="logo-icon" src="@/assets/img/logo-icon.png" /></a>
            <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" @click="handleUser('collect')">我的收藏</div>
                    <div class="my-btn-item flexcenter" @click="handleUser('mj')">我的面经</div>
                </div>
                <div class="sponsor-btn flexcenter" @click="goPublish()">
                    <img class="add-icon" src="@/assets/img/add-icon.svg" />
                    发布面经
                </div>
            </div>
        </div>
    </section>

    <MyPopup ref="MyPopupRef" :count="count"></MyPopup>
</template>

<script setup>
import { useRoute } from "vue-router"

const router = useRouter()
const route = useRoute()

let isNeedLogin = inject("isNeedLogin")
const goLogin = inject("goLogin")
const isGetLoginState = inject("isGetLoginState")

let keyword = ref("")

onMounted(() => {
    getHistoricalSearchList()
    keyword.value = route.query["keyword"]

    // console.log("1")
    const iscollect = route.query.iscollect
    const isissue = route.query.isissue
    // console.log("iscollect", iscollect, "isissue", isissue)

    if (iscollect == 1) judgeLoginStateUser("collect")
    if (isissue == 1) judgeLoginStateUser("mj")
})

const judgeLoginStateUser = key => {
    // console.log(isGetLoginState.value);
    if (isGetLoginState.value == true) {
        setTimeout(() => judgeLoginStateUser(key), 300)
    } else handleUser(key)
}

let count = ref({})

provide("count", count)

const getUser = () => {
    return new Promise((resolve, reject) => {
        MyUserInfoHttp().then(res => {
            if (res.code != 200) return
            let data = res.data
            count.value = data["count"]
            resolve(data)
        })
    })
}

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

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

    // router.push(`/publish`)
    goToURL(`/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 || ""}`)
    goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
    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()
}

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

let MyPopupRef = ref(null)
// 点击我的获取消息
const handleUser = async key => {
    if (isNeedLogin.value) {
        goLogin()
        return
    }

    if (Object.keys(count.value).length === 0) {
        await getUser()
        MyPopupRef.value.cutMy(key, true)
    } else MyPopupRef.value.cutMy(key)
}

defineExpose({
    count,
})
</script>

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

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

        .logo-icon {
            // width: 103px;
            height: 36px;
            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>