a1300399510@qq.com 提交于 2023/04/03 -15:40:01

src/views/search/searchResult/SearchResult.vue

@@ -4,8 +4,9 @@
 		<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" placeholder="请输入搜索关键词" v-model="kw" />
-				<img class="search-input-cross" src="@/assets/img/icon/clear.png">
+				<input class="search-input-input flex1" @keyup.enter="getSearchResult()" placeholder="请输入搜索关键词"
+					v-model="kw" />
+				<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
 			</div>
 
 			<div class="search-input-cancel" @click.stop="handCancel">取消</div>
@@ -13,9 +14,8 @@
 
 		<!-- 结果数量 -->
 		<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
-		<el-loading-spinner></el-loading-spinner>
 
-		<div class="result-box flexacenter">
+		<div class="result-box flexacenter" v-if="false">
 			<div class="result-item flexflex" v-for="(item, index) in list" :key="index">
 				<div class="result-header one-line">
 					<div class="result-label">{{ item.forum }}</div>
@@ -23,20 +23,13 @@
 				</div>
 
 				<div class="result-content two-lines">
-					<!-- <template v-if="index != 0"> -->
 					{{ item.message }}
-					<!-- </template> -->
-
-					<!-- <div v-else class="reply-visible flexcenter">
-						回复可见
-					</div> -->
 				</div>
 
 
 				<div class="result-info flexacenter flex1">
 					<div class="user-info flexacenter">
 						<img class="icon-head" :src="item.avatar">
-						<!-- <svg-icon icon-class="test-head" class-name="icon-head"></svg-icon> -->
 						<div class="user-name">{{ item.author }}</div>
 					</div>
 					<div class="item-data flexacenter">
@@ -59,10 +52,13 @@
 				</div>
 
 			</div>
-
 		</div>
 
-		<div class="paging flexcenter">
+		<div class="result-empty-box flexcenter shadow">
+			<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
+		</div>
+
+		<div v-if="list.length != 0" class="paging flexcenter">
 			<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
 				:current-page.sync="page" :page-size="limit" :total="count">
 			</el-pagination>
@@ -92,10 +88,16 @@ export default {
 
 	mounted() {
 		this.kw = this.$route.query.kw
-
 		this.getSearchResult()
 	},
 
+	watch: {
+		searchResultState(val, oldval) {
+			if (val) this.startupUnderLoading()
+			else this.closeUnderLoading()
+		}
+	},
+
 
 	methods: {
 		// 处理点击取消的返回上一页
@@ -107,7 +109,6 @@ export default {
 
 		// 获取搜索结果数据
 		getSearchResult() {
-			this.startupUnderLoading()
 			if (this.searchResultState) return
 			this.searchResultState = true
 			this.$http.post("/api/search", {
@@ -146,6 +147,12 @@ export default {
 			this.loading.close();
 		},
 
+
+		// 点击清空 input 的值
+		emptyKw() {
+			this.kw = ""
+		},
+
 	},
 }
 </script>
@@ -324,5 +331,18 @@ export default {
 		}
 	}
 
+	.result-empty-box {
+		height: 70vh;
+		width: 9.36rem;
+		background: #fff;
+		margin: 0 auto;
+		border-radius: 0.32rem;
+
+		.result-empty-icon {
+			width: 2.04rem;
+			height: 2.4rem;
+		}
+	}
+
 }
 </style>