|
@@ -0,0 +1,108 @@
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { navTabTypeList } from '../utils/order-data'
|
|
|
|
|
+import router from '@/router'
|
|
|
|
|
+import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
|
|
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
|
|
+
|
|
|
|
|
+const navActiveTab = ref(0)
|
|
|
|
|
+const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
|
|
|
|
|
+definePage({
|
|
|
|
|
+ name: 'charge-order-list',
|
|
|
|
|
+ islogin: false,
|
|
|
|
|
+ style: {
|
|
|
|
|
+ navigationBarTitleText: '充电订单',
|
|
|
|
|
+ navigationStyle: 'custom',
|
|
|
|
|
+ },
|
|
|
|
|
+})
|
|
|
|
|
+const { data: orderList, refresh, isLastPage, page, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({ data: {
|
|
|
|
|
+ businessType: 'CD',
|
|
|
|
|
+ pageNum,
|
|
|
|
|
+ pageSize,
|
|
|
|
|
+ dvyType: unref(navActiveTab) === 0 ? '' : unref(navActiveTab),
|
|
|
|
|
+} }), {
|
|
|
|
|
+ immediate: false,
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
|
+ initialData: [],
|
|
|
|
|
+ data: res => res.data?.list,
|
|
|
|
|
+ append: true,
|
|
|
|
|
+ middleware: createGlobalLoadingMiddleware(),
|
|
|
|
|
+})
|
|
|
|
|
+onShow(() => {
|
|
|
|
|
+ refresh()
|
|
|
|
|
+})
|
|
|
|
|
+onReachBottom(() => {
|
|
|
|
|
+ if (!isLastPage.value) {
|
|
|
|
|
+ page.value++
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+function handleChangeTypeNav(value: number) {
|
|
|
|
|
+ navActiveTab.value = value
|
|
|
|
|
+ orderList.value = []
|
|
|
|
|
+ reload()
|
|
|
|
|
+ console.log(navActiveTab.value, '===============')
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="min-h-screen from-[#E2FF91] to-[rgba(158,214,5,0)] bg-gradient-to-b">
|
|
|
|
|
+ <wd-navbar
|
|
|
|
|
+ title="充电订单" custom-style="background: linear-gradient(90deg, #F1FECC 0%, #EAFEFA 100%);"
|
|
|
|
|
+ :bordered="false" :z-index="999" safe-area-inset-top left-arrow fixed @click-left="router.back()"
|
|
|
|
|
+ />
|
|
|
|
|
+ <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
|
|
|
|
|
+ <view class="nav sticky top-0 z10 px24rpx">
|
|
|
|
|
+ <view class="h80rpx flex items-center">
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-for="item in navTabTypeList" :key="item.value" class="mr64rpx h-full flex flex-col items-center justify-center text-32rpx"
|
|
|
|
|
+ :class="[navActiveTab == item.value ? 'font-semibold ' : 'text-#AAAAAA']"
|
|
|
|
|
+ @click="handleChangeTypeNav(item.value)"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item.name }}
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="mt10rpx bg-[var(--them-color)] transition-all transition-duration-400 ease-in"
|
|
|
|
|
+ :class="[navActiveTab == item.value ? 'w40rpx h8rpx rounded-4rpx' : '']"
|
|
|
|
|
+ />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="box-border px24rpx">
|
|
|
|
|
+ <view v-for="item in orderList" :key="item.orderNumber" class="mt-20rpx mt20rpx rounded-16rpx bg-#FFF p-24rpx" @click="router.push({ name: 'charge-order-detail' })">
|
|
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <view class="text-28rpx font-bold">
|
|
|
|
|
+ {{ item.shopName }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-20rpx text-24rpx text-#AAA">
|
|
|
|
|
+ 订单时间:{{ item.createTime || '未知' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-20rpx text-24rpx text-#AAA">
|
|
|
|
|
+ 终端名称:{{ item.orderItemList?.[0]?.goodsName || '未知' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text-center text-28rpx text-#4EDC86">
|
|
|
|
|
+ <image
|
|
|
|
|
+ class="h-64rpx w-64rpx"
|
|
|
|
|
+ :src="`${StaticUrl}/charge-order-ing.png`"
|
|
|
|
|
+ />
|
|
|
|
|
+ <view>{{ '充电中' }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="my-20rpx h-2rpx w-full bg-#F0F0F0" />
|
|
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
|
|
+ <view class="text-28rpx">
|
|
|
|
|
+ 充电费用:
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text-32rpx text-#FF6464 font-800">
|
|
|
|
|
+ <text class="text-18rpx">
|
|
|
|
|
+ ¥
|
|
|
|
|
+ </text>
|
|
|
|
|
+ {{ item.actualTotal }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped></style>
|