<
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;