|
|
@@ -1,11 +1,235 @@
|
|
|
<script setup lang="ts">
|
|
|
-definePage({ name: 'order', islogin: true, style: { navigationBarTitleText: '订单', navigationStyle: 'custom' }, layout: 'tabbar' })
|
|
|
+import type { OmsOrderOilPageVO } from '@/api/globals'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'order',
|
|
|
+ islogin: true,
|
|
|
+ style: { navigationBarTitleText: '订单列表', navigationStyle: 'custom' },
|
|
|
+ layout: 'tabbar',
|
|
|
+})
|
|
|
+
|
|
|
+// Tab 列表
|
|
|
+const tabList = ref([
|
|
|
+ { label: '全部', value: 0 },
|
|
|
+ { label: '待支付', value: 1 },
|
|
|
+ { label: '已支付', value: 2 },
|
|
|
+ { label: '已退款', value: 6 },
|
|
|
+])
|
|
|
+const currentTab = ref(0)
|
|
|
+
|
|
|
+// 分页请求
|
|
|
+const { data, send, isLastPage, page } = usePagination(
|
|
|
+ (pageNum, pageSize) => Apis.general.post_smqjh_oms_api_v1_oil_order_findoilorderpage({
|
|
|
+ data: { pageNum, pageSize, status: currentTab.value },
|
|
|
+ }),
|
|
|
+ {
|
|
|
+ initialPage: 1,
|
|
|
+ initialPageSize: 10,
|
|
|
+ immediate: false,
|
|
|
+ data: res => res.data?.list,
|
|
|
+ append: true,
|
|
|
+ },
|
|
|
+)
|
|
|
+
|
|
|
+// 切换 Tab
|
|
|
+function handleTabChange(value: number) {
|
|
|
+ currentTab.value = value
|
|
|
+ data.value = []
|
|
|
+ page.value = 1
|
|
|
+ send()
|
|
|
+}
|
|
|
+
|
|
|
+// 订单状态映射
|
|
|
+const statusMap = new Map([
|
|
|
+ [1, '待支付'],
|
|
|
+ [2, '已支付'],
|
|
|
+ [6, '已退款'],
|
|
|
+ [9, '已取消'],
|
|
|
+])
|
|
|
+
|
|
|
+// 获取状态文字
|
|
|
+function getStatusText(status?: number) {
|
|
|
+ return statusMap.get(status as number) || ''
|
|
|
+}
|
|
|
+
|
|
|
+// 计算倒计时剩余毫秒数(30分钟)
|
|
|
+function getCountdownTime(expireTime?: string): number {
|
|
|
+ if (!expireTime)
|
|
|
+ return 0
|
|
|
+ const expire = new Date(expireTime).getTime()
|
|
|
+ const remaining = expire - Date.now()
|
|
|
+ return remaining > 0 ? remaining : 0
|
|
|
+}
|
|
|
+
|
|
|
+// 取消订单
|
|
|
+async function handleCancelOrder(item: OmsOrderOilPageVO) {
|
|
|
+ useGlobalMessage().confirm({
|
|
|
+ title: '提示',
|
|
|
+ msg: '确定要取消该订单吗?',
|
|
|
+ success: async () => {
|
|
|
+ uni.showLoading({ mask: true })
|
|
|
+ try {
|
|
|
+ await Apis.general.post_smqjh_oms_api_v1_oil_order_cancel({ params: { orderId: item.orderNumber as string } })
|
|
|
+ useGlobalToast().show('取消成功')
|
|
|
+ // 刷新列表
|
|
|
+ data.value = []
|
|
|
+ page.value = 1
|
|
|
+ send()
|
|
|
+ }
|
|
|
+ catch {
|
|
|
+ useGlobalToast().show('取消失败')
|
|
|
+ }
|
|
|
+ finally {
|
|
|
+ uni.hideLoading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 付款(占位)
|
|
|
+function handlePay(_item: OmsOrderOilPageVO) {
|
|
|
+ useGlobalToast().show('功能开发中')
|
|
|
+}
|
|
|
+
|
|
|
+// 申请开票(占位)
|
|
|
+function handleInvoice(_item: OmsOrderOilPageVO) {
|
|
|
+ useGlobalToast().show('功能开发中')
|
|
|
+}
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ data.value = []
|
|
|
+ page.value = 1
|
|
|
+ send()
|
|
|
+})
|
|
|
+
|
|
|
+onReachBottom(() => {
|
|
|
+ if (!isLastPage.value) {
|
|
|
+ page.value++
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+watch(() => currentTab.value, () => {
|
|
|
+ data.value = []
|
|
|
+ page.value = 1
|
|
|
+ send()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="">
|
|
|
- view
|
|
|
+ <view class="min-h-100vh bg-#f5f5f5">
|
|
|
+ <!-- Tab 切换 -->
|
|
|
+ <view class="sticky top-0 z-10 flex items-center justify-around bg-white px24rpx">
|
|
|
+ <view
|
|
|
+ v-for="item in tabList"
|
|
|
+ :key="item.value"
|
|
|
+ class="mr40rpx py24rpx text-28rpx"
|
|
|
+ :class="[currentTab === item.value ? 'text-[var(--them-color)] font-semibold border-b-4rpx border-[var(--them-color)]' : 'text-#666']"
|
|
|
+ @click="handleTabChange(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <view class="px24rpx pt20rpx">
|
|
|
+ <view
|
|
|
+ v-for="item in data"
|
|
|
+ :key="item.orderNumber"
|
|
|
+ class="mb20rpx rounded-16rpx bg-white px24rpx py28rpx"
|
|
|
+ >
|
|
|
+ <!-- 头部:油站名称 + 状态 -->
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="text-30rpx font-semibold">
|
|
|
+ {{ item.brandName ? `${item.brandName}·` : '' }}{{ item.storeName }}
|
|
|
+ </view>
|
|
|
+ <!-- 待支付状态显示倒计时 -->
|
|
|
+ <view v-if="item.oilOrderStatus === 1" class="w300rpx flex items-center justify-end text-24rpx text-#1890ff">
|
|
|
+ 待支付(<wd-count-down :time="getCountdownTime(item.expireTime)" format="还剩mm:ss" />)
|
|
|
+ </view>
|
|
|
+ <view v-else class="text-24rpx text-#666">
|
|
|
+ {{ getStatusText(item.oilOrderStatus) }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 油号 | 油枪 -->
|
|
|
+ <view class="mt16rpx text-26rpx text-#999">
|
|
|
+ {{ item.itemName }} | {{ item.gunNo }}号枪
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单金额 -->
|
|
|
+ <view class="mt12rpx text-26rpx text-#999">
|
|
|
+ 订单金额:<text class="text-#333">
|
|
|
+ ¥{{ item.totalMoney }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 根据状态显示不同金额 -->
|
|
|
+ <view v-if="item.oilOrderStatus === 1" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 需付金额:<text class="text-#333">
|
|
|
+ ¥{{ item.realMoney }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.oilOrderStatus === 2" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 实付金额:<text class="text-#333">
|
|
|
+ ¥{{ item.realMoney }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.oilOrderStatus === 6" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 退款金额:<text class="text-#333">
|
|
|
+ ¥{{ item.realMoney }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 根据状态显示不同时间 -->
|
|
|
+ <view v-if="item.oilOrderStatus === 1" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 下单时间:{{ item.createTime }}
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.oilOrderStatus === 2" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 支付时间:{{ item.payTime }}
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.oilOrderStatus === 6" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 退款时间:{{ item.refundTime }}
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.oilOrderStatus === 9" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 取消时间:{{ item.cancelTime }}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已支付显示合作方订单号 -->
|
|
|
+ <view v-if="item.oilOrderStatus === 2 && item.thirdOrderId" class="mt12rpx text-26rpx text-#999">
|
|
|
+ 合作方订单号:{{ item.thirdOrderId }}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view v-if="item.oilOrderStatus === 1" class="mt20rpx flex items-center justify-end gap-20rpx">
|
|
|
+ <wd-button plain size="small" custom-class="action-btn" @click="handleCancelOrder(item)">
|
|
|
+ 取消订单
|
|
|
+ </wd-button>
|
|
|
+ <wd-button plain size="small" custom-class="action-btn" @click="handlePay(item)">
|
|
|
+ 付款
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="item.oilOrderStatus === 2" class="mt20rpx flex items-center justify-end">
|
|
|
+ <wd-button plain size="small" custom-class="action-btn" @click="handleInvoice(item)">
|
|
|
+ 申请开票
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view v-if="data && data.length === 0" class="flex flex-col items-center pt100rpx">
|
|
|
+ <StatusTip tip="暂无订单" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.action-btn) {
|
|
|
+ border-color: #333 !important;
|
|
|
+ color: #333 !important;
|
|
|
+ border-radius: 32rpx !important;
|
|
|
+}
|
|
|
+:deep(.wd-count-down){
|
|
|
+ color: #1890ff !important;
|
|
|
+}
|
|
|
+</style>
|