代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>代办事项</title>
</head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
.daiBaiDiv{
width: 575px;
height: 597px;
background: #f8f8f8;
margin: auto auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
position: absolute;
/*padding: 15px;*/
overflow-y: hidden;
/*overflow-x: hidden;*/
/*border: solid 1px #9E9E9E;*/
}
.search_daiban{
width: 230px;
height: 30px;
line-height: 30px;
/* border-radius: 3px; */
float: right;
border: solid 1px #EEEEEE;
border-radius: 4px;
margin: 13px 5px 0 0;
padding-left: 10px;
}
.daiBai_li{
height: 542px;
overflow-y: scroll;
}
.daiBai_li li{
list-style: none;
margin: 0px 0 16px 0;
position: relative;
background: #ffffff;
height: 100px;
cursor: pointer;
}
.daiBai_li .daiBai_li_img{
position: absolute;
width: 56px;
height: 56px;
left: 22px;
top: 22px;
}
.daiBai_li p,.daiBai_li span{
position: absolute;
font-size: 14px;
left: 95px;
font-family: "微软雅黑";
}
.daiBai_li .name{
top: 18px;
font-size: 13px;
color: #666666;
letter-spacing: 2px;
width: 340px;
overflow: hidden;
height: 22px;
}
.daiBai_li .title{
top: 43px;
font-size: 15px;
color: #333333;
letter-spacing: 2px;
}
.daiBai_li .from{
top: 69px;
font-size: 13px;
color: #999999;
letter-spacing: 2px;
width: 340px;
overflow: hidden;
height: 22px;
}
.daiBai_li .date{
right: 20px;
left: unset;
top: 17px;
font-size: 14px;
color: #666666;
}
::-webkit-scrollbar-track-piece { /*滚动条凹槽的颜色，还可以设置边框属性*/
background-color:#f8f8f8;
}
::-webkit-scrollbar {/*滚动条的宽度*/
width:5px;
height:5px;
}
::-webkit-scrollbar-thumb {/*滚动条的设置*/
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
float: right;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
.daiBai_title{
height: 56px;
line-height: 56px;
background: #FFFFFF;
border-bottom: solid 1px #e0e0e0;
padding-left: 20px;
font-size: 16px;
letter-spacing: 4px;
}
.daiBai_title span{
font-size: 18px;
color: #f80000;
cursor: pointer;
}
.search_button{
float: right;
width: 54px;
height: 30px;
line-height: 30px;
color: white;
background: #599fe6;
border: none;
margin: 13px 10px 0 0;
border-radius: 4px;
cursor: pointer;
}
.input_cancel_button{
position: absolute;
top: 24px;
right: 140px;
width: 10px;
cursor: pointer;
}
</style>
<script src="javascript/api.js"></script> <!-- api.js必须放到最开头 -->
<script src="javascript/axios.js"></script>
<script src="javascript/vue.js"></script>
<script src="javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="daiBaiDiv" id ="daiBaiDiv">
<div class="daiBai_title">
共搜索出<span>{{daiBai_li_length}}</span>条结果
<button class="search_button" @click="refresh" style="background: #8ac140;">刷新</button>
<button class="search_button" @click="searchDaiBan">搜索</button>
<input type="" name="" id="" value="" v-model="inputSearch" placeholder="输入发送人姓名、任务标题搜索" class="search_daiban" @keyup.enter="searchDaiBan"/>
<img v-if="show_cancel_button" class="input_cancel_button" src="images/weChat/no.png" @click="inputCancel"/>
</div>
<div class="daiBai_li" >
<ul>
<li v-for="item in daiBai_li" @click="openDaiBan">
<img onerror="this.src='images/lefticon/user.png'" class="daiBai_li_img" :src="item.sendImg?item.sendImg:'images/lefticon/user.png'"/>
<p class="name">{{item.sendName}}/{{item.sendDep}}</p>
<p class="title">{{item.title}}</p>
<p class="from">来自 ：{{item.sendFrom}}</p>
<span class="date">{{item.createdDate}}</span>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
let TOKEN = localStorage.token;
new Vue({
el:'#daiBaiDiv',
data:{
inputSearch:'',
lastInputSearch:'',
url:developURL+':8085/task/selectByCondition?access_token='+TOKEN,
pageSize:5,
isLoad:true,
show_cancel_button:false,
daiBai_li_length:0,
daiBai_li:[
],
},
methods:{
refresh(){
location.reload();
},
inputCancel(){
this.inputSearch='';
this.refresh();
},
searchDaiBan(){/*搜索*/
if(this.inputSearch.length==0){
return false;
}else{
if(this.inputSearch!=this.lastInputSearch){/*说明系重新查找*/
document.removeEventListener('scroll',this.loadMore,true);
this.daiBai_li = [];
this.lastInputSearch=this.inputSearch;
this.getData();
}
}
},
dealData(date){
let d = new Date(date);
let mon = d.getMonth()>9?d.getMonth()+1:'0'+(d.getMonth()+1);
let D1ate =d.getDate()>9?d.getDate():'0'+d.getDate();
let hours = d.getHours()>9?d.getHours():'0'+d.getHours();
let minutes = d.getMinutes()>9?d.getMinutes():'0'+d.getMinutes();
// return d.getMonth() + 1+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes();
return mon+'-'+D1ate+' '+hours+':'+minutes;
},
getData(){/*获取数据*/
this.isLoad=false;/*不允许再查，已经到底*/
let _this = this;
let layerIndex=layer.msg('加载中', {
icon: 16
,shade: 0.01,
time: 60000,/*超过10秒，网络出问题*/
},function(){
if(_this.isLoad===false){
layer.alert('网络出问题，请稍后再试');
}
});
axios({
method:'post',
url:this.url,
headers : {
'Content-Type' : 'application/json'
},
data:{
"state":0,
"search":this.inputSearch,
"pageQuery":{
"pageSize":10,
"pageNum":this.daiBai_li.length,
}
}
}).then((res)=>{
console.log(res);
if(res.data.codeData.length===0){
layer.msg('无更多数据');
_this.isLoad=true;
return false;
}
for(let i = 0;i<res.data.codeData.length;i++){
res.data.codeData[i].createdDate=this.dealData(res.data.codeData[i].createdDate);
this.daiBai_li.push(res.data.codeData[i]);
}
// layer.closeAll('loading');
_this.isLoad=true;
_this.daiBai_li_length = res.data.extra.Total;
layer.close(layerIndex);
document.addEventListener('scroll',this.loadMore,true);/*绑定滚动事件*/
}).catch((error)=>{
console.log(error);
})
},
loadMore(){
if($('.daiBai_li').scrollTop()+$('.daiBai_li').height()>$('.daiBai_li ul').height()){
document.removeEventListener('scroll',this.loadMore,true);/*解绑滚动事件，避免多次请求*/
this.getData();
}
},
openDaiBan(){
parent.openDaiBan();
},
},
mounted(){
document.addEventListener('scroll',this.loadMore,true);/*绑定事件*/
this.getData();
},
updated(){
if(this.inputSearch.length!=0){
this.show_cancel_button=true;
}else{
this.show_cancel_button=false;
}
}
})
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。