<
div
class
=
"navigation"
>
//这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值
<
span
v-for
=
"(item, index) in navItems"
v-touch:tap
=
" { event: navChange, params: [index] }"
>
<
em
> {{item.text}} </
em
>
</
span
>
</
div
>
//上面的v-touch:tap 是我们自己封装的点击事件指令，跟v-click用法差不多
<
div
class
=
"content"
>
<
div
class
=
"main"
>
//div item中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历
<
div
class
=
"item"
v-for
=
"item in orderAllItem[tabIndex]"
>
<
div
class
=
"title"
>
<
span
class
=
"id"
>订单号：{{item.orderId}}</
span
>
<
span
class
=
"status"
>{{item.statusName}}</
span
>
</
div
>
<
div
class
=
"toys"
v-touch:tap
=
"{ event: goToDetail, params: [item.orderId]}"
>
<
div
class
=
"toy"
v-for
=
"toy in item.toys"
>
<
img
class
=
"toyImg"
:src
=
"toy.image"
/>
<
div
class
=
"area"
>
<
em
class
=
"name"
>{{toy.toyName}}</
em
>
<
span
class
=
"age"
>适合年龄：{{toy.ageRange}}</
span
</div>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
var
_default = (
function
(){
var
navs = [
{
'text'
:
'全部订单'
,
},
{
'text'
:
'待付款'
,
},
{
'text'
:
'待收货'
,
},
{
'text'
:
'待归还'
,
},
{
'text'
:
'已完成'
,
}
];
var
orders= [
//因为没有合适的数据来源，所以假装这里就是从后端请求的所有的订单集合，在下边data中你需要吧你分类的订单根据状态进行分类。
];
return
{
name:
'index'
,
mounted:
function
(){
},
destoryed:
function
(){
},
data:
function
(){
//待付款
var
paymentsItem = [];
//待收货
var
receiptsItem = [];
//待归还
var
returnsItem = [];
//已完成
var
completesItem = [];
//把所有不同状态的订单通过if判断push到相对应的订单状态集合中。
orders.forEach(
function
(order){
if
(order.status == 0){
paymentsItem.push(order);
};
if
(order.status == 3){
receiptsItem.push(order);
};
if
(order.status == 5){
returnsItem.push(order);
};
if
(order.status == 13){
completesItem.push(order);
}
});
//设置一个空数组，把所有状态下的订单集合放到空数组中，从0-5的顺序按照你的自己设置的tab切换的内容0-5的顺序对应排列，
var
orderAll = [ orders, paymentsItem, receiptsItem, returnsItem, completesItem];
console.log(orderAll);
return
{
navItems : navs,
//全部订单分类的集合
orderAllItem : orderAll,
//设置
tabIndex : 0,
};
},
methods: {
navChange:
function
(e, index){
this
.tabIndex = index;
// console.log(this.tabIndex)
}
}
}
})();
export
default
_default;