city-gather/src/subPack-refueling/orderDetaile/index.vue

<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 }} &nbsp; 退还积分：需联系客服处理
        </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>