128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {OrderStatus} from "@/constant/enums";
|
|
import OrderSwiperList from "./components/order-swiper-list/order-swiper-list.vue";
|
|
import {useConfigStore} from "@/store";
|
|
import {debounce} from "throttle-debounce";
|
|
const configStore = useConfigStore()
|
|
const {t} = useI18n()
|
|
|
|
const orderSwiperListRef = ref(null)
|
|
// async function initData() {
|
|
// orderSwiperListRef.value[currentIndex.value].reload()
|
|
// }
|
|
const initData = debounce(500, () => {
|
|
nextTick(() => {
|
|
// listItem.value[currentTab.value].reload()
|
|
orderSwiperListRef.value[currentIndex.value].reload()
|
|
})
|
|
}, {atBegin: true})
|
|
|
|
|
|
|
|
async function getPlatformDefaultStoreInfo() {}
|
|
|
|
const currentIndex = ref(0)
|
|
const tabList = ref([
|
|
{
|
|
name: t('pages.order.all'),
|
|
value: ''
|
|
},
|
|
{
|
|
name: t('pages.order.confirmReady'), // 待接单待取餐
|
|
value: OrderStatus.HAS_PENDING_PAYMENT,
|
|
},
|
|
{
|
|
name: t('pages.order.accept'), // 已接单
|
|
value: OrderStatus.MERCHANT_ACCEPTED,
|
|
},
|
|
{
|
|
name: t('pages.order.onTheWay'), // 配送中
|
|
value: OrderStatus.DELIVERING,
|
|
},
|
|
{
|
|
name: t('pages.order.completed'), // 已送达
|
|
value: OrderStatus.COMPLETED,
|
|
},
|
|
])
|
|
function handleClickTab(event: any) {
|
|
currentIndex.value = event.index
|
|
}
|
|
function handleSwiperChange(event: any){
|
|
currentIndex.value = event.detail.current
|
|
}
|
|
|
|
defineExpose({
|
|
initData,
|
|
init: getPlatformDefaultStoreInfo,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
:style="[{
|
|
height: configStore.windowHeight+'px',
|
|
}]"
|
|
>
|
|
<view class="bg h-360rpx fixed top-0 left-0 right-0"></view>
|
|
<z-paging-swiper>
|
|
<template #top>
|
|
<status-bar/>
|
|
<view class="pl-30rpx pt-18rpx text-56rpx lh-56rpx text-#333 font-bold tracking-[.04em]">{{ t('pages.order.title') }}</view>
|
|
<view class="tab pl-20rpx mt-24rpx">
|
|
<wd-tabs
|
|
slidable="always"
|
|
key="tab"
|
|
color="#333"
|
|
inactiveColor="#999"
|
|
:line-height="3"
|
|
:line-width="30"
|
|
v-model="currentIndex"
|
|
@click="handleClickTab"
|
|
>
|
|
<template v-for="(item, index) in tabList" :key="index">
|
|
<wd-tab :title="item.name"></wd-tab>
|
|
</template>
|
|
</wd-tabs>
|
|
<view class="px-20rpx mt--2rpx">
|
|
<view class="border-b-solid border-b-4rpx border-b-#999"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<swiper class="h-full"
|
|
:current="currentIndex"
|
|
@change="handleSwiperChange">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
|
<order-swiper-list ref="orderSwiperListRef" :currentIndex="currentIndex" :status="index"></order-swiper-list>
|
|
</swiper-item>
|
|
</swiper>
|
|
<template #bottom>
|
|
<view class="h-50px"></view>
|
|
<view :style="[configStore.iosSafeBottomPlaceholder]"></view>
|
|
</template>
|
|
</z-paging-swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.tab {
|
|
:deep(.wd-tabs) {
|
|
.wd-tabs__line {
|
|
bottom: 0 !important;
|
|
z-index: 99 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
.wd-tabs__nav-item {
|
|
padding: 0 22rpx !important;
|
|
}
|
|
.wd-tabs__nav-item-text{
|
|
font-size: 32rpx !important;
|
|
text-overflow: unset !important;
|
|
font-family: 'UberMove', sans-serif !important;
|
|
}
|
|
}
|
|
}
|
|
.bg {
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 51%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
</style>
|