a1300399510@qq.com 提交于 2023/04/03 -15:20:02

src/assets/css/public.scss

@@ -160,7 +160,8 @@ section {
 		left: 0;
 		transform: rotate(45deg);
 		transform-origin: bottom;
-		margin-top: 0.01rem;
+		margin-top: 0.05rem;
+		// margin-top: 0.01rem;
 		margin-left: 0.25rem;
 		width: 0.9rem;
 		font-size: 0.3rem;

src/views/search/searchResult/SearchResult.vue

@@ -13,28 +13,30 @@
 
 		<!-- 结果数量 -->
 		<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
+		<el-loading-spinner></el-loading-spinner>
 
 		<div class="result-box flexacenter">
 			<div class="result-item flexflex" v-for="(item, index) in list" :key="index">
 				<div class="result-header one-line">
-					<div class="result-label">租房租房租房</div>
+					<div class="result-label">{{ item.forum }}</div>
 					<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
 				</div>
 
 				<div class="result-content two-lines">
-					<template v-if="index != 0">
-						{{ item.message }}
-					</template>
+					<!-- <template v-if="index != 0"> -->
+					{{ item.message }}
+					<!-- </template> -->
 
-					<div v-else class="reply-visible flexcenter">
+					<!-- <div v-else class="reply-visible flexcenter">
 						回复可见
-					</div>
+					</div> -->
 				</div>
 
 
 				<div class="result-info flexacenter flex1">
 					<div class="user-info flexacenter">
-						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
+						<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">
@@ -51,7 +53,7 @@
 
 
 				<!-- 精华 -->
-				<div class="rightTop">
+				<div class="rightTop" v-if="item.digest > 0">
 					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
 					<span>精华</span>
 				</div>
@@ -61,7 +63,8 @@
 		</div>
 
 		<div class="paging flexcenter">
-			<el-pagination small background layout="prev, pager, next" @current-change="currentXhange" :current-page.sync="page" :page-size="limit" :total="count">
+			<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
+				:current-page.sync="page" :page-size="limit" :total="count">
 			</el-pagination>
 		</div>
 
@@ -75,11 +78,12 @@ export default {
 		return {
 			kw: "",
 			count: 0,
-			limit: 20,
+			limit: 4,
 			nextpage: true,
-			page: 20,
-			list: []
-
+			page: 1,
+			list: [],
+			searchResultState: false,
+			loading: null
 		}
 	},
 	components: {
@@ -103,10 +107,11 @@ export default {
 
 		// 获取搜索结果数据
 		getSearchResult() {
-			this.page = this.page + 1
+			this.startupUnderLoading()
+			if (this.searchResultState) return
+			this.searchResultState = true
 			this.$http.post("/api/search", {
 				keyword: this.kw,
-				// keyword: "helsinki",
 				page: this.page,
 				limit: this.limit
 			}).then(res => {
@@ -115,8 +120,32 @@ export default {
 				this.list = data.data
 				this.count = data.count
 
+				document.documentElement.scrollTop = 0;
+				document.body.scrollTop = 0;
+				this.searchResultState = false
 			})
 		},
+
+		// 点击改变页数
+		currentChange() {
+			console.log("dfgdf", this.page);
+			this.getSearchResult()
+		},
+
+		// 启动加载中
+		startupUnderLoading() {
+			this.loading = this.$loading({
+				lock: true,
+				text: '加载中...',
+				background: 'rgba(0, 0, 0, 0.7)'
+			});
+		},
+
+		// 关闭加载中
+		closeUnderLoading() {
+			this.loading.close();
+		},
+
 	},
 }
 </script>
@@ -241,6 +270,7 @@ export default {
 					.icon-head {
 						width: .64rem;
 						height: .64rem;
+						border-radius: 50%;
 					}
 
 					.user-name {