company searchBar fiexed axios loading

f75e4a6e · xinzhedeai · 51f67f4e · f75e4a6e · f75e4a6e · f75e4a6e
Commit f75e4a6e authored Mar 11, 2024 by xinzhedeai
Show whitespace changes
Inline Side-by-side

Showing with 66 additions and 12 deletions

index.html index.html +9 -5

http.js js/http.js +17 -0

yh-company.html views/yh-company.html +22 -5

yh-company.js views/yh-company.js +18 -2

No files found.
--- a/index.html
+++ b/index.html
@@ -10,15 +10,15 @@
 		<style>
 			
 			.wrapper .item{
-			        width: 4.85rem;
-			        float: left;
+			        /* width: 4.85rem; */
+			        /* float: left; */
 					height: 3.6rem;
 			        display: flex;
 			        justify-content: center;
 			        align-items: center;
 			        /* background-color: pink; */
 			        margin-right: 0.05rem;
-			        margin-left: 0.09rem;
+			        margin-left: 0.05rem;
 			        margin-top: 0.2rem;
 			}
 			.wrapper .item .bgImg{
@@ -43,16 +43,20 @@
 	<body>
 		<div id="app">
 			<div class="wrapper">
+				<div class="">
+					
+				</div>
 				<div class="item" @click="nav">
 					<p class="bgImg">
 						<span>隐患管理</span>
 					</p>
-				</div>
-				<div class="item">
 					<p class="bgImg">
 						<span>隐患审核</span>
 					</p>
 				</div>
+				<div class="item">
+					
+				</div>
 			</div>
 		</div>
 	</body>

--- a/js/http.js
+++ b/js/http.js
@@ -12,9 +12,26 @@ axios.defaults.headers.common['Authorization'] = localStorage.getItem('Authoriza
 // 请求拦截器

 axios.interceptors.request.use(config => {
+	vant.Toast.loading({
+	  message: '加载中...',
+	  forbidClick: true,
+	  loadingType: 'spinner',
+	});
 	return config
 })

+// 响应拦截器
+axios.interceptors.response.use((res) => {
+    // 成功的响应数据  服务器的相关的数据返回来之后，响应拦截器能够检测到，可以做一些事
+   
+   vant.Toast.clear()
+    return res;
+}, (error) => {
+    // 响应失败的时候的回调函数
+    return Promise.reject(new Error(error))
+})
+
+
 var http = {
 	get: function(url, params) {
 		return new Promise((resolve, reject) => {

--- a/views/yh-company.html
+++ b/views/yh-company.html
@@ -12,7 +12,7 @@
 				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAATBJREFUWEdjZBhgwDjA9jMMPgf49b6vZ/j/v4GSkPn3/6/jllLRA8SYgRECMAcYKnC8IMYAdDXnH/yQoIoDcjwESbb/ybvfDBtOfWEYdQDVQgAUpKfv/ECJClMVDjAflzgoCv4zMOBMgIyMjAc2FQs2wgzFmQhBaYDaDmBkYHBgYGRsINoBpKZCQonQr+fd/1EHkBQCoCAlFSCXA7497/aD9G8uEXIE0SRHASxOkR0RYMYD5oIswiUOy4ZUccCzd39RLJISYgbzcYlTNQRIDX70XEBxCAx5B6B7gKxESE5RTNVEiC+10zwXDPk0MJoLKM4FlKaBoeMAcFMcGfz/32CsxPGe1BAAqT9774cgqMrFqhfU30CSA7WMwE0yanRGSHYstGk2+LpmJPuEQg0DHgIApKUsP22DHJIAAAAASUVORK5CYII=');
 				background-repeat: no-repeat;
 			    padding: 0.1rem;
-				padding-left: 0.6rem;
+				padding-left: 0.8rem;
 				height: 0.5rem;
 				line-height: 0.5rem;
 				background-size: contain;
@@ -22,6 +22,23 @@
 				text-overflow: ellipsis;
 				width: 8rem;
 			}
+			/* 固定顶部搜索栏样式处理 */
+			.page-wrapper{
+				position: relative;
+				overflow: hidden;
+			}
+			.search-wrapper{
+				position: fixed;
+				z-index: 1;
+				width: 100%;
+			}
+			
+			.list-content-wrapper{
+				margin-top: 1.2rem;
+			}
+
+
+

 			.list-content-fz {
 				font-size: 0.4itemWrapperrem;
@@ -47,11 +64,11 @@
 		</style>
 	</head>
 	<body>
-		<div id="app">
-			<div class="searchWrapper">
-				<van-search v-model="value" placeholder="请输入搜索关键词" />
+		<div id="app" class="page-wrapper">
+			<div class="search-wrapper">
+				<van-search v-model="companyName" placeholder="请输入搜索关键词" @search="onSearch" @clear="onClear" />
 			</div>
-			<div class="content" v-cloak>
+			<div class="list-content-wrapper" v-cloak>
 				<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了"
 					@load="getList">
 					<van-cell v-for="item in list" :key="item">

--- a/views/yh-company.js
+++ b/views/yh-company.js
@@ -7,7 +7,7 @@ window.addEventListener("load", function() {
 		el: '#app',
 		data() {
 			return {
-				value: '',
+				companyName: '',
 				list: [],
 				loading: false,
 				finished: false,
@@ -23,13 +23,29 @@ window.addEventListener("load", function() {
 			nav(item){
 				location.href='./yh-list.html'
 			},
+			resetSearchForm(){
+				this.page = 0
+				this.size = 20
+				this.total = 0
+				this.list = []
+				this.finished = false;
+			},
+			onClear(){
+				this.resetSearchForm()
+				this.getList()
+			},
+			onSearch(val){
+				this.resetSearchForm()
+				console.log('search', val)
+				this.getList()
+			},
 			getList(){
 				console.log('到底了，开始加载。。。。')
 				
 				http.get('/api/thCompany',{
 					page: this.page++,// 每次请求增加下一页
 					size: this.size,
-					companyName: '',
+					companyName: this.companyName,
 					sort: 'companyId,desc',
 					companyCounty: '371071000000'
 				}).then((res)=>{