<!-- 顶部导航 -->
<view class="toptab">
<view v-for="(item,index) in tab" :key="index" :class="current==index ? 'active':''" class="item" @tap="changetab(index,item.status)">
{
{
item.label}}
<view :class="current==index ? 'bottom-line':''"></view>
</view>
</view>
data() {
return {
tab: [{
label: '全部',
status: '',
}, {
label: '待线下支付',
status: 'waitPay',
}, {
label: '待服务',
status: 'waitService',
}, {
label: '已完成',
status: 'complete',
}, {
label: '已取消',
status: 'cancle',
}],
current:0,
list:[1],
datalist:[{
status:'waitPay'},{
status:'waitService'},{
status:'complete'},{
status:'cancle'}],
datalist1:[{
status:'waitPay'},{
status:'waitService'},{
status:'complete'},{
status:'cancle'}],
status:'',
type:0,
};
},
// 顶部导航
changetab(index, status) {
this.datalist = this.datalist1
this.current = index
this.status = status
console.log(status);
console.log(this.datalist);
if (index != 0) {
if (this.datalist) {
// console.log(this.datalist);
this.datalist = this.datalist.filter(item => item.status == status)
}
}
},
.toptab {
padding-top: 30rpx;
overflow-x: scroll;
white-space: nowrap;
background-color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
z-index: 123;
.item {
width: 140rpx;
height: 60rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
text-align: center;
// line-height: 60rpx;
display: inline-block;
// margin-left: 30rpx;
margin-right: 10rpx;
}
.active {
font-weight: 500;
color: #D07F4A!important;
}
.bottom-line {
width: 102rpx;
height: 4rpx;
background: #D07F4A;
border-radius: 2px;
// background: #077840;
margin: 0 auto;
margin-top: 16rpx;
}
}
