152 lines
3.2 KiB
Vue
152 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import dataItem from './components/dataItem.vue'
|
|
// 定义 porps
|
|
const props = defineProps<{
|
|
state: string
|
|
}>()
|
|
// tabs 数据
|
|
const orderTabs = ref([
|
|
{ orderState: '0,1', title: '未完成', isRender: false },
|
|
{ orderState: '2', title: '已完成', isRender: false },
|
|
])
|
|
// 高亮下标
|
|
const activeIndex = ref(0)
|
|
const handleIndexChange = (index: any) => {
|
|
orderTabs.value.forEach((e) => {
|
|
e.isRender = false
|
|
})
|
|
activeIndex.value = index
|
|
orderTabs.value[index].isRender = true
|
|
}
|
|
onLoad(async (options) => {
|
|
if (options.state) {
|
|
// 高亮下标
|
|
orderTabs.value.forEach((e, index) => {
|
|
e.isRender = e.orderState == options.state
|
|
if (e.isRender) {
|
|
activeIndex.value = index
|
|
}
|
|
})
|
|
} else {
|
|
orderTabs.value.forEach((e, index) => {
|
|
e.isRender = e.orderState == '0,1'
|
|
if (e.isRender) {
|
|
activeIndex.value = index
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="viewport">
|
|
<view class="tabs">
|
|
<text class="item" :class="{ active: activeIndex == index }" v-for="(item, index) in orderTabs" :key="item.title"
|
|
@tap="handleIndexChange(index)">
|
|
{{ item.title }}
|
|
</text>
|
|
<!-- 游标 -->
|
|
<view class="cursor" :style="{ left: activeIndex ? '65%' : '14%' }"></view>
|
|
</view>
|
|
<!-- 滑动容器 -->
|
|
<swiper class="swiper" :current="activeIndex" @change="handleIndexChange($event.detail.current)">
|
|
<!-- 滑动项 -->
|
|
<swiper-item v-for="item in orderTabs" :key="item.title">
|
|
<dataItem v-if="item.isRender" :order-state="item.orderState" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.viewport {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// background-color: #3775F6;
|
|
.navbar {
|
|
width: 750rpx;
|
|
color: #000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
/* background-color: #f8f8f8; */
|
|
background-color: #3775f6;
|
|
|
|
.wrap {
|
|
position: relative;
|
|
background-color: #3775f6;
|
|
|
|
.title {
|
|
height: 44px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
/* color: #000; */
|
|
color: #fff;
|
|
}
|
|
|
|
.back {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 44px;
|
|
width: 44px;
|
|
font-size: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* color: #000; */
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
line-height: 60rpx;
|
|
position: relative;
|
|
z-index: 9;
|
|
width: 100%;
|
|
|
|
.item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #1D2129;
|
|
|
|
&.active {
|
|
color: #356899;
|
|
}
|
|
}
|
|
|
|
.cursor {
|
|
position: absolute;
|
|
left: 13%;
|
|
bottom: 0;
|
|
width: 20%;
|
|
height: 6rpx;
|
|
padding: 0 50rpx;
|
|
background-color: #356899;
|
|
/* 过渡效果 */
|
|
transition: all 0.4s;
|
|
}
|
|
}
|
|
|
|
// swiper
|
|
.swiper {
|
|
background-color: #f7f7f8;
|
|
}
|
|
}
|
|
</style>
|