63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<view class="box">
|
||
|
|
<view class="box-up">
|
||
|
|
<view @click="click(index)" v-for="(item, index) in dataList" :key="index" :class="{ active: dataIndex === index }">{{ item.text }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="box-bottom">
|
||
|
|
<view v-if="dataIndex == 0">
|
||
|
|
<!-- 暂无数据 -->
|
||
|
|
<view class="box-bottom-not">
|
||
|
|
<image src="https://i.postimg.cc/SRwWvWDB/image.png" style="height: 25rem; width: 100%"></image>
|
||
|
|
<view class="box-bottom-not-text">暂无订单</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else-if="dataIndex == 1">2</view>
|
||
|
|
<view v-else-if="dataIndex == 2">3</view>
|
||
|
|
<view v-else-if="dataIndex == 3">4</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
const dataIndex = ref(0);
|
||
|
|
const dataList = ref([
|
||
|
|
{
|
||
|
|
text: '全部单'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '待付款'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '待发货'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '待收获'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
const click = (index) => {
|
||
|
|
dataIndex.value = index;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.box-up {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
margin-top: 1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.box-bottom {
|
||
|
|
.box-bottom-not {
|
||
|
|
min-height: 88vh;
|
||
|
|
}
|
||
|
|
.box-bottom-not-text {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
color: #00ba26;
|
||
|
|
}
|
||
|
|
</style>
|