Skip to content

G
GaoQuYingJiH5-SDT
Commit f75e4a6e authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

company searchBar fiexed axios loading

parent 51f67f4e
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 12 deletions
index.html
View file @ f75e4a6e
...@@ -10,15 +10,15 @@ ...@@ -10,15 +10,15 @@
<style> <style>
.wrapper .item{ .wrapper .item{
width: 4.85rem; /* width: 4.85rem; */
float: left; /* float: left; */
height: 3.6rem; height: 3.6rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
/* background-color: pink; */ /* background-color: pink; */
margin-right: 0.05rem; margin-right: 0.05rem;
margin-left: 0.09rem; margin-left: 0.05rem;
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.wrapper .item .bgImg{ .wrapper .item .bgImg{
...@@ -43,16 +43,20 @@ ...@@ -43,16 +43,20 @@
<body> <body>
<div id="app"> <div id="app">
<div class="wrapper"> <div class="wrapper">
<div class="">
</div>
<div class="item" @click="nav"> <div class="item" @click="nav">
<p class="bgImg"> <p class="bgImg">
<span>隐患管理</span> <span>隐患管理</span>
</p> </p>
</div>
<div class="item">
<p class="bgImg"> <p class="bgImg">
<span>隐患审核</span> <span>隐患审核</span>
</p> </p>
</div> </div>
<div class="item">
</div>
</div> </div>
</div> </div>
</body> </body>
......
js/http.js
View file @ f75e4a6e
...@@ -12,9 +12,26 @@ axios.defaults.headers.common['Authorization'] = localStorage.getItem('Authoriza ...@@ -12,9 +12,26 @@ axios.defaults.headers.common['Authorization'] = localStorage.getItem('Authoriza
// 请求拦截器 // 请求拦截器
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
vant.Toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
});
return config return config
}) })
// 响应拦截器
axios.interceptors.response.use((res) => {
// 成功的响应数据 服务器的相关的数据返回来之后，响应拦截器能够检测到，可以做一些事
vant.Toast.clear()
return res;
}, (error) => {
// 响应失败的时候的回调函数
return Promise.reject(new Error(error))
})
var http = { var http = {
get: function(url, params) { get: function(url, params) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
......
views/yh-company.html
View file @ f75e4a6e
...@@ -12,7 +12,7 @@ ...@@ -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-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAATBJREFUWEdjZBhgwDjA9jMMPgf49b6vZ/j/v4GSkPn3/6/jllLRA8SYgRECMAcYKnC8IMYAdDXnH/yQoIoDcjwESbb/ybvfDBtOfWEYdQDVQgAUpKfv/ECJClMVDjAflzgoCv4zMOBMgIyMjAc2FQs2wgzFmQhBaYDaDmBkYHBgYGRsINoBpKZCQonQr+fd/1EHkBQCoCAlFSCXA7497/aD9G8uEXIE0SRHASxOkR0RYMYD5oIswiUOy4ZUccCzd39RLJISYgbzcYlTNQRIDX70XEBxCAx5B6B7gKxESE5RTNVEiC+10zwXDPk0MJoLKM4FlKaBoeMAcFMcGfz/32CsxPGe1BAAqT9774cgqMrFqhfU30CSA7WMwE0yanRGSHYstGk2+LpmJPuEQg0DHgIApKUsP22DHJIAAAAASUVORK5CYII=');
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0.1rem; padding: 0.1rem;
padding-left: 0.6rem; padding-left: 0.8rem;
height: 0.5rem; height: 0.5rem;
line-height: 0.5rem; line-height: 0.5rem;
background-size: contain; background-size: contain;
...@@ -22,6 +22,23 @@ ...@@ -22,6 +22,23 @@
text-overflow: ellipsis; text-overflow: ellipsis;
width: 8rem; 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 { .list-content-fz {
font-size: 0.4itemWrapperrem; font-size: 0.4itemWrapperrem;
...@@ -47,11 +64,11 @@ ...@@ -47,11 +64,11 @@
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app" class="page-wrapper">
<div class="searchWrapper"> <div class="search-wrapper">
<van-search v-model="value" placeholder="请输入搜索关键词" /> <van-search v-model="companyName" placeholder="请输入搜索关键词" @search="onSearch" @clear="onClear" />
</div> </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="没有更多了" <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了"
@load="getList"> @load="getList">
<van-cell v-for="item in list" :key="item"> <van-cell v-for="item in list" :key="item">
......
views/yh-company.js
View file @ f75e4a6e
...@@ -7,7 +7,7 @@ window.addEventListener("load", function() { ...@@ -7,7 +7,7 @@ window.addEventListener("load", function() {
el: '#app', el: '#app',
data() { data() {
return { return {
value: '', companyName: '',
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
...@@ -23,13 +23,29 @@ window.addEventListener("load", function() { ...@@ -23,13 +23,29 @@ window.addEventListener("load", function() {
nav(item){ nav(item){
location.href='./yh-list.html' 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(){ getList(){
console.log('到底了，开始加载。。。。') console.log('到底了，开始加载。。。。')
http.get('/api/thCompany',{ http.get('/api/thCompany',{
page: this.page++,// 每次请求增加下一页 page: this.page++,// 每次请求增加下一页
size: this.size, size: this.size,
companyName: '', companyName: this.companyName,
sort: 'companyId,desc', sort: 'companyId,desc',
companyCounty: '371071000000' companyCounty: '371071000000'
}).then((res)=>{ }).then((res)=>{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment