王文杰
8 months ago
parent
9d3cab7f06
commit
436b9e15d7
@ -0,0 +1,106 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import OrderList from './components/OrderList.vue'
|
||||||
|
|
||||||
|
// 获取页面参数
|
||||||
|
const query = defineProps<{
|
||||||
|
type: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// tabs 数据
|
||||||
|
const orderTabs = ref([
|
||||||
|
// { orderState: 0, title: '全部', isRender: false },
|
||||||
|
{ orderState: 'PENDING', title: '待接单', isRender: false },
|
||||||
|
{ orderState: 'UNPROCESSED', title: '待服务', isRender: false },
|
||||||
|
{ orderState: 'RECYCLING', title: '回收中', isRender: false },
|
||||||
|
{ orderState: 'FINISHED', title: '已完成', isRender: false },
|
||||||
|
{ orderState: 'CANCELED', title: '已取消', isRender: false },
|
||||||
|
])
|
||||||
|
|
||||||
|
// 高亮下标
|
||||||
|
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === 'PENDING'))
|
||||||
|
// 默认渲染容器
|
||||||
|
orderTabs.value[activeIndex.value].isRender = true
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="viewport">
|
||||||
|
<!-- tabs -->
|
||||||
|
<view class="tabs">
|
||||||
|
<text
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in orderTabs"
|
||||||
|
:key="item.title"
|
||||||
|
@tap="
|
||||||
|
() => {
|
||||||
|
activeIndex = index
|
||||||
|
item.isRender = true
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</text>
|
||||||
|
<!-- 游标 -->
|
||||||
|
<view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 滑动容器 -->
|
||||||
|
<swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
|
||||||
|
<!-- 滑动项 -->
|
||||||
|
<swiper-item v-for="item in orderTabs" :key="item.title">
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<OrderList v-if="item.isRender" :order-state="item.orderState" />
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// tabs
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
line-height: 60rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
|
||||||
|
position: relative;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 20%;
|
||||||
|
height: 6rpx;
|
||||||
|
padding: 0 50rpx;
|
||||||
|
background-color: #3775F6;
|
||||||
|
/* 过渡效果 */
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// swiper
|
||||||
|
.swiper {
|
||||||
|
background-color: #f7f7f8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import OrderItem from './components/OrderItem.vue'
|
|
||||||
|
|
||||||
// 获取屏幕边界到安全区域距离
|
|
||||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
||||||
|
|
||||||
// 获取页面参数
|
|
||||||
const query = defineProps<{
|
|
||||||
type: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// tabs 数据
|
|
||||||
const orderTabs = ref([
|
|
||||||
{ orderState: 0, title: '待接单', isRender: false },
|
|
||||||
{ orderState: 1, title: '进行中', isRender: false },
|
|
||||||
])
|
|
||||||
|
|
||||||
// 高亮下标
|
|
||||||
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))
|
|
||||||
|
|
||||||
// 默认渲染容器
|
|
||||||
orderTabs.value[activeIndex.value].isRender = true
|
|
||||||
|
|
||||||
const handleTabChange = (type: string) => {
|
|
||||||
if (!activeIndex.value) {
|
|
||||||
activeIndex.value = 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="viewport">
|
|
||||||
<!-- 滑动容器 -->
|
|
||||||
<view class="cont" :current="activeIndex" @change="activeIndex = $event.detail.current">
|
|
||||||
<!-- 滑动项 -->
|
|
||||||
<view class="item" v-for="item in orderTabs" :key="item.title">
|
|
||||||
<!-- 订单列表 -->
|
|
||||||
<OrderItem
|
|
||||||
v-if="item.isRender"
|
|
||||||
:order-state="item.orderState"
|
|
||||||
@tab-change="handleTabChange"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
page {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewport {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
// swiper
|
|
||||||
.cont {
|
|
||||||
background-color: #f7f7f8;
|
|
||||||
// margin-top: 128rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue