parent
fcbc680462
commit
6486ed399a
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: 王文杰
|
||||
* @Date: 2024-03-26 16:57:42
|
||||
* @LastEditors: 王文杰
|
||||
* @LastEditTime: 2024-03-26 17:13:03
|
||||
* @FilePath: /app-nx-personal/src/pages/orderSiteList/orderSiteList.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import OrderList from './components/OrderList.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="viewport">
|
||||
<!-- 滑动容器 -->
|
||||
<swiper class="swiper">
|
||||
<!-- 滑动项 -->
|
||||
<OrderList />
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
// swiper
|
||||
.swiper {
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import OrderList from './components/OrderList.vue'
|
||||
// 获取页面参数
|
||||
const query = defineProps<{
|
||||
type: string
|
||||
}>()
|
||||
|
||||
// tabs 数据
|
||||
const orderTabs = ref([
|
||||
{ orderState: 'UNPROCESSED', title: '待服务', isRender: false },
|
||||
{ orderState: 'FINISHED', title: '已完成', isRender: false },
|
||||
{ orderState: 'CANCELED', title: '已取消', isRender: false },
|
||||
])
|
||||
|
||||
// 高亮下标
|
||||
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === 'UNPROCESSED'))
|
||||
// 默认渲染容器
|
||||
orderTabs.value[activeIndex.value].isRender = true
|
||||
|
||||
const handleIndexChange = (index: any) => {
|
||||
orderTabs.value.forEach((e) => {
|
||||
e.isRender = false
|
||||
})
|
||||
activeIndex.value = index
|
||||
orderTabs.value[index].isRender = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="viewport">
|
||||
<!-- tabs -->
|
||||
<view class="tabs">
|
||||
<text
|
||||
class="item"
|
||||
v-for="(item, index) in orderTabs"
|
||||
:key="item.title"
|
||||
@tap="handleIndexChange(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</text>
|
||||
<!-- 游标 -->
|
||||
<view class="cursor" :style="{ left: activeIndex * 33 + '%' }"></view>
|
||||
</view>
|
||||
<!-- 滑动容器 -->
|
||||
<swiper
|
||||
class="swiper"
|
||||
:current="activeIndex"
|
||||
@change="handleIndexChange($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: 33%;
|
||||
bottom: 0;
|
||||
width: 17%;
|
||||
height: 6rpx;
|
||||
padding: 0 50rpx;
|
||||
background-color: #3775F6;
|
||||
transition: all 0.4s;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
transform: translateX(50%);
|
||||
/* 过渡效果 */
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
// swiper
|
||||
.swiper {
|
||||
background-color: #f7f7f8;
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue