<template>
<div class="fx t12 column">
<div class="order_search_div fl">
<div class="fx bb">
<ul class="ulOrderTab">
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='全部' }]" @click="changeTab">全部</li>
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='未服务' }]" @click="changeTab">未服务</li>
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='服务中' }]" @click="changeTab">服务中</li>
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='已服务' }]" @click="changeTab">已服务</li>
<li class="h2">
<div v-if="currentTab=='全部'" class="clsLineTab"></div>
</li>
<li class="h2">
<div v-if="currentTab=='未服务'" class="clsLineTab"></div>
</li>
<li class="h2">
<div v-if="currentTab=='服务中'" class="clsLineTab"></div>
</li>
<li class="h2">
<div v-if="currentTab=='已服务'" class="clsLineTab"></div>
</li>
</ul>
</div>
</div>
<div class="h100">
<cube-index-list ref="indexList" :data="listOrder" :navbar="false" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
<div v-for="(item,index) in listOrder" :key="index">
<template-order ref="tItem" :tItem="item" :tTabType="currentTab"></template-order>
</div>
</cube-index-list>
</div>
</div>
</template>
<script>
const initPageSize = 10;
export default {
name: 'iorder',
data() {
return {
listOrder: [],
pageSize: initPageSize,
pageIndex: 0,
totalOrder: 100,
currentTab: '全部',
options: {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false, ////导航条
pullDownRefresh: {
threshold: 60,
stop: 40,
stopTime: 400,
txt: '刷新成功'
},
pullUpLoad: {
threshold: 10,
txt: {
more: '加载更多',
noMore: '暂无更多'
},
visible: true,//坐标Y归零
},
},
};
},
methods: {
////下拉刷新
onPullingDown() {
setTimeout(() => {
this.$refs.indexList.forceUpdate(true)
}, 1000)
},
////加载更多
onPullingUp() {
setTimeout(() => {
if (this.listOrder.length < this.totalOrder) {
// 如果有新数据
this.pageIndex = this.listOrder.length;
var zlcount = this.totalOrder - this.listOrder.length > initPageSize ? initPageSize : this.totalOrder - this.listOrder.length;
this.pageSize = this.pageIndex + zlcount;
this.getListOrder();
} else {
// 如果没有新数据
this.$refs.indexList.forceUpdate();
}
}, 500);
},
//关键字查询
searchByKey() {
this.listOrder = [];
this.pageIndex = 0;
this.pageSize = initPageSize;
this.getListOrder();
},
//切换tab
changeTab(cur) {
this.currentTab = cur.target.innerText;
this.searchByKey();
},
//获取数据
getListOrder() {
setTimeout(() => {
for (var a = this.pageIndex; a < this.pageSize; a++) {
let OrderState;
if (this.currentTab == "全部") {
OrderState = a > 2 ? 0 : a;
} else if (this.currentTab == "未服务") {
OrderState = 0;
} else if (this.currentTab == "服务中") {
OrderState = 1;
} else if (this.currentTab == "已服务") {
OrderState = 2;
}
this.listOrder.push({
Id: a,
UserName: "姓名" + a.toString(),
});
}
}, 500);
}
},
created() {
this.getListOrder();
},
mounted() {},
}
</script>
<style scoped>
.order_search_div {
width: 100%;
height: auto;
background-color: white;
}
.order_search {
width: 271px;
height: 30px;
padding: 4px 7px;
background: #F6F6F6;
border-radius: 15px;
margin: 10px auto;
}
.order_search input {
height: 22px;
width: 200px;
background: #F6F6F6;
}
.tbxSearch {
width: 271px;
height: 30px;
background: rgba(246, 246, 246, 1);
border-radius: 15px;
}
.ulOrderTab {
width: 100%;
}
.ulOrderTab li {
width: 25%;
float: left;
list-style: none;
line-height: 25px;
text-align: center;
}
.clsNotActiveTab {
color: #999999;
font-size: 14px;
font-weight: 400;
}
.clsActiveTab {
color: #333333;
font-size: 16px;
font-weight: 800;
}
.h2 {
margin-top: 6px;
height: 2px;
text-align: center;
}
.clsLineTab {
margin: 0 auto;
width: 20px;
border: 2px solid #36CFC9;
}
</style>
