300 lines
9.0 KiB
Vue
300 lines
9.0 KiB
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" :class="{'history-box-show':historicalSearchState }" v-if="historicalSearchState"> -->
|
|
<div class="history-box" :class="{ 'history-box-show': 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> -->
|
|
<div class="my-btn-list flexacenter">
|
|
<div class="my-btn-item flexcenter" v-for="item in tabList" :key="item.type" @click="handleUser(item.type)">{{ item.name }}</div>
|
|
</div>
|
|
<div class="sponsor-btn flexcenter" @click="goPublish">
|
|
<img class="add-bj" src="@/assets/img/add-bj.svg" />
|
|
<img class="add-icon" src="@/assets/img/add-icon.svg" />
|
|
发布投票
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<MyPopup ref="MyPopupRef" :tabList="tabList"></MyPopup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
let isNeedLogin = inject("isNeedLogin")
|
|
const goLogin = inject("goLogin")
|
|
const isGetLoginState = inject("isGetLoginState")
|
|
|
|
const tabList = [
|
|
{ name: "我的收藏", type: "collect" },
|
|
{ name: "我参与的投票", type: "takevote" },
|
|
{ name: "我发起的投票", type: "publish" },
|
|
]
|
|
|
|
let keyword = ref("")
|
|
|
|
onMounted(() => {
|
|
getHistoricalSearchList()
|
|
keyword.value = route.query["keyword"]
|
|
|
|
|
|
const iscollect = route.query.iscollect
|
|
const isissue = route.query.isissue
|
|
if (iscollect == 1) judgeLoginStateUser("collect")
|
|
if (isissue == 1) judgeLoginStateUser("publish")
|
|
})
|
|
|
|
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 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 = () => {
|
|
// 在首页页面 搜索 直接跳转 其他页面需要打开新页面
|
|
if (route.name == "index.html") router.push(`/index.html?keyword=${keyword.value || ""}`)
|
|
else 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: 71px;
|
|
height: 38px;
|
|
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;
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
pointer-events: none;
|
|
&.history-box-show {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
.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;
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 13px;
|
|
color: #000;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
|
|
.add-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.add-bj {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|