|
|
@@ -1,5 +1,4 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { getRect } from 'wot-design-uni/components/common/util'
|
|
|
import { handleCommonOrderStatusText, navTabTypeList, orderStatusList } from './order-data'
|
|
|
import { StaticUrl } from '@/config'
|
|
|
import router from '@/router'
|
|
|
@@ -8,22 +7,11 @@ definePage({
|
|
|
name: 'xsb-order',
|
|
|
islogin: true,
|
|
|
style: {
|
|
|
- navigationStyle: 'custom',
|
|
|
- navigationBarTitleText: '星闪豹订单列表',
|
|
|
- disableScroll: true,
|
|
|
+ navigationBarTitleText: '订单列表',
|
|
|
},
|
|
|
})
|
|
|
const navActiveTab = ref(0)
|
|
|
const orderStatusActive = ref(0)
|
|
|
-const { statusBarHeight, MenuButtonHeight } = useSysStore()
|
|
|
-const navHeight = ref(87)
|
|
|
-onMounted(() => {
|
|
|
- getRect('.nav', false).then((rect) => {
|
|
|
- if (rect.height) {
|
|
|
- navHeight.value = rect.height
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
function handleChangeTypeNav(value: number) {
|
|
|
navActiveTab.value = value
|
|
|
}
|
|
|
@@ -38,11 +26,7 @@ function handleClick() {
|
|
|
|
|
|
<template>
|
|
|
<view class="page-xsb">
|
|
|
- <wd-navbar
|
|
|
- title="订单列表" :bordered="false" :z-index="99" safe-area-inset-top left-arrow placeholder fixed
|
|
|
- @click-left="router.back()"
|
|
|
- />
|
|
|
- <view class="nav bg-white px24rpx py18rpx">
|
|
|
+ <view class="nav sticky top-0 z10 bg-white px24rpx py18rpx">
|
|
|
<view class="flex items-center">
|
|
|
<view
|
|
|
v-for="item in navTabTypeList" :key="item.value" class="mr64rpx flex flex-col items-center text-32rpx"
|
|
|
@@ -67,77 +51,73 @@ function handleClick() {
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view :style="{ height: `calc(100vh - ${(statusBarHeight + MenuButtonHeight) * 2}rpx - ${navHeight * 2}rpx)` }">
|
|
|
- <scroll-view scroll-y class="h-full pt24rpx">
|
|
|
- <view v-for="item in 20" :key="item" @click="handleClick">
|
|
|
- <wd-card>
|
|
|
- <template #title>
|
|
|
- <view class="flex items-center justify-between">
|
|
|
- <view class="flex items-center">
|
|
|
- <image :src="`${StaticUrl}/order-icon.png`" class="h36rpx w36rpx" />
|
|
|
- <view class="ml20rpx text-32rpx font-semibold">
|
|
|
- 海马购官方旗舰店
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="text-24rpx text-#FF4D3A">
|
|
|
- {{ handleCommonOrderStatusText(item) }}
|
|
|
- </view>
|
|
|
+ <view v-for="item in 20" :key="item" class="mt20rpx" @click="handleClick">
|
|
|
+ <wd-card>
|
|
|
+ <template #title>
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image :src="`${StaticUrl}/order-icon.png`" class="h36rpx w36rpx" />
|
|
|
+ <view class="ml20rpx text-32rpx font-semibold">
|
|
|
+ 海马购官方旗舰店
|
|
|
</view>
|
|
|
- <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
- </template>
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-#FF4D3A">
|
|
|
+ {{ handleCommonOrderStatusText(item) }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ </template>
|
|
|
|
|
|
- <view>
|
|
|
- <view class="mb20rpx box-border rounded-16rpx bg-#F9F9F9 p24rpx">
|
|
|
+ <view>
|
|
|
+ <view class="mb20rpx box-border rounded-16rpx bg-#F9F9F9 p24rpx">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image :src="`${StaticUrl}/order-car.png`" class="h36rpx w36rpx" />
|
|
|
+ <view class="ml20rpx text-28rpx text-#222 font-semibold">
|
|
|
+ 预计10:40前可送达
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt18rpx">
|
|
|
+ 您的订单预计3月7日 10:40前送达
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx">
|
|
|
+ 2025-03-26 11:56:07
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-border h176rpx w-full flex items-center justify-between rounded-16rpx bg-#F9F9F9">
|
|
|
+ <view class="box-border h-full w480rpx py28rpx pl20rpx">
|
|
|
+ <scroll-view scroll-x class="h-full w-full whitespace-nowrap">
|
|
|
<view class="flex items-center">
|
|
|
- <image :src="`${StaticUrl}/order-car.png`" class="h36rpx w36rpx" />
|
|
|
- <view class="ml20rpx text-28rpx text-#222 font-semibold">
|
|
|
- 预计10:40前可送达
|
|
|
+ <view v-for="item in 20" :key="item" class="mr50rpx">
|
|
|
+ <image :src="`${StaticUrl}/shu.png`" class="h120rpx w120rpx" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="mt18rpx">
|
|
|
- 您的订单预计3月7日 10:40前送达
|
|
|
- </view>
|
|
|
- <view class="mt20rpx">
|
|
|
- 2025-03-26 11:56:07
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px14rpx py40rpx">
|
|
|
+ <view class="text-32rpx text-#FF4D3A font-semibold">
|
|
|
+ ¥13.95
|
|
|
</view>
|
|
|
- <view class="box-border h176rpx w-full flex items-center justify-between rounded-16rpx bg-#F9F9F9">
|
|
|
- <view class="box-border h-full w480rpx py28rpx pl20rpx">
|
|
|
- <scroll-view scroll-x class="h-full w-full whitespace-nowrap">
|
|
|
- <view class="flex items-center">
|
|
|
- <view v-for="item in 20" :key="item" class="mr50rpx">
|
|
|
- <image :src="`${StaticUrl}/shu.png`" class="h120rpx w120rpx" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px14rpx py40rpx">
|
|
|
- <view class="text-32rpx text-#FF4D3A font-semibold">
|
|
|
- ¥13.95
|
|
|
- </view>
|
|
|
- <view class="text-center text-28rpx text-#AAAAAA">
|
|
|
- 共5件
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="text-center text-28rpx text-#AAAAAA">
|
|
|
+ 共5件
|
|
|
</view>
|
|
|
</view>
|
|
|
- <template #footer>
|
|
|
- <view class="flex items-center justify-end">
|
|
|
- <wd-button size="small" plain type="info">
|
|
|
- 取消订单
|
|
|
- </wd-button>
|
|
|
- <view class="ml20rpx">
|
|
|
- <wd-button size="small" plain type="error">
|
|
|
- 付款
|
|
|
- </wd-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </wd-card>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="ios h30rpx" />
|
|
|
- </scroll-view>
|
|
|
+ <template #footer>
|
|
|
+ <view class="flex items-center justify-end">
|
|
|
+ <wd-button size="small" plain type="info">
|
|
|
+ 取消订单
|
|
|
+ </wd-button>
|
|
|
+ <view class="ml20rpx">
|
|
|
+ <wd-button size="small" plain type="error">
|
|
|
+ 付款
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </wd-card>
|
|
|
</view>
|
|
|
+ <view class="h-20rpx" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|