|
|
@@ -0,0 +1,277 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import router from '@/router'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'refueling-orderDetail',
|
|
|
+ islogin: true,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '订单详情',
|
|
|
+ navigationStyle: 'custom',
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const orderNo = ref('')
|
|
|
+const orderInfo = ref<Api.xsbOrderList>()
|
|
|
+const oilInfo = computed<Api.OmsOrderOilVO | undefined>(() => orderInfo.value?.omsOrderOilVO)
|
|
|
+// 状态映射
|
|
|
+const statusMap = new Map([
|
|
|
+ [1, '待支付'],
|
|
|
+ [2, '已支付'],
|
|
|
+ [6, '已退款'],
|
|
|
+ [9, '已取消'],
|
|
|
+])
|
|
|
+
|
|
|
+const { send } = useRequest(
|
|
|
+ (no: string) => Apis.xsb.orderInfo({ data: { orderNo: no } }),
|
|
|
+ { immediate: false },
|
|
|
+).onSuccess((res) => {
|
|
|
+ orderInfo.value = res.data.data
|
|
|
+})
|
|
|
+
|
|
|
+onLoad((options: any) => {
|
|
|
+ orderNo.value = options.orderNo || ''
|
|
|
+ if (orderNo.value) {
|
|
|
+ send(orderNo.value)
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 计算支付倒计时
|
|
|
+function getCountdownTime(): number {
|
|
|
+ if (!orderInfo.value?.expireTime)
|
|
|
+ return 0
|
|
|
+ const expireTime = new Date(orderInfo.value.expireTime).getTime()
|
|
|
+ const remaining = expireTime - Date.now()
|
|
|
+ return remaining > 0 ? remaining : 0
|
|
|
+}
|
|
|
+
|
|
|
+// 复制订单号
|
|
|
+function handleCopy(text?: string) {
|
|
|
+ if (!text)
|
|
|
+ return
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: text,
|
|
|
+ success: () => {
|
|
|
+ useGlobalToast().show('复制成功')
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 取消订单(占位)
|
|
|
+// async function handleCancelOrder() {
|
|
|
+// await useUserStore().handleCommonCancelOrder(orderInfo.value?.orderNumber as string)
|
|
|
+// send(orderNo.value)
|
|
|
+// }
|
|
|
+
|
|
|
+// 立即支付(占位)
|
|
|
+// function handlePay() {
|
|
|
+// useUserStore().handleCommonPath(oilInfo.value?.payUrl as string)
|
|
|
+// }
|
|
|
+
|
|
|
+// 跳转首页
|
|
|
+// function handleGoHome() {
|
|
|
+// router.pushTab({ name: 'home' })
|
|
|
+// useTabbar().setTabbarItemActive('home')
|
|
|
+// }
|
|
|
+// function handleContact() {
|
|
|
+// window.location.href = `weixin://dl/business/?appid=wx43b5b906cc30ed0b&path=subPack-xsb/orderDetaile/index&query=${orderInfo.value?.orderNumber}&env_version=release`
|
|
|
+// }
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <wd-navbar
|
|
|
+ title="订单详情" :bordered="false" :z-index="99" safe-area-inset-top left-arrow placeholder fixed
|
|
|
+ @click-left="router.back()"
|
|
|
+ />
|
|
|
+ <view v-if="orderInfo && oilInfo" class="bg-#f5f5f5 pb200rpx pt20rpx">
|
|
|
+ <!-- 订单状态头部 -->
|
|
|
+ <view class="mx24rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb16rpx text-32rpx font-semibold">
|
|
|
+ 订单状态:{{ statusMap.get(orderInfo.oilOrderStatus as number) || '-' }}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 待支付 - 倒计时和按钮 -->
|
|
|
+ <template v-if="orderInfo.oilOrderStatus === 1">
|
|
|
+ <view class="mb20rpx flex items-center text-26rpx text-#FF4A39">
|
|
|
+ 剩余支付时间:<wd-count-down :time="getCountdownTime()" format="mm分ss秒" />
|
|
|
+ </view>
|
|
|
+ <!-- <view class="flex items-center gap-24rpx">
|
|
|
+ <wd-button plain custom-class="flex-1 cancel-btn" @click="handleCancelOrder">
|
|
|
+ 取消订单
|
|
|
+ </wd-button>
|
|
|
+ <wd-button custom-class="flex-1" @click="handlePay">
|
|
|
+ 立即支付 ¥{{ oilInfo.realMoney }}
|
|
|
+ </wd-button>
|
|
|
+ </view> -->
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 已退款 - 联系客服 -->
|
|
|
+ <template v-else-if="orderInfo.oilOrderStatus === 6 || orderInfo.oilOrderStatus === 2">
|
|
|
+ <view class="flex items-center gap-48rpx">
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <wd-icon name="chat" size="48rpx" color="#333" />
|
|
|
+ <Zcontact>
|
|
|
+ <view class="mt-40rpx text-28rpx">
|
|
|
+ 联系客服
|
|
|
+ </view>
|
|
|
+ </Zcontact>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 已取消 - 取消原因 -->
|
|
|
+ <template v-else-if="orderInfo.oilOrderStatus === 9">
|
|
|
+ <view class="text-26rpx text-#999">
|
|
|
+ 取消原因:{{ orderInfo.cancelReason || '未按时支付' }}
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 重要提示(已支付) -->
|
|
|
+ <view v-if="orderInfo.oilOrderStatus === 2" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb16rpx flex items-center text-26rpx text-#ff4d3a">
|
|
|
+ <wd-icon name="info-circle" size="28rpx" color="#ff4d3a" class="mr8rpx" />
|
|
|
+ 重要提示
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666">
|
|
|
+ 如需加油站线下开票,请向油站工作人员提供以下订单号:
|
|
|
+ </view>
|
|
|
+ <view class="mt12rpx flex items-center text-26rpx">
|
|
|
+ 我方订单号:{{ orderInfo.orderNumber }}
|
|
|
+ <wd-icon name="content-copy" size="28rpx" color="#999" class="ml12rpx" @click="handleCopy(orderInfo?.orderNumber)" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 退款信息(已退款) -->
|
|
|
+ <view v-if="orderInfo.oilOrderStatus === 6" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 退款信息
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>退款金额:¥{{ oilInfo.realMoney }}</view>
|
|
|
+ <view class="text-24rpx text-#999">
|
|
|
+ 退还金额:¥{{ oilInfo.realMoney }} 退还积分:需联系客服处理
|
|
|
+ </view>
|
|
|
+ <view>退款时间:{{ oilInfo.refundTime || '-' }}</view>
|
|
|
+ <view>退款方式:原路返回</view>
|
|
|
+ <view>退款状态:退款成功</view>
|
|
|
+ <view>预计到账:1-3个工作日</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单编号 -->
|
|
|
+ <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 订单编号
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>我方订单号:{{ orderInfo.orderNumber || '-' }}</view>
|
|
|
+ <view>小桔订单号:{{ oilInfo.xjOrderId || '-' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 用户信息(已支付/已退款) -->
|
|
|
+ <view v-if="orderInfo.oilOrderStatus === 2 || orderInfo.oilOrderStatus === 6" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 用户信息
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>用户手机:{{ orderInfo.memberMobile || '-' }}</view>
|
|
|
+ <view>外部用户ID:{{ orderInfo.memberId || '-' }}</view>
|
|
|
+ <view>下单时间:{{ orderInfo.createTime || '-' }}</view>
|
|
|
+ <view>支付时间:{{ oilInfo.payTime || '-' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 油站信息 -->
|
|
|
+ <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 油站信息
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>油站名称:{{ oilInfo.brandName }}·{{ oilInfo.storeName }}</view>
|
|
|
+ <view>油站地址:{{ oilInfo.address || '-' }}</view>
|
|
|
+ <view>所在城市:{{ oilInfo.cityName || '-' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加油明细 -->
|
|
|
+ <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 加油明细
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>油品名称:{{ oilInfo.itemName || '-' }}</view>
|
|
|
+ <view>枪号:{{ oilInfo.gunNo ? `${oilInfo.gunNo}号枪` : '-' }}</view>
|
|
|
+ <view>加油量:{{ oilInfo.quantity || '-' }}L</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 价格明细 -->
|
|
|
+ <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 价格明细
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>门店价:¥{{ oilInfo.storePrice || '-' }}/L</view>
|
|
|
+ <view>平台价:¥{{ oilInfo.vipPrice || '-' }}/L</view>
|
|
|
+ <view>订单金额:¥{{ oilInfo.totalMoney }}</view>
|
|
|
+ <view>抵扣金额:-¥{{ oilInfo.promotionAmount }}</view>
|
|
|
+ <view>服务费:+¥{{ oilInfo.serviceFee }}</view>
|
|
|
+ <view v-if="orderInfo.oilOrderStatus === 6">
|
|
|
+ 实付金额:¥{{ oilInfo.realMoney }}
|
|
|
+ </view>
|
|
|
+ <view v-else-if="orderInfo.oilOrderStatus === 9">
|
|
|
+ 应付金额:¥{{ oilInfo.realMoney }}
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ 需付金额:¥{{ oilInfo.realMoney }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 抵扣信息(已支付/已退款) -->
|
|
|
+ <view v-if="(orderInfo.oilOrderStatus === 2 || orderInfo.oilOrderStatus === 6) && oilInfo.allowanceId" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 抵扣信息
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>抵扣券:{{ oilInfo.allowanceId || '-' }}</view>
|
|
|
+ <view>优惠描述:{{ oilInfo.activityName || '-' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付信息(已支付/已退款) -->
|
|
|
+ <view v-if="orderInfo.oilOrderStatus === 2 || orderInfo.oilOrderStatus === 6" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 支付信息
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>支付方式:微信支付</view>
|
|
|
+ <view>支付状态:成功</view>
|
|
|
+ <view class="break-all">
|
|
|
+ 支付流水号:{{ orderInfo.transactionId || '-' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 开票信息(已支付) -->
|
|
|
+ <view v-if="orderInfo.oilOrderStatus === 2" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
|
|
|
+ <view class="mb20rpx text-30rpx font-semibold">
|
|
|
+ 开票信息
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx text-#666 leading-48rpx">
|
|
|
+ <view>开票方式:线上自助开票</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.cancel-btn) {
|
|
|
+ border-color: var(--them-color) !important;
|
|
|
+ color: var(--them-color) !important;
|
|
|
+}
|
|
|
+:deep(.wd-count-down){
|
|
|
+ color: #FF4A39 !important;
|
|
|
+}
|
|
|
+</style>
|