74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref,onMounted,computed,onUnmounted,watch } from 'vue'
|
|
import list from "./list.vue"
|
|
import finish from "./finish/finish.vue"
|
|
import cancel from "./cancel/cancel.vue"
|
|
|
|
|
|
const currentIndex = ref(0);
|
|
const tabs = ref([
|
|
{ name: '待出餐' },
|
|
{ name: '已完成' },
|
|
{ name: '已取消' },
|
|
]);
|
|
|
|
|
|
const switchTab = (index) => {
|
|
currentIndex.value = index;
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<scroll-view scroll-y class="preview">
|
|
|
|
<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">
|
|
<list></list>
|
|
</block>
|
|
<block v-if="currentIndex === 1">
|
|
<finish></finish>
|
|
</block>
|
|
<block v-if="currentIndex === 2">
|
|
<cancel></cancel>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
</template>
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.tab-menu {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 10px 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.tab-item {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.tab-item.active {
|
|
color: #4095e5;
|
|
font-weight: bold;
|
|
}
|
|
.container {
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
|
|
</style> |