![](https://i-blog.csdnimg.cn/blog_migrate/1dda6033971ccabb574b4fdee8f7a12f.png)
主要逻辑:
1、给每个tab选项卡添加点击方法,change执行后的btnnum数值和view中的相等则添加btna样式,成为选中状态。
2、通过接口获取到订单数据后赋值给两个变量,order_lists存储订单数据,show_lists用来展示不同状态的订单数据。
3、change方法里循环判断每条订单的数据,然后将符合该状态下的订单赋值到show_lists里面。
//前端主要代码
<view class="head">
<view class="headbtn">
<view class="btn" @tap="change(0)" :class="{btna:btnnum == 0}">全部</view>
</view>
<view class="headbtn">
<view class="btn" @tap="change(1)" :class="{btna:btnnum == 1}">待付款</view>
</view>
<view class="headbtn">
<view class="btn" @tap="change(3)" :class="{btna:btnnum == 3}">待发货</view>
</view>
<view class="headbtn">
<view class="btn" @tap="change(5)" :class="{btna:btnnum == 5}">已发货</view>
</view>
<view class="headbtn">
<view class="btn" @tap="change(9)" :class="{btna:btnnum == 9}">已完成</view>
</view>
</view>
//这里用到的until.方法都是自己封装或基于原uniapp方法封装的,功能语义化
<script>
const until = require('../../../../util.js')
export default {
data() {
return {
title: '我的订单',
btnnum: 0,
order_lists : '',//获取的订单列表
show_lists : '',//显示的订单列表
};
},
onLoad() {
this.loadData()
},
methods: {
loadData(){
let _this = this
until.ly_request({
url : 'shop/order/my',
method : 'get',
success : function(res){
//console.log(res)
until.tips(res)
_this.order_lists = res.data.data.data_list
_this.show_lists = res.data.data.data_list
}
})
},
change(e) {
this.btnnum = e
// console.log(this.btnnum)
if(this.btnnum == 0){
this.show_lists = this.order_lists
// console.log(this.show_lists)
}else{
this.show_lists = []
for(let i=0;i<this.order_lists.length;i++){
if(this.order_lists[i].status == this.btnnum){
this.show_lists.push(this.order_lists[i])
}
}
}
}
},
}
</script>