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

src/components/SearchBox.vue

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

src/store/index.js

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

src/views/search/searchResult/SearchResult.vue

@@ -4,7 +4,7 @@
 		<div class="search-input-box flexacenter">
 			<div class="search-input flexacenter">
 				<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" />
 				<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
 			</div>
@@ -14,7 +14,6 @@
 
 		<!-- 结果数量 -->
 		<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
-
 		<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-header one-line">
@@ -98,10 +97,9 @@ export default {
 		historicalSearch(val, oldval) {
 			if (val.length > 10) this.historicalSearch.slice(0, 10)
 			this.$store.commit('setHistoricalSearch', val)
-		}
+		},
 	},
 
-
 	methods: {
 		// 处理点击取消的返回上一页
 		handCancel() {
@@ -109,6 +107,15 @@ export default {
 			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() {
 			if (!this.kw) return
@@ -123,7 +130,6 @@ export default {
 			}).then(res => {
 				let data = res.data
 
-
 				this.list = data.data
 				this.count = data.count
 				this.limit = data.limit
@@ -132,9 +138,7 @@ export default {
 				document.body.scrollTop = 0;
 				this.searchResultState = false
 			}).finally(() => {
-				let kw = this.kw
-				this.historicalSearch.push(kw)
-				if (!this.historicalSearch.includes(kw)) this.historicalSearch.unshift(kw)
+
 			})
 		},