A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a1300399510@qq.com 提交于 2023/04/06 -15:00:01

Browse Source
This commit is contained in:
XiaoMo 2023-04-06 15:00:13 +08:00
parent 287bc37315
commit bcf7375b76
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/SearchBox.vue
View File

@ -53,6 +53,7 @@ export default {
watch: { watch: {
historicalSearch(val, oldval) { historicalSearch(val, oldval) {
console.log("val", val);
if (val.length > 10) this.historicalSearch.slice(0, 10) if (val.length > 10) this.historicalSearch.slice(0, 10)
this.$store.commit('setHistoricalSearch', val) this.$store.commit('setHistoricalSearch', val)
} }

1
src/store/index.js
View File

@ -11,6 +11,7 @@ export default new Vuex.Store({
}, },
mutations: { mutations: {
setHistoricalSearch(state, payload) { setHistoricalSearch(state, payload) {
payload = [...new Set(payload)]
state.historicalSearch = payload state.historicalSearch = payload
localStorage.setItem('historicalSearch', JSON.stringify(payload)); localStorage.setItem('historicalSearch', JSON.stringify(payload));

20
src/views/search/searchResult/SearchResult.vue
View File

@ -4,7 +4,7 @@
<div class="search-input-box flexacenter"> <div class="search-input-box flexacenter">
<div class="search-input flexacenter"> <div class="search-input flexacenter">
<img class="search-input-icon" src="@/assets/img/headerNav/search.png"> <img class="search-input-icon" src="@/assets/img/headerNav/search.png">
<input class="search-input-input flex1" @keyup.enter="getSearchResult()" placeholder="请输入搜索关键词" <input class="search-input-input flex1" @keyup.enter="handleSearchResult()" placeholder="请输入搜索关键词"
v-model="kw" /> v-model="kw" />
<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png"> <img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
</div> </div>
@ -14,7 +14,6 @@
<!-- 结果数量 --> <!-- 结果数量 -->
<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div> <div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
<div class="result-box flexacenter" v-if="list.length != 0 || loading"> <div class="result-box flexacenter" v-if="list.length != 0 || loading">
<div class="result-item flexflex" v-for="(item, index) in list" :key="index"> <div class="result-item flexflex" v-for="(item, index) in list" :key="index">
<div class="result-header one-line"> <div class="result-header one-line">
@ -98,9 +97,8 @@ export default {
historicalSearch(val, oldval) { historicalSearch(val, oldval) {
if (val.length > 10) this.historicalSearch.slice(0, 10) if (val.length > 10) this.historicalSearch.slice(0, 10)
this.$store.commit('setHistoricalSearch', val) this.$store.commit('setHistoricalSearch', val)
}
}, },
},
methods: { methods: {
// 处理点击取消的返回上一页 // 处理点击取消的返回上一页
@ -109,6 +107,15 @@ export default {
else this.$router.push('/recommend') else this.$router.push('/recommend')
}, },
// 处理搜索框回车
handleSearchResult() {
let kw = this.kw
// this.historicalSearch.push(kw)
if (!this.historicalSearch.includes(kw)) this.historicalSearch.unshift(kw)
this.getSearchResult()
},
// 获取搜索结果数据 // 获取搜索结果数据
getSearchResult() { getSearchResult() {
if (!this.kw) return if (!this.kw) return
@ -123,7 +130,6 @@ export default {
}).then(res => { }).then(res => {
let data = res.data let data = res.data
this.list = data.data this.list = data.data
this.count = data.count this.count = data.count
this.limit = data.limit this.limit = data.limit
@ -132,9 +138,7 @@ export default {
document.body.scrollTop = 0; document.body.scrollTop = 0;
this.searchResultState = false this.searchResultState = false
}).finally(() => { }).finally(() => {
let kw = this.kw
this.historicalSearch.push(kw)
if (!this.historicalSearch.includes(kw)) this.historicalSearch.unshift(kw)
}) })
}, },