96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<script setup>
|
|
import {ref} from 'vue'
|
|
const currentIndex = ref(0);
|
|
const tabs = ref([
|
|
{ name: '全部' },
|
|
{ name: '进行中' },
|
|
{ name: '已完成' }
|
|
]);
|
|
const switchTab = (index) => {
|
|
currentIndex.value = index;
|
|
};
|
|
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
|
const orderTabs = ref([
|
|
{ orderState: 0, title: '全部' },
|
|
{ orderState: 1, title: '进行中' },
|
|
{ orderState: 2, title: '评价' },
|
|
{ orderState: 3, title: '退款' },
|
|
])
|
|
|
|
const active = ref(1)
|
|
const list1 = reactive([
|
|
{ title: '备餐中' },
|
|
{ title: '已出餐' },
|
|
{ title: '已完成' }
|
|
])
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<view class="tab-menu">
|
|
<view class="tab-item"
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
:class="{active: currentIndex === index}"
|
|
@click="switchTab(index)">
|
|
{{ tab.name }}
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<block v-if="currentIndex === 0">
|
|
</block>
|
|
<block v-if="currentIndex === 1">
|
|
</block>
|
|
<block v-if="currentIndex === 2">
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<style>
|
|
.tab-menu {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 10px 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.tab-item {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.tab-item.active {
|
|
color: #007aff;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
const changeTab = (tab) => {
|
|
if (tab === '全部') {
|
|
Status.value.displayedOrders = Status.value.orders;
|
|
} else {
|
|
Status.value.displayedOrders = Status.value.orders.filter(order => {
|
|
switch (tab) {
|
|
case '待支付':
|
|
for(let i in Status.value.orders){
|
|
return Status.value.orders[i].orderStatus === '待支付';}
|
|
case '代发货':
|
|
for(let i in Status.value.orders){
|
|
return Status.value.orders[i].orderStatus === '代发货';}
|
|
case '已发货':
|
|
for(let i in Status.value.orders){
|
|
return Status.value.orders[i].orderStatus === '已发货';}
|
|
case '售后':
|
|
for(let i in Status.value.orders){
|
|
return Status.value.orders[i].orderStatus === '售后';}
|
|
default:
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}
|