no message
This commit is contained in:
A1300399510
250
components/top-head.vue
Normal file
250
components/top-head.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<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")
|
||||
|
||||
let keyword = ref("")
|
||||
|
||||
onMounted(() => {
|
||||
getHistoricalSearchList()
|
||||
keyword.value = route.query["keyword"]
|
||||
})
|
||||
let count = ref({})
|
||||
|
||||
const getUser = () => {
|
||||
MyUserInfoHttp().then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
count.value = data["count"]
|
||||
})
|
||||
}
|
||||
|
||||
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 = key => {
|
||||
if (isNeedLogin.value) {
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
if (Object.keys(count.value).length === 0) getUser()
|
||||
MyPopupRef.value.cutMy(key)
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user